Using template and Vue at same time

Hi

I’m using standard templates with almost all the pages but I’ve never used Vue before.

Due to some different requirements I tried to implement Vue in one of my pages but the problem is that F7 is “removing” the tags {{ ABC }} that is also used by Vue so the Vue component cannot update the page.

Is there a workaround for this?

Ex.

on routes.js:

path: '/mypage',
templateUrl: './pages/page.html',

On pages.html:

<a href="/edit/{{ ctId }}" class="link text-color-white">{{ customer_name }}</a>

When the page loads the content of ctId and customer_name are not there so the following Vue code does not works:

new Vue({
            el: elName,
            data: {
ctId: 1234,
customer_name: 'ABC'
}
        });

Regards
Carlos

I actually found a way.

Just add delimiters: [’{’, ‘}’], to the vue constructor.

Thanks!

Or use just url instead of templateUrl to bypass F7 template engine