Create Vue Apps Visually with the Vue CLI User Interface Tool

Introduction

Most JavaScript frameworks these days usually have some sort of Command Line Interface (CLI) that enables users to quickly scaffold applications and get straight to building apps, without doing repetitive setup tasks. Some common ones are:

• Vue CLI
• Angular CLI
• Create React App
• Ember CLI

Sometimes these CLIs come with a lot of configurations, which may be fun to use, but also a bit complex, since some commands may take in a lot of parameters and flags.

The Vue CLI introduced a Graphical User Interface (GUI), which can save us a lot of time and give us clarity on what we are actually doing while building a Vue App generated with the CLI.

Prerequisites

• You should have a basic to intermediate understanding of JavaScript and Vue.js.
• You should have Node.js installed.

Installation

You need to have Vue CLI 3 installed.

npm i -g @vue/cli

Typing in vue on your terminal should give you this.

vue

Output
  Usage: vue <command> [options]

  Options:

    -V, --version                         output the version number
    -h, --help                            output usage information

  Commands:

    create [options] <app-name>           create a new project powered by vue-cli-service
    add <plugin> [pluginOptions]          install a plugin and invoke its generator in an already created project
    invoke <plugin> [pluginOptions]       invoke the generator of a plugin in an already created project
    inspect [options] [paths...]          inspect the webpack config in a project with vue-cli-service
    serve [options] [entry]               serve a .js or .vue file in development mode with zero config
    build [options] [entry]               build a .js or .vue file in production mode with zero config
    ui [options]                          start and open the vue-cli ui
    init [options] <template> <app-name>  generate a project from a remote template (legacy API, requires @vue/cli-init)
    config [options] [value]              inspect and modify the config


  Run vue <command> --help for detailed usage of given command.

Among the options, you can see there’s a command called ui. This is what we’re going to explore.

...
ui [options]                          start and open the vue-cli ui
...

Scaffold a Vue App

Create a directory where you want your Vue apps to be, I’ll call mine vue-ui

mkdir vue-ui

Then open the Vue UI tool with

vue ui

This opens the Vue GUI on http://localhost:8001 on your default browser.

The three sections shown are intuitive but to explain:

• Projects - will list projects of the current directory or the ones you have used this tool to generate
• Create - will allow you to create a new Vue project
• Import - will allow you to import a project from either a directory or a remote GitHub repository.

At the bottom of the screen, on the status bar, you will be shown where your current directory is, and on the far right, you can change the theme of the app.

Let’s create a project. Click on the Create Tab, and click on the Create a new project here button.

A pop will show up. Let’s fill it in with the project name scotch-vue.

Select npm as the default package manager, and initialize a git repository if you want.

Press next, and you’ll be taken to the presets tab. This is where we add in the configurations that are common to Vue applications. Select Manual and press next.

You’ll be navigated to the Features page so that you can select the Plugins and Configurations you want. I went mostly with the following configurations:

• Babel
• Router
• CSS Preprocessor
• Linter/Formatter
• Unit Testing
• Use Config Files

Scroll down to see all the configs.

All the options have a More Info link, that opens in a new tab with the documentation on the plugins/features you are adding.

Finally, press next and you will be directed to the configurations section. Here’s where you customize the configurations for the features you added in the previous section.

On the CSS pre-processors, pick SCSS/SASS

I decided to choose ESLint and Prettier and selected Lint on save.

Finally pick a unit testing solution: Mocha and Chai

Click on Create Project. You will be asked if you want to give the settings/preset a name. I called it scotch-vue-preset. Next time, you can just scaffold a project directly from this preset.

Clicking on Create Project will give you a loader, telling you the progress of the project creation, and then once done, take you to the Project’s dashboard.

You can open the application in an editor, by clicking on the app name on the top left.

Exploring the Project Dashboard

The dashboard is divided into four parts:

1. Plugins

Lists your plugins and allows you to install other plugins into your current project.

You can click on the Install Plugins button on the top right to enable you to search and install plugins.

2. Dependencies

Lists your npm dependencies, and allows you to add/remove dependencies.

You can click on the Install Dependencies button on the top right to enable you to search and install dependencies.

3. Configurations

Allows you to modify configurable sections of your applications. Right now, you’ll see two options:

Vue CLI configurations

Eslint Configuration.

4. Tasks

Tasks allow you to perform operations on your application, which you normally do when building apps. They include the following. I’ve taken the descriptions directly from the UI.

• Serve - Compiles and hot reloads your application
• Build - Compiles and minifies for production
• Lint - Lints and fixes files
• Test - Run tests using Mocha
• Inspect - inspect the resolved webpack config.

Serve

We’ve seen that this section compiles and hot reloads your application. The first part of the Serve section allows you to configure the serve task.

You can click on the gear icon to configure the serve task.

The more info button will open documentation regarding the vue-cli-service.

Then clicking the Run Task button will update the Dashboard Tab, and open the app in a new tab, as we specified in the serve task config. This is the tab opened, the default vue-cli app, with documentation links. The Run Task button changes to Stop Task.

Dashboard Tab

The dashboard tab shows various stats about your application bundle, you can inspect it to see file sizes, and even loading speeds for your files.

Output Tab

This tab shows the logs for your task process.

Analyzer

The analyzer tab tries to analyze your code, and create a graph showing the various dependencies of your code. In the below screenshot, we see the purple part representing the code we have written(even though it’s generated), and the green section represents the code that we imported from dependencies.

Build

The build section is almost similar to the Serve section, only that it produces a production bundle that can be used to deploy the application.

Clicking on the config for build task will also open configuration to allow you to specify environments, output directories, and even choose whether it’s a web app, library, or web component.

We won’t look at the different tabs, as we explained in the previous section, but notice that the analyzer, under your chunked app, has changed.

Lint

Lint should be straightforward. It will lint your code and give you an output.

test:unit

This will allow us to run unit tests for our application. We just click on Run task, and see the output

Inspect

This will produce the configuration of your webpack, in a JSON file.

Conclusion

We’ve seen how easy it is to scaffold a new VueJS application from scratch with the Vue UI tool. Even though still in beta, it can take you from Zero to building an App within seconds or minutes. Hope you find the tool helpful and use it more often, and watch out for new releases.

If you feel adventurous, you can inspect the Vue CLI UI source code.

And just in case you are wondering why the UI is so beautiful, the library used is the Vue UI library

Happy Coding.