use in nuxt

[ErfanBahramali]

Hi I want to use notiwind in nuxtjs First, I installed it and registered it as a plugin Second, I added notification components as Notification.vue file in components Third, I used it in a page (example notiwind.vue). But I encountered the errors that you can see below

Sources:

**install**: ```bash npm i notiwind -D ``` **Notification.client.js**: ```js // ~/plugins/Notification.client.js import notifications from 'notiwind' export default defineNuxtPlugin((nuxtApp) => { nuxtApp.vueApp.use(notifications) }) ``` **Notification.vue**: ```vue ``` **notiwind.vue**: ```vue ```

Errrors (In Terminal):

[Vue warn]: Failed to resolve component: NotificationGroup
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Non-function value encountered for default slot. Prefer function slots for better performance.
[Vue warn]: Component <Anonymous> is missing template or render function.
[Vue warn]: Non-function value encountered for default slot. Prefer function slots for better performance.
[Vue warn]: Component <Anonymous> is missing template or render function.
[Vue warn]: Non-function value encountered for default slot. Prefer function slots for better performance.
[Vue warn]: Component <Anonymous> is missing template or render function.
[Vue warn]: Non-function value encountered for default slot. Prefer function slots for better performance.
[Vue warn]: Component <Anonymous> is missing template or render function.
[Vue warn]: Failed to resolve component: NotificationGroup
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Non-function value encountered for default slot. Prefer function slots for better performance.
[Vue warn]: Component <Anonymous> is missing template or render function.
[Vue warn]: Non-function value encountered for default slot. Prefer function slots for better performance.
[Vue warn]: Component <Anonymous> is missing template or render function.
[Vue warn]: Non-function value encountered for default slot. Prefer function slots for better performance.
[Vue warn]: Component <Anonymous> is missing template or render function.
[Vue warn]: Non-function value encountered for default slot. Prefer function slots for better performance.
[Vue warn]: Component <Anonymous> is missing template or render function.

Errors (In Inspect Console):

Apparently, it does't recognize the NotificationGroup at all What's the problem and the solution ?

[paulocastellano]

I had the same problem with nuxt3, using vite + vue 3 works fine.

[ErfanBahramali]

it's work for me in nuxt3

https://github.com/emmanuelsw/notiwind#typescript

[nextmat]

Here is the wrapper component (ToastNotifications.vue) I am using with Nuxt

<script setup lang="ts">
import { NotificationGroup, Notification } from "notiwind"
import ToastNotification from "@/components/ToastNotification.vue"
</script>

<template>
  <!-- global notification region, rendered permanently in document -->
  <NotificationGroup>
    <div
      aria-live="assertive"
      class="pointer-events-none fixed z-50 inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6"
    >
      <div class="flex w-full flex-col items-center space-y-4 sm:items-end">
        <!-- notification data is fed through the slot below -->
        <Notification
          v-slot="{ notifications, close }"
          enter="transform ease-out duration-300 transition"
          enter-from="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
          enter-to="translate-y-0 opacity-100 sm:translate-x-0"
          leave="transition ease-in duration-100"
          leave-from="opacity-100"
          leave-to="opacity-0"
        >
          <ToastNotification
            v-for="notification in notifications"
            :key="notification.id"
            :notification="notification"
            :close="close"
          />
        </Notification>
      </div>
    </div>
  </NotificationGroup>
</template>

ToastNotification is my custom component I use to draw the notifications.

This component is included in my primary layout like this:

<script setup>
import SiteHeader from "@/components/SiteHeader.vue"
import ToastNotifications from "@/components/ToastNotifications.vue"
</script>

<template>
  <Html class="h-full bg-gray-50" />
  <Body class="h-full" />

  <div class="min-h-full">
    <ToastNotifications />
    <SiteHeader />

    <main>
      <slot />
    </main>
  </div>
</template>

My nuxt plugin looks like this:

import { defineNuxtPlugin } from "#app"
import Notifications, { notify } from "notiwind"

type NotificationOptions = {
  group?: string
  title: string
  text: string
  type?: "info" | "success" | "warn" | "error"
}

// core method, use with $toast("foo")
function notifyFlexible(
  info: string | NotificationOptions,
  displayFor?: number,
  type?: "info" | "success" | "warn" | "error"
) {
  if (typeof info === "string") {
    notify({ title: info, type }, displayFor)
  } else {
    notify(info, displayFor)
  }
}

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(Notifications)
  return {
    provide: {
      toast: notifyFlexible,
    },
  }
})

The provide line includes the name I'm using for access in my components (for me, $toast). I use it like this:

const { $toast } = useNuxtApp()
$toast("hello world")