title: Vue JS 2 on rails 5.1 'You may need an appropriate loader to handle this file type.'
body: <p>I want to add VueJS to my existing rails app. </p>
  
  <p>So I added these gems to my Gemfile: </p>
  
  <pre><code>gem 'webpacker'
  gem 'foreman' 
  </code></pre>
  
  <p>Then I ran <code>bundle</code>, <code>rails webpacker:install</code>, <code>rails webpacker:install:vue</code>, <code>yarn install</code>.</p>
  
  <p>It created a <code>javascript</code> folder with: an <code>app.vue</code> file and a <code>packs</code> folder with a <code>hello_vue.js</code> file and an <code>application.js</code> file. </p>
  
  <p>app/javascript/app.vue</p>
  
  <pre><code>&lt;template&gt;
    &lt;div id="app"&gt;
      &lt;p&gt;{{ message }}&lt;/p&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    data: function () {
      return {
        message: "Hello Vue!"
      }
    }
  }
  &lt;/script&gt;
  
  &lt;style scoped&gt;
  p {
    font-size: 2em;
    text-align: center;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>app/javascript/packs/application.js</p>
  
  <pre><code>/* eslint no-console:0 */
  // This file is automatically compiled by Webpack, along with any other files
  // present in this directory. You're encouraged to place your actual application logic in
  // a relevant structure within app/javascript and only use these pack files to reference
  // that code so it'll be compiled.
  //
  // To reference this file, add &lt;%= javascript_pack_tag 'application' %&gt; to the appropriate
  // layout file, like app/views/layouts/application.html.erb
  
  console.log('Hello World from Webpacker')
  </code></pre>
  
  <p>app/javascript/packs/hello_vue.js</p>
  
  <pre><code>/* eslint no-console: 0 */
  // Run this example by adding &lt;%= javascript_pack_tag 'hello_vue' %&gt; (and
  // &lt;%= stylesheet_pack_tag 'hello_vue' %&gt; if you have styles in your component)
  // to the head of your layout file,
  // like app/views/layouts/application.html.erb.
  // All it does is render &lt;div&gt;Hello Vue&lt;/div&gt; at the bottom of the page.
  
  import Vue from 'vue'
  import App from '../app.vue'
  
  document.addEventListener('DOMContentLoaded', () =&gt; {
    document.body.appendChild(document.createElement('hello'))
    const app = new Vue({
      render: h =&gt; h(App)
    }).$mount('hello')
  
    console.log(app)
  })
  
  
  // The above code uses Vue without the compiler, which means you cannot
  // use Vue to target elements in your existing html templates. You would
  // need to always use single file components.
  // To be able to target elements in your existing html/erb templates,
  // comment out the above code and uncomment the below
  // Add &lt;%= javascript_pack_tag 'hello_vue' %&gt; to your layout
  // Then add this markup to your html template:
  //
  // &lt;div id='hello'&gt;
  //   {{message}}
  //   &lt;app&gt;&lt;/app&gt;
  // &lt;/div&gt;
  
  
  // import Vue from 'vue/dist/vue.esm'
  // import App from '../app.vue'
  //
  // document.addEventListener('DOMContentLoaded', () =&gt; {
  //   const app = new Vue({
  //     el: '#hello',
  //     data: {
  //       message: "Can you say hello?"
  //     },
  //     components: { App }
  //   })
  // })
  //
  //
  //
  // If the using turbolinks, install 'vue-turbolinks':
  //
  // yarn add 'vue-turbolinks'
  //
  // Then uncomment the code block below:
  //
  // import TurbolinksAdapter from 'vue-turbolinks';
  // import Vue from 'vue/dist/vue.esm'
  // import App from '../app.vue'
  //
  // Vue.use(TurbolinksAdapter)
  //
  // document.addEventListener('turbolinks:load', () =&gt; {
  //   const app = new Vue({
  //     el: '#hello',
  //     data: {
  //       message: "Can you say hello?"
  //     },
  //     components: { App }
  //   })
  // })
  </code></pre>
  
  <p>I actually want to start using VueJS to build my FAQ page, so here is my faq.html.erb file (just to see if the helloworld example works):</p>
  
  <pre><code>&lt;%= javascript_pack_tag 'hello_vue' %&gt;
  
  &lt;div id="hello container"&gt;
    &lt;h1&gt;{{message}}&lt;/h1&gt;
   &lt;app /&gt;
  &lt;/div&gt;;
  </code></pre>
  
  <p>I then run <code>foreman start</code>. </p>
  
  <p>And I get the following error:  </p>
  
  <pre><code>ERROR in ./app/javascript/app.vue
  18:26:08 frontend.1 | Module parse failed: Unexpected token (1:0)
  18:26:08 frontend.1 | You may need an appropriate loader to handle this file type.
  18:26:08 frontend.1 | | &lt;template&gt;
  18:26:08 frontend.1 | |   &lt;div id="app"&gt;
  18:26:08 frontend.1 | |     &lt;p&gt;{{ message }}&lt;/p&gt;
  18:26:08 frontend.1 |  @ ./app/javascript/packs/hello_vue.js 9:0-29
  18:26:08 frontend.1 |  @ multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/hello_vue.js
  </code></pre>
  
  <p>How can I properly use Vue JS on rails ?</p>