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>

2. v-mask

Automatically Register directive

You can register the mask directive automatically by setting maskDirective: 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, { maskDirective: true } as PixelPluginConfig)
app.mount('#app')

Manually Register directive

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

const app = createApp(App)
app.directive('mask', vMask)
app.mount('#app')

How to use

The v-mask directive is used to format input values automatically. You can provide a mask pattern directly as a string.

<script setup lang="ts">
import { MpInput, css, MpFormControl, MpFormLabel } from '@mekari/pixel3'
</script>

<template>
  <div :class="css({
    display: 'grid',
    gap: '16px',
    gridTemplateColumns: '4'
  })">
    <MpFormControl>
      <MpFormLabel>
        Number (#####)
      </MpFormLabel>
      <MpInput v-mask="'#####'" placeholder="12345" />
    </MpFormControl>

    <MpFormControl>
      <MpFormLabel>
        Letter uppercase and lowercase (SSSSS)
      </MpFormLabel>
      <MpInput v-mask="'SSSSS'" placeholder="Hello" />
    </MpFormControl>

    <MpFormControl>
      <MpFormLabel>
        Letter uppercase only (AAAAA)
      </MpFormLabel>
      <MpInput v-mask="'AAAAA'" placeholder="HELLO" />
    </MpFormControl>

    <MpFormControl>
      <MpFormLabel>
        Letter lowercase only (aaaaa)
      </MpFormLabel>
      <MpInput v-mask="'aaaaa'" placeholder="hello" />
    </MpFormControl>
  </div>
</template>

For more details on v-mask and its options, please refer to our detailed guide.