Install

Nuxt Project

Add vuetify-notifier module to nuxt.config.ts and configure it:

nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    'vuetify-nuxt-module', // Required 
    'vuetify-notifier/nuxt'
  ],
  notifier:{
    /* module specific options */
  }
})

Add VNotifierContainer to VMain component of app.vue or default. vue layout

app.vue
<template>
  <VApp>
    <VMain>
      <!-- This is required component for dialog work -->
      <VNotifierContainer /> 
    </VMain>
  </VApp>
</template>
layouts/default.vue
<template>
  <!-- ... -->
    <VMain>
      <!-- This is required component for dialog work -->
      <VNotifierContainer /> 
    </VMain>
  <!-- ... -->
</template>

Vue Project

Vuetify Notifier only work when vuetify installed. See more Vuetify Install guide

Add vuetify-notifier plugin to main.ts and configure it:

main.ts
...
import VuetifyNotifier from "vuetify-notifier";

const vuetify = createVuetify({
  ...
})

createApp(App)
  .use(vuetify) // Required
  .use(VuetifyNotifier)
  .mount('#app')

Add VNotifierContainer to VMain component of App.vue

App.vue
<template>
  <!-- ... -->
    <VMain>
      <!-- This is required component for dialog work -->
      <VNotifierContainer /> 
    </VMain>
  <!-- ... -->
</template>
Edit this page on GitHub
Table of Contents