Things you didn't know about Vue CLI

#vue

If you've just used vue create to create your projects, this post is for you!

Important note for windows users: Do not include the $ sign in your commands, it is not a part of the command, it is just the prompt sign in linux/unix/bash shells.

Creating projects

There are actually several commands you can use to create a Vue project using the CLI.

The most known option

This is the default and recommended one.

# creating a project using the command line
$ vue create my-project

The CLI with the UI

Did you know that Vue CLI actually has a web UI?
It allows for a more interactive use of the CLI.

# run this command and it will open a browser window with the UI
$ vue ui

The web UI also has some cool utils that you can use to monitor your build, your development server and other processes.

If you're interested, let me know in the comments and I'll do a separate post on the web UI and its many options.

Legacy templates

In version 2 of Vue CLI, there was a concept of "templates" that allowed you to specify a template (built-in or community provided) that will be the basis for your new project.

This is still supported in Vue CLI 3 but it requires an extra step.

# run this once for enabling support of legacy templates
# you can run this anywhere as it installs a global plugin
$ npm install -g @vue/cli-init

# create a new project using a legacy template
$ vue init webpack my-project

And here's a list of the built-in templates.
There are many other community provided templates out there.

Fast Prototyping

Sometimes you just want to view a single Vue component for fast prototyping without the hassle of creating an entire project.

This is possible by globally installing another part of the CLI system:

# run this once for enabling support of legacy templates
# you can run this anywhere as it installs a global plugin
$ npm install -g @vue/cli-service-global

# serve your component by running this command 
# (the --o is optional and opens a new browser window)
$ vue serve my-component.vue --o

Plugins

The Vue CLI is all about plugins. Plugins add content and/or abilities to your project.
There are two types of plugins:

Internal plugins, these are prefixed @vue/cli-plugin-
Community plugins, these are prefixed vue-cli-plugin-

Important: Plugins usually modify your project sources, so it is a good idea to git commit all your changes before adding a plugin.

To add a plugin, use the following command inside your project's folder:

$ vue add plugin-name

You can find a searchable list of plugins inside the Vue CLI UI:

Run the UI using vue ui command
Select a project of yours in the dropdown menu on the top left corner.
Click the "Plugins" in the menu on the left.
Click "Add plugin" button and browse the list of plugins.
When you're ready to add a plugin, select it and click the "Install" button on the bottom right.