title: vuetifyjs-nuxt: can not add any UI component
body: <p>I am using <a href="https://github.com/vuetifyjs/nuxt" rel="nofollow noreferrer">vuetifyjs/nuxt</a> starter template.</p>
  
  <p>It launches correctly, however when I try to add a <a href="https://vuetifyjs.com/en/components/badges" rel="nofollow noreferrer"><code>&lt;Bagde /&gt;</code></a> UI componenent to the <a href="https://github.com/vuetifyjs/nuxt/blob/master/template/layouts/default.vue" rel="nofollow noreferrer"><strong><em>default.vue</em></strong></a> inside the <code>&lt;v-toolbar /&gt;</code> component, I am getting this error:</p>
  
  <blockquote>
    <p>Unknown custom element:  - did you register the component
    correctly? For recursive components, make sure to provide the "name"
    option.</p>
  </blockquote>
  
  <p>In fact, this happens whenever I want to add a UI component (<a href="https://vuetifyjs.com/en/components/api-explorer" rel="nofollow noreferrer">UI component API</a>). What am I missing here?</p>
  
  <p>EDIT:</p>
  
  <p>From <a href="https://github.com/vuetifyjs/nuxt/blob/master/template/layouts/default.vue" rel="nofollow noreferrer">default.vue</a> file:</p>
  
  <p>I want to add: </p>
  
  <pre><code>&lt;v-badge left&gt;
          &lt;span slot="badge"&gt;6&lt;/span&gt;
          &lt;v-icon
            large
            color="grey lighten-1"
          &gt;
            shopping_cart
          &lt;/v-icon&gt;
        &lt;/v-badge&gt;
  </code></pre>
  
  <p>inside <code>&lt;v-toolbar&gt;</code> below:</p>
  
  <pre><code>&lt;template&gt;
      &lt;!-- rest of code --&gt;
      &lt;v-toolbar fixed app :clipped-left="clipped"&gt;
        &lt;v-toolbar-side-icon @click="drawer = !drawer"&gt;&lt;/v-toolbar-side-icon&gt;
        &lt;v-btn
          icon
          @click.stop="miniVariant = !miniVariant"
        &gt;
          &lt;v-icon v-html="miniVariant ? 'chevron_right' : 'chevron_left'"&gt;&lt;/v-icon&gt;
        &lt;/v-btn&gt;
  
         &lt;!-- Added here --&gt;
  
          &lt;v-badge left&gt;
      &lt;span slot="badge"&gt;6&lt;/span&gt;
      &lt;v-icon
        large
        color="grey lighten-1"
      &gt;
        shopping_cart
      &lt;/v-icon&gt;
    &lt;/v-badge&gt;
        &lt;!-- end of the badge I added --&gt;
        &lt;v-btn
          icon
          @click.stop="clipped = !clipped"
        &gt;
          &lt;v-icon&gt;web&lt;/v-icon&gt;
        &lt;/v-btn&gt;
        &lt;v-btn
          icon
          @click.stop="fixed = !fixed"
        &gt;
          &lt;v-icon&gt;remove&lt;/v-icon&gt;
        &lt;/v-btn&gt;
        &lt;v-toolbar-title v-text="title"&gt;&lt;/v-toolbar-title&gt;
        &lt;v-spacer&gt;&lt;/v-spacer&gt;
        &lt;v-btn
          icon
          @click.stop="rightDrawer = !rightDrawer"
        &gt;
          &lt;v-icon&gt;menu&lt;/v-icon&gt;
        &lt;/v-btn&gt;
      &lt;/v-toolbar&gt;
      &lt;/v-app&gt;
  &lt;/template&gt;
  </code></pre>