### Project Initialization and Build Commands

Source: https://github.com/xiaoluoboding/vue-sonner/blob/main/test/README.md

Commands to install dependencies, start the development server, and generate production-ready builds. These scripts are standard for Vite-based Vue applications.

```bash
npm install
npm run dev
npm run build
```

--------------------------------

### Info Toast Example

Source: https://context7.com/xiaoluoboding/vue-sonner/llms.txt

Display an informational toast using `toast.info()`. This is suitable for general messages or updates. You can optionally add a description to provide more context.

```typescript
import { toast } from 'vue-sonner'

// Simple info toast
ttoast.info('New features available')

// Info toast with description
ttoast.info('Update available', {
  description: 'A new version of the app is ready to install'
})
```

--------------------------------

### Install Vue Sonner

Source: https://github.com/xiaoluoboding/vue-sonner/blob/main/README.md

Installs the vue-sonner library using either pnpm or yarn package managers.

```bash
pnpm install vue-sonner
or
yarn add vue-sonner
```

--------------------------------

### Configure Toaster Component Props

Source: https://github.com/xiaoluoboding/vue-sonner/blob/main/README.md

Examples of configuring global settings for the Toaster component, including theme, position, expansion, and duration.

```html
<Toaster theme="dark" />
<Toaster position="top-center" />
<Toaster expand :visibleToasts="9" />
<Toaster :duration="10000" />
<Toaster closeButton />
<Toaster richColors />
<Toaster offset="80px" />
```

--------------------------------

### Loading Toast Example

Source: https://context7.com/xiaoluoboding/vue-sonner/llms.txt

Display a loading toast with a spinner using `toast.loading()`. This is useful for indicating ongoing asynchronous operations. The toast can be updated or dismissed later using its ID.

```typescript
import { toast } from 'vue-sonner'

// Show loading toast
const toastId = toast.loading('Uploading file...')

// Later, update or dismiss it
setTimeout(() => {
  toast.success('File uploaded successfully', { id: toastId })
}, 2000)
```

--------------------------------

### Default Toast Example

Source: https://context7.com/xiaoluoboding/vue-sonner/llms.txt

Create a basic toast notification using the `toast` function. You can provide a simple message, a message with a description, or a toast with a custom ID for later updates.

```typescript
import { toast } from 'vue-sonner'

// Simple toast
ttoast('Event has been created')

// Toast with description
ttoast('Event has been created', {
  description: 'Monday, January 3rd at 6:00pm'
})

// Toast with custom ID (for updating later)
ttoast('Event created', { id: 'event-toast' })
```

--------------------------------

### Warning Toast Example

Source: https://context7.com/xiaoluoboding/vue-sonner/llms.txt

Show a warning toast using `toast.warning()` to alert users about potential issues. This can include a description for more detailed information.

```typescript
import { toast } from 'vue-sonner'

// Simple warning toast
ttoast.warning('Your session is about to expire')

// Warning toast with description
ttoast.warning('Low storage', {
  description: 'You have less than 100MB of storage remaining'
})
```

--------------------------------

### End-to-End Testing with Playwright

Source: https://github.com/xiaoluoboding/vue-sonner/blob/main/test/README.md

Commands to manage and execute Playwright test suites. Includes browser installation, full test execution, and debugging options for specific files or projects.

```bash
npx playwright install
npm run test:e2e
npm run test:e2e -- --project=chromium
npm run test:e2e -- tests/example.spec.ts
npm run test:e2e -- --debug
```

--------------------------------

### Success Toast Example

Source: https://context7.com/xiaoluoboding/vue-sonner/llms.txt

Display a success toast with a checkmark icon using `toast.success()`. This is useful for confirming positive actions. Options include adding a description or setting a custom duration.

