Vue UI: A First Look
With a stable release of Vue CLI version 3 just around the corner, it’s time to take a look at some of the interesting new features this new release has to offer. Completely revamped based on the feedback provided by the growing community of Vue.js developers, this new version delivers a new set of workflow-centric tools.
One particular feature that will surely improve the workflow of every Vue.js developer is Vue UI; a graphical user interface enabling you to create, update and manage every aspect of your projects.
Today, I will run you through some of the main features that the beta version of Vue UI available in the release candidate of Vue CLI 3 has to offer.
Getting Started
First and foremost, let’s make sure you have the latest version of Vue CLI installed. Open your terminal of choice, and type the following:
npm install -g @vue/cli
# OR
yarn global add @vue/cliYou can check the version you just installed with the -V flag:
vue -V
# Should display something like this
3.0.0-rc.3In order to initialize Vue UI in your current working directory, simply type this command:
vue uiThis will automatically open your web browser, and assuming you have no existing projects in your current directory, you should be presented with an interface similar to this:
On launch, Vue UI will open the Project Manager, so that you can easily access your existing projects, once you create some.
Creating Your First Project
As shown in the screenshot above, the main navigation bar of Vue UI offers three options: “Projects”, “Create” and “Import”. To create a new project, simply click the “Create” button:
The project creation tool allows to chose in which folder you would like to create the new project (in case you would like to create it in a different folder than the current working directory); once the folder selected, click the “Create a new project here” button to enter the step-by-step guide:
Choose a name for the folder in which the new project will live, and select your favorite package manager (npm or yarn), and click next:
You are now asked to make a choice of preset for your project; in most cases, the default preset will be more than enough to get started, but for this tutorial, we will manually create our own preset. Select “Manual”, and click “next”:
Various options are configurable; from using Babel and TypeScript, to enabling additional Vue components such as Vuex and Vue Router. Finally, depending on the choices you made, you will be presented with a final screen to select specific additional libraries:
In my case, I opted to use a code linter and to enable unit tests; I chose to add Prettier and Jest to my stack, and to enable automatic linting on file save and commit.
Finally, click “Create Project” to save your choices as a preset that you will be able to reuse later, and scaffold your new project:
Once the project created, Vue UI will redirect you to it, and show you a list of the plugins that were just installed based on your choices:
From here, you can update your plugins, install additional plugins, enable the Vue Devtools, and more.
Adding Plugins
It is very simple to install additional Vue.js plugins once your project is created. To do so, click on “Add Plugin” to start searching for what you need:
Note that some plugins are labeled as “Official”; it means that these plugins are provided by the Vue.js team directly, or officially endorsed by the Vue.js team.
Simply select the plugin you are interested in, and click the “install” button:
Note that in the current version, you can only install one plugin at a time. Depending on the plugin you chose, you might be asked to make a choice for various additional settings related to the plugin. Once the installation finished, you will be presented with a screen allowing you to commit this change to git:
Finally, our newly installed plugin is listed along the ones added during creation:
Configuring Your Project
Vue UI allows you to modify the configuration of your project after its creation. To do so, click the configuration icon on the left sub menu, and you will be presented with the current Vue CLI configuration:
In this panel, we can easily modify every available option of Vue CLI. I recommend you read the documentation to learn more about the different configuration options available to you.
Note that since we opted to use ESLint for this particular project, there is also an additional panel to configure your ESLint rules.
Running Project Tasks
Another very useful feature of Vue UI is the ability to run and diagnostic your projects tasks (defined as npm scripts) directly from the UI. For example, we can run the development server:
The interface provides us with some interesting technical details about the application such as the build size, some loading time indicators, and detailed rundown of the assets created. If you want to get more granular information about the various modules of your application and how they affect the overall size of the build, you can switch over to the “Analyzer” tab:
This tool can be very useful when, for example, trying to optimize the size of your application, and you need to identify the modules or static assets making up for most of the overall build size.
Localizing Your App
Earlier in this tutorial, we installed the Vue i18n plugin via the plugin management interface. When we did so, an additional sub menu item was added, exposing an interface allowing you to define static text content and its corresponding localization in any languages of your choice.
When accessing the localization panel, we notice that “English” is already defined as default language, along with a sample message “hello i18n!”. In order to start localizing our static text content, we first need to start adding the languages that we need to support. To do so, click the “Add locale” button:
In this example, I added a “fr” locale for French; from there, I can start translating the original English text into the local equivalent:
When we look at the code, we can see that the localization interface automatically scaffolded the necessary code to leverage the localization feature, along with all the translation files:
As you can see, although still in beta, Vue UI is a very useful and promising tool; it will become even more useful in time, as Software Engineers start developing their own plugins to accommodate their needs.
In a future article, we will learn how to develop our own plugins in order to enhance and optimize our development pipeline.
