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

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?

Nuxt•17mo ago•

12 replies

Gaurav

Issue: cannot add a custom plugin in nuxt

plugins/toast.ts

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?

Issue: cannot add a custom plugin in nuxt

Similar Threads

Issue: cannot add a custom plugin in nuxt

Similar Threads

Similar Threads

Similar Threads