### Install Vue Toastification

Source: https://github.com/maronato/vue-toastification/blob/next/README.md

Installs the Vue Toastification library using either Yarn or npm. Ensure you are installing the '@next' version for Vue 3 compatibility.

```bash
$ yarn add vue-toastification@next
$ npm install --save vue-toastification@next
```

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

### Toast Options Object Example

Source: https://github.com/maronato/vue-toastification/blob/next/README.md

Provides a comprehensive example of the options object that can be passed when creating a toast. This covers various configurations like position, timeout, and more.

```javascript
toast('My toast message', {
  position: POSITION.TOP_CENTER,
  timeout: 5000,
  closeOnClick: true,
  pauseOnHover: true,
  draggable: true,
  draggablePercent: 0.6,
  showCloseButtonOnHover: false,
  hideProgressBar: false,
  closeButton: 'button',
  icon: true,
  rtl: false,
  transition: 'bounce',
  toastClassName: 'my-toast-class',
  bodyClassName: ['my-toast-body-class-1', 'my-toast-body-class-2'],
  progressClassName: 'my-progress-class',
  // ... other options
})
```

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

### Install Vue Toastification (npm/yarn)

Source: https://github.com/maronato/vue-toastification/blob/next/README.md

Installation instructions for Vue Toastification using npm or yarn package managers. This is the first step to integrate the library into your Vue 3 project.

```bash
npm install vue-toastification@next

# or


```

```bash
yarn add vue-toastification@next
```

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

### Create and Use Toasts in Vue Components

Source: https://github.com/maronato/vue-toastification/blob/next/README.md

Demonstrates how to obtain and use the toast interface within a Vue component's setup function or methods. Allows for basic toasts, styled toasts with options, and integration into component methods.

```html
<script>
  import { useToast } from "vue-toastification";

  export default {
    setup() {
      // Get toast interface
      const toast = useToast();

      // Use it!
      toast("I'm a toast!");

      // or with options
      toast.success("My toast content", {
        timeout: 2000
      });
      // These options will override the options defined in the "app.use" plugin registration for this specific toast

      // Make it available inside methods
      return { toast }
    },

    methods: {
      myMethod() {

        // Since you returned `toast` from setup(), you can access it now
        this.toast.info("I'm an info toast!");
      }
    }
  }
</script>
```

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

### Custom Transitions for Toasts

Source: https://github.com/maronato/vue-toastification/blob/next/README.md

Example of defining and applying custom CSS transitions for toast appearance and disappearance. This allows for unique animation effects.

```javascript
import { useToast } from "vue-toastification"

const toast = useToast()

t-oast("Toast with custom transition", {
  transition: "custom-fade", // Assumes you have a CSS transition named 'custom-fade'
  transitionDuration: 500 // Duration in ms
})

```

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

### Simulating Plugin Initialization and Adding Toasts with loadPlugin

Source: https://github.com/maronato/vue-toastification/blob/next/CONTRIBUTING.md

This example demonstrates how to use the `loadPlugin` utility to simulate `app.use(Toast)`. It shows how to initialize the plugin with custom options, access the toast interface and position wrappers, and verify the addition and content of toasts using Jest and Vue Test Utils.

```typescript
import { ToastOptionsAndRequiredContent } from "src/types";
import { POSITION } from "src/ts/constants";
import loadPlugin from "tests/utils/plugin";

describe("test plugin", () => {
  it("adds toast", async () => {
    // Load plugin with default value for position
    const options = { position: POSITION.BOTTOM_LEFT };
    const {
      toastInterface,
      bottomLeft,
      containerWrapper
    } = loadPlugin(options);

    // Get way to access list of toasts inside containerWrapper
    const vm = (containerWrapper.vm as unknown) as {
      toastArray: ToastOptionsAndRequiredContent[]
    }

    // Initially there should be no toasts
    expect(vm.toastArray.length).toBe(0);
    expect(bottomLeft.getToasts().length).toBe(0);

    // Create a toast
    const content = "I'm a toast";
    toastInterface(content);

    // Wait for render
    await containerWrapper.vm.$nextTick();

    // Toast should be created with correct content
    expect(vm.toastArray.length).toBe(1);
    expect(bottomLeft.getToasts().length).toBe(1);
    expect(bottomLeft.getToasts().at(0).props().content).toBe(content);
  });
});
```

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

### Custom Toast Classes

Source: https://github.com/maronato/vue-toastification/blob/next/README.md

Example of applying custom CSS classes to individual toast messages for specific styling. This allows for fine-grained control over the appearance of toasts.

```javascript
import { useToast } from "vue-toastification"

const toast = useToast()

t-oast("Toast with custom class", {
  // Add a class to the toast container
  toastClassName: "my-custom-toast-class"
})

```

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

### Create a Toast Notification (Vue Component)

Source: https://github.com/maronato/vue-toastification/blob/next/README.md

Example of how to create and display a simple toast notification within a Vue 3 component using the injected `useToast` composable. This is the primary method for showing user feedback.

```javascript
import { useToast } from "vue-toastification"

export default {
  setup() {
    // Get toast interface
    const toast = useToast()

    // Use toast
    toast("Hello world!") // Simple content
    toast.success("Toast success message", { // You can also use the specific types
      timeout: 5000
    })
    toast.error("Toast error message")
    toast.warning('Toast warning message')
    toast.info('Toast info message')

    return {}
  }
}
```

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

### Manually Provide Toast Interface to Subtree

Source: https://github.com/maronato/vue-toastification/blob/next/README.md

