Building Real-World Web Applications with Vue.js 3 E-Book

Joran Quinten

• Herausgeber: Packt Publishing
• Sprache: Englisch

Seitenzahl: 323

Veröffentlichungsjahr: 2024

Beschreibung

In the ever-evolving web development landscape, Vue.js stands out with its intuitive design and progressive framework, empowering developers to create interactive and dynamic web applications. This book will help you stay in the forefront of modern web technologies by mastering Vue.js through hands-on projects and practical applications.
Building Real-World Web Applications with Vue.js 3 is your guide to exploring the core concepts of Vue.js, setting up your development environment, and creating your first Vue.js application. You’ll progress by building a recipe app using Vuetify, followed by leveraging data visualization to create a fitness tracker featuring dynamic dashboards using external databases and Vue-ChartJS. You'll then get to grips with multiplatform development with Quasar to deploy your app.
As you develop an interactive quiz app, you’ll be introduced to server-side logic with Nuxt.js, WebSockets for real-time communication, and client-server differentiation. Additionally, you’ll study experimental object recognition using TensorFlow, leveraging machine learning and camera input, and conclude by creating a portfolio website with Nuxt and Storyblok.
By the end of this book, you'll have the knowledge and confidence to create your own Vue.js applications and build a portfolio to showcase your Vue.js skills to potential employers.

Leseprobe

Building Real-World Web Applications with Vue.js 3

Build a portfolio of Vue.js and TypeScript web applications to advance your career in web development

Joran Quinten

BIRMINGHAM—MUMBAI

Building Real-World Web Applications with Vue.js 3

Copyright © 2023 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

Group Product Manager: Rohit Rajkumar

Publishing Product Manager: Kushal Dave

Book Project Manager: Sonam Pandey

Senior Editor: Anuradha Joglekar

Technical Editor: Reenish Kulshrestha

Copy Editor: Safis Editing

Proofreader: Safis Editing

Indexer: Rekha Nair

Production Designer: Aparna Bhagat

DevRel Marketing Coordinators: Namita Velgekar and Nivedita Pandey

Publication date: January 2024

Production reference: 1131223

Published by Packt Publishing Ltd.

Grosvenor House

11 St Paul’s Square

Birmingham

B3 1RB, UK

ISBN 978-1-83763-039-4

www.packtpub.com

To my wife, Lydia, for encouraging me to try new things, supporting me, and giving me the space to grow and pursue ambitious goals. To my kids, Joep and Lena, for your regular distractions, for your general curiosity, and for teaching me to see the world through different eyes.

– Joran Quinten

Contributors

About the author

Joran Quinten has a passion for getting people to love technology and getting technology to play nice. With over a decade of experience in developing and designing software, he has built up a broad background in development and architecture. He loves sharing knowledge and has been invited to speak at several tech events. Joran graduated from Fontys University of Applied Sciences, Eindhoven, in 2010. Currently, he works for Jumbo Supermarkten, a national grocery chain, where he is the technical lead of the design system team and acts as an ambassador for the tech department. He is passionate about mentoring and coaching junior developers. Joran lives close to Eindhoven with his wife, son, and daughter.

I want to express gratitude to my supportive team of editors and reviewers who have been of great help in helping me to find the right tone and in offering encouragement throughout the writing process. Special thanks to my wife, Lydia, and my kids, who teach me to take up and experience new challenges. And finally, thanks to family, friends, and colleagues who have been interested in and supportive of this journey.

About the reviewers

Abdallah Idriss Lutaaya is a software engineer with more than four years of experience in full stack development. He holds a master’s in computer science from the International University of Applied Sciences, Germany, and a bachelor’s from Makerere University, Uganda.

Abdallah excels in crafting scalable web applications and building robust backend systems for seamless integration.

His language repertoire includes Python, JavaScript, Dart, Node.js, TypeScript, SQL, and Dart, with mastery in React.js, Vue.js, Flutter, Django, and Flask. Abdallah brings a unique mix of academic rigor and practical experience.

