Usage (Vue)

Plugin

Vue 2

In your app.js

import Vue from 'vue'
import vueToast from '@dmuy/toast/vue-toast'

Vue.use(vueToast)

Vue 3

In your app.js

import { createApp } from 'vue'
import vueToast from '@dmuy/toast/vue3-toast'

const app = createApp({
  /* root component options */
})

app.use(vueToast)

Nuxt

In the plugins folder, create mdtoast.js and paste the Vue 2 script above.

In nuxt.config.js

export default {
  plugins: [
    '@/plugins/mdtoast.js'
  ]
}

Nuxt 3

Create a plugin file plugins/mdtoast.client.js.

import vueToast from '@dmuy/toast/vue3-toast'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(vueToast)
})

Note: This method is not yet tested.

Usage

Options API

In your components or pages, you can access the mdtoast() as this.$mdtoast()

// script
export default {
  mounted() {
    // default
    this.$mdtoast('This is a toast message!')
    // with options
    this.$mdtoast('Message archived', { type: 'success' })
  }
}

Composition API

In your <script setup>

import { inject } from 'vue'

const mdtoast = inject('mdtoast')

// then use like
function toast(message) {
  mdtoast('This is a toast message!')
}