### Implement basic toast notification

Source: https://github.com/jerrywu001/vue3-toastify/blob/main/README.md

Example of importing the toast function and CSS, then triggering a notification within a Vue 3 setup script.

```html
<template>
  <button @click="notify">Notify !</button>
</template>

<script setup>
import { toast } from 'vue3-toastify';
import 'vue3-toastify/dist/index.css';

const notify = () => {
  toast("Wow so easy !", {
    autoClose: 1000,
  }); // ToastOptions
}
</script>
```

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

### Install Vue3 Toastify

Source: https://context7.com/jerrywu001/vue3-toastify/llms.txt

Install the package using npm, yarn, or pnpm. Remember to import the required CSS styles in your application.

```bash
# npm
npm install vue3-toastify

# yarn
yarn add vue3-toastify

# pnpm
pnpm add vue3-toastify
```

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

### Install vue3-toastify

Source: https://github.com/jerrywu001/vue3-toastify/blob/main/docs/docs/get-started/installation.md

Use these commands to add the library to your project dependencies.

```bash
npm install vue3-toastify
```

```bash
yarn add vue3-toastify
```

```bash
pnpm add vue3-toastify
```

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

### Trigger Toasts in Vue Components

Source: https://github.com/jerrywu001/vue3-toastify/blob/main/docs/docs/usage/limit.md

Example of triggering a toast notification within a Vue 3 setup script.

```vue
<script setup lang="ts">
import { toast } from 'vue3-toastify';
import 'vue3-toastify/dist/index.css';

const notify = () => {
  toast(
    `hello ${parseInt(String(Math.random() * 100), 10)}`,
    {
      position: toast.POSITION.BOTTOM_CENTER,
    },
  );
};
</script>

<template>
  <div>
    <button @click="notify">Notify !</button>
  </div>
</template>
```

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

### Configure and Use Toast in Vue SFC

Source: https://github.com/jerrywu001/vue3-toastify/blob/main/docs/docs/get-started/installation.md

Setup global configuration in main.ts and trigger toasts within components using the composition API.

```vue
<template>
  <div>
    <button @click="notify">Notify !</button>
  </div>
</template>

<script setup lang="ts">
import { toast, type ToastOptions } from 'vue3-toastify';

const notify = () => {
  toast("Wow so easy !", {
    autoClose: 1000,
    position: toast.POSITION.BOTTOM_RIGHT,
  } as ToastOptions);
}
</script>
```

```js
import App from './App.vue';
import { createApp } from 'vue';
import Vue3Toastify, { type ToastContainerOptions } from 'vue3-toastify';
import 'vue3-toastify/dist/index.css';

createApp(App).use(
  Vue3Toastify,
  {
    autoClose: 3000,
    // ...
  } as ToastContainerOptions,
).mount('#app');
```

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

### Configure Global Toast Styles

Source: https://github.com/jerrywu001/vue3-toastify/blob/main/docs/docs/usage/how-to-style.md

Apply CSS classes and inline styles globally to all toast containers during plugin installation.

```ts
import { createApp } from 'vue';
import Vue3Toasity, { type ToastContainerOptions } from 'vue3-toastify';
import App from './App.vue';

const app = createApp(App);

app.use(
  Vue3Toasity,
  {
    containerClassName: 'container-classsssssss',
    toastClassName: 'toast-classssssss',
    bodyClassName: 'toast-body-Ccccct-size',
    progressClassName: 'fancy-progress-bar',
    style: {
      opacity: '1',
      userSelect: 'initial',
    },
  } as ToastContainerOptions,
);

app.mount('#app');
```

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

### Nuxt Global Component Setup

Source: https://github.com/jerrywu001/vue3-toastify/blob/main/docs/docs/usage/use-global-components.md

Integrates Vue3 Toastify as a global plugin in a Nuxt application. Requires importing necessary modules and configuring the toast container options.

```javascript
// vue3-toastify.client.ts
import Vue3Toastify, { toast, type ToastContainerOptions, type IconProps } from 'vue3-toastify';
import { useRouter } from '#app';

export default defineNuxtPlugin((nuxtApp) => {
    const router = useRouter();

    function resolveGLobalComponents(instance: App<Element>) {
        instance.use(router);
    }
    nuxtApp.vueApp.use(
      Vue3Toasity,
      {
        // the Toast application is separate from the main application, so we need to call .use
        useHandler: resolveGLobalComponents,
        // other props...
      } as ToastContainerOptions,
    );

    return {
        provide: { toast },
    };
});

```

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

### Nuxt Plugin Setup for vue3-toastify

Source: https://github.com/jerrywu001/vue3-toastify/blob/main/docs/docs/usage/nuxt.md

Configure vue3-toastify globally in your Nuxt app by defining it in a plugin. This setup automatically closes toasts after 1000ms. Ensure 'vue3-toastify/dist/index.css' is imported for styling.

```typescript
import Vue3Toastify, { toast } from 'vue3-toastify';
import 'vue3-toastify/dist/index.css';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(Vue3Toastify, { autoClose: 1000 });

  return {
    provide: { toast },
  };
});

```

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

### Ant Design Global Component Setup

Source: https://github.com/jerrywu001/vue3-toastify/blob/main/docs/docs/usage/use-global-components.md

Sets up Vue3 Toastify globally within an Ant Design Vue project. This involves importing Ant Design, Vue3 Toastify, and configuring them to work together.

