NuxtN
Nuxt•15mo ago
Gaurav

Issue: cannot add a custom plugin in nuxt

Hello

I was trying to learn custom plugins in nuxt, so I tried to crate a toast plugin which should have 2 functions like getToasts and addSuccessToast but I am not able to use in my nuxt app.

this is my plugins/toast.ts file

import {ref} from 'vue'

const toast = {
    install(app) {
        const toasts = ref<{}[]>([]);
        app.config.globalProperties.$toast = {
            getToasts: () => toasts,
            addSuccess: (msg) => {
              toasts.value.push({messsage: msg, type: 'success'});
            }
        }
    }
}

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


and just used $toast in vue component like 

<script setup lang="ts">
const {$toast} = useNuxtApp();
onMounted(() => {
  console.log($toast)
})


Can anyone guide me what I am missing?
Was this page helpful?