[Docs] [Vue]: Toast only works with JSX

[jeferson-sb]

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

1. Go to https://ark-ui.com/docs/components/toast
2. Copy the Vue snippet
3. 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

[iamdin]

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..

[Omikorin]

Din is right. We have a problem with our stories generator because the Toast story is somehow an edge-casse

[jeferson-sb]

@iamdin Hmm I see, so it does work by using the h render function. I'm afraid some people might not be so familiar with h() right from the start but I guess updating the docs will help 👍