nuxt
Toast
😍 Responsive Touch Compatible Toast plugin for Nuxt.js using vue-toasted
Setup
- Add
@nuxtjs/toastdependency using yarn or npm to your project - Add
@nuxtjs/toasttocompilerOptions/typessection oftsconfig.jsonto add typescript support [optional] - Add
@nuxtjs/toasttomodulessection ofnuxt.config.js
{
modules: [
'@nuxtjs/toast',
],
toast: {
position: 'top-center',
register: [ // Register custom toasts
{
name: 'my-error',
message: 'Oops...Something went wrong',
options: {
type: 'error'
}
}
]
}
}If you need material icons, you have to manually install material-design-icons dependency too.
Usage
You can use $toast (instead of $toasted) in almost any context using app.$toast or this.$toast (Including store actions).
See toasted official docs for more usage information.
export default {
methods:{
async login() {
try {
this.$toast.show('Logging in...')
await this.$axios.$post('auth/login')
this.$toast.success('Successfully authenticated')
} catch(e){
this.$toast.global.my_error() //Using custom toast
this.$toast.error('Error while authenticating')
}
}
}
}