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=""></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_templatepilerbase.php on line 11
Any help is appreciated. Thanks
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./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_templatepilerbase.php on line 11
Any help is appreciated. Thanks
Share Improve this question asked Jun 9, 2017 at 6:02 ZeeshanZeeshan 1853 silver badges15 bronze badges 2- 2 You should check this stackoverflow./a/12738181/6611700 Although the linked answer is for angular, the same thing applies to anyJS rendering/parsing library – riyaz-ali Commented Jun 9, 2017 at 6:06
- Great! Thanks @riyaz_ali it worked. – Zeeshan Commented Jun 9, 2017 at 6:16
1 Answer
Reset to default 17In 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"}