Javier Suarez is an experienced software developer with over eight years of experience in building web applications. He possesses a strong proficiency in a wide range of technologies, including Vue.js, Quasar Framework, Nuxt, Pinia, Vite, JavaScript, Django REST Framework, Python, Git, and Linux.

Javier worked as a frontend developer at Housettel in Malaga. During his time there, he made significant contributions to the implementation of property management systems, leveraging his skills in Vue.js and Quasar Framework with TypeScript. His efforts resulted in a reduction in the time required for real estate listings.

He also served as a frontend developer at CodigoJS in Seville. In this role, he played a key role in developing a web application for managing neighborhood associations. Javier utilized his expertise in Django/Python, Vue.js, and Quasar Framework to create an efficient and user-friendly solution.

Since 2022, Javier has been working as a frontend developer at Mind Movies LLC in San Diego, CA. In this position, he has developed a web application using Vue.js, JavaScript, and Quasar Framework. He successfully deployed the application to AWS as a Progressive Web App (PWA). Collaborating with a team of engineers, he has contributed to the design and implementation of various features within the application.

Pyae Sone Win is an experienced full stack developer with over five years of professional experience in web application and website development. His expertise lies in utilizing programming languages such as PHP, Laravel, and JavaScript to build efficient and effective solutions. He is well versed in using MVC frameworks and data models to design and develop web applications that are both functional and user-friendly. He is also skilled in automated scripts with webpack and single-page applications with Vue.js and React.js.

In addition to his web development skills, Pyae is also experienced in mobile application development for retail e-commerce and education platforms. He has a strong understanding of both iOS and Android development, allowing him to deliver high-quality solutions for both platforms.

He is familiar with the AWS production environment and has experience maintaining and deploying customer-facing applications on the platform. He is also well versed in the best development practices, such as TDD and Scrum, ensuring that he is able to deliver high-quality solutions that meet the needs of his clients.

He is passionate about his work and is always looking for new challenges and opportunities to improve his skills. He is a team player who can easily adapt to new technologies and thrive in fast-paced, deadline-driven environments. He is confident that his skills and experience make him an excellent candidate for any web development or mobile development project.

Table of Contents

Preface

Part 1: Getting Started with Vue.js Development

1

Introduction to Vue.js

Technical requirements

The need for Vue.js

Requirements and tooling

Online resources

Setting up the development environment

Integrated development environment

Vue.js DevTools

My first app

The project in the IDE

Your first coding steps

Summary

2

Creating a Todo List App

A new project

Cleaning up the default installation

Building up the app

Creating the ListItem component

Creating the list

Making a list

Reactivity explained

Sorting the list

Preserving changes to the list

Single File Components

The Vue.js DevTools

Inspecting a component

Manipulating a component

Summary

3

Building a Local Weather App

Technical requirements

Initializing the app

Working with different types of APIs

Handling data from a third-party API

Constructing the API call

Styling with Tailwind

Utility classes

Formatting data

Custom style use cases

Ensuring stability with Vitest

Vue Test Utils

Global test functions

A simple component test

Mocking external sources

Mocking for success

Unhappy path

Testing with APIs

Summary

4

Creating the Marvel Explorer App

Technical requirements

Getting started with our new project

The Superhero connection

Marvelous routes in a single-page application

Optional parameters

Paging Dr Strange

A simple pagination component

Composables, assemble!

Refactoring useComics

Reassembling functionalities

Managing the roster

Searching for heroes

Adding search

An overview with superpowers

A different vision

Handling the error

Adding query parameters

Summary

Part 2: Intermediate Projects

5

Building a Recipe App with Vuetify

Technical requirements

A new Vue project

Let’s get cooking

Quick development with Vuetify

Connecting the recipes to our app

A bit of additional setup

Our API connection

Selecting a recipe

Adding and removing a meal

