Getting Started

Get started with Vue Notifications quickly by following steps below.

If you are using Nuxt, you can skip this page and go to Nuxt tutorial.

Installation

npm

npm add @outloud/vue-notifications

pnpm

pnpm add @outloud/vue-notifications

yarn

yarn add @outloud/vue-notifications

bun

bun add @outloud/vue-notifications

Setup

1. Register the plugin to your app in your entry file.

See Configuration for options.

main.ts

import { createApp } from 'vue'
import { createNotifications } from '@outloud/vue-notifications'
import App from './App.vue'

const app = createApp(App)
app.use(createNotifications({/* options */})) 
app.mount('#app')

2. Import required CSS

main.ts

import '@outloud/vue-notifications/style.css'

3. Add notifications container component

The best place is to add it to your main App.vue file.

App.vue

<template>
  <div>
    ...

    <ONotificationsContainer />
  </div>
</template>

<script setup lang="ts">
import { ONotificationsContainer } from '@outloud/vue-notifications'
</script>