Vue.js 3 Cookbook

Discover actionable solutions for building modern web apps with the latest Vue features and TypeScript

Heitor Ramon Ribeiro

• Publisher: Packt Publishing
• Year: 2020
• ISBN:
  9781838827397
• Edition: 1
• Topic: Diseño
• Subtopic: Diseño web

Explore the new features of Vue.js 3 and discover best practices for building fault-tolerant and professional frontend web applications

Key Features

• Migrate your apps from Vue.js 2 to Vue.js 3 with the help of practical recipes
• Explore the latest Vue.js 3 features such as reactivity API, composition API, and TypeScript support
• Extend the capabilities and performance of Vue.js apps with Quasar, Vuetify, and Nuxt.js frameworks

Book Description

Vue.js is a progressive web framework for building professional user interfaces for your web applications. With Vue.js 3, the frontend framework is reinforced with architectural enhancements, new base languages, new render processes, and separated core components.

The book starts with recipes for implementing Vue.js 3's new features in your web development projects and migrating your existing Vue.js apps to the latest version. You will get up and running with TypeScript with Vue.js and find succinct solutions to common challenges and pitfalls faced in implementing components, derivatives, and animation, through to building plugins, adding state management, routing, and developing complete single-page applications (SPAs). As you advance, you'll discover recipes to help you integrate Vue.js apps with Nuxt.js in order to add server-side rendering capabilities to your SPAs. You'll then learn about the Vue.js ecosystem by exploring modern frameworks such as Quasar, Nuxt.js, Vuex, and Vuetify in your web projects. Finally, the book provides you with solutions for packaging and deploying your Vue.js apps.

By the end of this Vue.js book, you'll be able to identify and solve challenges faced in building Vue.js applications and be able to adopt the Vue.js framework for frontend web projects of any scale.

What you will learn

• Design and develop large-scale web applications using Vue.js 3's latest features
• Create impressive UI layouts and pages using Vuetify, Buefy, and Ant Design
• Extend your Vue.js applications with dynamic form and custom rules validation
• Add state management, routing, and navigation to your web apps
• Extend Vue.js apps to the server-side with Nuxt.js
• Discover effective techniques to deploy your web applications with Netlify
• Develop web applications, mobile applications, and desktop applications with a single code base using the Quasar framework

Who this book is for

The book is for both new and experienced Vue.js developers looking to overcome challenges in building dynamic web applications with Vue.js 3. Knowledge of JavaScript and TypeScript is assumed. A basic understanding of Vue.js will help you to make the most of this book.

Fetching Data from the Web via HTTP Requests

Data is a part of everyday life nowadays. If it weren't for data, you wouldn't be reading this book or trying to learn more about Vue.

Knowing how to fetch and send your data inside an application is a requirement for a developer, not just an extra skill that's nice to have. The best way to learn it is by practicing it and finding out how it is done behind the scenes.

In this chapter, we will learn how to build our own API data manipulation with the Fetch API and the most popular API library in the web right now, axios.

In this chapter, we'll cover the following recipes:

• Creating a wrapper for the Fetch API as an HTTP client
• Creating a random cat image or GIF component
• Creating your local fake JSON API server with MirageJS
• Using axios as the new HTTP client
• Creating different axios instances
• Creating a request and response interceptor for axios
• Creating a CRUD interface with axios and Vuesax

Technical requirements

In this chapter, we will be using Node.js and Vue CLI.

Attention, Windows users! You need to install an NPM package called windows-build-tools to be able to install the following required packages. To do this, open PowerShell as administrator and execute the following command:
> npm install -g windows-build-tools

To install Vue CLI, open Terminal (macOS or Linux) or Command Prompt/PowerShell (Windows) and execute the following command:

> npm install -g @vue/cli @vue/cli-service-global

Creating a wrapper for the Fetch API as an HTTP client

The Fetch API is the child of the old XMLHttpRequest. It has an improved API and a new and powerful set of features completely based on Promises.

The Fetch API is both simple and based on a generic definition of two objects, Request, and Response, which allow it to be used everywhere in the browser. The browser Fetch API can be executed inside the window or the service worker as well. There is no limitation on the usage of this API.

In this recipe, we will learn how to create a wrapper around the Fetch API to make the API calls more simple.

Getting ready

The pre-requisite for this recipe is as follows:

• Node.js 12+

The Node.js global objects that are required are as follows:

• @vue/cli
• @vue/cli-service-global

How to do it...

To start our component, we can use the Vue project with Vue CLI we created in the 'Creating Your first project with Vue CLI' recipe in Chapter 2, Introducing TypeScript and the Vue Ecosystem, or we can start a new one.

To start a new one, open Terminal (macOS or Linux) or Command Prompt/PowerShell (Windows) and execute the following command:

> vue create http-project

The CLI will ask some questions that will help with the creation of the project. You can use the arrow keys to navigate, the Enter key to continue, and the Spacebar to s...