title: Vue.js routing cannot do
body: <p>My vue.js app routing is not working, please help, there is not a lot of code , simply copy paste this code in your index.html, you'll see the weird errors .  its like we cant use scripts when using the vue router.:</p>
  <pre><code>   &lt;head&gt;
      &lt;meta charset=&quot;utf-8&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
  
      &lt;title&gt;Starter Vue.js Bt4&lt;/title&gt;
  
      &lt;!-- Bootstrap CSS CDN --&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css&quot; integrity=&quot;sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4&quot; crossorigin=&quot;anonymous&quot;&gt;
      &lt;!-- Our Custom CSS --&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
  
      &lt;!-- Font Awesome JS --&gt;
      &lt;script defer src=&quot;https://use.fontawesome.com/releases/v5.0.13/js/solid.js&quot; integrity=&quot;sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
      &lt;script defer src=&quot;https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js&quot; integrity=&quot;sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  
      &lt;!-- Load polyfills to support older browsers --&gt;
      &lt;script src=&quot;https://polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver&quot;&gt;&lt;/script&gt;
  
      &lt;!-- Required scripts --&gt;
      &lt;script src=&quot;https://unpkg.com/vue@latest/dist/vue.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;https://unpkg.com/vue-router/dist/vue-router.js&quot;&gt;&lt;/script&gt;
  
  &lt;/head&gt;
          &lt;body&gt;
              &lt;div class=&quot;wrapper&quot; id=&quot;app&quot;&gt;
              &lt;router-link to=&quot;/users&quot;&gt;Users&lt;/router-link&gt;
              &lt;router-link to=&quot;/home&quot;&gt;Go to HOME&lt;/router-link&gt;
              &lt;router-view&gt;&lt;/router-view&gt;
  
  
              &lt;script type=&quot;text/x-template&quot; id=&quot;users&quot;&gt;
                  &lt;p&gt;
                      &lt;ul id=&quot;demo&quot;&gt;
                        &lt;li v-repeat=&quot;items&quot; &gt;
                          {parentMsg}} {{childMsg}}
                            &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/p&gt;
              &lt;/script&gt;
              
              &lt;script type=&quot;text/x-template&quot; id=&quot;home&quot;&gt;
                  &lt;button v-on:click=&quot;count++&quot;&gt;Vous mavez cliqué {{ count }} fois.&lt;/button&gt;
              &lt;/script&gt;
          
              
              
              &lt;/div&gt;
          &lt;/body&gt;
  
  
          &lt;script&gt;
          
          
          var Home = { 
  
              data: function () {
                  return {count: 0}
            },template: &quot;#home&quot;
            
          }
          
          const Users= { 
  
           template: &quot;#users&quot;,
            data: {
              items: [
                { childMsg: 'Foo' },
                { childMsg: 'Bar' }
              ]
            }
  
  
          }
  
          const routes = [
            { path: '/home', component:Home},
            { path: '/users', component: Users}
          ]
  
  
          const router = new VueRouter({
            routes // short for `routes: routes`
          })
  
  
          const app = new Vue({
            router
          }).$mount('#app')
  
          &lt;/script&gt;
  </code></pre>
  <p>this is the error it doesnt work, please help : Error nothing works, displaying users is impossible :</p>
  <pre><code>[Vue warn]: The &quot;data&quot; option should be a function that returns a per-instance value in component definitions. vue.js:634:17
  [Vue warn]: Property or method &quot;count&quot; is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
  
  (found in &lt;Root&gt;) vue.js:634:17
  [Vue warn]: Property or method &quot;childMsg&quot; is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
  
  (found in &lt;Root&gt;) vue.js:634:17
  [Vue warn]: Property or method &quot;items&quot; is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
  
  found in
  
  ---&gt; &lt;Anonymous&gt;
         &lt;Root&gt; vue.js:634:17
  [Vue warn]: Failed to resolve directive: repeat
  
  (found in &lt;Anonymous&gt;)
  </code></pre>
  <p>AngularJs was working all of the time, why this is not working ?
  Thanks for helping me, nothing works, files .vue not working either, no explanation, im going back to angularJs thank you</p>
  <p><strong>EDIT :</strong>
  template literal not working with routing neither :</p>
  <p>const Users= {</p>
  <pre><code>     template: `
        &lt;p&gt;
              &lt;ul id=&quot;demo&quot;&gt;
                &lt;li v-repeat=&quot;items&quot; &gt;
                  {parentMsg}} {{childMsg}}
                    &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/p&gt;
      `,
        data() {
          return {items: [
            { childMsg: 'Foo' },
            { childMsg: 'Bar' }
          ]}
        }
      }
  </code></pre>
  <p><strong>the error :</strong>
  <strong>[Vue warn]: Failed to resolve directive: repeat</strong></p>
  <pre><code>[Vue warn]: Property or method &quot;childMsg&quot; is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
  
  (found in &lt;Anonymous&gt;)
  </code></pre>
  <p><strong>EDIT 2:</strong> It is working with the following template litteral, but i dont want this kind of templating at all , it is not easy to write inside of the javascript, I need to use the  balise or .vue files, and nothing works .:</p>
  <pre><code>const Users= { 
  
       template: `
        &lt;p&gt;
              &lt;ul id=&quot;demo&quot;&gt;
                &lt;li v-for=&quot;item in items&quot; &gt;
                  {{item.childMsg}} 
              &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/p&gt;
      `,
        data() {
          return {items: [
            { childMsg: 'Foo' },
            { childMsg: 'Bar' }
          ]}
        }
      }
  </code></pre>
  <p>Edit, after reading this : <a href="https://vuejs.org/2015/10/28/why-no-template-url/" rel="nofollow noreferrer">https://vuejs.org/2015/10/28/why-no-template-url/</a></p>
  <p>I will try to write templates inside of the JS code</p>
  <p>EDIT : Resolved there :<a href="https://stackoverflow.com/questions/58506451/unable-to-add-any-module-without-webpack">Unable to add any module without WebPack</a></p>