Use Vue.js with Craft

Question

I want to build my first website with Vue.js but have difficulties how to start. Craft and Vue.js both use {{ }} as delimiters, but I found out that I can change this for Vue. So to start, I tried the following in my JS file.

Vue.config.debug = true;
Vue.config.delimiters = ['${', '}'];

new Vue({
    el: '#content',
    data: {
        message: 'Hello Vue.js!'
    }
});

But the output I get is ${ message }

In the html file I have the following:

<div id="content" role="main">
    ${ message }
</div> 

In the html file, I first load vue.js, then my script. I use Vue.js v2.0.0-rc.6

Any idea how I can make this work?

Answer 1

I know the problem here is solved, but I thought I'd just leave a link to a pretty decent intro to using Craft and Vue 2.0 for future reference...

Using Vue 2.0 with Craft CMS

And specifically the part addressing the problem above:

It’s all about the mustaches

NOTE: I'm not the author of the blog post, just found it useful.

Answer 2

I found out that vue 2.0 is the problem. It's no longer possible to change the delimiter like that Vue.config.delimiters = ['${', '}'];.

I found out on Github that it got reworked as a component-level option. So I downloaded the standalone version and changed the delimiter in the code there.

Not sure if this is the correct/best way to do this. But it works for now.

Answer 3

I also wanted to contribute to the answer to this so a total beginner like myself could get further insight.

Given this snippet of javascript (vue):

new Vue({
    el: '#content',
    data: {
        message: 'Hello Vue.js!'
    }
});

You'll need to make sure you stay within the scope of #content for the data attribute to get picked up correctly. For example:

<div id="content" role="main">
    ${ message }  // Hello Vue.js!
</div> 

<div id="content" role="main">

</div>
${ message }  // will not work