Cannot get snackbar to show - Unknown custom element

[davbaron]

Hello, I am very new to both Vue and Vuetify. However I have the beginning of a project working fine. I would like to use this plug in. I am not using nuxt. I am using vuetify 2.x and vue 2.x. I've tried installing as instructed - I did: npm install vuetify-toast-snackbar just fine.

My 'main.js' has: import VuetifyToast from 'vuetify-toast-snackbar' at the top... and: Vue.use(VuetifyToast) in the middle, near the other 'Vue.use' blocks. I do not have it in the new Vue ({ block. i tried it there and it did not make a differenece.

My plugins/vuetify.js now looks like this:

import Vue from 'vue'
import Vuetify, { VSnackbar, VBtn, VIcon } from 'vuetify/lib'
import VuetifyToast from 'vuetify-toast-snackbar'

Vue.use(Vuetify)

export default new Vuetify({
  theme: {
    options: {
      customProperties: true
    }
  },
  components: {
    'v-snackbar': VSnackbar,
    'v-btn': VBtn,
    'v-icon': VIcon
  }
})

Vue.use(VuetifyToast) //new line for vuetify toast

In the 'components' block I tried it first without 'names', and then with. I tried 'proper names' for each name, i.e., VSnackbar, as well as the value that the errors display, i.e., v-snackbar. Neither seems to work.

Here are the errors I get back when trying a test from within my App.vue component:

[Vue warn]: Unknown custom element: <v-snackbar> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
(found in <Root>)

I've tried reading through other issues/resolutions, but could not find a solution. Assuming I get this working, I then want to use this within another plug-in I am using, vuetify-dialog. I read about the problems of using this plug-in from within another plugin and did not see a final resolution. Maybe I missed it (or didn't understand it yet).

Thank you!

[davbaron]

I re-read all of the closed issues and found my error. I had mistakenly added the 'components block' to the 'export default new Vuetify({ section instead of the Vue.use(Vuetify section. Once I did it correctly, as the install instructions specified, all works fine.

[davbaron]

Hello Corey,

Hopefully this will get to you…

Shortly after my issue with Eolant Toast/Snackbar, I decided to switch to a different source for my ‘toast/snackbar’ needs: https://github.com/xon52

The developer produces a ‘notify’ component, which is very similar to the Eolant offering. However he also produces a ‘modal dialog’ component and a ‘google maps component’ which I use. He is very active and open to changes/updates.

In any case, I no longer have the code in my project that deals with the Eolant component. That said, after going thru my comments on the github site, I can see that I eventually followed the installation/set-up directions correctly and was thus able to get it working.

Feel free to contact me if you need… hope this helps (especially the xon52 stuff),

-David Centennial, CO

From: corey-cosman notifications@github.com Reply-To: eolant/vuetify-toast-snackbar reply@reply.github.com Date: Wednesday, June 10, 2020 at 9:31 PM To: eolant/vuetify-toast-snackbar vuetify-toast-snackbar@noreply.github.com Cc: David Baron david-baron@msn.com, Mention mention@noreply.github.com Subject: Re: [eolant/vuetify-toast-snackbar] Cannot get snackbar to show - Unknown custom element (#34)

@davbaronhttps://github.com/davbaron do you mind posting your solution? Can't seem to get it working, have same error

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/eolant/vuetify-toast-snackbar/issues/34#issuecomment-642384746, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ABCJFL74DUBPSIFPGARNQT3RWBF2TANCNFSM4LM3H2TQ.