CODEWITHSUNDEEP
javascriptvue.jsvuejs2vuetify.js
d-_-b
d-_-b

Reputation: 23141

How to separate <v-navigation-drawer> in vuetify vue.js app?

I'm trying to create a component out of my app's <v-navigation-drawer>, and I'm seeing an error:

Unknown custom element: <app-navigation-drawer> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Being new to vue.js, I've figured out components to be used within a specific route, but can't figure out using a custom component in the main App.vue file.

I've tried importing and adding it as a component in the Vue instance, I've also tried importing it within App.vue and exporting a default component with that as a component.

Q: Can someone please help me understand where I would need to register this component, or what I'm doing wrong?

App.vue

<template>
  <div id="app">
    <v-app>
      <app-navigation-drawer/>

      </v-toolbar>
      <v-content>
        <v-container class="grey lighten-5" fluid="fluid" fill-height="fill-height">
          <router-view></router-view>
        </v-container>
      </v-content>
    </v-app>
  </div>
</template>

main.js

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import Vuetify from 'vuetify';

import NavigationDrawer from './views/NavigationDrawer.vue';
Vue.use(Vuetify);
new Vue({
  router,
  store,
  components: { NavigationDrawer },
  render: h => h(App)
}).$mount('#app');

NavigationDrawer.vue

<template>
    <v-navigation-drawer app stateless value="true">Drawer</v-navigation-drawer>
</template>
<script>
export default {
    name: 'app-navigation-drawer'
}
</script>

Upvotes: 2

Views: 3002

Answers (1)

Juan Carlos Eduardo Romaina Ac
Juan Carlos Eduardo Romaina Ac

Reputation: 256

It is recomended you declare your component like this:

components: { 'app-navigation-drawer': NavigationDrawer }

That should work.

If you want to do it directly, use the name as declared:

<NavigationDrawer></NavigationDrawer>

Reference: https://v2.vuejs.org/v2/guide/components-registration.html

Upvotes: 2

Related Questions