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

<p>I found out on <a href="https://github.com/vuejs/vue/issues/2873" rel="nofollow noreferrer">Github</a> that it got reworked as a component-level option. So I downloaded the standalone version and changed the delimiter in the code there. </p>

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

CC BY-SA 3.0
2017-05-10T07:47:00.853Z
2017-05-10T07:47:00.853Z
obs
<p>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...  </p>

<p><a href="https://nystudio107.com/blog/using-vuejs-2-0-with-craft-cms">Using Vue 2.0 with Craft CMS</a></p>

<p>And specifically the part addressing the problem above:</p>

<p><a href="https://nystudio107.com/blog/using-vuejs-2-0-with-craft-cms#its-all-about-the-mustaches">It’s all about the mustaches</a> </p>

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

CC BY-SA 3.0
2017-01-18T16:20:51.983Z
2017-01-18T16:20:51.983Z
Steve Holland
<p>I also wanted to contribute to the answer to this so a total beginner like myself could get further insight.</p>

<p>Given this snippet of javascript (vue):</p>

<pre><code>new Vue({
    el: '#content',
    data: {
        message: 'Hello Vue.js!'
    }
});
</code></pre>

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

<pre><code>&lt;div id="content" role="main"&gt;
    ${ message }  // Hello Vue.js!
&lt;/div&gt; 

&lt;div id="content" role="main"&gt;

&lt;/div&gt;
${ message }  // will not work 
</code></pre>

CC BY-SA 4.0
2018-06-13T20:39:23.280Z
2018-06-15T13:08:17.627Z
2018-06-15T13:08:17.627Z
Damon
<p>I want to build my first website with Vue.js but have difficulties how to start. 
Craft and Vue.js both use <code>{{ }}</code> as delimiters, but I <a href="http://vuejs.org/api/#delimiters">found out</a> that I can change this for Vue. So to start, I tried the following in my JS file.</p>

<pre><code>Vue.config.debug = true;
Vue.config.delimiters = ['${', '}'];

new Vue({
    el: '#content',
    data: {
        message: 'Hello Vue.js!'
    }
});
</code></pre>

<p>But the output I get is <code>${ message }</code></p>

<p>In the html file I have the following: </p>

<pre><code>&lt;div id="content" role="main"&gt;
    ${ message }
&lt;/div&gt; 
</code></pre>

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

<p>Any idea how I can make this work?</p>

CC BY-SA 3.0
2016-09-15T00:35:47.403Z
That should work. Are you getting any JS errors in your browser console (open up dev tools)?
Mats Mikkel Rummelhoff
CC BY-SA 3.0
2016-09-15T00:40:07.050Z
Also, make sure your JavaScript file and Vue is actually loading, and in the correct order.
Mats Mikkel Rummelhoff
CC BY-SA 3.0
2016-09-15T07:55:11.487Z
@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
CC BY-SA 3.0
2016-09-15T08:57:41.717Z
Not really, sorry. There might be something else in either your JavaScript or Twig/template throwing things off. If I were you, I'd create a test template with only the Vue.js relevant parts, and then once Vue is confirmed working, introduce the rest of the "real" template's code piece by piece, until Vue stops working. Then you'll know where the problem is.
Mats Mikkel Rummelhoff
CC BY-SA 3.0
2016-09-15T08:59:58.693Z
Take a look at [this gist](https://gist.github.com/mmikkel/251b809cea0d947902dae08733cec227) – this is a complete template (even if it doesn't have `<html><head><body>`) that I just tested on my end and can confirm is working.
Mats Mikkel Rummelhoff
CC BY-SA 3.0
2016-09-15T09:02:37.840Z
Also – have you tested this in multiple browsers?
Mats Mikkel Rummelhoff
CC BY-SA 3.0
2016-09-15T09:06:17.327Z
One final thing – you can try adding a `console.log('Hello world');` just below  the `new Vue()` part – just to confirm that the script is in fact running.
Mats Mikkel Rummelhoff
CC BY-SA 3.0
2016-09-15T09:57:17.633Z
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](https://github.com/vuejs/vue/issues/2873) 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
CC BY-SA 3.0
2016-09-15T10:00:30.223Z
Awesome, glad you got it sorted - you should add that answer :)
Mats Mikkel Rummelhoff
CC BY-SA 3.0
2017-05-09T21:04:43.077Z
Hey @oliverspies, would you mind posting an answer here for posterity? You know, for the sake of completeness and some extra points.
Matt Stein
<templating><frontend>
Use Vue.js with Craft
# Use Vue.js with Craft

(Asked by: username_0 on 2016-09-14)

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: 

    ${ message }
 

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?

**Tags:** templating, frontend

> **Comments:**
> **username_1**: That should work. Are you getting any JS errors in your browser console (open up dev tools)?  
> **username_1**: Also, make sure your JavaScript file and Vue is actually loading, and in the correct order.  
> **username_0**: @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?  
> **username_1**: Not really, sorry. There might be something else in either your JavaScript or Twig/template throwing things off. If I were you, I'd create a test template with only the Vue.js relevant parts, and then once Vue is confirmed working, introduce the rest of the "real" template's code piece by piece, until Vue stops working. Then you'll know where the problem is.  
> **username_1**: Take a look at [this gist](https://gist.github.com/mmikkel/251b809cea0d947902dae08733cec227) – this is a complete template (even if it doesn't have `<html><head><body>`) that I just tested on my end and can confirm is working.  
> **username_1**: Also – have you tested this in multiple browsers?  
> **username_1**: One final thing – you can try adding a `console.log('Hello world');` just below  the `new Vue()` part – just to confirm that the script is in fact running.  
> **username_0**: 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](https://github.com/vuejs/vue/issues/2873) 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.  
> **username_1**: Awesome, glad you got it sorted - you should add that answer :)  
> **username_2**: Hey @oliverspies, would you mind posting an answer here for posterity? You know, for the sake of completeness and some extra points.  

---

## 3 answers

### Answer by username_0 on 2017-05-10. Score: 2 | Accepted answer

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](https://github.com/vuejs/vue/issues/2873) 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 by username_3 on 2017-01-18. Score: 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](https://nystudio107.com/blog/using-vuejs-2-0-with-craft-cms)

And specifically the part addressing the problem above:

[It’s all about the mustaches](https://nystudio107.com/blog/using-vuejs-2-0-with-craft-cms#its-all-about-the-mustaches)

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


---

### Answer by username_4 on 2018-06-13. Score: 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:

    ${ message }  // Hello Vue.js!
 




${ message }  // will not work


---

