Usage

This is a little guide to use @model-w/Toast inside a Nuxt3 component. This guide is going to assume that you have followed the guide inside the installation.

In a Vue template

Button trigger

In this example, we trigger the Toast notification on button click.

<script setup lang="ts">
  const notify = () => {
    useNuxtApp().$toast.info("toastify success");
  };
</script>

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

If you want to see it running you can click on this link.

Auto trigger

In this example, we use nextTick from @vue/runtime-core to launch a Toast notification on page load.

<script setup lang="ts">
  import { nextTick } from "@vue/runtime-core";
  nextTick(() => {
    if (process.client) {
      useNuxtApp().$toast('notify after nextTick');
    }
  })
</script>

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