What Is Vue JS CLI 3 ? (Vue 3) – Part 2

Introduction 

In our last tutorial, we learned how to install Vue JS 2 CLI and set up a simple application.  Due to the release of the new Vue JS 3 CLI, we decided to create a new tutorial that will highlight some of the updated features which are exceptional in regard to this advanced development framework. 

New Features 

Creating a Project 

In the old CLI version, we used:

[root@host ~]# vue init webpack-simple myapp

In the new CLI version, we run:

[root@host ~]# vue create myapp

In the older version of Vue.js CLI, we had four different templates, with each having its own webpack configuration. In the new Vue.js CLI version, we now have the increased flexibility to customize and select the options we prefer for our templates. 

Updates in Vue CLI Version 3

Default presets

• eslint
• babel

Custom presets

• vuex
• vue router
• pwa support
• …. etc

Once we create a project, Vue still abstracts or hides the webpack configuration file, but it does not lock the premade template as the previous version did. 

Webpack

A Webpack is a module packager for Javascript programs. When the webpack command is run, it starts at the entry point and builds an outline of dependencies for the entire application. It will then incorporate those dependencies into one or more packages that will be included in the finalized application.

Webpack Configuration

• webpack config abstracted away ( hidden )
• tweak webpack config in vue.config.js
• Additional plugins can also edit the webpack configuration

Plugins

• Extend the functions and configuration of our application
• Act like typical dependencies, but can also :
  • Edit webpack configuration
  • Edit the source files (e.g., templates )
  • Add extra commands to the CLI 

Instant Prototyping 

• This feature gives you the ability to quickly model a design as a single, standalone component rapidly
• There is no need to set up a Vue Project to develop a single component
• It’s incredible to be able to spin up and work on a new idea quickly

Graphical User Interface 

This new component is by far our most favorite feature. We prefer this functionality due to all of the other JS frameworks being restricted mainly to the command line. It provides a significant boost to the entire framework because: 

• We can easily create and oversee multiple projects
• We can efficiently manage and install dependencies and plugins

In the upcoming series, we will dive deeper into a few of the new features (like the Installation of Vue JS, Web Pack Custom Configuration, Instant Prototyping) and see what the possibilities are. Let’s get to it!

Feature Deep Dive 

Installing the new CLI 

Prerequisites

• Node JS version 8.9 or above 

Installation can be accomplished using the instructions below

Install the nodesource repository 

This command will install node version 12.X. 

[root@host ~]# curl -sL https://rpm.nodesource.com/setup_12.x | bash -

After executing the command above, you should see output similar to this:

[root@host ~]# curl -sL https://rpm.nodesource.com/setup_12.x | bash -

## Installing the NodeSource Node.js 12.x repo...


## Inspecting system...

+ rpm -q --whatprovides redhat-release || rpm -q --whatprovides centos-release || rpm -q --whatprovides cloudlinux-release || rpm -q --whatprovides sl-release
+ uname -m

## Confirming "el7-x86_64" is supported...

+ curl -sLf -o /dev/null 'https://rpm.nodesource.com/pub_12.x/el/7/x86_64/nodesource-release-el7-1.noarch.rpm'

## Downloading release setup RPM...

+ mktemp
+ curl -sL -o '/tmp/tmp.axE3J2ni9b' 'https://rpm.nodesource.com/pub_12.x/el/7/x86_64/nodesource-release-el7-1.noarch.rpm'

## Installing release setup RPM...

+ rpm -i --nosignature --force '/tmp/tmp.axE3J2ni9b'

## Cleaning up...

+ rm -f '/tmp/tmp.axE3J2ni9b'

## Checking for existing installations...

+ rpm -qa 'node|npm' | grep -v nodesource

## Run `sudo yum install -y nodejs` to install Node.js 12.x and npm.
## You may also need development tools to build native addons:
  sudo yum install gcc-c++ make
## To install the Yarn package manager, run:
  curl -sL https://dl.yarnpkg.com/rpm/yarn.repo | sudo tee /etc/yum.repos.d/yarn.repo
  sudo yum install yarn

[root@host ~]#

Next, we install Node JS, and its dependencies:

[root@host ~]# yum install -y nodejs gcc-c++ make
Loaded plugins: fastestmirror, priorities, tmprepo
Determining fastest mirrors
epel/x86_64/metalink | 16 kB 00:00:00
* base: mirrors.liquidweb.com
* epel: mirrors.liquidweb.com
* extras: mirrors.liquidweb.com
* updates: mirrors.liquidweb.com
base | 3.6 kB 00:00:00
epel | 5.3 kB 00:00:00
extras | 2.9 kB 00:00:00
group_spacewalkproject-java-packages | 3.3 kB 00:00:00
nodesource | 2.5 kB 00:00:00
spacewalk | 3.6 kB 00:00:00
updates | 2.9 kB 00:00:00
(1/7): epel/x86_64/group_gz | 90 kB 00:00:00
(2/7): epel/x86_64/updateinfo | 1.0 MB 00:00:00
(3/7): extras/7/x86_64/primary_db | 153 kB 00:00:00
(4/7): epel/x86_64/primary_db | 6.9 MB 00:00:00
(5/7): updates/7/x86_64/primary_db | 4.2 MB 00:00:00
(6/7): nodesource/x86_64/primary_db | 27 kB 00:00:00
(7/7): group_spacewalkproject-java-packages/primary_db | 73 kB 00:00:00
Package 1:make-3.82-24.el7.x86_64 already installed and latest version
Resolving Dependencies
--> Running transaction check
---> Package gcc-c++.x86_64 0:4.8.5-39.el7 will be installed
...
...
...
Dependencies Resolved