```javascript
// app.ts
import { App, createApp } from 'vue';
import router from './routes';

import Vue3Toasity, { type ToastContainerOptions } from 'vue3-toastify';

import Root from './App.vue';

import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/reset.css';

function resolveGLobalComponents(instance: App<Element>) {
  instance.use(Antd);
}

const app = createApp(Root);

app.use(router);

resolveGLobalComponents(app);

app.use(
  Vue3Toasity,
  {
    // the Toast application is separate from the main application, so we need to call .use
    useHandler: resolveGLobalComponents,
    // other props...
  } as ToastContainerOptions,
);

app.mount('#app');

```

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

### Vue3-Toastify Constants for Configuration

Source: https://context7.com/jerrywu001/vue3-toastify/llms.txt

Utilizes exported constants for toast positions, types, themes, and transitions to prevent typos and improve code readability with autocomplete support. Shows an example of configuring a toast with these constants.

```typescript
import { toast } from 'vue3-toastify';

// Position constants
tost.POSITION.TOP_LEFT      // 'top-left'
tost.POSITION.TOP_CENTER    // 'top-center'
tost.POSITION.TOP_RIGHT     // 'top-right'
tost.POSITION.BOTTOM_LEFT   // 'bottom-left'
tost.POSITION.BOTTOM_CENTER // 'bottom-center'
tost.POSITION.BOTTOM_RIGHT  // 'bottom-right'

// Type constants
tost.TYPE.DEFAULT  // 'default'
tost.TYPE.INFO     // 'info'
tost.TYPE.SUCCESS  // 'success'
tost.TYPE.WARNING  // 'warning'
tost.TYPE.ERROR    // 'error'

// Theme constants
tost.THEME.LIGHT   // 'light'
tost.THEME.DARK    // 'dark'
tost.THEME.COLORED // 'colored'
tost.THEME.AUTO    // 'auto'

// Transition constants
tost.TRANSITIONS.BOUNCE // 'bounce'
tost.TRANSITIONS.SLIDE  // 'slide'
tost.TRANSITIONS.FLIP   // 'flip'
tost.TRANSITIONS.ZOOM   // 'zoom'
tost.TRANSITIONS.NONE   // 'none'

// Usage example
tost.success('Saved!', {
  position: toast.POSITION.TOP_CENTER,
  theme: toast.THEME.COLORED,
  transition: toast.TRANSITIONS.SLIDE,
});
```

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

### Configure and Manage Toasts

Source: https://github.com/jerrywu001/vue3-toastify/blob/main/docs/docs/api/toast.md

Demonstrates how to define toast options, display various types of notifications, and manage their lifecycle using toast IDs.

```ts
const options = {
  onOpen: () => console.log('opened'),
  onClose: () => console.log('closed'),
  autoClose: 6000,
  closeButton: SomeVNode, // CloseBtnType
  type: toast.TYPE.INFO,
  hideProgressBar: false,
  position: toast.POSITION.TOP_LEFT,
  pauseOnHover: true,
  transition: MyCustomTransition,
  progress: 0.2
  // and so on ...
} as ToastOptions;

// display toasts
const toastId = toast("Hello", options as ToastOptions);
toast(MyComponent, options as ToastOptions);
toast(({ closeToast } as ToastContentProps) => <div>Render props like</div>, options as ToastOptions);

//shortcut to different types
toast.success("Hello", options as ToastOptions);
toast.info("World", options as ToastOptions);
toast.warn(MyComponent, options as ToastOptions);
toast.error("Error", options as ToastOptions);

// New: object content (built-in title + content layout)
toast.success({
  title: 'The toast title',
  content: 'Some toast content',
});

// Remove all toasts !
toast.remove();
toast.clearAll();

// Remove given toast
toast.remove(toastId as Id);

//Check if a toast is displayed or not
toast.isActive(toastId);

// update a toast
toast.update(toastId, {
  type: toast.TYPE.INFO,
  render: SomeVNode, // ToastContent<T>
});

// completes the controlled progress bar
toast.done(toastId as Id);
```

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

### Configure Container Props during App Initialization

Source: https://github.com/jerrywu001/vue3-toastify/blob/main/docs/docs/api/container.md

Use the app.use method to register the plugin with global container options.

```ts
import { createApp } from 'vue';
import Vue3Toastify, { type ToastContainerOptions } from 'vue3-toastify';
import App from './App.vue';

const app = createApp(App);

app.use(
  Vue3Toastify,
  {
    autoClose: 2000,
    style: {
      opacity: '1',
      userSelect: 'initial',
    },
  } as ToastContainerOptions,
);

app.mount('#app');
```

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

### Disabling Icons Globally

Source: https://github.com/jerrywu001/vue3-toastify/blob/main/docs/docs/usage/icons.md

Disable icons for all notifications by setting the icon option to false in the plugin installation.

```vue
<template>
  <div>
    <button @click="notify">Notify !</button>
  </div>
</template>

<script setup lang="ts">
import { toast } from 'vue3-toastify';

const notify = () => toast.error('Disable the icon gloabally !');
</script>
```

```js
import App from './App.vue';
import { createApp } from 'vue';
import Vue3Toasity from 'vue3-toastify';
import 'vue3-toastify/dist/index.css';

createApp(App).use(
  Vue3Toasity,
  {
    icon: false,
  }, // global options type definition --> ToastContainerOptions
).mount('#app');
```

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

### Initialize Pinia in Main Entry

Source: https://github.com/jerrywu001/vue3-toastify/blob/main/docs/docs/usage/render-more-than-string.md

