Quick Start

export default defineNuxtConfig({
  modules: ["nuxt-notify"],

  notify: {
    position: "top-right",
    duration: 5000,
    maxToasts: 5,
    theme: "dark",
    showIcon: true,
  },
});

<script setup>
const toast = useToast();

function showToast() {
  toast.success("Success!", "Your first toast notification");
}
</script>

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

<script setup>
const toast = useToast();

toast.success("Saved", "Your changes were saved successfully");
</script>

<script setup>
const toast = useToast();

toast.error("Error", "Something went wrong");
</script>

<script setup>
const toast = useToast();

toast.info("Heads up", "New version is available");
</script>

<script setup>
const toast = useToast();

toast.warning("Careful", "This action cannot be undone");
</script>

<script setup>
const toast = useToast();

toast.add({
  type: "success",
  title: "Welcome!",
  description: "Thanks for trying Nuxt Notify",
  duration: 3000,
});
</script>