Illustrates how to create and provide a new Vue Toastification instance to a specific component subtree using `provideToast`. Parent components use `provideToast` in their setup, making the toast instance available to child components which can then access it via `useToast`. This method is useful for localized toast management.

```html
<!-- Parent component -->
<script>
  import { provideToast } from "vue-toastification";

  export default {
    setup() {
      provideToast({
        timeout: 1000
      })
    }
  }
</script>

<!-- Child components -->
<script>
  import { useToast } from "vue-toastification";

  export default {
    setup() {
      const toast = useToast()
    }
  }
</script>
```

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

### Vue 3 Composition API Toast Notification with TypeScript

Source: https://context7.com/maronato/vue-toastification/llms.txt

Demonstrates a complete Vue 3 component using the Composition API with full TypeScript type safety. The setup function creates a reusable showNotification method that accepts typed notification data and applies customizable toast options including position, timeout, and interaction behaviors.

```typescript
import { defineComponent } from "vue";
import { useToast } from "vue-toastification";
import {
  ToastInterface,
  PluginOptions,
  ToastOptions,
  TYPE,
  POSITION
} from "vue-toastification";

interface NotificationData {
  title: string;
  message: string;
  type: TYPE;
}

export default defineComponent({
  setup() {
    const toast: ToastInterface = useToast();

    const showNotification = (data: NotificationData): void => {
      const options: ToastOptions = {
        type: data.type,
        position: POSITION.TOP_RIGHT,
        timeout: 5000,
        closeOnClick: true,
        pauseOnHover: true,
        draggable: true
      };

      toast(`${data.title}: ${data.message}`, options);
    };

    return { showNotification };
  }
});
```

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

### Use Existing HTML Element as Toast Container (JavaScript)

Source: https://github.com/maronato/vue-toastification/blob/next/README.md

Demonstrates how to specify an existing HTML element as the container for toasts using the `container` option. This example shows selecting an element with the ID `my-container` and passing it directly or via a function to the plugin options.

```javascript
// App.js

const myContainer = document.querySelector('#my-container');

app.use(Toast, { container: myContainer });
```

```javascript
// App.js

const getContainer = () => document.querySelector('#my-container');

app.use(Toast, { container: getContainer });
```

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

### Use Async Node as Toast Container with MutationObserver (JavaScript)

Source: https://github.com/maronato/vue-toastification/blob/next/README.md

Provides an example of using an asynchronously available HTML element as the toast container. It employs the `MutationObserver` API to detect when an element with the ID `toast-container` is added to the DOM, resolving the promise with the found element.

```javascript
// App.js

function asyncGetContainer() {
  return new Promise(resolve => {
    const observer = new MutationObserver(function(mutations, me) {
      const myContainer = document.getElementById("toast-container");
      if (myContainer) {
        me.disconnect();
        resolve(myContainer);
      }
    });
    observer.observe(document, {
      childList: true,
      subtree: true
    });
  });
}

app.use(Toast, { container: asyncGetContainer });
```

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

### Override SCSS Variables for Styling

Source: https://github.com/maronato/vue-toastification/blob/next/README.md

Illustrates how to override the default SCSS variables of Vue Toastification to customize its appearance. This requires a build setup that supports SCSS pre-processing.

```scss
// Import Vue Toastification and override variables
$toast-border-radius: 10px;
$toast-background-color: #333;
$toast-text-color: #fff;

@import "vue-toastification/src/scss/index.scss";

```

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

### Enable Right-to-Left (RTL) Support (Vue)

Source: https://context7.com/maronato/vue-toastification/llms.txt

Explains how to enable Right-to-Left (RTL) layout support for toast content. This can be configured on a per-toast basis using the `rtl: true` option or globally for all toasts by passing the option during plugin installation.

```javascript
import { useToast } from "vue-toastification";

const toast = useToast();

// Per-toast RTL
ttoast.success("نجح العملية!", { rtl: true });

// Global RTL
app.use(Toast, {
  rtl: true
});
```

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

### Mount Toasts to Custom DOM Elements (Vue)

Source: https://context7.com/maronato/vue-toastification/llms.txt

Shows how to mount toast notifications to custom DOM elements instead of the default container. This includes examples for using an existing element, a function that returns an element, and an asynchronous function that waits for the element to exist.

```javascript
import { createApp } from "vue";
import Toast from "vue-toastification";

// Mount to existing element
const customContainer = document.querySelector("#toast-container");

createApp(App).use(Toast, {
  container: customContainer
});

// Using function that returns container
createApp(App).use(Toast, {
  container: () => document.querySelector("#notifications")
});

// Async container (waits for element to exist)
function asyncGetContainer() {
  return new Promise(resolve => {
    const observer = new MutationObserver((mutations, me) => {
      const container = document.getElementById("dynamic-container");
      if (container) {
        me.disconnect();
        resolve(container);
      }
    });
    observer.observe(document, {
      childList: true,
      subtree: true
    });
  });
}

createApp(App).use(Toast, {
  container: asyncGetContainer
});
```

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

### Configure Accessibility Options (Vue)

Source: https://context7.com/maronato/vue-toastification/llms.txt

Details how to configure ARIA attributes for improved accessibility with screen readers. Custom accessibility options, including `toastRole` and `closeButtonLabel`, can be set per-toast or globally during plugin setup.

```javascript
import { useToast } from "vue-toastification";

const toast = useToast();

// Custom accessibility options
ttoast("Important alert", {
  accessibility: {
    toastRole: "alert",
    closeButtonLabel: "Close notification"
  }
});

// Global accessibility config
app.use(Toast, {
  accessibility: {
    toastRole: "status",
    closeButtonLabel: "Dismiss"
  }
});
```

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