Registers the Pinia plugin with the Vue application instance.

```typescript
import App from './App.vue';
import { createApp } from 'vue';
import { createPinia } from 'pinia';

createApp(App).use(createPinia()).mount('#app');
```

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

### Update Global Options and Show Toast

Source: https://github.com/jerrywu001/vue3-toastify/blob/main/docs/docs/usage/pause-on-focus-loss.md

Demonstrates updating global options, such as `rtl`, and then showing a success toast. This method is useful for applying configuration changes dynamically.

```typescript
updateGlobalOptions({ rtl: true });

ttoast.success('Wow so easy!');
```

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

### Implement custom animation in Vue component

Source: https://github.com/jerrywu001/vue3-toastify/blob/main/docs/docs/usage/custom-animation.md

Apply the custom animation object to a toast notification within a Vue 3 setup script.

```vue
<script setup lang="ts">
import { toast, type CSSTransitionProps } from 'vue3-toastify';
import 'vue3-toastify/dist/index.css';
import 'animate.css';

const customAnimation: CSSTransitionProps = {
  enter: "animate__animated animate__lightSpeedInRight",
  exit: "animate__animated animate__lightSpeedOutRight",
  // appendPosition: true,
};

// TIPS !!!!!!!!!!!!!!!!
// if add prop --> appendPosition: true
// - className to be: "animate__animated animate__lightSpeedInRight--top-right"
// - enter or exit animation will not trigger,
// - because there has no className "animate__lightSpeedInRight--top-right"

const notify = () => {
  toast('Wow so easy !', {
    transition: customAnimation,
    position: toast.POSITION.BOTTOM_RIGHT,
  });
};
</script>

<template>
  <div>
    <button @click="notify">Notify !</button>
  </div>
</template>
```

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

### Configure global toast settings

Source: https://github.com/jerrywu001/vue3-toastify/blob/main/docs/docs/usage/custom-animation.md

Initialize the vue3-toastify plugin with global options like newestOnTop.

```js
import App from './App.vue';
import { createApp } from 'vue';
import Vue3Toasity from 'vue3-toastify';
import 'vue3-toastify/dist/index.css';

createApp(App).use(
  Vue3Toasity,
  {
    newestOnTop: true,
  },
).mount('#app');
```

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

### Container Props Configuration

Source: https://github.com/jerrywu001/vue3-toastify/blob/main/docs/docs/api/container.md

Documentation of the available configuration properties for the toast container.

```APIDOC
## Container Props

### Description
Configuration options for the toast container, which define the default behavior for all toasts rendered within it.

### Parameters
#### Request Body
- **multiple** (boolean) - Optional - Display multiple toasts at the same time. Default: true
- **limit** (number) - Optional - Limit the number of toasts displayed at the same time.
- **newestOnTop** (boolean) - Optional - Display newest toast on top. Default: false
- **containerClassName** (string) - Optional - Add optional classes to the container.
- **dangerouslyHTMLString** (boolean) - Optional - Render unsafe string, like html tag. Default: false
- **clearOnUrlChange** (boolean) - Optional - Clear all toasts on url change. Default: true
- **icon** (IconType) - Optional - Used to display a custom icon.
- **rtl** (boolean) - Optional - Support right to left content. Default: false
- **containerId** (Id) - Optional - Used to identify the Container. Default: toast.POSITION.TOP_RIGHT
- **position** (ToastPosition) - Optional - One of top-right, top-center, top-left, bottom-right, bottom-center, bottom-left. Default: toast.POSITION.TOP_RIGHT
- **autoClose** (number | boolean) - Optional - Delay in ms to close the toast. Default: 5000
- **closeButton** (VNode | boolean) - Optional - Replace the default close button or false to hide.
- **transition** (ToastTransition | CSSTransitionProps) - Optional - A reference to a valid transition animation. Default: toast.TRANSITIONS.Bounce
- **hideProgressBar** (boolean) - Optional - Display or not the progress bar. Default: false
- **pauseOnHover** (boolean) - Optional - Keep the timer running or not on hover. Default: true
- **pauseOnFocusLoss** (boolean) - Optional - Pause the timer when the window loses focus. Default: true
- **closeOnClick** (boolean) - Optional - Dismiss toast on click. Default: true
- **toastClassName** (string) - Optional - Add optional classes to the toast.
- **bodyClassName** (string) - Optional - Add optional classes to the toast body.
- **style** (CSSProperties) - Optional - Add optional inline style to the container.
- **progressClassName** (string) - Optional - Add optional classes to the progress bar.
- **progressStyle** (CSSProperties) - Optional - Add optional inline style to the progress bar.
- **role** (string) - Optional - Define the ARIA role for the toasts. Default: alert
- **theme** (ToastTheme) - Optional - One of auto, light, dark, colored. Default: auto
```

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

### Configure Global RTL Support

Source: https://github.com/jerrywu001/vue3-toastify/blob/main/docs/docs/usage/enable-right-to-left-support.md

Enable RTL layout globally by passing the rtl option to the plugin during application initialization.

```vue
<template>
  <div>
    <button @click="notify">Notify !</button>
  </div>
</template>

<script setup lang="ts">
import { toast } from 'vue3-toastify';

const notify = () => {
  toast('Wow so easy !', {
    // rtl: false,
  });
};
</script>
```

