ToastCommunity Asset

<script setup lang="ts">
const addToast = useAddToast()

const handleAddToast = () => {
  addToast('Message sent')
}
</script>

<template>
  <div class="n-stack">
    <p>Click the button below to add a toast notification.</p>

    <nord-button variant="primary" @click="handleAddToast">
      Add toast
    </nord-button>
  </div>
</template>

<script setup lang="ts">
const addToast = useAddToast()

const handleShortDismiss = () => {
  addToast('Quick message (1s)', {
    autoDismiss: 1000,
  })
}

const handleLongDismiss = () => {
  addToast('Important update (5s)', {
    autoDismiss: 5000,
  })
}
</script>

<template>
  <div class="n-stack">
    <p>
      By default, toasts auto-dismiss after 3 seconds. This example demonstrates
      how to set a custom auto-dismiss duration.
    </p>

    <div class="n-stack n-stack-horizontal">
      <nord-button variant="primary" @click="handleShortDismiss">
        Show quick toast
      </nord-button>

      <nord-button variant="primary" @click="handleLongDismiss">
        Show longer toast
      </nord-button>
    </div>
  </div>
</template>

<script setup lang="tsx">
import { NuxtLink } from '#components'

const route = useRoute()
const addToast = useAddToast()

const handleAddToastWithTSX = () => {
  addToast(
    <span>
      Credit note <NuxtLink to={route.path}>#12345</NuxtLink> created
      successfully
    </span>,
  )
}

const handleAddToastWithHFunction = () => {
  addToast(
    h('span', [
      'Invoice Payment ',
      h(
        NuxtLink,
        {
          to: route.path,
        },
        () => '#67890',
      ),
      ' updated successfully',
    ]),
  )
}
</script>

<template>
  <div class="n-stack">
    <p>
      You can use TSX or Vue's h() function to create custom toast content with
      interactive elements like links.
    </p>

    <div class="n-stack">
      <div class="n-stack">
        <h3 class="n-typeset">Using TSX</h3>
        <p>TSX provides a familiar React-like syntax for creating VNodes.</p>
        <nord-button variant="primary" @click="handleAddToastWithTSX">
          Show toast with TSX
        </nord-button>
      </div>

      <nord-divider />

      <div class="n-stack">
        <h3 class="n-typeset">Using h() Function</h3>
        <p>
          Vue's h() function offers programmatic control over creating VNodes.
        </p>
        <nord-button variant="primary" @click="handleAddToastWithHFunction">
          Show toast with h()
        </nord-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const addToast = useAddToast()

const handleAddErrorToast = () => {
  addToast('No internet connection', {
    variant: 'danger',
  })
}
</script>

<template>
  <div class="n-stack">
    <p>
      Error toasts use the danger variant to indicate that something went wrong.
    </p>

    <nord-button variant="primary" @click="handleAddErrorToast">
      Add error toast
    </nord-button>
  </div>
</template>