Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Save more on your purchases now! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required.
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Vue.js 3 Cookbook
Vue.js 3 Cookbook

Vue.js 3 Cookbook: Discover actionable solutions for building modern web apps with the latest Vue features and TypeScript

Arrow left icon
Profile Icon Heitor Ramon Ribeiro
Arrow right icon
$48.99
Paperback Sep 2020 562 pages 1st Edition
eBook
$24.99 $35.99
Paperback
$48.99
Subscription
Free Trial
Renews at $19.99p/m
Arrow left icon
Profile Icon Heitor Ramon Ribeiro
Arrow right icon
$48.99
Paperback Sep 2020 562 pages 1st Edition
eBook
$24.99 $35.99
Paperback
$48.99
Subscription
Free Trial
Renews at $19.99p/m
eBook
$24.99 $35.99
Paperback
$48.99
Subscription
Free Trial
Renews at $19.99p/m

What do you get with Print?

Product feature icon Instant access to your digital eBook copy whilst your Print order is Shipped
Product feature icon Paperback book shipped to your preferred address
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
Product feature icon AI Assistant (beta) to help accelerate your learning
Table of content icon View table of contents Preview book icon Preview Book

Vue.js 3 Cookbook

Introducing TypeScript and the Vue Ecosystem

TypeScript is a new Vue-based language, fully supported on Vue 3. It is now possible to use typed JSX (also know as TSX), type annotation, static verification of the code, and much more.

The Vue ecosystem is getting bigger each day, so to help us, the Vue team has developed some tools to improve project handling and management. Those tools are Vue CLI and Vue UI, which today are the main tools for local Vue development.

The Vue CLI tool is the beginning of every project; with it, you will be able to select the basic features or just a preset you had made, to create a new Vue project. After a project is created, you can use Vue UI to manage the project, add new features, check the status of the project, and do almost everything you previously needed to do in the command-line interface (CLI), with the addition of more features.

In these chapters, you learn more about TypeScript as a superset on JavaScript and how to use the power of the Vue CLI tool and Vue UI together to get a whole application up and running.

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

  • Creating a TypeScript project
  • Understanding TypeScript
  • Creating your first TypeScript class
  • Creating your first project with Vue CLI
  • Adding plugins to a Vue CLI project with Vue UI
  • Adding TypeScript to a Vue CLI project
  • Creating your first TypeScript Vue component with vue-class-component
  • Creating a custom mixin with vue-class-component
  • Creating a custom function decorator with vue-class-component
  • Adding custom hooks to vue-class-component
  • Adding vue-property-decorator to vue-class-component

Technical requirements

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

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 it, open PowerShell as administrator and execute the following command:
> npm install -g windows-build-tools.

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

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

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

> npm install -g typescript

Creating a TypeScript project

TypeScript is a typed superset of JavaScript that, when compiled, gives us plain JavaScript code. It seems like a new language, but in the end, it's still JavaScript.

What is the advantage of using TypeScript? The main advantage is the typed syntax, which helps with static checking and code refactoring. You can still use all the JavaScript libraries and program with the latest ECMAScript features out of the box.

When compiled, TypeScript will deliver a pure JavaScript file that can run on any browser, Node.js, or any JavaScript engine that is capable of executing ECMAScript 3 or newer versions.

Getting ready

To start our project, we will need to create an npm project. Open Terminal (macOS or Linux) or Command Prompt/PowerShell (Windows) and execute the following command:

> npm init -y

You also need to install TypeScript, so open Terminal (macOS or Linux) or Command Prompt/PowerShell (Windows) and execute the following command:

> npm install typescript --only=dev

How to do it...

With our environment ready, we will need to start our TypeScript project. Let's create a .ts file and compile it:

  1. To start our TypeScript project, open Terminal (macOS or Linux) or Command Prompt/PowerShell (Windows) and execute the following command:
> tsc --init

This will create a tsconfig.json file inside our folder. This is a compiler settings file. Here, you can define the target, which JavaScript libraries will be available on the development, the target ECMAScript version, the module generation, and much more.

When developing for the web, don't forget to add the Document Object Model (DOM) to the libraries on the compilerOption property inside the tsconfig.json file so that you can have access to the window and document object when developing.
  1. Now, we need to create our index.ts file. Let's create some simple code inside the index.ts file that will log a math calculation in your terminal:
function sum(a: number, b: number): number {
return a + b;
}

const firstNumber: number = 10;

const secondNumber: number = 20;

console.log(sum(firstNumber, secondNumber));

This function receives two parameters, a and b, which both have their type set to number, and the function is expected to return a number. We made two variables, firstNumber and secondNumber, which in this case are both set to a number type—10 and 20 respectively—so, it's valid to pass to the function. If we had set it to any other type such as a string, Boolean, float, or an array, the compiler would have thrown an error about the static type checking on the variable and the function execution.

  1. Now, we need to compile this code to a JavaScript file. Open Terminal (macOS or Linux) or Command Prompt/PowerShell (Windows) and execute the following command:
> tsc ./index.ts

After the compilation, we can see the final file in index.js. If we look inside the file, the final code will be similar to this:

function sum(a, b) {
return a + b;
}
var firstNumber = 10;
var secondNumber = 20;
console.log(sum(firstNumber, secondNumber));

You may be wondering: where are my types? As ECMAScript is a dynamic language, the types of TypeScript exist only at the superset level, and won't be passed down to the JavaScript file.

Your final JavaScript will be in the form of a transpiled file, with the configurations defined in the tsconfig.json file.

Left arrow icon Right arrow icon
Download code icon Download Code

Key benefits

  • 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

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.