```javascript
import App from './App.vue';
import { createApp } from 'vue';
import Vue3Toasity from 'vue3-toastify';
import 'vue3-toastify/dist/index.css';

createApp(App).use(
  Vue3Toasity,
  {
    rtl: true,
  }, // global options type definition --> ToastContainerOptions
).mount('#app');
```

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

### Configuring Custom Icons Globally

Source: https://github.com/jerrywu001/vue3-toastify/blob/main/docs/docs/usage/icons.md

Use a resolver function during plugin initialization to map toast types to specific icons globally.

```js
import App from './App.vue';
import { createApp } from 'vue';
import { VNodeIcon } from './icons.tsx';
import Vue3Toasity from 'vue3-toastify';
import 'vue3-toastify/dist/index.css';

const ResolveCustomIcon = (props: IconProps) => {
  switch (props.type) {
    case 'default':
      return '👌';
    case 'loading':
      return '⏳';
    case 'info':
      return '🎈';
    case 'success':
      return '✌️';
    case 'error':
      return '🤣';
    case 'warning':
      return '😢';
    default:
      return undefined;
  }
};

createApp(App).use(
  Vue3Toasity,
  {
    icon: ResolveCustomIcon, // use function
    // icon: VNodeIcon, // use Unified icon
  },
).mount('#app');
```

```vue
<script setup lang="ts">
import { h } from 'vue';
import { toast } from 'vue3-toastify';

const notify = () => {
  toast.success('You can provide any VNode');
};
</script>

<template>
  <div>
    <button @click="notify">Notify !</button>
  </div>
</template>
```

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

### Set Default AutoClose Delay

Source: https://github.com/jerrywu001/vue3-toastify/blob/main/docs/docs/usage/auto-close.md

Configure a global default delay for all toasts by setting the `autoClose` option in the Vue3-Toastify plugin configuration. This example sets the default delay to 8000 milliseconds (8 seconds).

```javascript
import App from './App.vue';
import { createApp } from 'vue';
import Vue3Toasity, { toast } from 'vue3-toastify';
import 'vue3-toastify/dist/index.css';

createApp(App).use(
  Vue3Toasity,
  {
    autoClose: 8000,
    position: toast.POSITION.BOTTOM_CENTER,
    // ...
  }, // global options type definition --> ToastContainerOptions
).mount('#app');
```

```vue
<template>
  <div>
    <button @click="notify">Notify !</button>
  </div>
</template>

<script setup lang="ts">
import { toast } from 'vue3-toastify';

const notify = () => toast("Wow so easy !");
</script>
```

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

### Registering vue3-toastify Globally

Source: https://github.com/jerrywu001/vue3-toastify/blob/main/docs/docs/usage/custom-close-button.md

Initialize vue3-toastify in the main application file to enable global toast functionality.

```javascript
import { h } from 'vue';
import App from './App.vue';
import { createApp } from 'vue';
import { VNodeIcon, ComponentIcon } from './icons.tsx';
import Vue3Toasity from 'vue3-toastify';
import 'vue3-toastify/dist/index.css';

createApp(App).use(
```

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

### Basic Toast Functionality

Source: https://context7.com/jerrywu001/vue3-toastify/llms.txt

Use the `toast()` function to display notifications. Customize behavior with an optional options object, including auto-close timers, position, and theme.

```vue
<script setup lang="ts">
import { toast } from 'vue3-toastify';
import 'vue3-toastify/dist/index.css';

const notify = () => {
  // Basic toast with default settings
  toast("Wow so easy!");

  // Toast with custom options
  toast("Custom notification", {
    autoClose: 3000,                          // Close after 3 seconds
    position: toast.POSITION.BOTTOM_RIGHT,   // Position on screen
    theme: 'dark',                            // Theme: 'light', 'dark', 'colored', 'auto'
    hideProgressBar: false,                   // Show progress bar
    closeOnClick: true,                       // Close when clicked
    pauseOnHover: true,                       // Pause timer on hover
  });
};
</script>

<template>
  <button @click="notify">Notify!</button>
</template>
```

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

### Define Toast Callbacks

Source: https://github.com/jerrywu001/vue3-toastify/blob/main/docs/docs/usage/define-callback.md

Use `onOpen` and `onClose` callbacks to execute functions when a toast appears or disappears. Ensure the toast CSS is imported.

```vue
<script setup lang="ts">
import { toast } from 'vue3-toastify';
import 'vue3-toastify/dist/index.css';

const notify = () => {
  toast("Hello there", {
    onOpen: () => window.alert('Called when I open'),
    onClose: () => window.alert('Called when I close'),
    position: toast.POSITION.BOTTOM_CENTER,
  });
};
</script>

<template>
  <div>
    <button @click="notify">Notify !</button>
  </div>
</template>
```

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

### Enable custom props globally

Source: https://github.com/jerrywu001/vue3-toastify/blob/main/docs/docs/usage/pass-props-to-custom-component.md

Configure the toast container to enable custom props globally via app.use.

```ts
app.use(
  Vue3Toasity,
  {
    expandCustomProps: true, // default is false
  } as ToastContainerOptions,
);
```

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

### Toast Lifecycle Methods

Source: https://github.com/jerrywu001/vue3-toastify/blob/main/docs/docs/api/toast.md

Methods for programmatically displaying, updating, and removing toast notifications.

