# @scalar/use-toasts

> display toasts in Vue

Latest version **0.10.5** (published 2026-08-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install @scalar/use-toasts
pnpm add @scalar/use-toasts
yarn add @scalar/use-toasts
bun add @scalar/use-toasts
```

## Health

**Score 80/100 (A)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; high quality score; popular repo.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.10.5 |
| Published | 2026-08-20 |
| First published | 2023-09-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=22 |
| Dependencies | 2 |
| Unpacked size | 20 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 16153 |
| Author | Scalar |
| Maintainers | cameronrohani, marclave, scalar_geoff, hwkr, hanspagel, amritk, scalar-machine |
| Keywords | composable, notifcation, toast, vue, vue3 |

## Links

- npm: https://www.npmjs.com/package/@scalar/use-toasts
- Repository: https://github.com/scalar/scalar
- Issues: https://github.com/scalar/scalar/issues/new/choose
- npm.io page: https://npm.io/package/@scalar/use-toasts

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^3.5.40
- [vue-sonner](https://npm.io/package/vue-sonner.md) ^1.3.2

## Alternatives

- [update-check](https://npm.io/package/update-check.md) — 4.0M weekly downloads
- [react-native-onesignal](https://npm.io/package/react-native-onesignal.md) — 134.5K weekly downloads
- [react-redux-toastr](https://npm.io/package/react-redux-toastr.md) — 33.7K weekly downloads
- [@nocobase/plugin-notification-manager](https://npm.io/package/@nocobase/plugin-notification-manager.md) — 2.0K weekly downloads
- [react-simple-toasts](https://npm.io/package/react-simple-toasts.md) — 1.9K weekly downloads

## Recent versions

- 0.10.5 (latest) — 2026-08-20
- 0.10.4 — 2026-07-16
- 0.10.3 — 2026-07-15
- 0.10.2 — 2026-04-21
- 0.10.1 — 2026-03-18
- 0.10.0 — 2026-03-04
- 0.9.1 — 2025-12-04
- 0.9.0 — 2025-11-03
- 0.8.0 — 2025-05-22
- 0.7.10 — 2025-05-02
- 0.7.9 — 2025-02-18
- 0.7.8 — 2025-01-07
- 0.7.7 — 2024-10-14
- 0.7.6 — 2024-09-08
- 0.7.5 — 2024-08-08
- … 30 more at https://npm.io/package/@scalar/use-toasts/versions

## README

# Scalar useToasts()

[![Version](https://img.shields.io/npm/v/%40scalar/use-toasts)](https://www.npmjs.com/package/@scalar/use-toasts)
[![Downloads](https://img.shields.io/npm/dm/%40scalar/use-toasts)](https://www.npmjs.com/package/@scalar/use-toasts)
[![License](https://img.shields.io/npm/l/%40scalar%2Fuse-toasts)](https://www.npmjs.com/package/@scalar/use-toasts)
[![Discord](https://img.shields.io/discord/1135330207960678410?style=flat&color=5865F2)](https://discord.gg/8HeZcRGPFS)

---

Scalar is an open-source API platform for teams who want beautiful developer interfaces without vendor lock-in.

- **[API References](https://scalar.com/products/api-references/getting-started)** — Interactive API documentation from OpenAPI and AsyncAPI specs.
- **[Developer Docs](https://scalar.com/products/docs/getting-started)** — Write in Markdown/MDX, generate API references, sync with two-way Git.
- **[SDK Generator](https://scalar.com/products/sdk-generator/getting-started)** — Type-safe SDKs and CLIs in TypeScript, Python, Go, PHP, Java, and Ruby.
- **[API Client](https://scalar.com/products/api-client/getting-started)** — Open-source, offline-first Postman alternative built on OpenAPI.

20M+ monthly npm installs · 15,500+ GitHub stars · MIT licensed · [scalar.com](https://scalar.com)

---

## Installation

```bash
npm install @scalar/use-toasts
```

## Usage

```vue
// App.vue
<script setup>
import { ScalarToasts } from '@scalar/use-toasts'
</script>
<template>
  <ScalarToasts />
</template>
```

```vue
// ChildComponent.vue
<script setup>
import { useToasts } from '@scalar/use-toasts'

const { toast } = useToasts()

const sendMessage = () => {
  toast('This is a message from the toaster!', 'success', { timeout: 2000 })
}
</script>
```

---
_Source: https://npm.io/package/@scalar/use-toasts · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._