Setting up a productive Vue.js development environment is the first step to building modern web applications with Vue 3. This post covers using Vite as a blazing-fast build tool, scaffolding a new Vue project with create-vue, essential VS Code extensions for Vue development, and configuring Vue DevTools for efficient debugging.
What is Vite?
Vite is a module bundler for applications. During the development process of your app, you're going to be creating dozens of files. They can range from javascript files to images. Once you're ready to push an app into production, you may want to optimize, compress and minify your code base. Vite will compact your project into as few files as possible. However, it can do so much more.
Why are we going to use vite?
Performance is highly critical for development. Webpack is starting to show its age. As your project grows, bundling a project can take longer. Bundling hundreds of files can take a while. Unfortunately, most tools struggle with bundling large projects. Vite does not have this problem. You can always expect a project to bundle within seconds. Another advantage of vite is its immense support for third-party libraries.
Vite is easily extendable. You can add support for other tools by updating the default configuration. Configuring vite is easier than configuring other tools.
npm create vite@latest
Understanding SASS
SASS is a programming language for CSS. CSS is not known for being an intelligent language. Features like functions or conditional statements are non-existent in CSS. SASS was introduced for extending CSS. We can perform various actions from defining functions to looping through an array of data. SASS is an extremely powerful language. However, SASS is not supported in the browser. It must be compiled into CSS. Luckily, there's a package for handling this process.
npm install sass
PostCSS
PostCSS is not a language. There is no special file extension. Instead, it's a library written in javascript. It'll convert your CSS into an object. The object it generates can be manipulated and transformed with javascript. Once you've made your changes, the object will be compiled into CSS. The advantage is we can use javascript to interact with our CSS code. This is why it's called PostCSS. It's a library that can modify your CSS code after you've written it. PostCSS is popular within Vite and Vue communities. Unlike SASS, we don't need to install the PostCSS package, nor do we need to configure this package. It's installed and configured by vite. This feature gets activated by creating a specific file in our project.
Frequently Asked Questions
What is Vite and why use it with Vue?
Vite is a modern frontend build tool that leverages native ES modules for near-instant server startup and hot module replacement during development, making it much faster than webpack-based setups; it is the officially recommended build tool for Vue 3 projects.
How do you create a new Vue 3 project?
Run npm create vue@latest in your terminal to scaffold a new Vue 3 project using create-vue, which lets you choose options like TypeScript support, Vue Router, Pinia, and testing tools.