Using Pinia for state management

Stateful applications

Adding Pinia

The first store

The meal planner store

Computed store values

Summary

6

Creating a Fitness Tracker with Data Visualization

Technical requirements

Creating a client

Setting up the database

Handling the user

User store

Authenticating users

Protected routes

Logging out

App state

Centralized dialog

Centralized app menu

Exercise tracking

Selecting a date

Adding a routine

Saving to the database

Our hard work visualized

A view-based dashboard

History and overview

Graphs

Summary

7

Building a Multiplatform Expense Tracker Using Quasar

Technical requirements

Setting up the database

Using Quasar to build a project

Authenticating with Supabase and Quasar

Routes and app structure

Expense tracking features

Managing categories

Adding expenses

Showing expenses and an overview

Building the app with the Quasar CLI

A custom icon

Packaging for different targets

Summary

Part 3: Advanced Applications

8

Building an Interactive Quiz App

Technical requirements

Entities in the quiz app setup

Setting up the database

The SQA

Modules and auto-imports

File-based routing

Reintroducing two familiar friends

Dynamic file-based routes

Setting up the SQS

Nuxt API routes

Setting up a basic Node project

Executing scripts in parallel

Why sockets?

Completing the SQS

Creating the CQA

Setting up the app

Adding the socket client

Listening to socket events

Automated route changes

Player management in the lobby

We need some answers

Keeping and showing the score

Summary

9

Experimental Object Recognition with TensorFlow

Technical requirements

Introduction to TensorFlow

Setting up the project

Performing and displaying a status check

Selecting an image

Adding a voice to the app

Learning from the prototype

Scavenge Hunter

Setting up the project

Starting a new game

Building the finish screen

Skipping to the end

Testing on a mobile device

Object recognition from the camera

Detecting and recognizing objects on a stream

Connecting detection

Wrapping up the game flow

Summary

Part 4: Wrapping Up

10

Creating a Portfolio with Nuxt.js and Storyblok

Technical requirements

Setting up Storyblok

Initializing the Nuxt portfolio

Installing Nuxt modules

Working with multiple content types

Configuring the portfolio

Mapping content to code

Presenting the portfolio section

Modifying the content model

Updating existing types

Expanding the block properties

Mapping meta fields

Adding new features

Generating a standalone website

Publishing the static site

Automating the build and deployment on code change

Automating the build on content change

You made it!

Index

Other Books You May Enjoy

Preface

Welcome to the Vue.js community, which is one of the most friendly frontend communities. Vue.js is a frontend framework that allows you to build performant interactive web applications with ease. Vue.js has a shallow learning curve – getting started is easy! This book guides you on your first steps to creating Vue.js applications with increasing complexity and size.

Apart from showing you the technology and teaching you the best practices with Vue.js, the chapters of this book are set up to teach you about general development practices as well. The book lets you experience different approaches when dealing with new technology, implementing third-party solutions, or orchestrating more complex application structures.

There are many resources that focus on very specific use cases or even single components. The aim of this book is to offer a realistic and broad view of Vue.js developer responsibilities and expectations. Every chapter will result in a functional application. Every application introduces a new concept to familiarize yourself with.

I have designed the chapters to progress in a natural way, where we increase complexity with every chapter. I will enforce concepts iteratively over the course of multiple chapters. I am experienced in using Vue.js in a complex, enterprise-level environment where my experience in adopting useful practices and working with third-party solutions has shaped the focal points of the structure and chapters.

As a mentor and coach, I have tried to show and guide you through regular development processes – not writing perfect code from the start but embracing refactoring steps and improving software while an application grows.

The main goal of this book is to not only allow you to both learn and understand Vue.js and its ecosystem, but also prepare you to land a Vue.js developer job by growing a portfolio that showcases your capabilities as a professional web developer.

