Must Have Tools For Vue.js Development

Vue.js is an advanced JavaScript framework with an easy learning curve and a functionality driven structure. It's one of the most widely-used frontend frameworks. In this blog we will have a look at some of the tools that help us develop Vue projects more conveniently. There are thousands of tools created by Vue’s large open-source community. We will look around at some of the  tools and extensions that aid our VueJs project development. 
 
Basically, we need tools so that we can save development time and increase production to delivery time. 
 

Node.js

 
Download node from official website. Install the Long Trem Support(lts) version as per the os you are using. Download Node.js from its official website as per your operating system. Click on “Recommended for Most Users” to download the stable version. You can also install nvm for switching between multiple npm versions.
 
Must Have Tools For Vue.js Development 
 
Npm includes a tool known as npx that runs executable packages. Npx will help to create a react application in the directory that we run the command. We can create a new project by running the npx command which will also install the required dependencies. In simple words, npx is a package runner tool that’s included in npm. 
 
To check the version of the node run the command 
 
Node –v 
 
To check the version of npm run the command
 
Npm -v
 

Vue CLI

 
Vue CLI stands for Vue Command Line Interface. Vue CLI is a full system for rapid Vue.js development. As per Vue CLI’s documentation, Vue CLI aims to be the standard tooling baseline for the Vue ecosystem. It ensures the various build tools work smoothly together with sensible defaults so you can focus on writing your app instead of spending days wrangling with configurations.
 
You might be having some questions in your mind, like why do we need to use Vue CLI?  Vue CLI puts Webpack, Jest, Mocha, Babel, Typescript, PWA, Cypress.io together to make them work.
 
To install Vue CLI use the command as given below,
 
Npm install –g @vue/cli
 
Note
Vue CLI 4.x requires Node.js version 8.9 or above (v10+ recommended).
 
To verify our installation and check the versions installed, run the command given below:
 
Check the version of Vue.js
 
Vue –v
 
Check the version of Node.js
 
Node –v
 
Check the version of npm installed
 
Npm –v
 

VS code as IDE

 
My choice of IDE is Visual Studio Code, you can download and install it by visiting this link from its official website. Visual Studio Code is a free source-code editor made by Microsoft for Windows, Linux and macOS. Features include support for debugging, syntax highlighting, intelligent code completion, snippets, code refactoring, and embedded Git as per wikipidea.
 
Must Have Tools For Vue.js Development 
 
To download click on the button highlighted if you are using any n other Operating system than you can select the OS of your choice. 
 

Vetur extension

 
Vetur is a VS code extension provided by Pine Wu that helps us to make our development process easier. Vetur provides so many functionalities such as Syntax-highlighting, Snippet, Emmet, Linting / Error Checking, Formatting, IntelliSense, Debugging and many more. You can refer to this GitHub link for more information.
 
Must Have Tools For Vue.js Development 
 

Vue Developer tools

 
Vue developer tools is a Chrome and Firefox extension for debugging our Vue.js applications. To add Vue developer tools in our browser search for “Vue Developer Tools” in your choice of browser. Vue Dev tools is used to inspect components, events, and state in the browsers as each of these has its tab.
 
Must Have Tools For Vue.js Development 
 
Select the first link of chrome.google.com and you will land on the Chrome web tools page as shown in the below screenshot.
 
Must Have Tools For Vue.js Development 
 
Click on the “Add to Chrome” button so that we can use the chrome extension in our browser. Click on the “Add extension” button for confirmation that we really want to add the extension to our browser.
 
Must Have Tools For Vue.js Development 
 
To check whether the website you visited is using Vue, you can check for the Vue icon besides your search bar which fades or lightens up in the absence or availability respectively if Vue.js is used.
 
If you want to check whether Vue extension is added your browser or not, you can either run a Vue application or visit any site using Vue.js. Open developer tools of your browser. If your applciation uses Vue.js then you would be able to see “Vue” tab. 
 
Must Have Tools For Vue.js Development 
 

Axios

 
When we build any real time application, most probably we need to call any API and use that data to be displayed or there are scenarios where we would need to send data to the database. There are many ways to do so but the most easy and popular approach is to use Axios. Axios is promise-based HTTP client for the browser and node.js. Axios is used to create and manage Ajax requests. 
 
Use the command given below to install axios using npm
 
npm install axios
 
Let's take an example for using axios for get request
 
Axios.get(“https://jsonplaceholder.typicode.com/posts”)
.then(response => console.log(response))
 
This axios request prints the response from the API in the console. Check the console for checking the response from the API.
 

Summary

 
In this article we had a look at some of the tools that provide help to the developers for easing the development of Vue.js applications.