Use a Vite Plugin — Transcript

Transcript of the free Vue.js lesson Use a Vite Pluginwatch the video lesson.

Vite comes with a plugin system, allowing it to be easily extended to handle lots of different use cases. In fact, we've already used one Vite plugin in this course. That is, the official Vite plugin that provides support for single file components. To use it, first we installed it as a dependency.

And, actually, the bootstrapping process did that for us. But, you get the idea. js. And lastly, used the plugins option to register it.

Besides the Vue plugin though, there are several other official Vite plugins maintained by the Vite core team that provide support for JSX and Vue, React, and support for legacy browsers. Likewise, there are also plenty of community maintained plugins in the awesome Vite repo. For instance, there are a number of plugins that are framework agnostic, like the Veep plugin PWA, for a zero config PWA, or Unplugin Icons, which provides access to thousands of icons as components. Then, there are also some plugins that work for specific types of projects, like View or React.

For instance, there's a Pages plugin for View. that generates routes based on the file system, or this Markdown plugin that allows you to import Markdown files as view components and view components into Markdown. All of these plugins have docs that walk you through setting up the plugin, using it, and customizing it via different options. Finally, it's worth mentioning that Veep plugins are an extension of Rollup's plugin interface.

And thus, a fair number of rollup plugins will work directly as a Veet plugin. You can see the link in the description below for more info about rollup plugin compatibility. So, there you have it. Now you have a ton of different options in order to extend Veet in the same way across multiple different projects using official and community-provided plugins.

Vite comes with a plugin system, allowing it to be easily extended to handle lots of different use cases. In fact, we've already used one Vite plugin in this course. That is, the official Vite plugin that provides support for single file components. To use it, first we installed it as a dependency.

And, actually, the bootstrapping process did that for us. But, you get the idea. js. And lastly, used the plugins option to register it.

Besides the Vue plugin though, there are several other official Vite plugins maintained by the Vite core team that provide support for JSX and Vue, React, and support for legacy browsers. Likewise, there are also plenty of community maintained plugins in the awesome Vite repo. For instance, there are a number of plugins that are framework agnostic, like the Veep plugin PWA, for a zero config PWA, or Unplugin Icons, which provides access to thousands of icons as components. Then, there are also some plugins that work for specific types of projects, like View or React.

For instance, there's a Pages plugin for View. that generates routes based on the file system, or this Markdown plugin that allows you to import Markdown files as view components and view components into Markdown. All of these plugins have docs that walk you through setting up the plugin, using it, and customizing it via different options. Finally, it's worth mentioning that Veep plugins are an extension of Rollup's plugin interface.

And thus, a fair number of rollup plugins will work directly as a Veet plugin. You can see the link in the description below for more info about rollup plugin compatibility. So, there you have it. Now you have a ton of different options in order to extend Veet in the same way across multiple different projects using official and community-provided plugins.