From dd436eabae68124babf1d7644bf8fbf7aed98e5b Mon Sep 17 00:00:00 2001 From: Paranoid <516310460@qq.com> Date: Thu, 7 Jul 2022 03:10:29 +0800 Subject: [PATCH] docs(plugins): add directive example (#5667) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Sébastien Chopin Co-authored-by: Daniel Roe --- .../3.directory-structure/11.plugins.md | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/docs/content/2.guide/3.directory-structure/11.plugins.md b/docs/content/2.guide/3.directory-structure/11.plugins.md index 9ad1a449c..21fa98cca 100644 --- a/docs/content/2.guide/3.directory-structure/11.plugins.md +++ b/docs/content/2.guide/3.directory-structure/11.plugins.md @@ -122,4 +122,24 @@ export default defineNuxtPlugin((nuxtApp) => { }) ``` +## Vue directives + +Similarly, you can register a custom Vue directive in a plugin. For example, in `plugins/directive.ts`: + +```ts +export default defineNuxtPlugin((nuxtApp) => { + nuxtApp.vueApp.directive('focus', { + mounted (el) { + el.focus() + }, + getSSRProps (binding, vnode) { + // you can provide SSR-specific props here + return {} + } + }) +}) +``` + +:ReadMore{link="https://vuejs.org/guide/reusability/custom-directives.html"} + :LinkExample{link="/examples/app/plugins"}