Aak-nuxt3-notifications NPM

Nuxt3 Notifications Module

This is module aak-nuxt3-notifications for Nuxt3

📦 Get Started

Install aak-nuxt3-notifications as project dependency:

npm i aak-nuxt3-notifications # npm

yarn add aak-nuxt3-notifications # yarn

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

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

🚀 Example

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>

Example

🔨 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' ''	''