UBuilder Directives

UBuilder Directives requires vue 3.2+ or 2.7+.

• vAutofocus: FunctionDirective<HTMLElement, void>
• vFocusTrap: ObjectDirective<HTMLElement, void>

vAutofocus

Focusing element onMounted. Replaces HTML autofocus attribute.

vFocusTrap

Trap focus inside directed elements. Collect focusable element on mount. Recommend use inside v-if block.

Usage

Installation

npm i @ubuilder/directives

Component

On setup.

<script lang="ts" setup>
import { ref } from 'vue';
import { vAutofocus, vFocusTrap } from '@ubuilder/directives';

const visible = ref(false);
</script>

<template>
 <div v-focus-trap v-if="visible">
   <!-- focusable elements ... -->
   <input v-autofocus>
 </div>
</template>

On options.

<script>
import { vAutofocus, vFocusTrap } from '@ubuilder/directives';
export default {
  directives: {
    autofocus: vAutofocus,
    focusTrap: vFocusTrap,
  },
};
</script>

Plugin

UBuilder Directives' default export is vue plugin, but not recommend direct import to tree-shaking feature.

import { createApp } from 'vue';
import UBuilderDirectives from '@ubuilder/directives';

const app = createApp(/* app options */);
app.use(UBuilderDirectives);