```typescript
import { toast } from 'vue-sonner'

// Simple success toast
ttoast.success('Event has been created')

// Success toast with description
ttoast.success('Profile updated', {
  description: 'Your changes have been saved successfully'
})

// Success toast with custom duration (in milliseconds)
ttoast.success('File uploaded', {
  duration: 5000
})
```

--------------------------------

### Action Toast Example

Source: https://context7.com/xiaoluoboding/vue-sonner/llms.txt

Add interactive action buttons to toasts using the `action` and `cancel` options. This allows users to perform quick actions directly from the notification. You can also customize the style of the action button.

```typescript
import { toast } from 'vue-sonner'

// Toast with action button
ttoast('Event has been created', {
  action: {
    label: 'Undo',
    onClick: () => console.log('Undo clicked')
  }
})

// Toast with action and cancel buttons
ttoast('Delete this item?', {
  action: {
    label: 'Delete',
    onClick: () => console.log('Delete confirmed')
  },
  cancel: {
    label: 'Cancel',
    onClick: () => console.log('Cancelled')
  }
})

// Custom styled action button
ttoast('Confirm action', {
  action: {
    label: 'Confirm',
    onClick: () => console.log('Confirmed'),
    actionButtonStyle: { backgroundColor: '#22c55e' }
  }
})
```

--------------------------------

### Vue 3 Basic Setup

Source: https://context7.com/xiaoluoboding/vue-sonner/llms.txt

Integrate Vue Sonner into your Vue 3 application by adding the Toaster component to your root component and importing the toast function. Ensure the default CSS is imported.

```vue
<template>
  <div>
    <Toaster />
    <button @click="showToast">Show Toast</button>
  </div>
</template>

<script setup>
import 'vue-sonner/style.css'
import { Toaster, toast } from 'vue-sonner'

const showToast = () => {
  toast('Event has been created')
}
</script>
```

--------------------------------

### Error Toast Example

Source: https://context7.com/xiaoluoboding/vue-sonner/llms.txt

Show an error toast with an error icon using `toast.error()`. This is ideal for notifying users of failures. You can include a description or set the duration to `Infinity` for persistent error messages.

```typescript
import { toast } from 'vue-sonner'

// Simple error toast
ttoast.error('Event has not been created')

// Error toast with description
ttoast.error('Upload failed', {
  description: 'Please check your network connection and try again'
})

// Error toast that persists until dismissed
ttoast.error('Critical error occurred', {
  duration: Infinity
})
```

--------------------------------

### Nuxt 3 Basic Setup

Source: https://context7.com/xiaoluoboding/vue-sonner/llms.txt

Configure Vue Sonner for Nuxt 3 by adding the module to your nuxt.config.ts. Use the auto-imported Toaster component and the $toast helper for displaying notifications.

```typescript
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['vue-sonner/nuxt'],
  vueSonner: {
    css: true // Include default CSS (default: true)
  }
})
```

```vue
<!-- app.vue -->
<template>
  <div>
    <Toaster position="top-right" />
    <button @click="() => $toast('My first toast')">Render a toast</button>
  </div>
</template>

<script setup>
const { $toast } = useNuxtApp()
</script>
```

--------------------------------

### Vue Sonner Toast Types

Source: https://github.com/xiaoluoboding/vue-sonner/blob/main/README.md

Illustrates different types of toasts available in Vue Sonner, including default, success, error, action, and promise-based toasts with examples of their usage and options.

```typescript
// Default toast
ttoast('Event has been created')

// Toast with description
ttoast('Event has been created', {
  description: 'Monday, January 3rd at 6:00pm'
})

// Success toast
ttoast.success('Event has been created')

// Error toast
ttoast.error('Event has not been created')

// Action toast
ttoast('Event has been created', {
  action: {
    label: 'Undo',
    onClick: () => console.log('Undo')
  }
})

// Promise toast
ttoast.promise(() => new Promise((resolve) => setTimeout(resolve, 2000)), {
  loading: 'Loading',
  success: (data: any) => 'Success',
  error: (data: any) => 'Error'
})
```