Using technologies such as Vue.js, Nuxt, Pinia, and Vite is what enables us to build the wildest applications. This is only possible because of the combined and relentless efforts of core maintainers and the numerous contributors that build and publish open source software. Please consider donating or participating to show your support as well. Any contribution to these frameworks or libraries is welcomed and much needed to keep maintaining and developing software that benefits us all.

Who this book is for

This book is aimed at software engineers with an affinity for web-based technologies. Anyone with a software engineering background should be able to quickly pick up the concepts in this book.

Primarily, the book aims to guide beginner or junior developers to familiarize themselves with Vue.js and frontend technologies and practices. This book helps them build up experience in a broad range of topics, which helps in more successfully applying for a position as a Vue.js developer.

While not the primary focus, any software engineer who is curious about the Vue.js ecosystem can very well progress through the chapters, building up a broad sense of the possibilities of using Vue.js as a framework to build applications.

If you have an affinity with one of the currently popular frontend frameworks or libraries such as React, Angular, Svelte, or Qwik, you will have a head start in grasping concepts such as reactivity, testing, and fetching data from APIs. If you are looking to transition to a Vue.js-orientated position, this book will get you up to speed with the Vue.js approach to common practices.

What this book covers

Chapter 1, Introduction to Vue.js, explains the core concepts we need to build Vue.js applications. It will help you set up a development environment with the recommended settings for Vue.js development.

Chapter 2, Creating a Todo List App, builds upon the core concepts and explains a key concept in creating interactive web applications – reactivity. It also introduces the development and debugging tools as important tools to maintain and inspect applications.

Chapter 3, Building a Local Weather App, explores external data as a resource of a web application. It will add a testing framework to the application, which we can use to increase the robustness of the application by identifying both happy and unhappy user flows and how to deal with those.

Chapter 4, Building the Marvel Explorer App, leans heavily on interacting with a great volume of external data and connecting to public APIs to retrieve the correct data for a user. It uses composables (a concept for working with stateful logic) to use and reuse functions and compose more complex behavior. By leveraging the default router, we will introduce multiple views and routes to an application.

Chapter 5, Building a Recipe App with Vuetify, teaches you how to use third-party libraries, such as Vuetify, to quickly build an interface. It will strengthen the concept of working with APIs by iteration and introduce Pinia, the default state management library for Vue.js. With Pinia, you will learn to persist state in the browser. You will learn refactoring techniques and experience dealing with changing features and requirements.

Chapter 6, Creating a Fitness Tracker with Data Visualization continues the topic of persisting state and teaches you how to store data in an external database, as well as adding entry-level authentication to a web application. It demonstrates trade-offs between abstraction and a more pragmatic approach when building a feature, revisiting refactoring strategies.

Chapter 7, Building a Multi-Platform Expense Tracker Using Quasar, sidesteps in a different direction, where you learn how to use web technologies to build applications for one or even multiple non-web platforms using a framework. It continues to solidify previously learned topics by revisiting similar tech stacks but with different goals and features in mind.

Chapter 8, Building an Interactive Quiz App, dives deep into developing an app from backend to frontend and includes architectural concepts and decisions as well. It introduces Nuxt, which is one of the most popular and developer-friendly meta frameworks for the Vue.js ecosystem. You will interact with WebSockets and see how to create real-time interactivity between multiple clients at the same time.

Chapter 9, Experimental Object Recognition with TensorFlow, teaches you the prototyping practices and how to familiarize yourself with new technologies by experimenting in an isolated environment. It also touches upon developing and testing early on a specific target. Most importantly, it teaches you to have a bit of fun when building new projects, keeping you interested and motivated in your own continuous development.

Chapter 10, Creating a Portfolio with Nuxt.js and Storyblok, circles back to Nuxt as a framework to generate code, instead of acting as a real-time web server. This chapter allows you to create a personal project, where you can showcase your talents as a developer while progressing through this book. It connects the application to a headless content management system (CMS) and teaches you how to automate tasks such as deployments.

To get the most out of this book

