Snackbar

Nuxt Snackbar module using vue3-snackbar

Installation

npm i nuxt-snackbar

Setup

Add the following lines to the modules section of nuxt.config.{ts,js}

modules: ['nuxt-snackbar']
snackbar: {
  bottom: true,
  right: true,
  duration: 3000
},

Add the following component to the app.vue file

app.vue

<template>
  <NuxtSnackbar />
</template>

Demo

Snackbar.vue

<script setup>
const snackbar = useSnackbar()
const showSnackbar = () => {
  snackbar.add({
    type: 'success',
    text: 'Snackbar Text'
  })
}
</script>

<template>
  <button @click="showSnackbar">
    Show Snackbar
  </button>
</template>