--------------------------------

### toast.loading(message)

Source: https://context7.com/xiaoluoboding/vue-sonner/llms.txt

Triggers a loading toast with a spinner, useful for async operations.

```APIDOC
## toast.loading(message)

### Description
Displays a loading toast. Returns an ID that can be used to update the toast status later.

### Parameters
- **message** (string) - Required - The loading message.

### Request Example
```javascript
const id = toast.loading('Uploading...')
```
```

--------------------------------

### Vue 3 Basic Usage

Source: https://github.com/xiaoluoboding/vue-sonner/blob/main/README.md

Demonstrates basic usage of Vue Sonner in a Vue 3 application. It includes importing the Toaster component and CSS, and rendering a simple toast.

```html
<!-- App.vue -->
<template>
  <Toaster />
  <button @click="() => toast('My first toast')">Render a toast</button>
</template>

<script lang="ts" setup>
  import 'vue-sonner/style.css'
  import { Toaster, toast } from 'vue-sonner'
</script>
```

--------------------------------

### Handle Toast Lifecycle Callbacks

Source: https://github.com/xiaoluoboding/vue-sonner/blob/main/README.md

Demonstrates how to use onDismiss and onAutoClose callbacks to execute logic when a toast is closed or dismissed.

```typescript
toast('Event has been created', {
  onDismiss: (t) => console.log(`Toast with id ${t.id} has been dismissed`),
  onAutoClose: (t) =>
    console.log(`Toast with id ${t.id} has been closed automatically`)
})
```

--------------------------------

### Configure Toast Themes

Source: https://context7.com/xiaoluoboding/vue-sonner/llms.txt

Set the global theme for the Toaster or invert colors for specific toast instances to match application design requirements.

```vue
<template>
  <Toaster theme="light" />
  <Toaster theme="dark" />
  <Toaster theme="system" />
</template>
```

```typescript
import { toast } from 'vue-sonner'

toast('Inverted toast', {
  invert: true
})
```

--------------------------------

### Code Linting

Source: https://github.com/xiaoluoboding/vue-sonner/blob/main/test/README.md

Command to run ESLint for static code analysis and identifying potential issues in the codebase.

```bash
npm run lint
```

--------------------------------

### Apply Global and Individual Toast Styling

Source: https://github.com/xiaoluoboding/vue-sonner/blob/main/README.md

Shows how to apply styles globally via the Toaster component or to individual toasts using the toast function options.

```typescript
toast('Event has been created', {
  style: {
    background: 'red'
  },
  class: 'my-toast',
  descriptionClass: 'my-toast-description'
})
```

--------------------------------

### Configure Toaster Hotkey

Source: https://github.com/xiaoluoboding/vue-sonner/blob/main/README.md

This snippet demonstrates how to customize the keyboard shortcut used to focus the toast area. It accepts an array of event.code values to override the default ⌥/alt + T behavior.

```html
<Toaster hotkey="['KeyC']" />
```

--------------------------------

### Render Custom Vue Components as Toasts

Source: https://github.com/xiaoluoboding/vue-sonner/blob/main/README.md

Demonstrates how to pass a Vue component to the toast function using markRaw to maintain reactivity and custom rendering.

```typescript
import { defineComponent, h, markRaw } from 'vue'

const CustomDiv = defineComponent({
  setup() {
    return () =>
      h('div', {
        innerHTML: 'A custom toast with unstyling'
      })
  }
})

toast(markRaw(CustomDiv))
```

--------------------------------

### toast(message, options)

Source: https://context7.com/xiaoluoboding/vue-sonner/llms.txt

Triggers a standard toast notification with an optional description and custom ID for future updates.

