Getting started

Installation

  1. Install nuxt3-notifications locally:
npm
npm install --save-dev nuxt3-notifications
yarn classic
yarn add -D nuxt3-notifications
pnpm
pnpm add -D nuxt3-notifications
  1. Add module to your nuxt.config file:
The module settings can be seen on the page configuration
empty config
export default defineNuxtConfig({
  modules: ['nuxt3-notifications'],
  nuxtNotifications: {}
})
filled config
export default defineNuxtConfig({
  modules: ['nuxt3-notifications'],
  nuxtNotifications: {
    componentName: 'AppNotifications'
  }
})

Usage

Note: Below are the minimum instructions. See full instructions for using the plugin here.

Register root component

app.vue (empty config)
<!-- your script code -->

<template>
  <!-- your code -->

  <NuxtNotifications position="bottom left" :speed="500" />
</template>
app.vue (filled config)
<!-- your script code -->

<template>
  <!-- your code -->

  <AppNotifications position="bottom left" :speed="500" />
</template>

User from any application component

Composition API
<script setup>
  const { notify } = useNotification();

  function onClick() {
    notify({
      title: "Title",
      text: "Hello notify!",
    });
  }
</script>

<template>
  <button @click="onClick">Show notify</button>
</template>
Table of Contents