Setting up the development environment

There are many ways of writing and editing code, and in time, you will find a flow that works best for you. For this book, we will get started using a generally recommended setup. Feel free to make changes that work for you.

Vue.js development takes place in an environment that allows you to write code efficiently by highlighting correct code and helping you to catch errors before you save your changes. Debugging and validating code can take place in various stages, but for the scope of this book, we’ll use the development interface as well as the browser environment.

Let’s start by installing a widely adopted development interface.

Integrated development environment

An Integrated Development Environment (IDE) helps you write and edit code by supporting helpers such as syntax highlighting, formatting, and plugins that tie in with the framework of choice. Any modern editor will do, but in this book, we will use Microsoft Visual Studio Code (VSCode), which is free to use and provides a good developer experience; it can be downloaded from https://code.visualstudio.com/.

On top of the installation of the IDE, I recommend the following plugins, which make the developer experience much more pleasant:

• Vue Language Features (Volar): Supports the markup of Vue.js 3 snippets and highlighting
• Vue Volar extension pack: Adds some recommended plugins to help automate some chores while coding
• Better comments: For better markup of comments in the code
• Indent-rainbow: Applies color to indented blocks of code, to quickly identify levels of indentation

Vue.js can be developed using many other IDEs, other IDEs, such as WebStorm, Sublime Text, Vim/NeoVim, and Emacs. Choose what suits you, bear in mind that screenshots will be shown using the recommended VSCode setup, as described earlier.

Vue.js DevTools

Today’s browsers come with built-in tools that allow web developers to inspect and manipulate the HTML, CSS, and JavaScript code of web pages, test and debug their code, measure page performance, and simulate various device and network conditions.

macOS users can open the DevTools using Cmd + Option + I. Windows or Linux users can use Ctrl + Shift + I.

It is good to note that when you’re inspecting an element in the browser, the elements you will see are the elements that are rendered by Vue.js! If you inspect the source code of the browser, you will see just the mounting point of the app. This is the virtual Document Object Model (DOM) in action, and we will clarify that a bit later on.

Since Vue.js runs (typically) in a browser environment, using DevTools is a skill that is just as valuable as writing clean code. For Chromium-based browsers and Firefox, Vue.js offers a standard plugin.

The Vue.js DevTools plugin helps you with inspecting and manipulating Vue.js components while they are running in the browser. This will help with pinpointing bugs and getting a better understanding of how the state of the app is translated to the User Interface (UI).

Note

You can find more information and install the plugin here: https://vuejs.org/guide/scaling-up/tooling.html#browser-devtools.

We will take an in-depth look at the Vue.js DevTools at a later stage. At this point, we’ve met all of the requirements of starting out with any Vue.js app, either small or large scale. They all meet the same basic requirements.

At this point you must be eager to dive in and start with the first project, so let’s create a small app to familiarize ourselves with development.