DEV Community

Bilal Niaz
Bilal Niaz

Posted on • Edited on

3 1

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.
Follow Me : Twitter LinkedIn

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (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

done

Cloudinary image

Video API: manage, encode, and optimize for any device, channel or network condition. Deliver branded video experiences in minutes and get deep engagement insights.

Learn more

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay