Requirements and tooling
In order to get started with Vue.js development efficiently, we will need to make sure you can actually run and edit the code sensibly. While you could technically run the code using the library from a Content Delivery Network (CDN), this is not recommended for real-world applications. As the official docs (https://vuejs.org/guide/introduction.html) also state, there is no build setup involved, and the drawback is that this setup does not support the Single File Component syntax and leaves you with little control over applications’ optimizations such as compiling, minification, and lazy loading.
In this book, we will make use of the Vue.js npm package and then use it to scaffold starter projects to build upon. We will start all of our projects using the command line. To use the npm package, you will need to install Node.js (a JavaScript runtime environment). Make sure to install at least Node.js version 18. npm is a public repository (https://www.npmjs.com/) where developers publish, share, and use JavaScript packages.
Node.js can be downloaded from https://nodejs.org/en. You can confirm the correct installation of the version by opening a Command-Line Interface (CLI) and typing the following:
node -v
It should return something like this:
v18.0.0
It is always possible to develop or experiment without any local installations. We can turn to web-based environments for that. These environments offer sandboxed environments with sensible presets out of the box. This means they often are configured to use the recommended settings from the official documentation. They offer less control and are somewhat limited in more specific use cases. They are highly valuable, though, if you want to experiment with some of the concepts.
Online resources
Vue.js provides an online development playground, https://sfc.vuejs.org/, but I would like to point out StackBlitz (https://stackblitz.com/), where you can instantiate complete development environments that run in the browser. While it’s not useful for deploying applications, this is an excellent way of testing a proof of concept or just using it as a small playground.
You can just register, start a new project, and choose a Vue.js 3 template to get started. Code examples will be available on GitHub, where you can clone or fork the repository to validate your own code against the working example.
For future reference, the Vue.js docs (https://vuejs.org/guide/introduction.html) are very accessible and offer a step-by-step explanation of all the possible contexts. I would certainly recommend checking them out for a more in-depth understanding of the topics we will be covering.
Once you get involved in the Vue.js community, you will find that it is a very helpful, supportive, and friendly community. Again, the official Vue.js website provides some guidance (https://vuejs.org/about/community-guide.html).
Welcome to the community, now let’s get started!
