Installation

Requirements: Vue 3.0.0 or higher (Vue 3.5.x recommended)

With NPM:

$ npm install mosha-vue-toastify

With Yarn:

$ yarn add mosha-vue-toastify

Note: Make sure you have Vue 3 installed in your project. The library is backward compatible with Vue 3.0+ but takes advantage of newer features when using Vue 3.5+.

Just import and use it (Recommended)

Get your toast working real quick! fast and easy!

<template>
  <button @click="toast">Toast it!</button>
</template>

<script lang='ts'>
import { defineComponent } from 'vue'
// import the library
import { createToast } from 'mosha-vue-toastify';
// import the styling for the toast
import 'mosha-vue-toastify/dist/style.css'

export default defineComponent({
  name: 'HelloWorld',
  setup () {
    const toast = () => {
        createToast('Wow, easy')
    }
    return { toast }
  }
})
</script>

Use it as a plugin

/* main.ts */
import { createApp } from 'vue'
import App from './App.vue'
import moshaToast from 'mosha-vue-toastify'
import 'mosha-vue-toastify/dist/style.css'

const app = createApp(App)
app.use(moshaToast)
app.mount('#app')

<script lang="ts">
export default defineComponent({
  name: 'HelloWorld',
  methods: {
    run() {
      this.$moshaToast('Hmm..not as easy huh')
    }
  }
})
</script>

Use it as a injection token

/* main.ts */
import { createApp } from 'vue'
import App from './App.vue'
import moshaToast from 'mosha-vue-toastify'
import 'mosha-vue-toastify/dist/style.css'

const app = createApp(App)
app.use(moshaToast)
app.mount('#app')

<script lang="ts">
export default defineComponent({
  name: 'HelloWorld',
  inject: ['moshaToast'],
  methods: {
    run() {
      this.moshaToast('hmm..not as easy huh')
    }
  }
})
</script>