### Disable Toast Icons Globally and Per Toast

Source: https://github.com/maronato/vue-toastification/blob/next/README.md

Shows how to disable toast icons in Vue Toastification. The first example disables icons for all toasts by default during plugin registration, while the second demonstrates disabling the icon for a single toast instance.

```javascript
// Disable every toast's icon by default
app.use(Toast, {
    icon: false
});

// Disable icons per toast
toast('No icon!', { icon: false });
```

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

### Manually Provide Interfaces

Source: https://github.com/maronato/vue-toastification/blob/next/README.md

Details the process of manually providing the toast interface, often used when you need more control over instance creation or when not using the global `app.use` method.

```javascript
// Assume 'toast' is an instance created elsewhere, e.g., new Toast({...})

// Using provide/inject in Vue 3
// In parent component or setup function:
// import { provide } from 'vue';
// import { useToast } from 'vue-toastification';
// const toast = useToast(); // Or create a new instance
// provide('myToastService', toast);

// In child component:
// import { inject } from 'vue';
// const toast = inject('myToastService');
// toast('Manual injection works');

```

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

### Provide Interfaces to Existing Instances

Source: https://github.com/maronato/vue-toastification/blob/next/README.md

Explains how to make an existing Vue Toastification instance available throughout the application, typically via Vue's provide/inject API or by mounting it to the app instance.

```javascript
// In your main.js or a setup file
import Toast, { POSITION } from "vue-toastification"

const toastInstance = new Toast({
  position: POSITION.BOTTOM_LEFT
})

// Provide the instance to the app
app.provide('toast', toastInstance)

// In a component:
// import { inject } from 'vue'
// const toast = inject('toast')
// toast.info('Message injected')

```

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

### Hide Close Button in Toast Notifications

Source: https://github.com/maronato/vue-toastification/blob/next/README.md

Shows how to disable the close button on toast notifications by setting the closeButton option to false. This can be applied when calling the toast function or during plugin setup.

```javascript
toast('No close button', {
  closeButton: false
});
```

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

### Create New Toastification Instances

Source: https://github.com/maronato/vue-toastification/blob/next/README.md

Shows how to create separate, independent instances of Vue Toastification. This is useful for managing different sets of toasts with distinct configurations or in complex application structures.

```javascript
import Toast from "vue-toastification"

// Create a new instance with custom options
const customToastInstance = new Toast({
  position: "TOP_CENTER",
  timeout: 3000
})

// You can then use customToastInstance to manage toasts
// customToastInstance.success("Message via custom instance")

// To use it within a component's setup function:
// import { getCurrentInstance } from 'vue'
// const { proxy } = getCurrentInstance()
// const customToast = proxy.customToastInstance // Assuming it was provided globally

```

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

### Update from v1.x to v2 (Vue 3)

Source: https://github.com/maronato/vue-toastification/blob/next/README.md

Guidance on updating from Vue Toastification v1.x to v2, specifically addressing breaking changes and updated usage patterns required for Vue 3 compatibility.

```markdown
## Updating from v1.x

Vue Toastification v2 is **only** compatible with Vue 3.

If you are using Vue 2, check out [Vue Toastification v1](https://github.com/Maronato/vue-toastification/tree/master).

### Plugin registration

```javascript
// Vue 2
// import Vue from 'vue';
// import Toast from 'vue-toastification';
// import 'vue-toastification/dist/index.css';
// Vue.use(Toast);

// Vue 3
import { createApp } from 'vue'
import App from './App.vue'
import Toast from "vue-toastification"
import 'vue-toastification/dist/index.css'

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

### Creating toasts

```javascript
// Vue 2
// this.$toast('message');

// Vue 3
import { useToast } from "vue-toastification"

const toast = useToast()
// or
t-oast('message') // if registered globally and imported
```
```

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

### Register Vue Toastification Plugin (main.js)

Source: https://github.com/maronato/vue-toastification/blob/next/README.md

Demonstrates how to register the Vue Toastification plugin globally in your main application entry point (e.g., main.js). This makes toast functionalities available throughout your Vue 3 application.

```javascript
import { createApp } from 'vue'
import App from './App.vue'
import Toast, { POSITION } from "vue-toastification"

// Import the CSS
import 'vue-toastification/dist/index.css'

const app = createApp(App)

app.use(Toast, {
  // Set default options
  position: POSITION.BOTTOM_RIGHT
})

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

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

### Use Existing Toast Instance with useToast

Source: https://github.com/maronato/vue-toastification/blob/next/README.md

Shows how to obtain an interface to an existing Vue Toastification instance from another file using `useToast`. This is useful for sharing toast instances across modules or components defined in separate files. It requires importing `useToast` and the `eventBus` from its source file.

```javascript
import { useToast } from "vue-toastification";
import { myEventBus } from "./otherFile.js";

const toast = useToast(myEventBus);
```

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

### Create Reusable Toast Interfaces with EventBus

Source: https://github.com/maronato/vue-toastification/blob/next/README.md

Demonstrates creating multiple interfaces to a single Vue Toastification instance using the EventBus. This allows for shared toast management across different parts of an application. It requires importing `createToastInterface` and `EventBus` from 'vue-toastification'.

```javascript
import { createToastInterface, EventBus } from "vue-toastification";

// Create a new event bus
const myEventBus = new EventBus();

// Generate the first interface, passing your eventBus as a parameter
const toast = createToastInterface({
  timeout: 1000,
  eventBus: myEventBus,
});

// Later, generate another interface to the same instance
const otherToast = createToastInterface(myEventBus);
```

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

