Nuxt

Nuxt Quick Start

Install the Nuxt module and show your first toast.

Use nuxt-toastflow for Nuxt 3 and Nuxt 4 apps. The module wires the plugin, CSS, auto-imports, component registration, and the same runtime exports available from vue-toastflow.

Install

pnpm add nuxt-toastflow

npm install nuxt-toastflow

yarn add nuxt-toastflow

Enable the module

nuxt.config.ts

export default defineNuxtConfig({
  modules: ["nuxt-toastflow"],
  toastflow: {
    config: {
      position: "top-right",
      duration: 5000,
      maxVisible: 5,
    },
  },
});

Render the container once

app.vue

<template>
  <ToastContainer />
  <NuxtPage />
</template>

Use `toast` or `useToast()`

pages/index.vue

<script setup lang="ts">
toast.success({
  title: "Saved",
  description: "Your changes are live.",
});

const toastApi = useToast();

toastApi.info({
  title: "useToast() works too",
});
</script>

Use toast and useToast() from client-side execution: click handlers, onMounted, client composables, and UI callbacks. Do not call them from Nitro handlers.

Minimal File Tree

nuxt.config.ts

export default defineNuxtConfig({
  modules: ["nuxt-toastflow"],
  toastflow: {
    config: {
      position: "top-right",
      queue: true,
    },
  },
});

What The Module Gives You

Auto-imported toast

Call toast.success(...), toast.loading(...), or toast.update(...) without a manual import.

Auto-imported useToast()

Grab the same API once inside a component or composable and reuse it locally.

Auto-registered ToastContainer

Render <ToastContainer /> in app.vue without importing it.

Vue runtime exports

Use nuxt-toastflow/runtime when you need explicit imports for Toast, ToastProgress, types, or lower-level runtime pieces.