@foxyimg/toaster

Vue component for displaying toasts.

Usage

Install package:

# ✨ Auto-detect
npx nypm install @foxyimg/toaster

# npm
npm install @foxyimg/toaster

# yarn
yarn add @foxyimg/toaster

# pnpm
pnpm install @foxyimg/toaster

# bun
bun install @foxyimg/toaster

In tailwind.config.js add the following to the content array:

export default {
	content: [
		"./node_modules/@foxyimg/toaster/dist/components/**/*.{vue,js,ts,jsx,tsx}",
	],
}

In app.vue:

<script setup lang="ts">
  import {Toaster} from "@foxyimg/toaster";
</script>
<template>
  <div>
    <!-- Your main components -->
    <Toaster />
  </div>
</template>

To show a toast:

<script setup lang="ts">
  import {useToastStore} from "@foxyimg/toaster";
  const { toast } = useToastStore();

  function showToast() {
    toast('info', 'Hello World', 'This is a toast');
  }
</script>
<template>
  <button type="button" @click="showToast">Show Toast</button>
</template>

If using with Nuxt, make sure to wrap the <Toaster /> component in a <ClientOnly> component.

License

Published under the MIT license.