Vue Sonner
Vue Sonner is an opinionated toast component for Vue. It's customizable, but styled by default. Comes with a swipe to dismiss animation.
Source code
Click here to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.
Installation
npx ui-thing@latest add vue-sonner
Add the <UiVueSonner /> component to your app.vue file:
<template>
<div>
<NuxtPage />
<UiVueSonner />
</div>
</template>
Just so that we do not have to import the toast function from the vue-sonner package each time that we want to use it, we can instruct Nuxt to auto-import it by adding this to the imports object inside our nuxt.config.ts file:
imports: {
imports: [
{ from: "vue-sonner", name: "toast", as: "useSonner" },
],
},
We also have to add the code below to our nuxt.config.ts file in order to transpile the vue-sonner package:
build: {
transpile: ["vue-sonner"],
},
Usage
Full example
For the custom element, this is what the code looks like
<template>
<div
class="relative z-[999] box-border flex w-full gap-4 rounded-md border bg-background p-3 px-5 shadow-lg md:w-[360px]"
>
<UiAvatar
class="ring-1 ring-border"
src="https://behonbaker.com/icon.png"
fallback="BB"
alt="Behon Baker"
/>
<div>
<p>Add user</p>
<p class="text-sm font-normal text-muted-foreground">
Would you like to add this user to the list?
</p>
<div class="mt-2 flex items-center gap-2">
<UiButton class="h-7 text-xs" @click="addUser">Yes</UiButton>
<UiButton variant="outline" class="h-7 text-xs" @click="cancel">No</UiButton>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
const emits = defineEmits<{
closeToast: [];
}>();
const addUser = () => {
useSonner.success("", { description: "User added" });
emits("closeToast");
};
const cancel = () => {
useSonner.warning("", { description: "User not added" });
emits("closeToast");
};
</script>