Add Directive

A tutorial to add Pixel directives.

1. v-tooltip

Register directive

import { createApp } from 'vue'
import './pixel.css'
import App from './App.vue'
import { PixelTooltipDirective } from '@mekari/pixel3'

const app = createApp(App)
app.directive('tooltip', PixelTooltipDirective)
app.mount('#app')

How to use

<template>
  <MpFlex direction="column" gap="4" p="12">
    <MpText 
      size="h1"
      v-tooltip="'Tooltip for title'"
    >
      Hello Pixel Vue 3
    </MpText>

    <MpButton
      v-tooltip="{
        label: 'Tooltip for button',
        placement: 'left',
        showDelay: 10,
        hideDelay: 10
      }"
    >
      Start to Develop
    </MpButton>
  </MpFlex>
</template>

<script setup lang="ts">
  import { MpFlex, MpText, MpButton } from "@mekari/pixel3"
</script>