Skip to content
Branch: master
Find file History


npm npm (scoped with tag)

😍 Responsive Touch Compatible Toast plugin for Nuxt.js using vue-toasted


  • Add @nuxtjs/toast dependency using yarn or npm to your project
  • Add @nuxtjs/toast to modules section of nuxt.config.js
  modules: [

  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.


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 {
     async login() {
         try {
             this.$'Logging in...')
             await this.$axios.$post('auth/login')
             this.$toast.success('Successfully authenticated')
         } catch(e){
             this.$ //Using custom toast
             this.$toast.error('Error while authenticating')
You can’t perform that action at this time.