### Create Multiple Independent Toast Instances

Source: https://context7.com/maronato/vue-toastification/llms.txt

Demonstrates how to create and manage multiple independent toast instances using `createToastInterface`. Each instance can have its own configuration and control its own set of toasts. It also shows how to share an event bus between instances for synchronized control.

```javascript
import { createToastInterface, EventBus } from "vue-toastification";

// Create independent toast instance
const adminToast = createToastInterface({
  position: POSITION.TOP_RIGHT,
  timeout: 3000,
  containerClassName: "admin-toasts"
});

const userToast = createToastInterface({
  position: POSITION.BOTTOM_LEFT,
  timeout: 5000,
  containerClassName: "user-toasts"
});

adminToast.success("Admin notification");
userToast.info("User notification");

// Share event bus between instances
const sharedEventBus = new EventBus();

const toast1 = createToastInterface({
  eventBus: sharedEventBus,
  timeout: 3000
});

const toast2 = createToastInterface(sharedEventBus);

// Both interfaces control the same toasts
const id = toast1("Shared toast");
ttoast2.dismiss(id);
```

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

### Preset Default Toast Options per Type

Source: https://github.com/maronato/vue-toastification/blob/next/README.md

Shows how to set default options specifically for each toast type (e.g., success, error, info). This avoids repetition when configuring common toast behaviors.

```javascript
import { useToast } from "vue-toastification"

const toast = useToast()

// Default options applied globally when registering the plugin
app.use(Toast, {
  toastDefaults: {
    // Defaults for all types
    timeout: 5000,
    // Default for success toasts
    success: {
      position: POSITION.TOP_CENTER,
      timeout: 7000
    },
    // Default for error toasts
    error: {
      timeout: 0, // Non-dismissible by default
      showCloseButtonOnHover: true
    }
  }
})

// Usage:
t-oast.success("This success toast will last 7 seconds")
t-oast.error("This error toast will not auto-dismiss")

```

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

### Use Vue Toastification Outside Vue Components

Source: https://github.com/maronato/vue-toastification/blob/next/README.md

Shows how to use the `useToast` function to create toasts when working outside of Vue components, such as within Vuex stores. This relies on the global event bus created during plugin registration.

```javascript
// store.js
import { createStore } from 'vuex'
import { useToast } from 'vue-toastification'

const toast = useToast()

const store = createStore({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
      toast.success("incremented!")
    }
  }
})
```

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

### Create Independent Toast Interface (JavaScript)

Source: https://github.com/maronato/vue-toastification/blob/next/README.md

Shows how to create a separate, independent toast interface using `createToastInterface`. This allows for managing multiple sets of toasts distinctly. The function can also accept standard plugin options to configure the new interface.

```javascript
import { createToastInterface } from "vue-toastification";

const myInterface = createToastInterface();
```

```javascript
import { createToastInterface } from "vue-toastification";

const myInterface = createToastInterface({
  timeout: 1000
});
```

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

### Preset Default Toast Options Per Toast Type

Source: https://github.com/maronato/vue-toastification/blob/next/README.md

Shows how to configure default options for different toast types (ERROR, SUCCESS, etc.) during plugin registration. This approach reduces code repetition by centralizing toast behavior configuration for each type.

```javascript
import Toast, { TYPE } from "vue-toastification";

const options = {
    toastDefaults: {
        // ToastOptions object for each type of toast
        [TYPE.ERROR]: {
            timeout: 10000,
            closeButton: false,
        },
        [TYPE.SUCCESS]: {
            timeout: 3000,
            hideProgressBar: true,
        }    
    }
};

app.use(Toast, options);
```

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

### Utilize Different Toast Types

Source: https://github.com/maronato/vue-toastification/blob/next/README.md

Demonstrates how to display toasts with different semantic types such as info, success, error, and warning. This can be done by calling specific methods like `toast.success()` or by programmatically setting the type using `TYPE` constants.

```javascript
toast("Default toast");
tost.info("Info toast");
tost.success("Success toast");
tost.error("Error toast");
tost.warning("Warning toast");

// You can also set the type programmatically when calling the default toast
import { TYPE } from "vue-toastification";

tost("Also a success toast", {
    type: TYPE.SUCCESS  // or "success", "error", "default", "info" and "warning"
});
```

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

### Custom Fade Transition CSS for Vue Toastification

Source: https://github.com/maronato/vue-toastification/blob/next/README.md

Provides CSS keyframe animations and transition classes ('fade-enter-active', 'fade-leave-active', 'fade-move') to create a custom fade transition effect for Vue Toastification. This requires implementing specific animation and transition properties.

```css
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.fade-enter-active {
  animation-name: fadeIn;
  animation-duration: 750ms;
  animation-fill-mode: both;
}
.fade-leave-active {
  animation-name: fadeOut;
  animation-duration: 750ms;
  animation-fill-mode: both;
}
.fade-move {
  transition-timing-function: ease-in-out;
  transition-property: all;
  transition-duration: 400ms;
}
```

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

### Define Custom Transitions for Toasts (JavaScript & CSS)

Source: https://context7.com/maronato/vue-toastification/llms.txt

Illustrates how to implement custom animations for toast appearances in vue-toastification. This includes using built-in transitions, applying named custom transitions, and defining custom enter, leave, and move transition classes with CSS keyframes.

