9

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?

  • 1
    That should work. Are you getting any JS errors in your browser console (open up dev tools)? – Mats Mikkel Rummelhoff Sep 15 '16 at 0:35
  • 1
    Also, make sure your JavaScript file and Vue is actually loading, and in the correct order. – Mats Mikkel Rummelhoff Sep 15 '16 at 0:40
  • @MatsMikkelRummelhoff Thanks for your help, but no, no errors. Only when I remove the Vue script I get one - so it seems like the script is loading. And the order should be correct as well - when I change it, I get an error as well Uncaught ReferenceError: Vue is not defined. Any other idea what could be the reason for this not working? – obs Sep 15 '16 at 7:55
  • 3
    Thanks for the link to the gist - 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. – obs Sep 15 '16 at 9:57
  • 2
    Awesome, glad you got it sorted - you should add that answer :) – Mats Mikkel Rummelhoff Sep 15 '16 at 10:00
8

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.

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.

1

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 

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.