As the bare minimum to understand the concepts we will cover, experience with HTML, CSS, and JavaScript and basic knowledge of web engineering are highly recommended.

Software/hardware covered in the book

Operating system requirements

Vue.js 3

Windows, macOS, or Linux

Vue Test Utils

Nuxt 3

Pinia

Vuetify

Tailwind

Chart.js

Quasar

Express.js

Socket.io

TensorFlow.js

The libraries mentioned will have installation instructions in the sections where they are introduced and used. To follow along with the code, you can find links to the lengthier code blocks in the text, which point to the repository that is part of this book.

The completed code for each chapter can also be downloaded from the repository, or simply viewed only as a reference. In some cases, the repository itself may need additional setup with third-party providers for it to work. These instructions are all listed in the relevant sections.

If you are using the digital version of this book, we advise you to type the code yourself or access the code from the book’s GitHub repository (a link is available in the next section). Doing so will help you avoid any potential errors related to the copying and pasting of code.

If you encounter issues while building the projects, you can always refer to the source code on the GitHub repository. Each chapter includes a TROUBLESHOOTING.md file to help you on your way if you run into problems.

Download the example code files

You can download the example code files for this book from GitHub at https://github.com/PacktPublishing/Building-Real-world-Web-Applications-with-Vue.js-3. If there’s an update to the code, it will be updated in the GitHub repository.

We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!

Code in Action

The Code in Action videos for this book can be viewed at http://bit.ly/2OQfDum.

Conventions used

There are a number of text conventions used throughout this book.

Code in text: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: “The v-for directive repeats the <li> item with a <ListItem />component enclosed.”

A block of code is set as follows:

<style scoped>ul {   list-style: none; } li {   margin: 0.4rem 0; } </style>

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

<ListItem :is-checked='item.checked' v-on:click.prevent="updateItem(item)">{{ item.title }}</ListItem>

Any command-line input or output is written as follows:

npm init vue@latest

Bold: Indicates a new term, an important word, or words that you see on screen. For instance, words in menus or dialog boxes appear in bold. Here is an example: “Click Save to close the foreign key property.”

Tips or important notes

Appear like this.

Get in touch

Feedback from our readers is always welcome.

General feedback: If you have questions about any aspect of this book, email us at [email protected] and mention the book title in the subject of your message.

Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packtpub.com/support/errata and fill in the form.

Piracy: If you come across any illegal copies of our works in any form on the internet, we would be grateful if you would provide us with the location address or website name. Please contact us at [email protected] with a link to the material.

If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit authors.packtpub.com.

Share Your Thoughts

Once you’ve read Building Real-World Web Applications with Vue.js 3, we’d love to hear your thoughts! Please visit https://packt.link/r/1837630399 for this book and share your feedback.

Your review is important to us and the tech community and will help us make sure we’re delivering excellent quality content.

Download a free PDF copy of this book

Thanks for purchasing this book!

Do you like to read on the go but are unable to carry your print books everywhere?
Is your eBook purchase not compatible with the device of your choice?

Don’t worry, now with every Packt book you get a DRM-free PDF version of that book at no cost.

Read anywhere, any place, on any device. Search, copy, and paste code from your favorite technical books directly into your application. 

The perks don’t stop there, you can get exclusive access to discounts, newsletters, and great free content in your inbox daily

Follow these simple steps to get the benefits:

Scan the QR code or visit the link below

https://packt.link/free-ebook/9781837630394

Submit your proof of purchaseThat’s it! We’ll send your free PDF and other benefits to your email directly

Part 1: Getting Started with Vue.js Development

In this part, you will familiarize yourself with the core fundamentals of the Vue.js framework and learn about applying these fundamentals to create interactive web applications. You will learn the best practices in how to set up projects and ensure stability with automated testing. Lastly, we will learn how to work with external data and build a multi-page application.

This part has the following chapters:

