Nuxt3 Notifications Module

This is module aak-nuxt3-notifications for Nuxt3

📦 Get Started

1. Install aak-nuxt3-notifications as project dependency:

npm i aak-nuxt3-notifications # npm

yarn add aak-nuxt3-notifications # yarn

2. Add it to the modules section of your nuxt.config:

export default defineNuxtConfig({
  modules: [
    'aak-nuxt3-notifications',
  ],
})

🚀 Example

<!-- component.vue -->

<script setup>
  const { $notify } = useNuxtApp()

  const acceptsAnObject = () => $notify.info({ 
                                    title: 'Title message', 
                                    message: 'Text message', 
                                    position: 'bottom-right',
                                    duration: 8000
                                  })
  // ‎‧₊˚✧[Only text]✧˚₊‧
  const onlyText = () => $notify.info('You can only specify the text') 

  const info = () => $notify.info('An info-style message') // 💬
  const success = () => $notify.success('An success-style message') // ✅
  const warning = () => $notify.warning('An warning-style message') // ⚠️
  const error = () => $notify.error('An error-style message') // ❗
</script>

<template>
  <button @click="acceptsAnObject">Show notify acceptsAnObject</button>
  <button @click="onlyText">Show notify onlyText</button>
  <button @click="info">Show notify info</button>
  <button @click="success">Show notify success</button>
  <button @click="warning">Show notify warning</button>
  <button @click="error">Show notify error</button>
</template>

🔨 API

Options

| Name | Description | Type | Default | | -------- | -------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- | ----------- | | title | title | string | '' | | message | description text | string | '' | | offset | offset from the top edge of the screen. Every Notification instance of the same moment should have the same offset | number | 0 | | position | custom position | 'top-right' 'top-left' 'bottom-right' 'bottom-left'" | top-right | | duration | duration before close. It will not automatically close if set 0 | number undefined | duration is calculated based on the number of characters in a string, but not less than 4000, and if duration === undefined, then duration 4000 | | type | notification type | 'success' 'warning' 'info' 'error' '' | '' |

💻 Development

• Fork and clone Azirafel17/nuxt3-notification-module
• Install dependencies using npm install
• Run npm dev:prepare to generate type stubs.
• Use npm dev to start playground in development mode.