Basic

The smallest complete setup: register the module, mount <NuxtSnackbar /> once, and trigger a toast from a button.

1. Register the module

export default defineNuxtConfig({
  modules: ['nuxt-snackbar'],
})

No options are required — the built-in defaults give you a bottom-anchored toast that auto-dismisses after 4 seconds.

2. Mount the snackbar host

<template>
  <div>
    <NuxtPage />
    <NuxtSnackbar />
  </div>
</template>

3. Fire a toast

<script setup lang="ts">
const snackbar = useSnackbar()

function save() {
  snackbar.add({
    type: 'success',
    text: 'Saved successfully!',
  })
}
</script>

<template>
  <button @click="save">Save</button>
</template>

Click the button and a green success toast slides in from the bottom, then disappears on its own a few seconds later.

Next steps

Positioning — move toasts to a different corner and tune their duration.
Custom Styling — border-style messages, custom colors, and compact toasts.