Get Started

Get started with vue3-noti by adding it to an existing Vue or Nuxt application.

Try it out

You can start playing with vue3-noti in your browser using our online sandboxes:

Play in Vue 3 on StackBlitz Play in Nuxt 3 on StackBlitz

Setup

Vue

pnpm

pnpm add @vue3-noti/core

Add dependencies to your main.ts:

main.ts

import { createApp } from 'vue'
import '@vue3-noti/core/style.css'
import { NotiPlugin } from '@vue3-noti/core'
import type { NotiOptions } from '@vue3-noti/core'
import App from './App.vue'

const defaultOptions: NotiOptions = {
  message: 'Hello',
  type: 'success',
  duration: 1000,
  position: 'top-right',
  hoverPause: true,
  showProgressBar: true,
}

const app = createApp(App)

app
  .use(NotiPlugin, defaultOptions)
  .mount('#app')

Add the global component to your App.vue:

app.vue

<script setup>
import { Noti } from '@vue3-noti/core'
</script>

<template>
  <div>
    <Noti />
  </div>
</template>

Nuxt

1. Nuxt Module

You can add vue3-noti at anytime during your Nuxt project development by installing the @vue3-noti/nuxt module:

npx nuxi@latest module add @vue3-noti/nuxt

Add the global component to your App.vue:

app.vue

<script setup>
import { Noti } from '@vue3-noti/core'
</script>

<template>
  <div>
    <Noti />
  </div>
</template>

Then, customize options to the noti section of nuxt.config.ts:

nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    '@vue3-noti/nuxt'
  ],
  noti: {
    message: 'Nuxt Module Demo',
    type: 'warning',
    // ...Other vue3-noti options
  }
})

2. plugin

plugins/vue3-noti.ts

import { NotiPlugin } from '@vue3-noti/core'
import type { NotiOptions } from '@vue3-noti/core'
import '@vue3-noti/core/style.css'

export default defineNuxtPlugin({
  name: '@vue3-noti',
  async setup(nuxtApp) {
    const notiOptions: NotiOptions = {
      message: 'Hello',
      type: 'success',
      duration: 1000,
      position: 'top-right',
      hoverPause: true,
      showProgressBar: true,
    }

    nuxtApp.vueApp.use(NotiPlugin, notiOptions)
  },
})

Add the global component to your App.vue:

app.vue

<script setup>
import { Noti } from '@vue3-noti/core'
</script>

<template>
  <div>
    <Noti />
  </div>
</template>

Customize Style

Override global noti CSS variable to customize

style.css

:root {
  --vue3-noti-success-color: #4caf50;
  --vue3-noti-success-text-color: white;

  --vue3-noti-info-color: #3585F2;
  --vue3-noti-info-text-color: white;

  --vue3-noti-warning-color: #E8D943;
  --vue3-noti-warning-text-color: white;

  --vue3-noti-error-color: #ED4D4C;
  --vue3-noti-error-text-color: white;

  /* gap between multiple noti */
  --vue3-noti-group-gap: 16px;

  /* noti padding x */
  --vue3-noti-group__item-padding-x: 24px;
  /* noti padding y */
  --vue3-noti-group__item-padding-y: 22px;
}

ApiuseNoti