Toasts

A component for displaying temporary notifications and feedback messages.

Overview

The Toasts component provides a way to show temporary notifications to users. Built on top of Vue Sonner, it offers various styles, positions, and customization options for displaying messages, alerts, and feedback.

Usage

Basic Toast

<script setup>
import { toast } from 'vue-sonner'
</script>

<template>
  <Button @click="() => toast.success('Successfully saved!')">
    Show Success Toast
  </Button>
</template>

Toast Types

<script setup>
import { toast } from 'vue-sonner'
</script>

<template>
  <div class="flex gap-2">
    <Button @click="() => toast.info('Information message')">
      Info
    </Button>
    <Button @click="() => toast.success('Success message')">
      Success
    </Button>
    <Button @click="() => toast.error('Error message')">
      Error
    </Button>
    <Button @click="() => toast.warning('Warning message')">
      Warning
    </Button>
  </div>
</template>

Custom Duration

<script setup>
import { toast } from 'vue-sonner'
</script>

<template>
  <Button @click="() => toast.success('This will stay for 10 seconds', { duration: 10000 })">
    Long Duration Toast
  </Button>
</template>

Rich Content

<script setup>
import { toast } from 'vue-sonner'
</script>

<template>
  <Button @click="() => toast('Deployment Status', { 
    description: 'Your site has been successfully deployed.'
  })">
    Rich Content Toast
  </Button>
</template>

Configuration

You can configure the global toast settings in your nuxt.config.ts:

export default defineNuxtConfig({
  mockline: {
    toast: {
      position: 'top-center', // Default position
      duration: 4000 // Default duration in milliseconds
    }
  }
})

Props

position

The position where toasts will appear on the screen.

duration

number

Default duration in milliseconds before toasts disappear.

visibleToasts

number

Maximum number of toasts visible at once.

closeButton

boolean

Whether to show a close button on toasts.

pauseOnHover

boolean

Whether to pause the dismiss timer when hovering over a toast.

richColors

boolean

Whether to use rich colors for different toast types.

expand

boolean

Whether toasts expand to fill the available width.

offset

string

Distance from the viewport edges.

class

string

Additional classes to apply to the toasts container.

Toast Options

When calling the toast function, you can pass various options:

description

string

Additional descriptive text for the toast.

duration

number

Custom duration for this specific toast.

icon

string | Component

Custom icon to display in the toast.

action

{ label: string, onClick: () => void }

Action button configuration.

cancel

{ label: string, onClick: () => void }

Cancel button configuration.

onDismiss

() => void

Callback function when the toast is dismissed.

onAutoClose

() => void

Callback function when the toast auto-closes.

Best Practices

Message Content:
- Keep messages concise and clear
- Use appropriate toast types for different messages
- Include relevant actions when needed
- Avoid showing too many toasts at once
Duration:
- Use shorter durations for simple notifications
- Use longer durations for important messages
- Consider user reading speed
- Allow manual dismissal for critical messages
Position:
- Choose a consistent position for your app
- Avoid blocking important content
- Consider mobile viewports
- Test with different screen sizes
Accessibility:
- Ensure messages are screen-reader friendly
- Use appropriate ARIA labels
- Consider users who may have motion sensitivity
- Provide keyboard navigation support

PageSection

A versatile section component for creating visually appealing content blocks with support for headlines, titles, descriptions, and flexible layouts.

Introduction

Fully styled and customizable components for Nuxt.