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.
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.
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.
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.
Select the first link of chrome.google.com and you will land on the Chrome web tools page as shown in the below screenshot.
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.
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.
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.