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
• 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