How to integrate PHP smarty template with Vue.js?

Question

Am working with Smarty templating engine in PHP and want to integrate VUE.js into my application but seems like Smarty doesn't understand Vue.js syntax (double curly braces)

Code Below:

home.tpl

{include file="partials/header.tpl" title="Home"} 
<body data-spy="scroll" data-target=".navbar">
    <div class="se-pre-con"></div>

    {include file="partials/navbar.tpl"}   

    <div class="container container-body">
        <div class="row">
            <div class="col-md-12" id="app">
                <h2>Test Heading</h2>
                 {{ message }}
            </div>
        </div>
    </div>
{include file="partials/footer.tpl"}

footer.tpl

<script src="https://unpkg.com/vue"></script>
<script src="resource/js/app.js"></script>

app.js

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

Error Message:

Fatal error: Uncaught --> Smarty Compiler: Syntax error in template "file:\resource\html\templates\home.tpl" on line 11 "{{ message }}" - Unexpected "{ " <-- thrown in vendor\smarty\smarty\libs\sysplugins\smarty_internal_templatecompilerbase.php on line 11

Any help is appreciated. Thanks

You should check this stackoverflow.com/a/12738181/6611700 Although the linked answer is for angular, the same thing applies to anyJS rendering/parsing library — riyaz-ali
– riyaz-ali, Commented Jun 9, 2017 at 6:06

Simion · Accepted Answer · 2017-07-01 09:19:53Z

17

In your app.js use delimiters

var app = new Vue({
    delimiters: ['%%', '%%'],
    el: '#app',
    data: {
        message: 'Hello Vue!'
    },
});

and then in home.tpl wrap message with %%

{include file="partials/header.tpl" title="Home"} 
<body data-spy="scroll" data-target=".navbar">
<div class="se-pre-con"></div>
    {include file="partials/navbar.tpl"}   
    <div class="container container-body">
        <div class="row">
            <div class="col-md-12" id="app">
                <h2>Test Heading</h2>
                 %% message %%
            </div>
        </div>
    </div>
{include file="partials/footer.tpl"}

answered Jul 1, 2017 at 9:19

Simion

3514 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to integrate PHP smarty template with Vue.js?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related