-
Notifications
You must be signed in to change notification settings - Fork 36
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
In nuxt, $toast
is not available in context inside another plugins like axios
#19
Comments
@jralison yes, that is an interesting one. You should be able to access |
@eolant I think I found out what was my mistake.
Thus, I have to extract the Also, instead of combining Btw, I am currently using Thank you for this awesome helper library and for your support. |
@jralison that's great, I didn't have a chance to look at I'll leave this open for now and maybe look at updating Readme with all of this information. |
Below is my configuration. I am using electron nuxt with no issues.
import Vue from 'vue'
import VuetifyToast from 'vuetify-toast-snackbar'
Vue.use(VuetifyToast, {
x: 'right', // default
y: 'bottom', // default
color: 'info', // default
icon: 'info',
iconColor: '', // default
classes: [
'body-2'
],
timeout: 3000, // default
dismissable: true, // default
multiLine: false, // default
vertical: false, // default
queueable: false, // default
showClose: false, // default
closeText: '', // default
closeIcon: 'close', // default
closeColor: '', // default
slot: [], //default
shorts: {
custom: {
color: 'purple'
}
},
property: '$toast' // default
})
import('roboto-fontface/css/roboto/roboto-fontface.css');
import('roboto-fontface/fonts/roboto/Roboto-Thin.woff2') //100
import('roboto-fontface/fonts/roboto/Roboto-Light.woff2') //300
import('roboto-fontface/fonts/roboto/Roboto-Regular.woff2') //400
import('roboto-fontface/fonts/roboto/Roboto-Medium.woff2') //500
import('roboto-fontface/fonts/roboto/Roboto-Bold.woff2') //700
import('roboto-fontface/fonts/roboto/Roboto-Black.woff2') //900
import Vue from 'vue'
import Vuetify, { VSnackbar, VBtn, VIcon } from 'vuetify/lib'
import VuetifyToast from 'vuetify-toast-snackbar'
Vue.use(Vuetify, {
components: {
VSnackbar,
VBtn,
VIcon
}
})
Vue.use(VuetifyToast)
module.exports = {
mode: 'spa', // or 'universal'
head: {
title: 'StackThemSnacks'
},
loading: false,
plugins: [
{ssr: true, src: '@/plugins/icons.js'},
{ssr: true, src: '@/plugins/snackstack.js'}
],
modules: [
'@nuxt/typescript-build',
'@nuxtjs/vuetify',
],
vuetify: {
theme: {
themes: {
light: {
primary: '#1867c0',
secondary: '#b0bec5',
accent: '#8c9eff',
error: '#b71c1c',
},
},
}
}
}; |
My goal over the next few days is to get this connected to Vuex so that I can do a commit to an array and produce an alert. |
@ChrisKader you can use: import Vue from 'vue'
Vue.prototype.$toast('Message from the store') |
My fix in import Vue from 'vue'
import VuetifyToast from 'vuetify-toast-snackbar'
Vue.use(VuetifyToast, {
timeout: 5000,
queuable: true
})
export default (context, inject) => {
inject('toast', Vue.prototype.$toast)
} |
This does not work either "Cannot read property '$options'". No matter what. Seems pointless... |
I'm using toast with own plugin to handle errors from API. Here's my solution that work.
|
I have the
$toast
property working just fine in my components and in the store, but when I try to call it from a plugin (axios in this case), the property isn't available.I tried this in
~/plugins/vuetify-toast-snackbar.js
:And in
~/plugins/axios.js
, with:neither
app.$toast
norctx.$toast
is available.Can you help me to identify what might be wrong in my code?
All the workaround I have tried up to here are being unsuccessful.
The text was updated successfully, but these errors were encountered: