Skip to content
This repository has been archived by the owner on Apr 6, 2023. It is now read-only.

docs(plugins): add directive example #5667

Merged
merged 5 commits into from
Jul 6, 2022
Merged

docs(plugins): add directive example #5667

Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ded64d1
Add plugins directive example
HomWang Jun 30, 2022
b3e45da
Update 11.plugins.md
atinux Jun 30, 2022
22bb2ea
Update docs/content/2.guide/3.directory-structure/11.plugins.md
atinux Jun 30, 2022
06dc6f7
docs: suggestions
danielroe Jun 30, 2022
c587db1
docs: fix heading level
danielroe Jul 1, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
docs: suggestions
  • Loading branch information
@danielroe
danielroe authored Jun 30, 2022
commit 06dc6f7db91b33a214ac6c65bb4179a524ff85a9
7 changes: 6 additions & 1 deletion docs/content/2.guide/3.directory-structure/11.plugins.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,17 +124,22 @@ export default defineNuxtPlugin((nuxtApp) => {

### Vue directive
danielroe marked this conversation as resolved.
Show resolved Hide resolved

Then create a plugin file `plugins/directive.ts`.
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"}

danielroe marked this conversation as resolved.
Show resolved Hide resolved
:LinkExample{link="/examples/app/plugins"}