docs(plugins): add directive example (nuxt#5667)

Co-authored-by: Sébastien Chopin <seb@nuxtjs.com> Co-authored-by: Daniel Roe <daniel@roe.dev>
Dhanushdhaari · Jul 6, 2022 · dd436ea · dd436ea
1 parent f09d1d8
commit dd436ea
Showing 1 changed file with 20 additions and 0 deletions.
diff --git 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"}