```APIDOC
## toast(message, options)

### Description
Displays a basic toast notification. Can include a description and a custom ID for programmatic updates.

### Parameters
- **message** (string) - Required - The main text content of the toast.
- **options** (object) - Optional - Configuration object containing 'description' (string) or 'id' (string).

### Request Example
```javascript
toast('Event has been created', { description: 'Monday, January 3rd', id: 'event-toast' })
```

### Response
- **id** (string) - Returns the unique ID of the toast instance.
```

--------------------------------

### Nuxt 3 Integration

Source: https://github.com/xiaoluoboding/vue-sonner/blob/main/README.md

Shows how to integrate Vue Sonner into a Nuxt 3 project using its dedicated module. It covers configuration in nuxt.config.ts and usage of the $toast function.

```typescript
// nuxt.config.ts
export default defineNuxtConfig({
  ...
  modules: ['vue-sonner/nuxt']
  vueSonner: {
    css: false // true by default to include css file
  }
})

// app.vue
<template>
  <div>
    <Toaster position="top-right" />
    <button @click="() => $toast('My first toast')">Render a toast</button>
  </div>
</template>

<script setup lang="ts">
  const { $toast } = useNuxtApp()
</script>
```

--------------------------------

### Create Headless Toasts

Source: https://context7.com/xiaoluoboding/vue-sonner/llms.txt

Build completely unstyled, custom-designed toasts by passing a Vue component to toast.custom. This approach provides maximum flexibility for complex notification layouts.

```vue
<template>
  <div class="custom-toast-wrapper">
    <p class="toast-title">{{ msg || 'Event Created' }}</p>
    <p class="toast-description">Today at 4:00pm - "Louvre Museum"</p>
    <div class="toast-actions">
      <button @click="toast.dismiss()">Close All</button>
      <button @click="$emit('closeToast')">Dismiss</button>
    </div>
  </div>
</template>

<script setup>
import { toast } from 'vue-sonner'
defineProps(['msg', 'isPaused'])
</script>
```

```typescript
import { markRaw } from 'vue'
import { toast } from 'vue-sonner'
import HeadlessToast from './HeadlessToast.vue'

toast.custom(markRaw(HeadlessToast), {
  duration: Infinity,
  componentProps: {
    msg: 'Custom message'
  }
})
```

--------------------------------

### toast.success(message, options)

Source: https://context7.com/xiaoluoboding/vue-sonner/llms.txt

Triggers a success toast notification, typically used to confirm successful operations.

```APIDOC
## toast.success(message, options)

### Description
Displays a success toast with a checkmark icon.

### Parameters
- **message** (string) - Required - The success message.
- **options** (object) - Optional - Configuration object containing 'description' (string) or 'duration' (number).

### Request Example
```javascript
toast.success('Profile updated', { description: 'Changes saved', duration: 5000 })
```
```

--------------------------------

### Configure Toaster Settings

Source: https://context7.com/xiaoluoboding/vue-sonner/llms.txt

Customize the global Toaster component behavior, including positioning, animation gaps, hotkeys, and styling overrides for all toasts.

```vue
<template>
  <Toaster
    position="top-right"
    :expand="true"
    :visible-toasts="5"
    :close-button="true"
    :rich-colors="true"
    :duration="4000"
    :gap="12"
    theme="system"
    offset="24px"
    dir="ltr"
    :hotkey="['altKey', 'KeyT']"
    container-aria-label="Notifications"
    :toast-options="{
      class: 'my-toast',
      descriptionClass: 'my-toast-description',
      style: { background: '#fef3c7' }
    }"
  />
</template>

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

--------------------------------

### toast.error(message, options)

Source: https://context7.com/xiaoluoboding/vue-sonner/llms.txt

Triggers an error toast notification to alert the user of failures.

```APIDOC
## toast.error(message, options)

### Description
Displays an error toast with an error icon.

### Parameters
- **message** (string) - Required - The error message.
- **options** (object) - Optional - Configuration object containing 'description' (string) or 'duration' (number).

