app.directive() Register a Global Directive
Last updated: 2026-10-22
app.directive() Register a Global Directive
app.directive() registers a global custom directive usable as v-xxx anywhere — for permissions, click-outside and similar behaviour.
| Group | Global API |
|---|---|
| Kind | API |
| Scope | Global |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
app.directive("focus", {
mounted(el) { el.focus() }
})⚙️ Arguments
| name, directive? | The name (without the v- prefix) plus a definition with hooks |
|---|
Returns：The app instance (chainable)
▶ Example
Edit the code below and see the live result:
Output：
The input receives focus automatically.💡 Key Points
ℹ️ Note Directive hooks mirror lifecycle names.
💡 Tip Prefer composables; directives suit reusable raw DOM behaviour.
⚠️ Warning Arguments and modifiers live on the binding object.
🏷️ Related Global API
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q Directive or composable?
A Raw DOM behaviour → directive; stateful logic → composable.
Q Can directives take arguments?
A Yes — read binding.arg, modifiers and value.
Q How about local directives?
A Declare them in a component's directives option.
