unknown custom element v-snakbar & v-btn

[jampack]

When using vuetify loader the browser console says

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

main.js

import Vue from 'vue'
import './plugins/vuetify'
import './plugins/veeValidate'
import './plugins/vuetifyToastSnackbar'
import App from './App.vue'
import router from './router'
import store from './store/main'
import './registerServiceWorker'

import './shared/lib/request'

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app');

vuetifyToastSnackbar.js

import VuetifyToast from 'vuetify-toast-snackbar'

Vue.use(VuetifyToast, {
    x: 'right', // default
    y: 'bottom', // default
    color: 'info', // default
    icon: 'info',
    timeout: 3000, // default
    dismissable: true, // default
    autoHeight: false, // default
    multiLine: false, // default
    vertical: false, // default
    shorts: {
        custom: {
            color: 'purple'
        }
    },
    property: '$toast' // default
});

[eolant]

@akkhan20 thanks for posting an issue, but I can't reproduce your issue, can you please add a link where I can see it as well as provide what browser are you using. Thank you.

On the side note I assume you have import Vue from 'vue' in your vuetifyToastSnackbar.js file.

[jampack]

sorry i believe the problem is with vuetify-loader or the way it works because when this plugin is installed through npm it throws that error but if the plugin is replicated directly into the project then it works fine. Closing the issue as its not related solely to this plugin.

[sunriseydy]

I found the cause of this error, the vuetify documentation mentioned in the introduction to vuetify-loader (this):

Functional components Functional components are inlined at runtime by vue, and cannot have a components property in their options. Any vuetify components used in a custom functional component must either be registered globally (recommended), or locally wherever the custom component is used.

So I do this：

import Vue from 'vue'
import Vuetify, { VIcon, VSnackbar } from 'vuetify/lib'
import 'vuetify/src/stylus/app.styl'

Vue.use(Vuetify, {
  components: {
    // the components which Toast.vue used
    VIcon,
    VSnackbar
  }
})

And the problem is solved

[eolant]

Thank you @sunriseydy! Looks similar to Nuxt.js behaviour.

[bagaskarala]

Thank you @sunriseydy! Looks similar to Nuxt.js behaviour.

I also experience this issue and has been solved by sunriseydy's answer. Please just add this information on readme