Add Directive

A tutorial to add Pixel directives.

1. v-tooltip

Automatically Register directive

You can register the tooltip directive automatically by setting tooltipDirective: true in the plugin options (defaults to false). For better type safety, we recommend importing the PixelPluginConfig type from @mekari/pixel3 when configuring the plugin options.

// main.{ts|js}
import { createApp } from 'vue'
import { PixelPlugin, type PixelPluginConfig } from '@mekari/pixel3'
import App from './App.vue'

const app = createApp(App)
app.use(PixelPlugin, { tooltipDirective: true } as PixelPluginConfig)
app.mount('#app')

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