How To Install and Setup Vue.js – A Beginner’s Guide

Install and setup Vue.js project is very easy and straightforward. As other JavaScript frameworks, there are multiple ways to start using Vue.js.

This guide will help you choose a way that you like, from a list of multiple ways to install Vue.js. So, let’s get started.

1. Install Vue.js using CDN

By using CDN or unpkg URL, you can easily install Vue.js and start using it in your local environment.

The recommended CDN URL is https://cdn.jsdelivr.net/npm/vue, which will automatically reflect the latest version as soon as it’s published to NPM.

Also, you can browse the npm packages over here.

You can simply copy the CDN URL and use it in tag in your Vue.js app.

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

This way you can easily start using Vue.js. I personally don’t use this method as I am using Node.js.

2. Install and Setup Vue.js using NPM

You can use Node Package Manager (NPM) to install Vue.js via command line.

IMO, this is an ideal method when you’re creating a robust project or you’d like to integrate Vue with your existing project.

You must have Node.js with NPM installed to use this method.

The following are the commands that will check whether system has these installed or not.

node -v
npm -v

If not installed then you can go to Nodejs.org to install and set up the Node.js with NPM in your environment.

Now, let’s go to the project folder and run below command to install Vue.

npm install vue --save

Basically, this will install Vue within the node_modules folder of your project.

3. Install Vue.js using Vue CLI (Recommended)

The Vue Command Line Interface (CLI) is quick and easy way to start with Vue.js project and basic scaffolding in place.

Let’s get started by installing the Vue CLI.

# Install Vue-CLI

npm install --global vue-cli

# Create a new project using webpack

vue init webpack my-project

# install dependencies

cd my-project
npm install

# run the project

npm run dev

Finally, run your app @ http://localhost:8080 on your browser window.

Are you ready for your first Vue.js project: Vue.js Hello World

That’s it! It’s easy to install and setup Vue.js, right? I hope it’s helpful to you.

Mohit Tanwani

Mohit Tanwani is an enthusiast Techie, a blogger, and IT geek. He has been crazily involved in the industry for 5 years.

Leave a Reply

Be the First to Comment!

avatar
  Subscribe  
Notify of