Directives Overview

Directives are special attributes with the v- prefix that provide declarative DOM manipulation capabilities. In ume-ui, we provide several built-in directives to enhance user experience.

Available Directives

Here is a list of all available directives in ume-ui:

Directive	Description
v-ripple	Adds Material Design ripple effects to interactive elements

Usage

All directives can be used in two ways:

1. Global Registration (Recommended)

When you import and install the entire ume-ui library, all directives are automatically registered globally:

import { createApp } from 'vue';
import UmeUi from 'ume-ui';

const app = createApp(App);
app.use(UmeUi);

Then you can use directives directly in your templates:

<template>
  <button v-ripple>Click Me</button>
</template>

2. Individual Import

You can also import individual directives and register them manually:

import { ripple } from 'ume-ui';

// Register globally
app.directive('ripple', ripple);

// Or use in a single component
export default {
  directives: {
    ripple,
  },
};

Adding More Directives

We are continuously adding more useful directives to ume-ui. If you have a suggestion for a useful directive, please feel free to contribute or open an issue on our GitHub repository.

Next Steps

Explore the individual directive documentation to learn about their specific usage and features:

• Ripple Directive - Learn how to use the ripple effect directive