vue-toastfic

vue-toastfic is a simple and customizable toast notification library for Vue.js and Nuxt.js projects. Follow the instructions below to integrate and use it in your application.

Prerequisites

Before installing vue-toastfic, ensure you have the following installed in your development environment:

• Node.js (version v18.0.0 or later)
• Vue.js (version v3.0.0 or later)

01. Installation

Install vue-toastfic using your preferred package manager:

npm install vue-toastfic
#or
yarn add vue-toastfic
#or
pnpm install vue-toastfic
#or
bun add vue-toastfic

02. Import the CSS file

You need to import the style file into main.ts or in nuxt.config.ts if you are in Nuxt:

#main.ts
import "vue-toastfic/style.css"

#or nuxt.config.ts
css: ["vue-toastfic/style.css"]

03. To Vue 3

Usage for your app Vue.js 3:

app.vue

<script setup lang="ts">
import { Toast, useToast } from "vue-toastfic";

function handle() {
  useToast.default("First toast in Vue.js 3");
}
</script>

<template>
  <Toast />
  <button @click="handle">Toastfic Vue.js 3</button>
</template>

04. To Nuxt 3

Usage for your app Nuxt.js 3:

plugins/toastfic.ts

import { Toast, useToast } from "vue-toastfic";

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component("Toast", Toast);

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

nuxt.config.ts

export default defineNuxtConfig({
  build: {
    transpile: ["vue-toastfic"]
  }
})

app.vue

<script setup lang="ts">
const { $useToast } = useNuxtApp();

function handle() {
  $useToast.default("First toast in Nuxt.js");
}
</script>

<template>
  <NuxtPage />
  <Toast theme="dark" />

  <button @click="handle">Toastfic Nuxt.js</button>
</template>