```javascript
import { useToast } from "vue-toastification";

const toast = useToast();

// Built-in transitions
app.use(Toast, {
  transition: "Vue-Toastification__bounce" // default
});

app.use(Toast, {
  transition: "Vue-Toastification__fade"
});

app.use(Toast, {
  transition: "Vue-Toastification__slideBlurred"
});

// Named custom transition
app.use(Toast, {
  transition: "my-custom-fade"
});

// Custom transition classes
app.use(Toast, {
  transition: {
    enter: "my-enter-active",
    leave: "my-leave-active",
    move: "my-move"
  }
});
```

```css
/* Custom transition CSS */
@keyframes customFadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.my-enter-active {
  animation: customFadeIn 0.5s ease-out;
}

.my-leave-active {
  animation: customFadeIn 0.5s ease-in reverse;
}

.my-move {
  transition: all 0.4s ease;
}
```

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

### Use Mixed Custom Transition Classes in Vue Toastification

Source: https://github.com/maronato/vue-toastification/blob/next/README.md

Illustrates configuring Vue Toastification with a mix of custom transition classes for entering and moving animations ('fade-enter-active', 'fade-move'), while using the default 'bounce' transition for leaving animations. This requires specifying all three properties if custom classes are used.

```javascript
app.use(Toast, {
    transition: {
        enter: "fade-enter-active",
        leave: "Vue-Toastification__bounce-leave-active",
        move: "fade-move"
    }
});
```

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

### Updating Default Options

Source: https://github.com/maronato/vue-toastification/blob/next/README.md

Demonstrates how to update the globally configured default toast options after the plugin has been registered. This allows for dynamic changes to default behaviors.

```javascript
import { useToast } from "vue-toastification"

const toast = useToast()

// Access and update defaults (example, exact API might vary based on version)
t-oast.defaults.timeout = 10000
t-oast.defaults.position = POSITION.TOP_LEFT

// You might need to re-register or use a specific method provided by the library
// Consult the library's documentation for the most accurate way to update defaults dynamically.

```

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

### Render a JSX Component as Toast Content

Source: https://github.com/maronato/vue-toastification/blob/next/README.md

Demonstrates rendering a JSX component within a toast notification. This is useful for developers who prefer JSX syntax for their UI elements.

```javascript
import { useToast } from "vue-toastification"

const toast = useToast()

t-oast({
  component: {
    render() {
      return (
        <div>
          <h1>Custom JSX Toast</h1>
          <p>This toast uses JSX.</p>
        </div>
      )
    }
  },
  // Optional: Add props if your JSX component expects them
  // props: { ... }
})
```

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

### Share App Context with Toast Components (Vue)

Source: https://context7.com/maronato/vue-toastification/llms.txt

Demonstrates how to enable sharing of the Vue application's context with toast components using `shareAppContext: true`. This allows toast components to access global components, plugins like router and i18n, and other app-level features.

```javascript
import { createApp } from "vue";
import Toast from "vue-toastification";
import { createRouter } from "vue-router";
import { createI18n } from "vue-i18n";

const app = createApp(App);
const router = createRouter({/* ... */});
const i18n = createI18n({/* ... */});

app.use(router);
app.use(i18n);

// Share app context with toasts
app.use(Toast, {
  shareAppContext: true
});

// Now toast components can use router, i18n, etc.
const ToastWithRouter = {
  template: `
    <div>
      <p>{{ $t('message.success') }}</p>
      <router-link to="/details">View Details</router-link>
    </div>
  `
};

const toast = useToast();
ttoast(ToastWithRouter);
```

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

### Using Existing Nodes as Toast Containers

Source: https://github.com/maronato/vue-toastification/blob/next/README.md

Explains how to specify an existing DOM element as the container for toast notifications, instead of letting the library create a new one. Useful for integrating toasts into specific parts of the UI.

```javascript
import { useToast } from "vue-toastification"

// Assuming you have a div with id='my-toast-container' in your HTML
const options = {
  containerSelector: '#my-toast-container'
}

// When registering the plugin globally
app.use(Toast, options)

// Or when creating a new instance
// const toastInstance = new Toast(options)

```

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

### Manage Toasts Programmatically with IDs (JavaScript)

Source: https://context7.com/maronato/vue-toastification/llms.txt

Demonstrates how to programmatically manage toasts using unique IDs. This includes creating toasts, updating their content and options, dismissing specific toasts, assigning custom IDs, clearing all toasts, and updating or creating toasts conditionally. It relies on the `useToast` hook from 'vue-toastification'.

```javascript
import { useToast } from "vue-toastification";

const toast = useToast();

// Get toast ID on creation
const toastId = toast("Processing your request...", {
  timeout: false
});

// Update toast content and options
setTimeout(() => {
  toast.update(toastId, {
    content: "Processing complete!",
    options: {
      type: "success",
      timeout: 3000
    }
  });
}, 2000);

// Dismiss specific toast
setTimeout(() => {
  toast.dismiss(toastId);
}, 5000);

// Custom ID assignment
toa<ctrl62>
    console.log("Toast clicked!");
    // Optionally close the toast
    closeToast();
  },
  closeOnClick: false
});

// onClose callback
toa.success("Operation complete", {
  onClose: () => {
    console.log("Toast was closed");
    // Perform cleanup or trigger next action
  },
  timeout: 3000
});

// Combined callbacks with custom component
toa({
  component: MyComponent,
  props: { data: someData },
  listeners: {
    "close-toast": () => console.log("Custom close"),
    submit: (data) => handleSubmit(data),
    cancel: () => console.log("Action cancelled")
  }
}, {
  onClick: (close) => {
    console.log("Container clicked");
  },
  onClose: () => {
    console.log("Toast closed");
  }
});
```

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

