5 Vue CLI 3 plugins for your Vue project

Derick Sozo
Aug 15, 2018 · 5 min read

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.

Image for post
Image for post

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 , which let you run commands directly from the terminal. Most of the features listed during the project creation process are implemented as plugins.

Image for post

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

That’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.

Image for post
Image for post

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 apollo

To learn more about Apollo, visit the documentation here. To learn more about the plugin check out the GitHub page here.

Image for post
Image for post

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 vuetify

If 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.

Image for post
Image for post

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 storybook

Here’s the link to the individual GitHub page if you’re interested in learning more.

Image for post
Image for post

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 .

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
Image for post
Image for post

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

That’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.

Image for post
Image for post

Read Next: Speed up development with Vue DevTools

Vue Mastery

The ultimate learning resource for Vue.js Developers

Derick Sozo

Written by

👨‍💻 Remote Web Dev. Learn how to land high-value remote freelance web dev clients without a fancy portfolio → https://remoteleads.io/course

Vue Mastery

The ultimate learning resource for Vue.js Developers

Derick Sozo

Written by

👨‍💻 Remote Web Dev. Learn how to land high-value remote freelance web dev clients without a fancy portfolio → https://remoteleads.io/course

Vue Mastery

The ultimate learning resource for Vue.js Developers

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store