### Request Example
```javascript
toast.error('Upload failed', { duration: Infinity })
```
```

--------------------------------

### Manage Toast Positioning

Source: https://context7.com/xiaoluoboding/vue-sonner/llms.txt

Control where toasts appear on the screen using the position prop on the Toaster component or by overriding it per individual toast instance.

```vue
<template>
  <Toaster position="top-center" />
</template>
```

```typescript
import { toast } from 'vue-sonner'

toast('Top left notification', {
  position: 'top-left'
})

toast('Bottom center notification', {
  position: 'bottom-center'
})
```

--------------------------------

### Programmatically Dismiss Toasts

Source: https://github.com/xiaoluoboding/vue-sonner/blob/main/README.md

Shows how to remove specific toasts by ID or dismiss all active toasts simultaneously.

```typescript
const toastId = toast('Event has been created')
toast.dismiss(toastId)
toast.dismiss()
```

--------------------------------

### Render Custom Component Toasts

Source: https://context7.com/xiaoluoboding/vue-sonner/llms.txt

Display custom Vue components as toasts using markRaw to prevent Vue's reactivity system from wrapping the component. This allows for full control over the toast UI and internal logic.

```vue
<script setup>
import { defineComponent, h, markRaw } from 'vue'
import { toast } from 'vue-sonner'

const CustomToast = defineComponent({
  setup() {
    return () => h('div', {
      class: 'custom-toast',
      innerHTML: '<strong>Custom Toast</strong><p>With custom HTML content</p>'
    })
  }
})

const showCustomToast = () => {
  toast(markRaw(CustomToast))
}
</script>
```

```typescript
import { markRaw } from 'vue'
import { toast } from 'vue-sonner'
import CustomNotification from './CustomNotification.vue'

toast.custom(markRaw(CustomNotification), {
  componentProps: {
    title: 'Hello',
    message: 'This is a custom notification'
  },
  duration: 10000
})
```

--------------------------------

### Configure Custom Toast Offsets in Vue

Source: https://context7.com/xiaoluoboding/vue-sonner/llms.txt

Set custom offsets for toast notifications from the screen edges. Supports string, numeric, object, and mobile-specific offset configurations.

```vue
<template>
  <!-- String offset (applies to all sides) -->
  <Toaster offset="24px" />

  <!-- Numeric offset -->
  <Toaster :offset="32" />

  <!-- Object offset for specific sides -->
  <Toaster :offset="{ top: '80px', right: '20px' }" />

  <!-- Mobile-specific offset -->
  <Toaster offset="24px" mobile-offset="16px" />
</template>
```

--------------------------------

### Style Toasts with Tailwind CSS

Source: https://github.com/xiaoluoboding/vue-sonner/blob/main/README.md

Utilizes the unstyled prop to enable custom Tailwind CSS classes for toast elements and specific states.

```vue
<Toaster
  :toastOptions="{
    unstyled: true,
    classes: {
      toast: 'bg-blue-400',
      title: 'text-red-400',
      description: 'text-red-400',
      actionButton: 'bg-zinc-400',
      cancelButton: 'bg-orange-400',
      closeButton: 'bg-lime-400'
    }
  }"
/>
```

--------------------------------

### Vue Sonner: Handle Toast Lifecycle with Callbacks

Source: https://context7.com/xiaoluoboding/vue-sonner/llms.txt

Respond to toast lifecycle events using the onDismiss and onAutoClose callbacks. These functions are executed when a toast is manually dismissed or automatically closes after its duration.

```typescript
import { toast } from 'vue-sonner'

ttoast('Event has been created', {
  onDismiss: (t) => {
    console.log(`Toast ${t.id} was dismissed manually`)
  },
  onAutoClose: (t) => {
    console.log(`Toast ${t.id} closed automatically after timeout`)
  }
})
```

--------------------------------

### Handle Async Operations with Promise Toasts

Source: https://context7.com/xiaoluoboding/vue-sonner/llms.txt

Utilize toast.promise to automatically manage loading, success, and error states for asynchronous tasks. It supports dynamic messages based on results and provides an unwrap method to access the underlying promise result.

```typescript
import { toast } from 'vue-sonner'

