More Premium Hugo Themes Premium Vue Themes

Vue Sonner

An opinionated toast component for Vue & Nuxt.

Vue Sonner

An opinionated toast component for Vue & Nuxt.

Author Avatar Theme by xiaoluoboding
Github Stars Github Stars: 1098
Last Commit Last Commit: May 21, 2025 -
First Commit Created: Apr 29, 2023 -
default image

Overview

Vue Sonner is an opinionated toast component for Vue. It is a customizable toast component that comes with default styling and a swipe-to-dismiss animation.

Features

  • Customizable toast component for Vue
  • Default styling for easy implementation
  • Swipe-to-dismiss animation
  • Multiple toast types: Default, Success, Error, Action, Promise, Custom Component
  • Headless version available for custom, unstyled toast
  • Theme customization
  • Position customization
  • Expanded toast option
  • Global styling and individual toast styling options
  • Programmatically remove toasts
  • Customizable toast duration
  • Callback functions for toast dismiss and auto-close
  • Keyboard focus option

Installation

To start using Vue Sonner, install it in your project using the following code snippet:

npm install vue-sonner

Summary

Vue Sonner is an opinionated toast component for Vue that provides customizable toast messages with default styling and a swipe-to-dismiss animation. It offers various features such as different toast types, theme customization, position customization, and the ability to programmatically remove toasts. With Vue Sonner, developers can easily implement toast messages in their Vue applications with minimal effort.