### Configure Custom Icons with FontAwesome and Material Icons

Source: https://github.com/maronato/vue-toastification/blob/next/README.md

Demonstrates two methods for adding custom icons to toast notifications. The first uses FontAwesome icon classes as a string, while the second uses Material Icons with an object configuration specifying iconClass, iconChildren, and iconTag properties. Both approaches support different icon library formats.

```javascript
// Using Font Awesome icons
toast('Icons are awesome!', { icon: 'fas fa-rocket' });

// Using Material Icons
toast('Material icons!', {
  icon: {
    iconClass: 'material-icons',  // Optional
    iconChildren: 'check_circle', // Optional
    iconTag: 'span'               // Optional
  }
});
```

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

### Update Default Options at Runtime

Source: https://github.com/maronato/vue-toastification/blob/next/README.md

Provides a method to modify default toast options after plugin registration. Performs a shallow update on default options, affecting all subsequently created toasts globally. Useful for options like transition and maxToasts that are only available during plugin registration.

```javascript
const update = {
    transition: "my-transition"
};

toast.updateDefaults(update);
```

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

### Custom Toast Container Classes

Source: https://github.com/maronato/vue-toastification/blob/next/README.md

Shows how to apply custom CSS classes to the main container that holds all the toast notifications. This is useful for styling the overall toast area.

```javascript
import { useToast } from "vue-toastification"

const toast = useToast()

// When registering the plugin globally
app.use(Toast, {
  containerClassName: "my-custom-toast-container"
})

// Or when creating a new instance
const toastInstance = new Toast({ containerClassName: "my-custom-toast-container" })

```

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

### Create Basic Toast Notifications with Different Types

Source: https://context7.com/maronato/vue-toastification/llms.txt

Display simple text toasts using the useToast() composable with support for default, success, error, warning, and info types. Configure individual toast behavior including timeout, persistence, and custom callbacks within Vue components.

```javascript
import { defineComponent } from "vue";
import { useToast } from "vue-toastification";

export default defineComponent({
  setup() {
    const toast = useToast();

    // Default toast
    toast("This is a default toast message");

    // Success toast
    toast.success("Operation completed successfully!");

    // Error toast
    toast.error("An error occurred while processing your request");

    // Warning toast
    toast.warning("Please review your input before submitting");

    // Info toast
    toast.info("New updates are available");

    // Toast with custom timeout
    toast("This will disappear in 2 seconds", { timeout: 2000 });

    // Persistent toast (manual dismiss only)
    toast("This toast stays until manually closed", { timeout: false });

    return { toast };
  },

  methods: {
    handleClick() {
      this.toast("Button was clicked!");
    }
  }
});
```

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

### Register Vue Toastification Plugin with Options

Source: https://context7.com/maronato/vue-toastification/llms.txt

Initialize Vue Toastification globally in your Vue 3 application using app.use() with comprehensive configuration options. This sets up the plugin with default behaviors for position, timeout, animations, and user interactions like drag-to-dismiss and click-to-close functionality.

```javascript
import { createApp } from "vue";
import Toast, { PluginOptions, POSITION } from "vue-toastification";
import "vue-toastification/dist/index.css";

const app = createApp(App);

const options = {
  position: POSITION.TOP_RIGHT,
  timeout: 5000,
  closeOnClick: true,
  pauseOnFocusLoss: true,
  pauseOnHover: true,
  draggable: true,
  draggablePercent: 0.6,
  showCloseButtonOnHover: false,
  hideProgressBar: false,
  closeButton: "button",
  icon: true,
  rtl: false,
  transition: "Vue-Toastification__bounce",
  maxToasts: 20,
  newestOnTop: true
};

app.use(Toast, options);
```

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

### Render Component with Props and Listeners

Source: https://github.com/maronato/vue-toastification/blob/next/README.md

Pass custom components or JSX templates to toasts along with specific props and event listeners. Props are passed directly, and listeners are attached as event handlers. Note that passed props are not reactive.

```javascript
const content = {
    // Your component or JSX template
    component: MyComponent,

    // Props are just regular props, but these won't be reactive
    props: {
        myProp: "abc",
        otherProp: 123
    },

    // Listeners will listen to and execute on event emission
    listeners: {
        click: () => console.log("Clicked!"),
        myEvent: myEventHandler
    }
};


tost(content);
```

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

### Using Custom Icons in Toasts

Source: https://github.com/maronato/vue-toastification/blob/next/README.md

Shows how to replace default toast icons with custom SVG or image icons. This enhances branding and visual distinctiveness.

```javascript
import { useToast } from "vue-toastification"

const toast = useToast()

// Using a URL for the icon
t-oast("Toast with custom icon URL", {
  icon: "https://example.com/path/to/your/custom-icon.svg"
})

// Using a component as an icon (more advanced, requires setup)
// toast({
//   component: MyIconComponent,
//   props: { ... },
//   icon: true // Or specify icon component directly if supported in options
// })

```

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

### Configure Toast Position Globally and Per Toast

Source: https://github.com/maronato/vue-toastification/blob/next/README.md

Explains how to set the default position for all toasts globally during plugin registration or specify a position for individual toasts. Supported positions include top-right, top-center, top-left, bottom-right, bottom-center, and bottom-left.

```javascript
import Toast, { POSITION } from "vue-toastification";

app.use(Toast, {
    // Setting the global default position
    position: POSITION.TOP_LEFT
});


// Or set it per toast
tost("I'm a toast", { position: POSITION.BOTTOM_LEFT });
```

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