const fetchData = () => new Promise((resolve) => setTimeout(resolve, 2000))

toast.promise(fetchData, {
  loading: 'Loading data...',
  success: 'Data loaded successfully',
  error: 'Failed to load data'
})

const createUser = () => new Promise((resolve) =>
  setTimeout(() => resolve({ name: 'John Doe' }), 2000)
)

toast.promise(createUser, {
  loading: 'Creating user...',
  success: (data) => `User ${data.name} created successfully`,
  error: (err) => `Error: ${err.message}`
})

toast.promise(fetchData, {
  loading: 'Processing...',
  success: 'Done!',
  error: 'Failed',
  finally: () => console.log('Operation completed')
})

const result = toast.promise(createUser, {
  loading: 'Creating...',
  success: 'Created!',
  error: 'Failed'
})

const userData = await result.unwrap()
console.log(userData)
```

--------------------------------

### Configure Expanded Toast View in Vue

Source: https://context7.com/xiaoluoboding/vue-sonner/llms.txt

Configure toasts to show expanded by default. This feature allows all toasts to be visible on hover or by setting a specific number of visible toasts.

```vue
<template>
  <!-- Expand all toasts on hover -->
  <Toaster :expand="true" />

  <!-- Show more visible toasts (default is 3) -->
  <Toaster :expand="true" :visible-toasts="9" />
</template>
```

--------------------------------

### Configure Keyboard Accessibility Hotkeys in Vue

Source: https://context7.com/xiaoluoboding/vue-sonner/llms.txt

Configure custom keyboard shortcuts for toast accessibility. The default hotkey is Alt/Option + T.

```vue
<template>
  <!-- Default hotkey: Alt/Option + T -->
  <Toaster />

  <!-- Custom hotkey -->
  <Toaster :hotkey="['ctrlKey', 'KeyN']" />
</template>
```

--------------------------------

### CDN Link for Vue Sonner

Source: https://github.com/xiaoluoboding/vue-sonner/blob/main/README.md

Provides the CDN link for using Vue Sonner directly in the browser via EMS (ECMAScript Modules).

```typescript
https://cdn.jsdelivr.net/npm/vue-sonner/+esm
```

--------------------------------

### Vue Sonner: Style Toasts with CSS Classes

Source: https://context7.com/xiaoluoboding/vue-sonner/llms.txt

Apply custom CSS classes and inline styles to toasts for global styling via the Toaster component's toast-options, or for individual toasts.

```vue
<template>
  <!-- Global styling for all toasts -->
  <Toaster
    :toast-options="{
      class: 'my-toast',
      descriptionClass: 'my-toast-description',
      style: { background: '#fef3c7', border: '1px solid #f59e0b' }
    }"
  />
</template>

<style>
.my-toast {
  font-family: 'Inter', sans-serif;
}
.my-toast-description {
  color: #6b7280;
}
</style>
```

```typescript
import { toast } from 'vue-sonner'

// Individual toast styling
ttoast('Styled toast', {
  style: {
    background: '#6ee7b7',
    color: '#064e3b',
    border: '1px solid #10b981'
  },
  class: 'custom-toast-class',
  descriptionClass: 'custom-description-class'
})
```

--------------------------------

### Manage Active Toasts with useVueSonner Composable in Vue

Source: https://context7.com/xiaoluoboding/vue-sonner/llms.txt

Access active toasts reactively using the useVueSonner composable. This allows for dynamic display and management of currently active toast notifications within your Vue components.

```vue
<template>
  <div>
    <p>Active toasts: {{ activeToasts.length }}</p>
    <ul>
      <li v-for="t in activeToasts" :key="t.id">
        {{ t.title }}
      </li>
    </ul>
    <button @click="clearAll">Clear All</button>
  </div>
