Vue.js 3 Cookbook
eBook - ePub

Vue.js 3 Cookbook

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

Heitor Ramon Ribeiro

Share book
  1. 562 pages
  2. English
  3. ePUB (mobile friendly)
  4. Available on iOS & Android
eBook - ePub

Vue.js 3 Cookbook

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

Heitor Ramon Ribeiro

Book details
Book preview
Table of contents

About This Book

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.

Frequently asked questions

How do I cancel my subscription?
Simply head over to the account section in settings and click on “Cancel Subscription” - it’s as simple as that. After you cancel, your membership will stay active for the remainder of the time you’ve paid for. Learn more here.
Can/how do I download books?
At the moment all of our mobile-responsive ePub books are available to download via the app. Most of our PDFs are also available to download and we're working on making the final remaining ones downloadable now. Learn more here.
What is the difference between the pricing plans?
Both plans give you full access to the library and all of Perlego’s features. The only differences are the price and subscription period: With the annual plan you’ll save around 30% compared to 12 months on the monthly plan.
What is Perlego?
We are an online textbook subscription service, where you can get access to an entire online library for less than the price of a single book per month. With over 1 million books across 1000+ topics, we’ve got you covered! Learn more here.
Do you support text-to-speech?
Look out for the read-aloud symbol on your next book to see if you can listen to it. The read-aloud tool reads text aloud for you, highlighting the text as it is being read. You can pause it, speed it up and slow it down. Learn more here.
Is Vue.js 3 Cookbook an online PDF/ePUB?
Yes, you can access Vue.js 3 Cookbook by Heitor Ramon Ribeiro in PDF and/or ePUB format, as well as other popular books in Design & Web Design. We have over one million books available in our catalogue for you to explore.


Web Design
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...

Table of contents