Plugins
The following content is my notes from the course Custom Vue.js 3 Plugins by Daniel Kelly and Alex Kyriakidis.
- plugins
- self contained code that adds functionality to vue
- vue router is a plugin
- pinia is a plugin
- floating is a plugin
- vuetify is a plugin
- define a plugin
- object with a install { install() {}}
- defining as a function it is the install automatically const myPlugin = (app, options) => {}
- first argument is the app
- second argument are options
- object with a install { install() {}}
- register plugin
- .use(myPlugin)
- .use(myPlugin, options)
- .component is used to defined a component that is created by the plugin
- plugin can be used to create an abstraction over an exsisting library
- life-cycle
- onMounted, onUpdated are available inside a plugin - it has the component context
- onUnmounted prevents memory leaks from our app
- options are passed to components plugin via provide and inject
- provide from the options when the plugin is created
- and inject to use the options in the component
- global options
- app.config.globalProperties from app instance (first argument in the plugin)
- type safe
- typescript interface with plugin options
- createMyPlugin is a convention to create vuejs plugins
- define the options with the typescript interface
- Partial<Foo> in typescript describe optional elements
- Bundling (vite)
- vite has a library setup to distribute libraries
- custom directives for plugins are allowed as well
- pinia is an example
- vitePress to provide documentation for a plugin
- pull request for awesome vue