Toast
😍 Responsive Touch Compatible Toast plugin for Nuxt.js using vue-toasted
Setup
- Add
@nuxtjs/toast
dependency using yarn or npm to your project - Add
@nuxtjs/toast
tocompilerOptions
/types
section oftsconfig.json
to add typescript support [optional] - Add
@nuxtjs/toast
tomodules
section 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')
}
}
}
}