Render more than string

You can render any valid ReactNode: string, number, component... This is really straightforward.

Basic example

TIP

When you render a component, a closeToast prop and the toastProps are injected into your component.

<template>
  <h1>Hello {{ msg }}</h1>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const msg = ref<string>('world');
</script>

Open Sandbox

TIP

You can also write with a tsx component. that is cool!!

<template>
  <h1>Hello {{ msg }}</h1>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const msg = ref<string>('world');
</script>

Open Sandbox

Example with pinia

In this example we will use pinia to share state accross a component and a toast. Increment and display a toast at the same time to see how the state stay in sync !

<template>
  <h1>Hello {{ msg }}</h1>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const msg = ref<string>('world');
</script>

Open Sandbox