Vite and Vue Devtools

In the previous chapter, you learned how to utilize the Vue component’s data reactivity and query the external data into the component’s data system using methods, computed properties, and watch properties. This chapter introduces Vite and shows you how to debug these computed properties and events using Vue Devtools.

We will cover the following topics in the chapter:

• Using Vite
• Using Vue Devtools

Technical requirements

It would be best to have your Node.js version at least 14.18+ or 16+ and above. To check your Node version, run the following command in Command Prompt (or PowerShell):

node -v

You should have your npm version to 7.x and above since all our commands in the chapter are compatible with npm 7.x, and there is a slight difference with 6.x. And finally, you should install Yarn as our primary package management tool throughout the chapter.

The complete code for this chapter is available on GitHub at: https://github.com/PacktPublishing/Frontend-Development-Projects-with-Vue.js-3/tree/v2-edition/Chapter03

Using Vite

Vite.js is the build management tool aiming to do the following:

• Help you develop faster (locally develop your project with a more time-saving approach)
• Build with optimization (bundle files for production with better performance)
• Manage other aspects of your web project effectively (testing, linting, and so on)

It uses a Rollup bundler under the hood to perform chunk bundling and packaging of JavaScript projects.

Starting from Vue 3, Vite has replaced Vue CLI and become the default build tool for managing your Vue applications. Vite also supports TypeScript and provides a leaner developer experience when working on current web projects.

To initialize a new Vue project with Vite, you can use the following specific command:

npm init vue@latest

In this case, you will need to provide additional configurations for Vite to proceed, as shown in Figure 3.1:

Figure 3.1 – Configuration prompt for a new Vue project...

Using Vue Devtools

Vue Devtools is a browser extension for Chrome and Firefox and an Electron desktop app. You can install and run it from your browser to debug your Vue.js projects during development. This extension does not work in production or remotely run projects. You can download the Vue Devtools extension from the Chrome extension page, as seen in the following screenshot:

Figure 3.8 – Vue.js Devtools Chrome extension page

You can also download the Vue Devtools extension from Firefox (https://addons.mozilla.org/en-US/firefox/addon/vue-js-Devtools/):

Figure 3.9 – Vue.js Devtools Firefox extension page

The Devtools extension reveals useful information within the browser’s developer, including performance and event tracking for any Vue component in your application during running. Once enabled, the extension will add a Vue tab to the developer’s console. The Vue tab displays a view with several...

Summary

In this chapter, you learned about Vite and how to create a Vue project managed by Vite through the command-line Terminal. You also learned about Vue Devtools and how to use its features, which will assist you on this book’s journey to more advanced topics.

The next chapter focuses more on advanced Vue component features, such as passing data from one component to its nested components, validating data received from outside of the element, customizing the layout of a component with slots, and keeping the references of components for external control.