Elegant, responsive and lightweight notification plugin with no dependencies.

Documentation

Nuxt Toast

A Nuxt module for easily integrating iziToast notifications into your Nuxt 3 application.

Features

• 🔔  Easily show toast notifications in your Nuxt 3 app
• 🎨  Customizable styles and icons
• ⚡  Supports auto-imported composable (useToast() by default)
• 🔧  Fully configurable via nuxt.config.ts
• 🔄  Supports changing the composable name dynamically

Quick Setup

Install the module to your Nuxt application with one command:

npx nuxi module add nuxt-toast

Manual Installation

If you prefer to install manually, run:

# Using npm
npm install nuxt-toast

# Using yarn
yarn add nuxt-toast

# Using pnpm
pnpm add nuxt-toast

# Using bun
bun add nuxt-toast

Then, add it to your Nuxt config:

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

🚀 Usage

Once installed, you can use useToast() anywhere in your Nuxt app:

Basic Example

<script setup>
const toast = useToast()

toast.success({ title: 'Success!', message: 'Your action was completed successfully.' })
toast.error({ title: 'Error!', message: 'Something went wrong.' })
toast.info({ title: 'Info', message: 'Here is some information.' })
toast.warning({ title: 'Warning!', message: 'Be careful with this action.' })
toast.question({ title: 'Confirmation', message: 'Are you sure you want to continue with this action?' })
</script>

Customizing Toast Appearance & Options

<script setup>
useToast().show({
	title: 'Title',
	message: 'Message',
	timeout: 3000,
	position: 'topCenter',
	layout: 2,
	...options,
})
</script>

Dynamically Hiding Toasts

<script setup>
const toast = useToast()

// Show a toast
toast.error({
	title: 'Error!',
	message: 'An issue occurred.',
	timeout: 30000,
})

// Hide the toast after 5 seconds
setTimeout(() => {
	toast.hideToast('Error!', 'An issue occurred.', 'error')
}, 5000)
</script>

Customizing the Composable Name

If you've modified the composableName in nuxt.config.ts, for example:

export default defineNuxtConfig({
  toast: { composableName: 'useNotification' }
})

Then, use the updated composable name in your component:

<script setup>
useNotification().success({
  title: 'Success!',
  message: 'You did it!',
})
</script>

This ensures consistency with your custom naming convention. 🚀