Chapter 1, Introduction to Vue.jsChapter 2, Creating a Todo List AppChapter 3, Building a Local Weather AppChapter 4, Building the Marvel Explorer App

1

Introduction to Vue.js

This book will get you familiar with one of the most popular modern frontend frameworks at this time: Vue.js. Modern frameworks make it easy to add interactivity to static web pages and can help you build entire web applications!

The latter is exactly what you will be learning while going through this book. You will learn different techniques that fit specific use cases, and this will result in a collection of portfolio-ready projects.

Before you start building projects, we will take a look at the context in which we will build those projects. In this chapter, we will get you set up to start any Vue.js project using the best practices.

We will cover the following topics in this chapter:

The need for Vue.jsRequirements and toolingSetting up the development environmentMy first app

Technical requirements

Before we get started, we need to make sure we’ve met all requirements to install and run Vue.js, and to also develop applications. Familiarity with HTML, CSS, and JavaScript with TypeScript is required to understand the concepts that are built on top of these technologies.

In order for us to run Vue.js locally, we need to install Node.js (https://nodejs.org/en/download). This is a runner for JavaScript on your development machine.

The need for Vue.js

There are a number of frontend frameworks available, and this is an ever evolving and changing landscape. The Vue.js ecosystem is, at this point in time, a very mature landscape, which offers numerous plugins and tooling built on top of it.

Vue.js is a community-driven open source project maintained and developed by people from all over the world. It originated as a personal side project by Evan You and has grown to a framework with high adoption by all types of organizations, such as NASA, Apple, Google, and Microsoft. Being funded by sponsorships from both companies as individuals, Vue.js is an independent framework.

Vue.js is currently on version 3, a breaking change from the previous version, although most patterns are still applicable. Vue.js 3 supports all ES2015-compatible browsers.

Let’s look at some reasons to choose Vue.js to build web applications:

It’s performant because it was built to be optimized from the ground up.It’s lightweight, tree-shakeable, and ships only the code that is needed to run your application. The minimal code (after being optimized in a build step) is about 16 KB in size.It’s highly scalable, using preferred patterns such as Single File Components and the Composition API, which makes it suitable for enterprise applications.

Single File Components are part of the Vue.js philosophy where the template, script, and styling of a component are encapsulated in a single file, with the goal of improving the organization, readability, and maintainability of code.

The Composition API allows better organization and reuse of code throughout the application, which makes code more modular and easy to maintain.

On top of all these benefits, the learning curve is very accessible for entry-level developers. With syntax that is similar to classic HTML, JavaScript, and CSS notation, it’s easy to get started and find your way around.

In this chapter, we will guide you through the initial setup and go through the steps and setup that you can use as boilerplate for all future Vue.js projects. We will be adopting the recommended setup to make sure you will learn and apply best practices from the start.

We’ll first make sure that you have the developer environment set up so that you can start creating interactive web applications!

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!

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 highlightingVue Volar extension pack: Adds some recommended plugins to help automate some chores while codingBetter comments: For better markup of comments in the codeIndent-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.

My first app

Let’s put our acquired tools and knowledge to the test by creating our very first Vue.js application, shall we?

You would usually start by opening your CLI and navigating to a folder where you want to start your projects. Typing the following command creates a new empty project using the official create-vue tool:

npm init vue@latest

Hit y to proceed, choose my-first-vue as the project name, and select the options shown in the following figure:

Figure 1.1 – Using the Vue CLI to scaffold out an app with presets

We’ve selected TypeScript as a superset of JavaScript, which adds static typing. We’ve also enabled ESLint and Prettier. ESLint checks for syntax errors, formatting issues, and code style inconsistencies, and can even integrate with your IDE to visually mark problematic code. Prettier is used to enforce a consistent code style. These three options enhance the developer experience by highlighting potential issues before you run your code.

Then, following the instructions, you can move into the created folder and type npm install to install the required dependencies. This will download the required package files from the npm registry and install them in the node_modules subfolder of your project.

If you run npm run dev the project will spin up a development server, which you can access with your browser. Usually, the local address will be something similar to http://127.0.0.1:5173/.

If you open that URL in the browser, you should see your first Vue.js application! The default is an empty starter that holds many of the pointers and links that we’ve already covered at this point, but it is a good starting point for any developer starting with Vue.js.

Figure 1.2 – Your very first Vue.js app!

With successful installation, we can take a closer look at what has actually been installed. Let’s dive into the installation files!

The project in the IDE

Now, if you open up the project in your IDE of choice, you will notice a predetermined structure. This will be applicable to all the projects that are scaffolded out this way. Let’s take a quick look at the structure:

Figure 1.3 – The expanded folder structure of the starter app

At the root of the project, you’ll find different types of files that are specific to configuring the project. The main files here are index.html and package.json. The index.html file is the entry point of the app. It is a lightweight HTML template with a div element that has the id app will be the mounting point of the application.

The package.json file is a file that describes the project as a package, defines node scripts that can be executed, and also holds the references to all packages that the project depends on. The node_modules folder is the folder that holds all of the installed packages from the package.json file. This can be considered a read-only folder for our purposes.

Then we have the public and src folders. The public folder contains static assets, such as fonts, images, and icons that do not have to be processed by the build system. In the starter project, you will find a default favicon.ico present.

Lastly, the src (short for source) folder is the folder in which we will be making the most changes. It contains two root files at this point. The main.ts file registers the Vue application and the styles and mounts it to the HTML template.

The App.vue file is the entry point of the Vue.js application. If you open it, you might find some familiar syntaxes mixed in a single file, such as script tags, HTML, and CSS. We will get to that later.

It also contains an assets folder similar to the public folder, with the difference that these folders can and will be processed by the build system. And finally, there is the components folder, where you can place the components that make up the application. If you adopt Single File Components, each will fulfill a specific role and encapsulate the template, script, and styles. You can already see a couple of components, which make up the default starting page.

Your first coding steps

Let’s create the first component and add it to the app:

Create a new file in the components folder called MyFirst.vue.

A Vue.js component is preferably named using at least two camel-cased words and typically consists of a script, template, and style block. None of these are mandatory (although a style block without context would be of little value).

Let’s create a small HTML snippet: <template>    <div>My first <span>Vue.js</span> component!</div></template>In App.vue, you can use this as a Vue.js component already! If you open it up, you will see a script tag with import statements. You can remove the TheWelcome import line and replace it with this: import MyFirst from './components/MyFirst.vue'Next, in the template tag, you can remove the <TheWelcome /> HTML-like tag and replace it with the <MyFirst />HTML notation.

If you were still running the code, you would have noticed that the browser updated itself to reflect the changes. This is called hot reloading and makes for a smooth development flow. If you have stopped the process, you can restart it and revisit the page in the browser.

You should see the component that you’ve created!

Let’s add a styling block to add some CSS to the component and see the hot reloading in action. In the MyFirst.vue file, add the following code below the template block: <style scoped>div {  color: #35495f;  font-size: 1.6rem;}span {  color: #41b883;  font-weight: 700;}</style>

The contents of the style block will be processed like a normal CSS file. The scoped attribute means that the div and span style definitions are scoped down to only this component. Vue adds a unique data attribute to the virtual DOM and attaches the CSS rules to that attribute. In App.vue, you can see that global styles are also supported.

In the browser, you will see the component update itself with the new styling! Now that we’re familiar with the development environment, we’ll start to create a more interactive component in the next chapter.

Summary

At this point, you are ready to get started with Vue.js development. We’ve worked on setting up our local environment, and we used the recommended way of scaffolding out a new starter project.

In the next chapter, we’ll take a closer look at some of the Vue.js concepts (such as reactivity) and learn to inspect our app using official tools. Each lesson will introduce new concepts to apply in development.