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:

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'

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:

pnpm

pnpm add -D @vue3-noti/nuxt

Then, add @vue3-noti/nuxt to the modules 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
  }
})

Add the global component to your App.vue:

app.vue

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

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

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>

ApiuseNoti