```APIDOC
## Toast Lifecycle Methods

### Description
Methods to manage the lifecycle of toast notifications, including creation, updates, and removal.

### Methods
- **toast(content, options)**: Displays a toast and returns a toastId.
- **toast.success/info/warn/error(content, options)**: Shortcut methods for specific types.
- **toast.remove(toastId)**: Removes a specific toast.
- **toast.remove()**: Removes all toasts.
- **toast.clearAll()**: Clears all toasts.
- **toast.isActive(toastId)**: Checks if a toast is currently displayed.
- **toast.update(toastId, options)**: Updates an existing toast.
- **toast.done(toastId)**: Completes the controlled progress bar.
```

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

### Configure global toast options

Source: https://github.com/jerrywu001/vue3-toastify/blob/main/docs/docs/usage/custom-close-button.md

Sets global toast container options including custom close button components and auto-close behavior.

```javascript
Vue3Toasity,
  {
    closeButton: (props) => h(ComponentIcon, props), // CloseButtonProps
    // closeButton: ComponentIcon as CloseBtnType,
    // closeButton: ({ closeToast }) => h(VNodeIcon, { onClick: closeToast }),
    autoClose: false,
    closeOnClick: false,
  }, // global options type definition --> ToastContainerOptions
).mount('#app');
```

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

### Toast Configuration Props

Source: https://github.com/jerrywu001/vue3-toastify/blob/main/docs/docs/api/toast.md

A comprehensive list of properties available to customize the behavior and appearance of toast notifications.

```APIDOC
## Toast Props

### Description
Configuration options for individual toast notifications. These props supersede container-level props.

### Parameters
- **toastId** (Id) - Optional - Custom identifier for the toast.
- **updateId** (Id) - Optional - Identifier used during update operations.
- **data** (T) - Optional - Additional data to pass to the toast.
- **type** (ToastType) - Optional - One of: info, success, warning, error, default.
- **delay** (number) - Optional - Delay in ms before appearance.
- **onOpen** (() => void) - Optional - Callback when notification appears.
- **onClose** (() => void) - Optional - Callback when notification disappears.
- **onClick** ((event: MouseEvent) => void) - Optional - Callback on click.
- **toastStyle** (CSSProperties) - Optional - Inline style for the toast wrapper.
- **progress** (number) - Optional - Controlled progress bar percentage (0 to 1).
- **render** (ToastContent<T>) - Optional - Content for toast.update.
- **isLoading** (boolean) - Optional - Loading state for toast.loading.
- **dangerouslyHTMLString** (boolean) - Optional - Render raw HTML strings.
- **clearOnUrlChange** (boolean) - Optional - Clear toast on URL change.
- **icon** (IconType) - Optional - Custom icon.
- **rtl** (boolean) - Optional - Right-to-left support.
- **containerId** (Id) - Optional - Target container identifier.
- **position** (ToastPosition) - Optional - Toast position (e.g., top-right).
- **autoClose** (number | boolean) - Optional - Delay in ms to close.
- **closeButton** (VNode | boolean) - Optional - Custom close button.
- **transition** (ToastTransition | CSSTransitionProps) - Optional - Animation transition.
- **hideProgressBar** (boolean) - Optional - Toggle progress bar visibility.
- **pauseOnHover** (boolean) - Optional - Pause timer on hover.
- **pauseOnFocusLoss** (boolean) - Optional - Pause timer on window focus loss.
- **closeOnClick** (boolean) - Optional - Dismiss on click.
- **toastClassName** (string) - Optional - Custom CSS class for toast.
- **bodyClassName** (string) - Optional - Custom CSS class for toast body.
- **style** (CSSProperties) - Optional - Inline style for container.
- **progressClassName** (string) - Optional - Custom CSS class for progress bar.
- **progressStyle** (CSSProperties) - Optional - Inline style for progress bar.
- **role** (string) - Optional - ARIA role.
- **theme** (ToastTheme) - Optional - Theme (auto, light, dark, colored).
```

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

### Global Plugin Configuration

Source: https://context7.com/jerrywu001/vue3-toastify/llms.txt

Register the plugin globally in main.ts to apply default settings like auto-close, positioning, and custom CSS classes to all toasts.

```typescript
// main.ts
import { createApp } from 'vue';
import Vue3Toastify, { type ToastContainerOptions } from 'vue3-toastify';
import 'vue3-toastify/dist/index.css';
import App from './App.vue';

const app = createApp(App);

app.use(Vue3Toastify, {
  autoClose: 3000,                           // Default auto-close delay
  position: 'bottom-right',                  // Default position
  theme: 'auto',                             // Auto-detect system theme
  multiple: true,                            // Allow multiple toasts
  limit: 5,                                  // Max toasts displayed
  newestOnTop: false,                        // Stack order
  hideProgressBar: false,                    // Show progress bar
  pauseOnHover: true,                        // Pause on hover
  pauseOnFocusLoss: true,                    // Pause when window loses focus
  closeOnClick: true,                        // Close on click
  rtl: false,                                // Right-to-left support
  transition: 'bounce',                      // Animation: 'bounce', 'slide', 'flip', 'zoom'
  containerClassName: 'my-toast-container',  // Custom container class
  toastClassName: 'my-toast',                // Custom toast class
  bodyClassName: 'my-toast-body',            // Custom body class
  progressClassName: 'my-progress',          // Custom progress class
} as ToastContainerOptions);

app.mount('#app');
```

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

### SCSS Directory Structure

Source: https://github.com/jerrywu001/vue3-toastify/blob/main/docs/docs/usage/how-to-style.md

Explore the SCSS directory to understand the project's stylesheet structure and modify or extend existing styles. Key variables are defined in `_variables.scss`.

