Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-05-10T07:47:00.853Z
Answers.LastActivityDate: 2017-05-10T07:47:00.853Z
Answers.UserDisplayName: obs
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-01-18T16:20:51.983Z
Answers.LastActivityDate: 2017-01-18T16:20:51.983Z
Answers.UserDisplayName: Steve Holland
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-06-13T20:39:23.280Z
Answers.LastActivityDate: 2018-06-15T13:08:17.627Z
Answers.LastEditDate: 2018-06-15T13:08:17.627Z
Answers.UserDisplayName: Damon
Body: <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>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2016-09-15T00:35:47.403Z
Comments.Text: That should work. Are you getting any JS errors in your browser console (open up dev tools)?
Comments.UserDisplayName: Mats Mikkel Rummelhoff
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2016-09-15T00:40:07.050Z
Comments.Text: Also, make sure your JavaScript file and Vue is actually loading, and in the correct order.
Comments.UserDisplayName: Mats Mikkel Rummelhoff
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2016-09-15T07:55:11.487Z
Comments.Text: @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?
Comments.UserDisplayName: obs
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2016-09-15T08:57:41.717Z
Comments.Text: 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.
Comments.UserDisplayName: Mats Mikkel Rummelhoff
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2016-09-15T08:59:58.693Z
Comments.Text: 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.
Comments.UserDisplayName: Mats Mikkel Rummelhoff
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2016-09-15T09:02:37.840Z
Comments.Text: Also – have you tested this in multiple browsers?
Comments.UserDisplayName: Mats Mikkel Rummelhoff
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2016-09-15T09:06:17.327Z
Comments.Text: 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.
Comments.UserDisplayName: Mats Mikkel Rummelhoff
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2016-09-15T09:57:17.633Z
Comments.Text: 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.
Comments.UserDisplayName: obs
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2016-09-15T10:00:30.223Z
Comments.Text: Awesome, glad you got it sorted - you should add that answer :)
Comments.UserDisplayName: Mats Mikkel Rummelhoff
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2017-05-09T21:04:43.077Z
Comments.Text: Hey @oliverspies, would you mind posting an answer here for posterity? You know, for the sake of completeness and some extra points.
Comments.UserDisplayName: Matt Stein
Tags: <templating><frontend>
Title: Use Vue.js with Craft
ThreadText: # 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](http://vuejs.org/api/#delimiters) 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?
  
  **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**: @username_1 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:
  
  ```
  <div id="content" role="main">
      ${ message }  // Hello Vue.js!
  </div> 
  
  <div id="content" role="main">
  
  </div>
  ${ message }  // will not work 
  
  ```
  
  
  ---
  
  