Plugin Support for Vue 3 and Typescript

@mantracode/z-plugin

For Vue 3

Typescript & Vite Full Support

Intallations

Add zplugin to vue app in main.ts

import { createApp } from "vue";
import { zplugin } from "@mantracode/z-plugin";
import App from "./App.vue";
import "@mantracode/z-plugin/dist/style.css"

const app = createApp(App);
app.use(zplugin);
app.mount("#app");

ZPluginProvider, as Root component for plugin on App.vue.

<script setup lang="ts">
import { ZPluginProvider } from "@mantracode/z-plugin";
import MyLayout from "./layout/MyLayout.vue"
</script>

<template>
  <z-plugin-provider>
    <my-layout>
      ...
    </my-layout>
  </z-plugin-provider>
</template>

Hooks

• useMessage, hook for creating a message ./layout/MayLayout.vue

  <script setup lang="ts">
  import { useMessage } from "@mantracode/z-plugin";
  
  const msg =  useMessage();
  
  const show_msg = () => {
    msg({
      text: "You are so beautiful tonight."
    })
  }
  </script>
  
  <template>
    <button @click="show_msg">Show Message</button>
  </template>