```md
scss
├── _closeButton.scss
├── _progressBar.scss
├── _toast.scss
├── _toastContainer.scss
├── _variables.scss
├── ...
├── 📁 animations
│  ├── _bounce.scss
│  ├── _flip.scss
│  ├── _slide.scss
│  └── _zoom.scss
└── main.scss
```

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

### Render Custom Vue Components

Source: https://context7.com/jerrywu001/vue3-toastify/llms.txt

Create a custom component that accepts closeToast and toastProps, then render it directly or via a render function.

```vue
<!-- CustomToast.vue -->
<script lang="ts">
import type { ToastOptions } from 'vue3-toastify';
import type { PropType } from 'vue';

export default {
  name: 'CustomToast',
  props: {
    closeToast: Function as PropType<(e?: MouseEvent) => void>,
    toastProps: Object as PropType<ToastOptions>,
  },
};
</script>

<template>
  <div>
    <h4>Custom Component</h4>
    <p>Position: {{ toastProps?.position }}</p>
    <button @click="closeToast">Close</button>
  </div>
</template>
```

```vue
<!-- App.vue -->
<script setup lang="ts">
import { h } from 'vue';
import { toast } from 'vue3-toastify';
import CustomToast from './CustomToast.vue';
import 'vue3-toastify/dist/index.css';

const showComponent = () => {
  // Render a Vue component
  toast(CustomToast, {
    closeOnClick: false,
    autoClose: 8000,
    position: toast.POSITION.BOTTOM_CENTER,
  });
};

const showWithCallback = () => {
  // Use callback to pass props
  toast(
    ({ closeToast, toastProps }) => h(CustomToast, { closeToast, toastProps }),
    {
      closeOnClick: false,
      autoClose: 8000,
      position: toast.POSITION.BOTTOM_CENTER,
      onOpen: (props) => console.log('Toast opened', props),
      onClose: (props) => console.log('Toast closed', props),
    }
  );
};
</script>

<template>
  <button @click="showComponent">Show Component</button>
  <button @click="showWithCallback">Show with Callback</button>
</template>
```

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

### Configure Global HTML Rendering

Source: https://github.com/jerrywu001/vue3-toastify/blob/main/docs/docs/usage/render-html-string.md

Enable HTML rendering globally by setting dangerouslyHTMLString to true in the plugin options during app initialization.

```vue
<template>
  <div>
    <button @click="notify">Notify !</button>
  </div>
</template>

<script setup lang="ts">
import { toast } from 'vue3-toastify';

const notify = () => {
  toast('Hello world.\n I am <strong>jack</strong>', {
    position: toast.POSITION.BOTTOM_CENTER,
  });
};
</script>
```

```typescript
import App from './App.vue';
import { createApp } from 'vue';
import Vue3Toasity from 'vue3-toastify';
import 'vue3-toastify/dist/index.css';

createApp(App).use(
  Vue3Toasity,
  {
    dangerouslyHTMLString: true,
  }, // global options type definition --> ToastContainerOptions
).mount('#app');
```

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

### Configure custom close buttons in vue3-toastify

Source: https://github.com/jerrywu001/vue3-toastify/blob/main/docs/docs/usage/custom-close-button.md

Demonstrates passing components and VNodes as custom close buttons. Ensure the custom button implementation calls the provided closeToast function.

```vue
<script setup lang="ts">
import { h } from 'vue';
import { toast } from 'vue3-toastify';
import { VNodeIcon, ComponentIcon } from './icons.tsx';
import 'vue3-toastify/dist/index.css';

const notify = () => {
  toast('component close icon1', {
    closeOnClick: false,
    autoClose: false,
    position: toast.POSITION.BOTTOM_CENTER,
    closeButton: ComponentIcon, // ComponentIcon as CloseBtnType,
  });

  toast('component close icon2', {
    closeOnClick: false,
    autoClose: false,
    position: toast.POSITION.BOTTOM_CENTER,
    closeButton: (props) => h(ComponentIcon, props), // CloseButtonProps
  });

  toast('VNode close icon', {
    closeOnClick: false,
    autoClose: false,
    position: toast.POSITION.BOTTOM_CENTER,
    closeButton: ({ closeToast }) => h(VNodeIcon, { onClick: closeToast  }),
  });
};
</script>

<template>
  <div>
    <button @click="notify">Notify !</button>
  </div>
</template>
```

