Demo

show a message

<script setup lang="ts">
import { useMessage } from "../../plugin";

const message = useMessage();

const show = () => {
  message("hello world!");
};
</script>

<template>
  <v-card variant="flat">
    <v-card-text>
      <v-btn color="primary" block variant="flat" @click="show">
        show message
      </v-btn>
    </v-card-text>
  </v-card>
</template>

TIP

If you find the component lost the animation, the reason is that the vitepress check prefers-reduced-motion.

you can open window10/11 animation effects to fix this problem.

location

<script setup lang="ts">
import { useMessage } from "../../plugin";

const message = useMessage();

const locationList = [
  "top left",
  "top center",
  "top right",
  "bottom left",
  "bottom center",
  "bottom right",
] as const;
</script>

<template>
  <v-card variant="flat">
    <v-card-text>
      <v-row>
        <v-col v-for="location of locationList" :key="location" cols="4">
          <v-btn
            variant="flat"
            color="primary"
            block
            @click="
              message(`${location} location`, {
                location,
              })
            "
          >
            {{ location }}
          </v-btn>
        </v-col>
      </v-row>
    </v-card-text>
  </v-card>
</template>

color

<script setup lang="ts">
import { useMessage } from "../../plugin";

const message = useMessage();

const colorList = ["primary", "success", "warning", "error"] as const;
</script>

<template>
  <v-card variant="flat">
    <v-card-text>
      <v-row>
        <v-col v-for="color of colorList" :key="color" cols="12">
          <v-btn
            block
            :color="color"
            variant="flat"
            @click="
              message(`${color}`, {
                color,
              })
            "
          >
            {{ color }}
          </v-btn>
        </v-col>
      </v-row>
    </v-card-text>
  </v-card>
</template>

timeout

<script setup lang="ts">
import { useMessage } from "../../plugin";

const message = useMessage();

const timeoutList = [3, 10, -1] as const;
</script>

<template>
  <v-card variant="flat">
    <v-card-text>
      <v-row>
        <v-col v-for="timeout of timeoutList" :key="timeout" cols="12">
          <v-btn
            block
            color="primary"
            variant="flat"
            @click="
              message(
                timeout > -1 ? `close after ${timeout}s` : 'always display',
                {
                  timeout: timeout > -1 ? timeout * 1000 : -1,
                },
              )
            "
          >
            {{ timeout > -1 ? `close after ${timeout}s` : "always display" }}
          </v-btn>
        </v-col>
      </v-row>
    </v-card-text>
  </v-card>
</template>

variant

<script setup lang="ts">
import { useMessage } from "../../plugin";

const message = useMessage();

const variantList = [
  "flat",
  "text",
  "elevated",
  "tonal",
  "outlined",
  "plain",
] as const;
</script>

<template>
  <v-card variant="flat">
    <v-card-text>
      <v-row>
        <v-col v-for="variant of variantList" :key="variant" cols="12">
          <v-btn
            block
            color="primary"
            variant="flat"
            @click="
              message(variant, {
                variant,
              })
            "
          >
            {{ variant }}
          </v-btn>
        </v-col>
      </v-row>
    </v-card-text>
  </v-card>
</template>

html content or other component

<script setup lang="tsx">
import {VRow, VCol, VBtn} from "vuetify/components";
import { useMessage } from "../../plugin";

const message = useMessage();

const showHtml = () => {
  message(() => (<strong>a strong html</strong>));
};

const showComponent = () => {
  message(() => <VRow>
    <VCol cols={4}>
      <VBtn color="success">Btn1</VBtn>
    </VCol>
    <VCol cols={4}>
      <VBtn color="primary">Btn2</VBtn>
    </VCol>
    <VCol cols={4}>
      <VBtn color="warning">Btn3</VBtn>
    </VCol>
  </VRow>)
}
</script>

<template>
  <v-card variant="flat">
    <v-card-text>
      <v-row>
        <v-col cols="12">
          <v-btn block color="primary" variant="flat" @click="showHtml">
            HTML
          </v-btn>
        </v-col>
        <v-col cols="12">
          <v-btn block color="primary" variant="flat" @click="showComponent">
            Other Component
          </v-btn>
        </v-col>
      </v-row>
    </v-card-text>
  </v-card>
</template>