DEV Community

Bilal Niaz
Bilal Niaz

Posted on • Updated on

Install VueJS in Ubuntu 20.04

We'll walk you through a simple step-by-step method to get started with Vuejs. Vuejs is an approachable and simple-to-learn JavaScript framework that is powerful, progressive, and reactive. It includes a variety of tools and libraries that make the application development process easier. You can start designing web applications using Vuejs in no time if you know HTML, CSS, and JavaScript.
Installation:
To integrate Vue.js into a project, you can use the CDN package, NPM, or CLI .
Using the CDN Package:
If you want to learn Vuejs, the CDN package is the best place to start. To get started, simply add the following script tag to your project.

<script src="https://unpkg.com/vue@next"></script>
Enter fullscreen mode Exit fullscreen mode

However, this method is not recommended for production purposes because it can lead to issues with compatibility in the future.
Using NPM:
Vuejs should be installed using NPM for large-scale production applications. You must have Nodejs installed on your computer to use this method.Open your terminal or press Ctrl + Alt + T. For Nodejs and npm run this command:

sudo apt install nodejs
Enter fullscreen mode Exit fullscreen mode

Image description

When you install nodejs, you should also install npm.
Verify the install by checking the version of Nodejs and npm you have downloaded:

nodejs --version
Enter fullscreen mode Exit fullscreen mode

For NPM

npm --version
Enter fullscreen mode Exit fullscreen mode

For latest stable version of vuejs :

npm install vue@next
Enter fullscreen mode Exit fullscreen mode

Image description

Using CLI :
Vue CLI is a complete Vue.js development package. The NPM package manager is used to install CLI globally. You must have some prior understanding of Node.js and front-end build tools before installing Vue.js using the Vue CLI technique. Additionally, we have the option of using npm or the yarn package management.

$ sudo yarn global add @vue/cli
# OR
$ sudo npm install -g @vue/cli
Enter fullscreen mode Exit fullscreen mode

Image description
You may simply upgrade your applications after installing the latest version of Vue.js with Vue CLI. Run the following command to see what version of Vue.js you have.

vue --version
Enter fullscreen mode Exit fullscreen mode

You can use the following Vue CLI command to upgrade to the newest stable version of Vue.js.

$ sudo yarn global upgrade --latest @vue/cli
# OR
$ sudo npm update -g @vue/cli
Enter fullscreen mode Exit fullscreen mode

Getting started with Vue.js
To get started with Vue.js, use the Vue CLI to create a project using the following command.

vue create demo-app
Enter fullscreen mode Exit fullscreen mode

After running this command, you will be asked to choose a preset.

Image description
You can either use the preset features or create your own. The following command can be used to create a Vue project using the GUI technique.

vue ui
Enter fullscreen mode Exit fullscreen mode

This command will open a window in the browser to help you create a project.

Image description
Summary
We showed you how to install Vue.js using three alternative techniques in this article. You can quickly manage your web application after installing Vue.js. You can utilise the CDN package technique to get started with Vue.js right away. For production reasons, however, you should use either the NPM or CLI methods.

Discussion (2)

Collapse
usamaejaz profile image
Usama Ejaz
npm install vue@nex
Enter fullscreen mode Exit fullscreen mode

Shouldn't this be:

npm install vue@next
Enter fullscreen mode Exit fullscreen mode
Collapse
bilalniaz15 profile image
Bilal Niaz Author

done