### Enable Right-to-Left (RTL) Support

Source: https://github.com/maronato/vue-toastification/blob/next/README.md

Configuration option to enable right-to-left text direction and layout for toast notifications, essential for languages like Arabic or Hebrew.

```javascript
import { useToast } from "vue-toastification"

const toast = useToast()

t-oast("This toast is RTL", {
  rtl: true
})

```

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

### Use Default Bounce Transition in Vue Toastification

Source: https://github.com/maronato/vue-toastification/blob/next/README.md

Demonstrates how to configure Vue Toastification to use the built-in 'bounce' transition effect upon plugin registration. This sets the maximum number of toasts and the order in which new toasts appear.

```javascript
app.use(Toast, {
  transition: "Vue-Toastification__bounce",
  maxToasts: 20,
  newestOnTop: true
});
```

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

### Provide Toast to Component Subtree (Vue)

Source: https://context7.com/maronato/vue-toastification/llms.txt

Illustrates how to provide a toast instance to a specific component subtree using `provideToast` in a parent component and `useToast` in a child component. This allows for isolated toast management within parts of your application.

```javascript
// ParentComponent.vue
import { defineComponent } from "vue";
import { provideToast } from "vue-toastification";

export default defineComponent({
  setup() {
    // Provide toast to child components only
    provideToast({
      position: POSITION.TOP_CENTER,
      timeout: 2000,
      maxToasts: 5
    });
  }
});

// ChildComponent.vue
import { defineComponent } from "vue";
import { useToast } from "vue-toastification";

export default defineComponent({
  setup() {
    // Uses parent-provided toast instance
    const toast = useToast();

    const showNotification = () => {
      toast.success("Child component notification");
    };

    return { showNotification };
  }
});
```

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

### Enable right-to-left layout support in Vue Toastification

Source: https://github.com/maronato/vue-toastification/blob/next/README.md

Configure right-to-left text direction for toasts either individually per toast or globally through plugin options. Use the rtl boolean property to enable RTL layout rendering.

```javascript
// Set RTL on individual toasts
toast.success("!detrevnI", { rtl: true });

// Or globally
app.use(Toast, {
  rtl: true
});
```

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

### Render a Custom Component as Toast Content

Source: https://github.com/maronato/vue-toastification/blob/next/README.md

This snippet illustrates how to use a custom Vue component as the content for a toast notification. It allows for rich, interactive toast messages.

```javascript
import { useToast } from "vue-toastification"
import MyToastComponent from './MyToastComponent.vue'

const toast = useToast()

t-oast({
  component: MyToastComponent,
  props: {
    title: "Custom Component Toast",
    message: "This toast uses a custom component."
  }
})
```

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

### Enable App Context Sharing for Toasts

Source: https://github.com/maronato/vue-toastification/blob/next/README.md

Configure Vue Toastification to share the application context with custom toast components. This allows toasts to access global components, state, directives, mixins, and plugin data.

```typescript
app.use(Toast, {
    shareAppContext: true,
});
```

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

### Apply Custom Classes to Close Button

Source: https://github.com/maronato/vue-toastification/blob/next/README.md

Demonstrates how to add custom CSS classes to the close button element. Accepts either a single string or an array of strings for multiple class names.

```javascript
toast('With custom classes', {
  closeButtonClassName: "my-button-class"
});
```

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

### Vue Toastification Plugin Registration with TypeScript

Source: https://context7.com/maronato/vue-toastification/llms.txt

Shows how to register the vue-toastification plugin globally in a Vue 3 application with typed PluginOptions. Configures default toast behavior including position, timeout, maximum concurrent toasts, and application context sharing for consistent notification handling across the entire app.

```typescript
import { createApp } from "vue";
import Toast, { PluginOptions } from "vue-toastification";

const options: PluginOptions = {
  position: POSITION.BOTTOM_RIGHT,
  timeout: 3000,
  maxToasts: 10,
  shareAppContext: true
};

createApp(App).use(Toast, options);
```

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

### Positioning a Toast Notification

Source: https://github.com/maronato/vue-toastification/blob/next/README.md

Shows how to specify the position of a toast notification. Vue Toastification supports various predefined positions like BOTTOM_RIGHT, TOP_LEFT, etc., and allows custom positioning.

```javascript
import { useToast, POSITION } from "vue-toastification"

const toast = useToast()

t-oast("I'm at the top left", {
  position: POSITION.TOP_LEFT,
  timeout: 5000,
  closeOnClick: true,
  pauseOnHover: true,
  draggable: true,
  draggablePercent: 0.6,
  showCloseButtonOnHover: false,
  hideProgressBar: false,
  closeButton: "button",
  icon: true,
  rtl: false
})

t-oast("I'm at the bottom", {
  position: POSITION.BOTTOM_CENTER,
  timeout: 5000,
  closeOnClick: true,
  pauseOnHover: true
})

t-oast("I'm at the top right", {
  position: POSITION.TOP_RIGHT,
  timeout: 5000,
  closeOnClick: true,
  pauseOnHover: true
})
```

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

### Use Named Custom Fade Transition in Vue Toastification

Source: https://github.com/maronato/vue-toastification/blob/next/README.md

Configures Vue Toastification to use a custom named transition, 'fade', by passing the transition name during plugin registration. This assumes the corresponding CSS for the 'fade' transition is defined elsewhere.

```javascript
app.use(Toast, {
    transition: "fade"
});
```

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

### Register Vue Toastification Plugin

