shadcn-vue/sonner.md at d34c62005571ac68beb92af7d8462a5eced9f4b8

Sadegh Barati d34c620055

chore: lint and enable Volar hybrid mode (#419 )

* chore: update deps

* feat: enable Volar hybrid mode

* chore: lint

* chore: build registry

2024-03-20 22:29:42 +03:30

1.2 KiB

Raw Blame History

title	description	docs	source
Sonner	An opinionated toast component for Vue.	https://vue-sonner.vercel.app	apps/www/src/lib/registry/default/ui/sonner

About

The Sonner component is provided by vue-sonner, which is a Vue port of Sonner, originally created by Emil Kowalski for React.

Installation

Run the following command

npx shadcn-vue@latest add sonner

Add the Toaster component

Add the following Toaster component to your App.vue file:

<script setup lang="ts">
import { Toaster } from '@/components/ui/sonner'
</script>

<template>
  <Toaster />
</template>

Usage

<script setup lang="ts">
import { toast } from 'vue-sonner'
import { Button } from '@/components/ui/button'
</script>

<template>
  <Button
    variant="outline" @click="() => {
      toast('Event has been created', {
        description: 'Sunday, December 03, 2023 at 9:00 AM',
        action: {
          label: 'Undo',
          onClick: () => console.log('Undo'),
        },
      })
    }"
  >
    Add to calendar
  </Button>
</template>

1.2 KiB Raw Blame History