Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

unknown custom element v-snakbar & v-btn #6

Closed
jampack opened this issue Apr 22, 2019 · 5 comments
Closed

unknown custom element v-snakbar & v-btn #6

jampack opened this issue Apr 22, 2019 · 5 comments

Comments

@jampack
Copy link

jampack commented Apr 22, 2019

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
Copy link
Owner

eolant commented May 1, 2019

@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
Copy link
Author

jampack commented May 1, 2019

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.

@jampack jampack closed this as completed May 1, 2019
@sunriseydy
Copy link

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
Copy link
Owner

eolant commented May 20, 2019

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

@bagaskarala
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants