Skip to content
Modbender

Positioning

Position is set by combining boolean edge options, and duration is set in milliseconds. You can configure both globally for every toast, or override them for a single message.

Bottom-right (global)

Section titled “Bottom-right (global)”

Combine a vertical edge with a horizontal edge to anchor to a corner:

nuxt.config.ts
export default defineNuxtConfig({
  modules: ['nuxt-snackbar'],
  snackbar: {
    bottom: true,
    right: true,
  },
})

Top-center with RTL-aware edges

Section titled “Top-center with RTL-aware edges”

Use start / end instead of left / right when you want the position to flip automatically for right-to-left languages. To anchor at the top center, set only the vertical edge and leave the horizontal edges off:

nuxt.config.ts
export default defineNuxtConfig({
  modules: ['nuxt-snackbar'],
  snackbar: {
    top: true,
  },
})

For a top inline-start (top-left in LTR, top-right in RTL) corner:

nuxt.config.ts
export default defineNuxtConfig({
  modules: ['nuxt-snackbar'],
  snackbar: {
    top: true,
    start: true,
  },
})

Duration: global default

Section titled “Duration: global default”

duration is the number of milliseconds a toast stays before it auto-dismisses. The module default is 4000 (4 seconds). Change it globally:

nuxt.config.ts
export default defineNuxtConfig({
  modules: ['nuxt-snackbar'],
  snackbar: {
    duration: 6000, // every toast stays 6 seconds by default
  },
})

Duration: per-message override

Section titled “Duration: per-message override”

Pass duration to add() to override the global default for just that message:

const snackbar = useSnackbar()


// This one stays twice as long as the global default
snackbar.add({
  type: 'info',
  text: 'Read me carefully.',
  duration: 12000,
})

Next steps

Section titled “Next steps”