eolant / vuetify-toast-snackbar

Basic Vue toast service that uses Vuetify Snackbar component.
MIT License
127 stars 36 forks source link

It dose not work as expected in vuetify 2.0.2 #16

Closed limaofeng2010 closed 4 years ago

limaofeng2010 commented 4 years ago

excellent job. But after i upgrade vuetify from 1.5.16 to 2.0.2, i found the snackbar wont show any more , only a plain text appened after the page.

eolant commented 4 years ago

@limaofeng2010 thanks for bringing it to my attention, now it does :)

limaofeng2010 commented 4 years ago

But it still dose not work on my project. it shows error message: `[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

(found in ) vue.runtime.esm.js:619`

limaofeng2010 commented 4 years ago

I noticed that the main.js changed a little. the vuetify is imported not by using Vue.use('vuetify'),but imported as the Vue instance's member like below:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './registerServiceWorker'
import vuetify from './plugins/vuetify';
import VuetifyToast from 'vuetify-toast-snackbar'

Vue.config.productionTip = false

Vue.use(VuetifyToast)

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

eolant commented 4 years ago

@limaofeng2010 yes, Vuetify init is slightly different now.

spencercap commented 4 years ago

hm, i am getting this error in the Chrome console. Using Vuetify 2.0.4 after upgrading from 1.5.16.

vue.runtime.esm.js?2b0e:619 [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>)

Any thoughts on how to fix this? Many thanks

eolant commented 4 years ago

@spencercap most likely you're using a component loader and you need to register global components on init:

Vue.use(Vuetify, {
  components: {
    VSnackbar,
    VBtn,
    VIcon
  }
})
limaofeng2010 commented 4 years ago

It is still not working. i checked the DOM inspector in Chrome, the Toast-snackbar has been rendered with plain text but the css style (might be the vuetify ) dos not has any effect.

<v-snackbar timeout="3000" color="error" bottom="true" right="true" class="v-application vts__snackbar"><!----> <div class="vts__snackbar__message">Network Error</div> <!----></v-snackbar>

eolant commented 4 years ago

@limaofeng2010 can you please provide more details on your set up? Or maybe even create a sandbox? Here is simple example.

eolant commented 4 years ago

@limaofeng2010 also can you make sure you linked Vuetify css/sass?

limaofeng2010 commented 4 years ago

thanks a lot. I fount it not avalible for vuetify that install in Plugin manner(ie. vue add vuetify). it works now after i convert vuetify to the old way (ie. npm install --save vuetify; import vuetify from 'vuetify'; Vue.use(vuetify); new Vue(vuetify: new vuetify({}))).