feat: add Notivue for notifications and animations in Nuxt configuration (#26)

Author: productdevbook

app/app.vue

@@ -1,4 +1,19 @@
+<script setup lang="ts">
+import { darkTheme, lightTheme, Notification, NotificationProgress, Notivue } from 'notivue'
+
+const colorMode = useColorMode()
+const theme = computed(() => colorMode.value === 'dark' ? darkTheme : lightTheme)
+</script>
+
 <template>
+  <NuxtLoadingIndicator color="#4B5563" />
+
+  <Notivue v-slot="item">
+    <Notification :item="item" :theme="theme">
+      <NotificationProgress :item="item" />
+    </Notification>
+  </Notivue>
+
   <NuxtLayout>
     <NuxtPage />
   </NuxtLayout>

nuxt.config.ts

@@ -9,10 +9,15 @@ export default defineNuxtConfig({
     '@pinia/nuxt',
     '@pinia/colada-nuxt',
     'nitro-graphql/nuxt',
+    'notivue/nuxt',
   ],
   ssr: false,
 
-  css: ['~/assets/css/tailwind.css'],
+  css: [
+    '~/assets/css/tailwind.css',
+    'notivue/notification.css',
+    'notivue/animations.css',
+  ],
 
   nitro: {
     modules: ['nitro-graphql'],