Releases: xiaoluoboding/vue-sonner
Releases Β· xiaoluoboding/vue-sonner
Release v2.0.9
What's Changed
- fix: make nuxt related deps optional by @sadeghbarati in #150
- feat: customize close button position by @ffgenius in #149
- feat: add isPaused prop to headlessToast for custom progressBars by @sedmedgh in #152
New Contributors
Full Changelog: v2.0.8...v2.0.9
Release v2.0.8
What's Changed
- fix: fixed the type for nuxt 4 by @xiaoluoboding in #141
Full Changelog: v2.0.7...v2.0.8
Release v2.0.7
What's Changed
- fix: postcss-calc will change the style by @CandyACE in #125
- fix: custom component not trigger on dismiss function by @oxwazz in #132
- chore: new version v2.0.7 by @xiaoluoboding in #139
New Contributors
Credits
- Thanks @sadeghbarati for #135
Full Changelog: v2.0.2...v2.0.7
Release v2.0.2, Support Nuxt 4
Release v2.0.1
What's Changed
- Add css import on web page by @MaxTechnics in #120
- fix(tsconfig): add tsconfig.includes files by @ffgenius in #121
- fix: active toasts by @jals1212 in #124
- π¨ fix(theme): make theme="system" reactive in by @excho0 in #130
- π¦ feat(umd): add UMD-compatible plugin entrypoint and tsdown build by @excho0 in #131
New Contributors
- @MaxTechnics made their first contribution in #120
- @ffgenius made their first contribution in #121
- @jals1212 made their first contribution in #124
- @excho0 made their first contribution in #130
Full Changelog: v2.0.0...v2.0.1
Release v2.0.0 π
What's Changed
- refactor!: sonner v2 changes by @sadeghbarati in #115
Full Changelog: v1.3.2...v2.0.0
How to Migrate from Version v1.3.2 to v2.0.0
When you upgrade to v2.0.0, you need to manually import vue-sonner/style.css. This gives developers greater flexibility, allowing you to even customize your own CSS.
For Vue 3
Inline CSS is separated and must be imported manually.
<!-- App.vue -->
<template>
<Toaster />
<button @click="() => toast('My first toast')">Render a toast</button>
</template>
<script lang="ts" setup>
import 'vue-sonner/style.css' // add vue-sonner css.
import { Toaster, toast } from 'vue-sonner'
</script>In Nuxt 3
CSS is imported by default, but you can disable this behavior to prevent CSS from being imported.
Use vue-sonner/nuxt module
// nuxt.config.ts
export default defineNuxtConfig({
...
modules: ['vue-sonner/nuxt']
vueSonner: {
css: false // true by default to include css file
}
})Release v1.3.2
Full Changelog: v1.3.2...v1.3.2
What's Changed
- fix: improve CSS insertion logic to handle document loading state by @beijixiaohu in #107
- Loading icon remains visible after promise resolution when using the loading-icon slot (FIX) by @pcoterecollective in #113
- test: test the action by @xiaoluoboding in #114
New Contributors
- @beijixiaohu made their first contribution in #107
- @pcoterecollective made their first contribution in #113
Full Changelog: v1.3.0...v1.3.2
Release v1.3.0
What's Changed
- fix: add icon classes by @imjasonmiller in #101
- fix: use nuxt add component util for toaster by @danielwaltz in #103
- feat: add sonner 1.7.0 features by @sadeghbarati in #102
New Contributors
- @imjasonmiller made their first contribution in #101
- @danielwaltz made their first contribution in #103
Full Changelog: v1.2.5...v1.3.0
Release v1.2.4
What's Changed
Vue Sonner now supports a Nuxt 3 module
Use vue-sonner/nuxt module
// nuxt.config.ts
export default defineNuxtConfig({
...
modules: ['vue-sonner/nuxt']
})Use Toaster component and $toast function anywhere in the Vue SFC
<!-- app.vue -->
<template>
<div>
<Toaster position="top-right" />
<button @click="() => $toast('My first toast')">Render a toast</button>
</div>
</template>
<script setup lang="ts">
const { $toast } = useNuxtApp()
</script>Full Changelog: v1.2.3...v1.2.4