```jsx
// import { ToastType } from 'vue3-toastify'; // type ToastType, type IconProps, type ToastTheme
import { defineComponent, PropType } from 'vue';
import props from './props';

export const ComponentIcon = defineComponent({
  props,
  setup(props, { attrs }) { // props: CloseButtonProps
    return () => (
      <svg
        onClick={props.closeToast} // do not forget this!!!!!
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        width="32"
        height="32"
      >
        <path d="M499.2 951.466667c-234.666667 0-426.666667-192-426.666667-426.666667 0-17.066667 0-38.4 4.266667-55.466667 4.266667-12.8 12.8-17.066667 25.6-17.066666 12.8 4.266667 17.066667 12.8 17.066667 25.6-4.266667 12.8-4.266667 29.866667-4.266667 46.933333 0 213.333333 170.666667 384 384 384s384-170.666667 384-384-170.666667-384-384-384c-25.6 0-46.933333 4.266667-72.533333 8.533333-12.8 0-21.333333-4.266667-25.6-17.066666 0-12.8 4.266667-21.333333 17.066666-25.6 25.6-4.266667 51.2-8.533333 81.066667-8.533334 234.666667 0 426.666667 192 426.666667 426.666667s-192 426.666667-426.666667 426.666667z" fill="#7162AD" p-id="3129"></path><path d="M119.466667 418.133333h-8.533334c-8.533333-4.266667-17.066667-17.066667-12.8-29.866666 42.666667-119.466667 128-213.333333 238.933334-256 12.8-4.266667 21.333333 0 25.6 12.8 4.266667 12.8 0 21.333333-12.8 25.6C256 213.333333 174.933333 298.666667 140.8 405.333333c-4.266667 8.533333-12.8 12.8-21.333333 12.8z" fill="#A495FC" p-id="3130"></path><path d="M392.533333 657.066667c-4.266667 0-12.8 0-17.066666-4.266667-8.533333-8.533333-8.533333-21.333333 0-29.866667l213.333333-213.333333c8.533333-8.533333 21.333333-8.533333 29.866667 0s8.533333 21.333333 0 29.866667l-213.333334 213.333333c0 4.266667-8.533333 4.266667-12.8 4.266667z" fill="#7162AD" p-id="3131"></path><path d="M605.866667 657.066667c-4.266667 0-12.8 0-17.066667-4.266667l-213.333333-213.333333c-8.533333-8.533333-8.533333-21.333333 0-29.866667s21.333333-8.533333 29.866666 0l213.333334 213.333333c8.533333 8.533333 8.533333 21.333333 0 29.866667 0 4.266667-8.533333 4.266667-12.8 4.266667z" fill="#7162AD" p-id="3132"></path>
      </svg>
    );
  },
});

export const VNodeIcon = () => (
  <svg
    viewBox="0 0 1024 1024"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    width="32"
    height="32"
  >

```

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

### Using Custom Icons

Source: https://github.com/jerrywu001/vue3-toastify/blob/main/docs/docs/usage/icons.md

Provide custom icons using strings, numbers, VNodes, or components. You can also pass a callback function to return a component based on theme and type.

```vue
<script setup lang="ts">
import { h } from 'vue';
import { toast } from 'vue3-toastify';
import { VNodeIcon, ComponentIcon } from './icons.tsx';
import 'vue3-toastify/dist/index.css';

const notify = () => {
  toast.success('You can provide any string', {
    icon: "🚀",
  });

  toast.success('You can provide any number', {
    icon: 1,
  });

  toast.success('You can provide any VNode', {
    icon: VNodeIcon,
    position: toast.POSITION.TOP_LEFT,
  });

  toast.success('You can provide a Component', {
    icon: ComponentIcon,
    position: toast.POSITION.TOP_LEFT,
  });

  // or
  toast('You can provide callback and return a component', {
    icon: ({ theme, type }) => h(ComponentIcon, { theme, type }),
    position: toast.POSITION.TOP_LEFT,
  });
};
</script>

<template>
  <div>
    <button @click="notify">Notify !</button>
  </div>
</template>
```

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

### Render custom toast components via composable

Source: https://github.com/jerrywu001/vue3-toastify/blob/main/docs/docs/usage/pass-props-to-custom-component.md

Use a composable with the h function to render custom components as toast content.

```ts
import { h } from "vue";
import { toast, ToastType } from "vue3-toastify";
import ToastContent from "@/components/ToastContent.vue";

export const useToast = () => {
  const showToast = ({
    status,
    title,
    message,
  }: {
    status: ToastType;
    title?: string;
    message: string;
  }) => {
    toast(() => h(ToastContent, { status, title, message }), {
      type: status,
      icon: false,
    });
  };

  return { showToast };
};
```

```vue
<template>
  <div class="toast-content">
    <strong v-if="title">{{ title }}</strong>
    <p>{{ message }}</p>
  </div>
</template>

<script setup lang="ts">
defineProps<{
  status: string;
  title?: string;
  message: string;
}>();
</script>

<style scoped>
.toast-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
</style>
```

```vue
<script setup lang="ts">
import { useToast } from "@/composables/useToast";
import "vue3-toastify/dist/index.css";

const { showToast } = useToast();

const notify = () => {
  showToast({
    status: "success",
    title: "Success",
    message: "Your data was saved successfully!",
  });
};
</script>

<template>
  <button @click="notify">Show Toast</button>
</template>
```

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

### Render JSX/TSX in Toast

Source: https://github.com/jerrywu001/vue3-toastify/blob/main/docs/docs/usage/render-more-than-string.md

Shows how to use JSX or a render function to display custom content in a toast notification.

```vue
<script setup lang="ts">
import { h } from 'vue';
import JsxDemo from './JsxDemo.tsx';
import Msg from './Msg.vue';
import { toast } from 'vue3-toastify';
import 'vue3-toastify/dist/index.css';

const show = () => {
  toast(
    ({ closeToast, toastProps }) => h(Msg, { closeToast, toastProps }),
    {
      closeOnClick: false,
      autoClose: 8000,
      position: toast.POSITION.BOTTOM_CENTER,
    },
  );
};
</script>

<template>
  <JsxDemo />
  <button @click="show">toast with callback in .vue</button>
</template>
```

