How to render smarty inside vue?

Question

how Can I render smarty inside vue? I wanted to create vue instance on everything in my app and connect it with smarty. I want to use vue for frontend data and smarty for backend data. When I generate code like in example it appears and when vue render disappear

<div id="vue-app">
<div>{$smartyVariable}</div>
<div>

I've heard of it going the other way around (Vue.js inside Smarty): [How to integrate PHP smarty template with Vue.js?](https://stackoverflow.com/questions/44450342/how-to-integrate-php-smarty-template-with-vue-js) — tshimkus, May 22 '19 at 09:34
I saw it, but I need Smarty inside vue, coz of rendering (seo friendly) and I have tons of code written in smarty. I can't rewrite it for vue and I don't even want do it — Noname, May 22 '19 at 10:05
IMHO, you can't. Smarty is rendered on server side, Vue on frontend, so you can't pass Smarty variables directly. — Daniel, May 22 '19 at 10:31

score 0 · Answer 1 · answered Oct 26 '20 at 07:00

Maybe to late but... You can use the {LITERAL} in your *.tpl Something like this:

<div>

    <div id="app">
        <h1>{literal}  {{ message  }} {/literal}</h1>
    </div>

{literal}
    <script>
        var myObject = new Vue(
            {
                el: '#app',
                data: {
                    message: 'Hello Vue!'
                }
            }
        );
    </script>
{/literal}
</div>

How to render smarty inside vue?

1 Answers1