5 Vue CLI 3 plugins for your Vue project
If you haven’t heard already, Evan You, the creator of Vue, just announced the release of Vue CLI 3, after months of hard work.
One of the best things about the new Vue CLI 3 is how extensible it is. The developers designed the new version with a plugin architecture in mind from day one. This means you can easily add a plugin to your project when you create the project, or even afterwards.
Developers are already creating those plugins. In this post, I’m going to tell you about 5 Vue CLI 3 plugins that you can start using today.
P.S. — If you’re interested in learning more about how Vue CLI 3 works and all the features, read Evan You’s post on the Vue CLI 3 here.
Before jumping in, let’s briefly review a Vue CLI Plugin.
What’s in a Vue CLI Plugin?
A Vue CLI plugin is just an npm package. Plugins can modify the internal webpack configuration and inject commands to vue-cli-service, which let you run commands directly from the terminal. Most of the features listed during the project creation process are implemented as plugins.
Without futher adieu, here are 5 Vue CLI plugins you can use in your projects.
1) Electron Builder
This plugin allows you to create a cross-platform Electron version of your app without any extra configuration, using Electron Builder.
To add this plugin to your vue project, run the following command:
vue add electron-builderThat’s it — you’re ready to go!
NOTE: This plugin will not work with Vue CLI 2, and there are a few other caveats to consider if you’ve used an older version of this plugin before. Checkout the README on GitHub here to learn more.
2) Apollo
This is a plugin to add Apollo and GraphQL in your Vue project. GraphQL is a specification that aims at easing the communication between frontends and backends.
The plugin is from Guillaume Chau, a core Vue.js team member who’s also behind building the third party Vue UI.
To add the Apollo plugin to your project, run the following command:
vue add apolloTo learn more about Apollo, visit the documentation here. To learn more about the plugin check out the GitHub page here.
3) Vuetify
The famous Vuetify UI library has also been converted into a Vue CLI 3 plugin. If you’re not familiar, Vuetify is a semantic component framework for Vue. It aims to provide clean, semantic and reusable components that make building your application a breeze.
To add the plugin to your project, run the following command:
vue add vuetifyIf you’re interested in learning a bit more about Vuetify, we wrote an article on how to create a custom VuePress theme using Vuetify that you can read here. The GitHub page for the plugin is here.
4) Storybook
This plugin lets you quickly add Storybook to your Vue project. Storybook is a development environment for UI components that allows you to interactively develop and test components.
To add the plugin, run the following command:
vue add storybookHere’s the link to the individual GitHub page if you’re interested in learning more.
5) Component by David Desmaisons
If you want to publish your CLI plugin to be usable by other developers, it must be published on npm following the name convention vue-cli-plugin-<name>.
Component, by David Desmaisons, makes this much easier. It’ll even automatically document the component with vue-styleguidist and vuedoc.md.
To install this, run the following command:
vue add component
Here’s the link to the GitHub page if you’re interested in learning more about the internals.
Conclusion
One of the first things you’ll notice about Vue CLI 3 plugins is how easy they are to install.
vue add plugin-nameThat’s all you need to add a lot of extra functionality to your app.
Since Vue CLI 3 is new, there aren’t many plugins as of the time this article was written. But, even with just these 5 you can see how powerful these plugins are in helping you create a beautiful application. They’ll only become more powerful in the future.
Want to learn more about Vue CLI 3?
Adam Jahr, teacher at Vue Mastery, goes in-depth with the new Vue CLI 3 and the Vue UI in a free video tutorial you can watch here. You’ll walk away with an understanding of how the CLI-generated app works.