Who is this book 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.

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
Estimated delivery fee Deliver to United States

Economy delivery 10 - 13 business days

Free $6.95

Premium delivery 6 - 9 business days

$21.95
(Includes tracking information)

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : Sep 18, 2020
Length: 562 pages
Edition : 1st
Language : English
ISBN-13 : 9781838826222
Languages :
Tools :

What do you get with Print?

Product feature icon Instant access to your digital eBook copy whilst your Print order is Shipped
Product feature icon Paperback book shipped to your preferred address
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
Product feature icon AI Assistant (beta) to help accelerate your learning
Estimated delivery fee Deliver to United States

Economy delivery 10 - 13 business days

Free $6.95

Premium delivery 6 - 9 business days

$21.95
(Includes tracking information)

Product Details

Publication date : Sep 18, 2020
Length: 562 pages
Edition : 1st
Language : English
ISBN-13 : 9781838826222
Languages :
Tools :

Packt Subscriptions

See our plans and pricing
Modal Close icon
$19.99 billed monthly
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Simple pricing, no contract
$199.99 billed annually
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just $5 each
Feature tick icon Exclusive print discounts
$279.99 billed in 18 months
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just $5 each
Feature tick icon Exclusive print discounts

Frequently bought together


Stars icon
Total $ 136.97
Front-End Development Projects with Vue.js
$43.99
Vue.js 3 Cookbook
$48.99
Vue.js 3 By Example
$43.99
Total $ 136.97 Stars icon

Table of Contents

12 Chapters
Understanding Vue 3 and Creating Components Chevron down icon Chevron up icon
Introducing TypeScript and the Vue Ecosystem Chevron down icon Chevron up icon
Data Binding, Form Validations, Events, and Computed Properties Chevron down icon Chevron up icon
Components, Mixins, and Functional Components Chevron down icon Chevron up icon
Fetching Data from the Web via HTTP Requests Chevron down icon Chevron up icon
Fetching Data from the Web via HTTP Requests
Technical requirements
Creating a wrapper for the Fetch API as an HTTP client
Getting ready
How to do it...
Creating the wrapper
Creating the API methods
GET method function
POST method function
PUT method function
PATCH method function
UPDATE method function
DELETE method function
How it works...
See also
Creating a random cat image or GIF component
Getting ready
How to do it...
Creating the component
Single file component section
Single file component section
Single file component section
Getting up and running with your new component
How it works...
See also
Creating your fake JSON API server with MirageJS
Getting ready
How to do it...
Creating the mock server
Creating the mock database
Creating the GET route function
Creating the POST route function
Creating the PATCH route function
Creating the DELETE route function
Creating the server
Adding to the application
Creating the component
Single file component section
Single file component section
How it works...
See also
Using axios as the new HTTP client
Getting ready
How to do it...
Changing from the Fetch API to Axios
Changing the GET method function
Changing the POST method function
Changing the PUT method function
Changing the PATCH method function
Changing the UPDATE method function
Changing the DELETE method function
Changing the component
How it works...
See also
Creating different axios instances
Getting ready
How to do it...
Changing the HTTP function
Changing the HTTP Fetch wrapper
Changing the HTTP methods function
Changing the MirageJS server
Changing the component
Single file component section
Single file component section
How it works...
See also
Creating a request and response interceptor for axios
Getting ready
How to do it...
Creating the interceptor
Adding the interceptors to the HTTP methods functions
How it works...
See also
Creating a CRUD interface with Axios and Vuesax
Getting ready
How to do it...
Adding Vuesax to the application
Creating the component routing
Single file component section
Single file component section
Creating the route mixin
Creating the list component
Single file component section
Single file component section
Single file component section
Creating a generic user form component
Single file component section
Single file component section
Single file component section
Creating the create user component
Single file component section
Single file component section
View component
Single file component section
Single file component section
Updating the user component
Single file component section
Single file component section
How it works...
See also
Managing Routes with vue-router Chevron down icon Chevron up icon
Managing Routes with vue-router
Technical requirements
Creating a simple route
Getting ready
How to do it...
Creating the NavigationBar component
Single file component section
Single file component section
Creating the contact page
Single file component section
Single file component section
Creating the about page
Single file component section
Single file component section
Changing the application's main component
Single file component section
Single file component section
Creating the routes
How it works...
See also
Creating a programmatic navigation
Getting ready
How to do it...
Changing the application's main component
Single file component section
Changing the contact view
Single file component section
How it works...
There's more...
See also
Creating a dynamic router path
Getting ready
How to do it...
Changing the application's main component
Single file component section
Changing the route mixin
Axios instance configuration
User list view
Single file component section
Single file component section
User create view
Single file component section
Single file component section
User information view
Single file component section
Single file component section
User update view
Single file component section
Single file component section
Creating dynamic routes
How it works...
See also
Creating a route alias
Getting ready
How to do it...
How it works...
See also
Creating route redirects
Getting ready
How to do it...
How it works...
See also
Creating a nested router view
Getting ready
How to do it...
Creating the router-view on the layout
Changing the router files
User routes
Router manager
How it works...
See also
Creating a 404 error page
Getting ready
How to do it...
Creating the NotFound view
Single file component section
Single file component section
Changing the router files
How it works...
See also
Creating and applying authentication middleware
Getting ready
How to do it...
Creating the login view
Single file component section
Single file component section
Single file component section
Creating the middleware
Adding the metadata and the middleware to the router
How it works...
See also
Lazy loading your pages asynchronously
Getting ready
How to do it...
Updating the router manager
Updating the user routes
How it works...
See also
Managing the Application State with Vuex Chevron down icon Chevron up icon