```jsx
import { toast } from 'vue3-toastify';
import { defineComponent } from 'vue';
import Msg from './Msg';

const JsxDemo = defineComponent({
  setup() {
    const displayMsg = () => {
      toast(<Msg uid="test custom props" />, {
        closeOnClick: false,
        autoClose: 8000,
        position: toast.POSITION.BOTTOM_CENTER,
        onOpen: (props) => {
          console.log(props);
        },
        onClose: (props) => {
          console.log(props);
        },
      });
      // or
      // toast(Msg, {
      //   closeOnClick: false,
      //   autoClose: 8000,
      //   position: toast.POSITION.BOTTOM_CENTER,
      //   data: {
      //     uid: 'custom from data',
      //   },
      //   onOpen: (props) => {
      //     console.log(props);
      //   },
      //   onClose: (props) => {
      //     console.log(props);
      //   },
      // });

      // cool !!!
      toast(({ closeToast, toastProps }) => (
        <div>
          <p>I am a jsx component</p>
          <p>Position: {toastProps?.position}</p>
          <button
            style="color: red;"
            onClick={closeToast}
          >
            Click me to close toast
          </button>
        </div>
      ), {
        closeOnClick: false,
        autoClose: 8000,
        position: toast.POSITION.BOTTOM_CENTER,
      });
    };

    return () => (
      <div>
        <button onClick={displayMsg}>toast in .jsx</button>
      </div>
    );
  },
});

export default JsxDemo;
```

```vue
<script lang="ts">
import type { ToastOptions } from 'vue3-toastify';
import type { PropType } from 'vue';

export default {
  name: 'Msg',
  props: {
    closeToast: Function as PropType<(e?: MouseEvent) => void>,
    toastProps: Object as PropType<ToastOptions>,
  },
};
</script>

<template>
  <div>
    <p>I am a vue component</p>
    <p>Position: {{ toastProps?.position }}</p>
    <button
      @click="($event) => { closeToast && closeToast($event) }"
    >
      Click me to close toast
    </button>
  </div>
</template>
```

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

### Manual Loading Notification Update

Source: https://github.com/jerrywu001/vue3-toastify/blob/main/docs/docs/usage/promise.md

Use toast.loading to initiate a notification and toast.update to modify its content or state manually.

```vue
<script setup lang="ts">
import { toast } from 'vue3-toastify';
import Msg from './Msg.vue';
import 'vue3-toastify/dist/index.css';

const notify = () => {
  const id = toast.loading(
    'Please wait...',
    {
      position: toast.POSITION.BOTTOM_RIGHT,
    },
  );

  setTimeout(() => {
    toast.update(id, {
      render: Msg,
      autoClose: true,
      closeOnClick: true,
      closeButton: true,
      type: 'success',
      isLoading: false,
    });

    setTimeout(() => {
      // done
      toast.done(id);
    }, 1000);
  }, 2000);
};
</script>

<template>
  <div>
    <button @click="notify">toast</button>
  </div>
</template>
```

```vue
<script>
import { ToastOptions } from 'vue3-toastify';
import { PropType } from 'vue';

export default {
  name: 'Msg',
  props: {
    closeToast: Function,
    toastProps: Object,
    // for ts
    // closeToast: Function as PropType<(e?: MouseEvent) => void>,
    // toastProps: Object as PropType<ToastOptions>,
  },
};
</script>

<template>
  <div>
    <p>I am a vue component</p>
    <p>Position: {{ toastProps?.position }}</p>
    <button
      @click="($event) => { closeToast && closeToast($event) }"
    >
      Click me to close toast
    </button>
  </div>
</template>
```

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

### Using Icons in JSX

Source: https://github.com/jerrywu001/vue3-toastify/blob/main/docs/docs/usage/icons.md

Render custom components as icons within JSX by providing a function that returns the component.

```jsx
toast('HELLO', {
  icon: ({ theme, type }) => (
    <ComponentIcon
      theme={theme}
      type={type}
      class={theme}
      style={{ fontSize: '12px' }}
    />
  ),
});
```

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

### Globally Set Default Toast Transition

Source: https://github.com/jerrywu001/vue3-toastify/blob/main/docs/docs/usage/replace-default-transition.md

Configure the default toast transition globally by passing the `transition` option to `app.use(Vue3Toasity)`. This sets the transition for all subsequent toasts unless overridden individually.

```javascript
app.use(
  Vue3Toasity,
  {
    transition: toast.TRANSITIONS.FLIP,
    // toast.TRANSITIONS.BOUNCE
    // toast.TRANSITIONS.ZOOM
    // toast.TRANSITIONS.SLIDE
  }, // as ToastContainerOptions
);
```

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

### Customize Toast Close Button in JSX

Source: https://github.com/jerrywu001/vue3-toastify/blob/main/docs/docs/usage/custom-close-button.md

Demonstrates how to provide a custom component or VNode for the toast close button using the toast configuration object.

```jsx
toast('HELLO', {
  closeButton: (props) => (
    <ComponentIcon
      {...props}
      class="xxx"
    />
  ),
  autoClose: false,
  closeOnClick: false,
});

// or
toast('HELLO', {
  closeButton: ({ closeToast }) => (
    <VNodeIcon
      // @ts-ignore
      onClick={closeToast}
      class="xxx"
    />
  ),
  autoClose: false,
  closeOnClick: false,
});
```

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

### Configure Global Toast Limit

Source: https://github.com/jerrywu001/vue3-toastify/blob/main/docs/docs/usage/limit.md

Set the maximum number of concurrent toasts during the plugin initialization in the main entry file.

```typescript
import App from './App.vue';
import { createApp } from 'vue';
import Vue3Toasity from 'vue3-toastify';

createApp(App).use(
  Vue3Toasity,
  {
    limit: 2,
  },
).mount('#app');
```