[Docs] [Vue]: Toast only works with JSX
jeferson-sb opened this issue · comments
Description
Looking at the documentation the Toast
has a snippet for Vue that is:
<script setup lang="ts">
null
</script>
<template><button @click="createBasicToast">Toast</button> <BasicToaster /></template>
Which doesn't work property since it is missing some imports, but more importantly the createToaster
function only seems to work with JSX, which it is not the default for Vue and doesn't work at all without installing a plugin like @vitejs/plugin-vue-jsx
I'm not sure how many components rely on JSX (or if they could be converted to work with SFC) but would be nice to have a warning in the documentation.
Link to Reproduction (or Detailed Explanation)
https://stackblitz.com/edit/vitejs-vite-kl4bcs?file=src%2FApp.vue
Steps to Reproduce
- Go to https://ark-ui.com/docs/components/toast
- Copy the Vue snippet
- Try to run without installing @vitejs/plugin-vue-jsx
Ark UI Version
0.11.0
Framework
- React
- Solid
- Vue
Browser
No response
Additional Information
No response
Hi, Jeferson. There is indeed a problem with the Toast component in the documentation. It will be fixed later.
About the usage of Toast, you don't have to use JSX, you can wrap the render function into a single component and use h
to create a VNode. Example
<script setup lang="ts">
import { Toast, createToaster } from '@ark-ui/vue';
import { h } from 'vue';
import RenderToast from './components/Toast.vue'
const [Toaster, toast] = createToaster({
placement: 'top-end',
render(toast) {
return h(ToastRender, { toast })
},
});
const createBasicToast = () =>
toast.value.create({
title: 'Title',
description: 'Description',
})
</script>
<template>
<button @click="createBasicToast">Toast</button>
<Toaster />
</template>
And finally, regarding the design of the API, It relies on zagjs/toast at the bottom, if you have any ideas we can discuss further..