</template>

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

const { activeToasts } = useVueSonner()

const clearAll = () => {
  toast.dismiss()
}
</script>
```

--------------------------------

### Vue Sonner: Enable Rich Colors for Toasts

Source: https://context7.com/xiaoluoboding/vue-sonner/llms.txt

Configure Vue Sonner to use rich color themes for success, error, info, and warning toasts. This can be applied globally via the Toaster component or individually for specific toast messages.

```vue
<template>
  <Toaster rich-colors />
</template>
```

```typescript
import { toast } from 'vue-sonner'

t// Rich colors apply automatically to typed toasts
ttoast.success('Success with rich colors')
ttoast.error('Error with rich colors')
ttoast.info('Info with rich colors')
ttoast.warning('Warning with rich colors')

// Enable rich colors for individual toast
ttoast('Custom message', {
  richColors: true,
  type: 'success'
})
```

--------------------------------

### Vue Sonner: Dismiss Toasts Programmatically

Source: https://context7.com/xiaoluoboding/vue-sonner/llms.txt

Control the visibility of toasts by dismissing them programmatically. This can be done by targeting a specific toast using its ID or by dismissing all active toasts.

```typescript
import { toast } from 'vue-sonner'

// Dismiss by ID
const toastId = toast('Dismissible toast')
ttoast.dismiss(toastId)

// Dismiss all toasts
ttoast.dismiss()

// Update and then dismiss
const id = toast.loading('Processing...')
setTimeout(() => {
  toast.success('Done!', { id })
}, 2000)
setTimeout(() => {
  toast.dismiss(id)
}, 4000)
```

--------------------------------

### Retrieve Toast History with toast.getHistory() in TypeScript

Source: https://context7.com/xiaoluoboding/vue-sonner/llms.txt

Retrieve the history of all toasts, including dismissed ones, or only currently active toasts using the toast.getHistory() and toast.getToasts() functions.

```typescript
import { toast } from 'vue-sonner'

// Get all toasts (including dismissed)
const allToasts = toast.getHistory()

// Get only active (non-dismissed) toasts
const activeToasts = toast.getToasts()

console.log('Total toasts:', allToasts.length)
console.log('Active toasts:', activeToasts.length)
```

--------------------------------

### Vue Sonner: Customize Toast Icons

Source: https://context7.com/xiaoluoboding/vue-sonner/llms.txt

Replace default toast icons with custom components using named slots in the Toaster component for global changes, or provide a custom icon component directly when creating an individual toast.

```vue
<template>
  <Toaster>
    <template #loading-icon>
      <MyCustomSpinner />
    </template>
    <template #success-icon>
      <MyCheckIcon />
    </template>
    <template #error-icon>
      <MyErrorIcon />
    </template>
    <template #info-icon>
      <MyInfoIcon />
    </template>
    <template #warning-icon>
      <MyWarningIcon />
    </template>
    <template #close-icon>
      <MyCloseIcon />
    </template>
  </Toaster>
</template>
```

```typescript
import { toast } from 'vue-sonner'
import { markRaw } from 'vue'
import CustomIcon from './CustomIcon.vue'

// Custom icon for individual toast
ttoast('Toast with custom icon', {
  icon: markRaw(CustomIcon)
})
```

--------------------------------

### Vue Sonner: Tailwind CSS Styling for Toasts

Source: https://context7.com/xiaoluoboding/vue-sonner/llms.txt

Utilize Tailwind CSS for comprehensive styling control by enabling unstyled mode and applying Tailwind classes to various toast elements, either globally or for individual toasts.

```vue
<template>
  <Toaster
    :toast-options="{
      unstyled: true,
      classes: {
        toast: 'bg-white border rounded-lg shadow-lg p-4 flex items-center gap-3',
        title: 'text-gray-900 font-medium',
        description: 'text-gray-500 text-sm',
        actionButton: 'bg-blue-500 text-white px-3 py-1 rounded hover:bg-blue-600',
        cancelButton: 'bg-gray-200 text-gray-700 px-3 py-1 rounded hover:bg-gray-300',
        closeButton: 'bg-gray-100 hover:bg-gray-200 rounded-full p-1',
        success: 'bg-green-50 border-green-200',
        error: 'bg-red-50 border-red-200',
        info: 'bg-blue-50 border-blue-200',
        warning: 'bg-yellow-50 border-yellow-200'
      }
    }"
  />
