title: How to link a v-list-item to a component using the router?
body: <p>I am using Vuetify and I can't seem to solve this issue. I have a <code>&lt;v-list&gt;</code> in my <code>&lt;v-navigation-drawer&gt;</code> which looks like this :</p>
  <p><strong>SideDash.vue component</strong></p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
      &lt;v-navigation-drawer
          v-model=&quot;drawer&quot; clipped
          :mini-variant.sync='mini'
          width=240 absolute permanent
      &gt;
          &lt;v-list
              flat dense nav class=&quot;py-1&quot;
          &gt;
              &lt;v-list-item-group color='primary' mandatory&gt;
                  &lt;v-list-item
                      v-for=&quot;item in items&quot;
                      :key=&quot;item.title&quot;
                      dense
                      router :to=&quot;item.route&quot;
                  &gt;
                      &lt;v-list-item-icon&gt;
                          &lt;v-icon&gt;{{ item.icon }}&lt;/v-icon&gt;
                      &lt;/v-list-item-icon&gt;
                      &lt;v-list-item-content&gt;
                          &lt;v-list-title&gt;{{ item.title }}&lt;/v-list-title&gt;
                      &lt;/v-list-item-content&gt;
  
                  &lt;/v-list-item&gt;
              &lt;/v-list-item-group&gt;
          &lt;/v-list&gt;
      &lt;/v-navigation-drawer&gt;
  &lt;/template&gt;
  
  
  &lt;script&gt;
  export default {
      data() {
          return {
              drawer: true,
              items: [
                  {icon: 'mdi-speedometer', title:'Dashboard', route:'/dashboard'},
                  {icon: 'mdi-tools', title:'Tools', route:'/tools'}
              ],
          }
          
      }
      
  }
  &lt;/script&gt;
  </code></pre>
  <p><strong>router/index.js</strong></p>
  <pre class="lang-js prettyprint-override"><code>import Vue from 'vue'
  import VueRouter from 'vue-router'
  import Dashboard from '@/views/Dashboard.vue'
  import Tools from '@/views/Tools.vue'
  
  
  Vue.use(VueRouter)
  
  const routes = [
    {
      path: '/dashboard',
      name: 'dashboard',
      component: Dashboard
    },
    {
      path: '/tools',
      name: 'tools',
      component: Tools
    }
  ]
  
  const router = new VueRouter({
    mode: 'history',
    routes: routes
  })
  
  export default router
  </code></pre>
  <p><strong>App.vue</strong></p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;v-app&gt;
      &lt;nav&gt;
        &lt;Navbar/&gt;
      &lt;/nav&gt;
      
      &lt;v-content&gt;
        &lt;SideDash/&gt;
      &lt;/v-content&gt;
      
    &lt;/v-app&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import Navbar from './components/Navbar';
  import SideDash from './components/SideDash'
  
  export default {
    name: 'App',
  
    components: {
      Navbar,
      SideDash
    },
  
    data: () =&gt; ({
  
    }),
  };
  &lt;/script&gt;
  </code></pre>
  <p>This is rather simple, and it worked well until I added the prop <code>:to=&quot;item.route&quot;</code> to my <code>v-list-item</code>. This makes my list completly disappear. I end up with a navigation-drawer with nothing in it and I can't figure out why. What am I missing here ? Thanks for your help</p>
  <p>PS: This might be helpful, but when I add <code>&lt;router-view&gt;&lt;/router-view&gt;</code> inside the <code>&lt;v-content&gt;&lt;/v-content&gt;</code> of my App.vue, I get a blank page, without even my navbar or nav-drawer. I feel that it might come from my router set up. I checked in my package.json and I have it</p>
  <pre class="lang-js prettyprint-override"><code>&quot;vue-router&quot;: &quot;^3.1.3&quot;
  </code></pre>
  <hr />
  <h3>EDIT</h3>
  <p>Well, I found the error... it's silly. In the file <strong>main.js</strong> the <code>import router from './router'</code> was commented such as <code>router</code> inside <code>new Vue(...)</code>. I kept the code as it is displayed here and it worked.</p>