Gaurav
Gaurav
PostsComments
NNuxt
Created by Gaurav on 10/3/2024 in #❓・help
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);
})
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)
})
<script setup lang="ts">
const {$toast} = useNuxtApp();
onMounted(() => {
  console.log($toast)
})
Can anyone guide me what I am missing?
13 replies