===================================================================================================================================
Package Arch Version Repository Size
===================================================================================================================================
Installing:
gcc-c++ x86_64 4.8.5-39.el7 base 7.2 M
Updating:
nodejs x86_64 2:12.13.1-1nodesource nodesource 20 M
Installing for dependencies:
cpp x86_64 4.8.5-39.el7 base 5.9 M
gcc x86_64 4.8.5-39.el7 base 16 M
glibc-devel x86_64 2.17-292.el7 base 1.1 M
glibc-headers x86_64 2.17-292.el7 base 687 k
kernel-headers x86_64 3.10.0-1062.4.3.el7 updates 8.7 M
libmpc x86_64 1.0.1-3.el7 base 51 k
libstdc++-devel x86_64 4.8.5-39.el7 base 1.5 M
mpfr x86_64 3.1.1-4.el7 base 203 k

Transaction Summary
===================================================================================================================================
Install 1 Package (+8 Dependent packages)
Upgrade 1 Package

Total download size: 62 M
Downloading packages:
No Presto metadata available for nodesource
(1/10): cpp-4.8.5-39.el7.x86_64.rpm | 5.9 MB 00:00:00
(2/10): gcc-c++-4.8.5-39.el7.x86_64.rpm | 7.2 MB 00:00:00
(3/10): gcc-4.8.5-39.el7.x86_64.rpm | 16 MB 00:00:00
(4/10): glibc-devel-2.17-292.el7.x86_64.rpm | 1.1 MB 00:00:00
(5/10): glibc-headers-2.17-292.el7.x86_64.rpm | 687 kB 00:00:00
(6/10): libmpc-1.0.1-3.el7.x86_64.rpm | 51 kB 00:00:00
(7/10): mpfr-3.1.1-4.el7.x86_64.rpm | 203 kB 00:00:00
(8/10): libstdc++-devel-4.8.5-39.el7.x86_64.rpm | 1.5 MB 00:00:00
(9/10): kernel-headers-3.10.0-1062.4.3.el7.x86_64.rpm | 8.7 MB 00:00:00
(10/10): nodejs-12.13.1-1nodesource.x86_64.rpm | 20 MB 00:00:00
-----------------------------------------------------------------------------------------------------------------------------------
Total 50 MB/s | 62 MB 00:00:01
Running transaction check
Running transaction test
Transaction test succeeded
...
...
...
Installed:
gcc-c++.x86_64 0:4.8.5-39.el7                                                 

Dependency Installed:
cpp.x86_64 0:4.8.5-39.el7 gcc.x86_64 0:4.8.5-39.el7 glibc-devel.x86_64 0:2.17-292.el7
glibc-headers.x86_64 0:2.17-292.el7 kernel-headers.x86_64 0:3.10.0-1062.4.3.el7 libmpc.x86_64 0:1.0.1-3.el7
libstdc++-devel.x86_64 0:4.8.5-39.el7 mpfr.x86_64 0:3.1.1-4.el7 

Updated:
nodejs.x86_64 2:12.13.1-1nodesource                                              

Complete!
[root@host ~]# 

Next, we can verify that node.js is installed by simply typing: 

[root@host ~]# node --version 
v12.13.1
[root@host ~]# 

This command will show the version as v12.13.1 if installed correctly (version numbers may differ depending on the install date). 

Now that we have installed and checked the version of NodeJS, we can now install the new CLI version

oot@host ~]# npm install -g @vue/cli@3.0.5 

This command should provide output similar to the information below:

[root@host ~]# npm install -g @vue/cli@3.0.5
npm WARN deprecated fsevents@1.2.9: One of your dependencies needs to upgrade to fsevents v2: 1) Proper nodejs v10+ support 2) No more fetching binaries from AWS, smaller package size
/usr/bin/vue -> /usr/lib/node_modules/@vue/cli/bin/vue.js

> core-js@3.4.1 postinstall /usr/lib/node_modules/@vue/cli/node_modules/core-js
> node postinstall || echo "ignore"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)


> protobufjs@6.8.8 postinstall /usr/lib/node_modules/@vue/cli/node_modules/protobufjs
> node scripts/postinstall


> nodemon@1.19.4 postinstall /usr/lib/node_modules/@vue/cli/node_modules/nodemon
> node bin/postinstall || exit 0

Love nodemon? You can now support the project via the open collective:
> https://opencollective.com/nodemon/donate


> ejs@2.7.4 postinstall /usr/lib/node_modules/@vue/cli/node_modules/ejs
> node ./postinstall.js

Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules/@vue/cli/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ @vue/cli@3.0.5
added 706 packages from 525 contributors in 33.588s
[root@host ~]# 

Now we can check the version of vue using the following command: 

[root@host ~]# vue --version
3.0.5
[root@host ~]#

This command will show us the 3.0.5 version for Vue CLI.

Now that we have installed the new Vue 3 CLI, let’s change directories into our cPanel users folder by typing the following command:

ot@host ~]# su $USER 

and then change directories to our domains public_html folder
($user - represents our cPanel username)

Once complete, we should be in our domains document root - public_html 

[lwvuejs@host ~]# cd /home/$USER/public_html 
[lwvuejs@host ~]# pwd 
[lwvuejs@host ~]# /home/$USER/public_html 

Now we are ready to create our first Vue 3 project. In the next article of this series, we will dive deeper into using Vue.js and how to create a simple project using Vue. Stay tuned!

Get Started Today!

Utilizing frameworks like Vue JS to construct apps or binaries is now easier than ever. By leveraging some of the world's most powerful Dedicated and Virtual servers, we provide the horsepower to run those apps wide open! We also have some of the most intelligent, dedicated support admins in the industry, so your development team can focus on their projects, secure in the knowledge they are hosted with one of the world leaders in technical support.