</template>
```

```typescript
import { toast } from 'vue-sonner'

// Tailwind styling for individual toast
ttoast('Tailwind styled toast', {
  unstyled: true,
  classes: {
    toast: 'bg-indigo-500 text-white p-4 rounded-xl shadow-2xl',
    title: 'font-bold text-lg',
    description: 'text-indigo-100'
  }
})
```

--------------------------------

### Vue Sonner: Control Toast Duration and Persistence

Source: https://context7.com/xiaoluoboding/vue-sonner/llms.txt

Manage how long toasts remain visible. Set a global default duration using the Toaster component or specify custom durations, including infinite persistence, for individual toasts.

```vue
<template>
  <!-- Global duration (in milliseconds) -->
  <Toaster :duration="10000" />
</template>
```

```typescript
import { toast } from 'vue-sonner'

// Custom duration for individual toast
ttoast('Quick toast', {
  duration: 2000 // 2 seconds
})

// Persistent toast (stays until dismissed)
ttoast('Important notification', {
  duration: Infinity
})
```

--------------------------------

### Vue Sonner: Add and Position Close Buttons on Toasts

Source: https://context7.com/xiaoluoboding/vue-sonner/llms.txt

Implement a close button for toasts, which appears on hover. The close button can be enabled globally for all toasts or configured with a specific position for individual toasts.

```vue
<template>
  <!-- Global close button for all toasts -->
  <Toaster close-button />

  <!-- Custom close button position -->
  <Toaster close-button close-button-position="top-right" />
</template>
```

```typescript
import { toast } from 'vue-sonner'

// Close button for individual toast
ttoast('Dismissible toast', {
  closeButton: true,
  closeButtonPosition: 'bottom-right'
})
```

--------------------------------

### Register Vue Sonner as a Vue Plugin

Source: https://context7.com/xiaoluoboding/vue-sonner/llms.txt

Register vue-sonner as a Vue plugin for global component access. This allows the Toaster component to be used anywhere in your application without explicit imports in every file.

```typescript
// main.ts
import { createApp } from 'vue'
import VueSonner from 'vue-sonner'
import 'vue-sonner/style.css'
import App from './App.vue'

const app = createApp(App)
app.use(VueSonner)
app.mount('#app')

```

```vue
<!-- Now Toaster is globally available -->
<template>
  <Toaster />
</template>
```

--------------------------------

### Utilize TypeScript Types for Vue Sonner

Source: https://context7.com/xiaoluoboding/vue-sonner/llms.txt

Vue Sonner exports comprehensive TypeScript types for type-safe usage of toast options and Toaster component props. This ensures better development experience and reduces potential runtime errors.

```typescript
import type {
  ToasterProps,
  ToastT,
  ExternalToast,
  Action,
  ToastClasses,
  ToastToDismiss,
  PromiseIExtendedResult,
  ToastTypes,
  Position,
  Theme
} from 'vue-sonner'

// Type-safe toast options
const options: ExternalToast = {
  description: 'Additional details',
  duration: 5000,
  position: 'top-right',
  closeButton: true,
  action: {
    label: 'Undo',
    onClick: () => console.log('Clicked')
  }
}

// Type-safe Toaster props
const toasterConfig: ToasterProps = {
  position: 'bottom-right',
  theme: 'system',
  richColors: true,
  closeButton: true,
  duration: 4000
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.