Source: https://github.com/maronato/vue-toastification/blob/next/README.md

Registers the Vue Toastification plugin with the Vue application. This can be done with default options or specific TypeScript types for options.

```javascript
import { createApp } from "vue";
import Toast from "vue-toastification";
// Import the CSS or use your own!
import "vue-toastification/dist/index.css";

const app = createApp(...);

const options = {
    // You can set your default options here
};

app.use(Toast, options);
```

```javascript
import { createApp } from "vue";
import Toast, { PluginOptions } from "vue-toastification";
// Import the CSS or use your own!
import "vue-toastification/dist/index.css";

const app = createApp(...);

const options: PluginOptions = {
    // You can set your default options here
};

app.use(Toast, options);
```

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

### Use Toasts Outside Components in Vuex Store in Vue Toastification

Source: https://context7.com/maronato/vue-toastification/llms.txt

Integrate vue-toastification with Vuex store to display notifications during async actions and mutations. Import useToast hook in store module to show success, error, and info messages from login, logout, and other state-changing operations.

```javascript
// store.js
import { createStore } from "vuex";
import { useToast } from "vue-toastification";

const toast = useToast();

export default createStore({
  state: {
    user: null
  },
  mutations: {
    setUser(state, user) {
      state.user = user;
    }
  },
  actions: {
    async login({ commit }, credentials) {
      try {
        const response = await api.login(credentials);
        commit("setUser", response.data);
        toast.success("Login successful!");
        return response;
      } catch (error) {
        toast.error(`Login failed: ${error.message}`);
        throw error;
      }
    },
    logout({ commit }) {
      commit("setUser", null);
      toast.info("You have been logged out");
    }
  }
});
```

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

### Configure custom container classes in Vue Toastification plugin

Source: https://github.com/maronato/vue-toastification/blob/next/README.md

Add custom CSS classes to toast containers (the 6 divs that hold toasts at different positions) during plugin initialization. Container classes can be a single string or array of strings and affect styling across all six toast positions.

```javascript
app.use(Toast, {
    // Can be either a string or an array of strings
    containerClassName: "my-container-class",
});
```

```css
<style>
/* When setting CSS, remember that priority increases with specificity, so don't forget to select the existing classes as well */

    /* This will only affect the top-right container */
    .Vue-Toastification__container.top-right.my-container-class{
        top: 10em;
    }

    /* This will affect all 6 containers */
    .Vue-Toastification__container.my-container-class{
        position: relative;
    }
</style>
```

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

### Configure Default Options Per Toast Type in Vue Toastification

Source: https://context7.com/maronato/vue-toastification/llms.txt

Set type-specific default options for ERROR, SUCCESS, INFO, and WARNING toasts during plugin initialization. Allows independent configuration of timeout, visibility, icons, and position for each toast type with automatic inheritance when toasts are created.

```javascript
import { createApp } from "vue";
import Toast, { TYPE } from "vue-toastification";

const app = createApp(App);

app.use(Toast, {
  toastDefaults: {
    [TYPE.ERROR]: {
      timeout: 10000,
      closeButton: false,
      hideProgressBar: false,
      icon: "fas fa-exclamation-circle"
    },
    [TYPE.SUCCESS]: {
      timeout: 3000,
      hideProgressBar: true,
      icon: "fas fa-check"
    },
    [TYPE.INFO]: {
      timeout: 5000,
      position: POSITION.TOP_CENTER
    },
    [TYPE.WARNING]: {
      timeout: 7000,
      showCloseButtonOnHover: true
    }
  }
});

// Error toasts will now use 10s timeout by default
const toast = useToast();
toast.error("This stays for 10 seconds");
```

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

### Render Custom Vue Component in Toast

Source: https://github.com/maronato/vue-toastification/blob/next/README.md

Render custom Vue components within toast notifications. The `toastId` prop and `close-toast` event listener are automatically provided. Import the component and pass it directly to the `toast` function.

```javascript
import MyComponent from "./MyComponent.vue";

tost(MyComponent);
```

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

### Filter Toasts Before Creation and Rendering in Vue Toastification

Source: https://context7.com/maronato/vue-toastification/llms.txt

Implement filtering logic to prevent duplicate toasts and control which toasts are displayed. Supports filtering before creation to discard duplicates and filtering rendered toasts by type or content. Use with createApp plugin configuration.

```javascript
import { createApp } from "vue";
import Toast from "vue-toastification";

const app = createApp(App);

// Prevent duplicate toasts of same type
const filterBeforeCreate = (toast, toasts) => {
  if (toasts.filter(t => t.type === toast.type).length !== 0) {
    return false; // Discard duplicate
  }
  return toast;
};

// Enqueue toasts instead of discarding
const filterToasts = (toasts) => {
  const types = {};
  return toasts.reduce((aggToasts, toast) => {
    if (!types[toast.type]) {
      aggToasts.push(toast);
      types[toast.type] = true;
    }
    return aggToasts;
  }, []);
};

// Limit toasts by content
const filterByContent = (toast, toasts) => {
  const isDuplicate = toasts.some(t =>
    t.content === toast.content &&
    t.type === toast.type
  );
  return isDuplicate ? false : toast;
};

app.use(Toast, {
  filterBeforeCreate,
  filterToasts
});
```

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

### Use Custom Component as Close Button

Source: https://github.com/maronato/vue-toastification/blob/next/README.md

Allows replacement of the standard close button with a custom Vue component. Accepts Single File Components, JSX components, or HTML tag names for maximum flexibility.

```javascript
toast('With a custom close component', {
  closeButton: MyComponent
});
```