Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
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
€8.99 €29.99
Full star icon Full star icon Full star icon Empty star icon Empty star icon 3 (6 Ratings)
eBook Sep 2020 562 pages 1st Edition
eBook
€8.99 €29.99
Paperback
€36.99
Subscription
Free Trial
Renews at €18.99p/m
Arrow left icon
Profile Icon Heitor Ramon Ribeiro
Arrow right icon
€8.99 €29.99
Full star icon Full star icon Full star icon Empty star icon Empty star icon 3 (6 Ratings)
eBook Sep 2020 562 pages 1st Edition
eBook
€8.99 €29.99
Paperback
€36.99
Subscription
Free Trial
Renews at €18.99p/m
eBook
€8.99 €29.99
Paperback
€36.99
Subscription
Free Trial
Renews at €18.99p/m

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
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
OR
Modal Close icon
Payment Processing...
tick Completed

Billing Address

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.

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

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 : 9781838827397
Languages :
Tools :

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
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
OR
Modal Close icon
Payment Processing...
tick Completed

Billing Address

Product Details

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

Packt Subscriptions

See our plans and pricing
Modal Close icon
€18.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
€189.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
€264.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 102.97
Front-End Development Projects with Vue.js
€32.99
Vue.js 3 Cookbook
€36.99
Vue.js 3 By Example
€32.99
Total 102.97 Stars icon
Banner background image

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
Animating Your Application with Transitions and CSS Chevron down icon Chevron up icon
Creating Beautiful Applications Using UI Frameworks Chevron down icon Chevron up icon
Deploying an Application to Cloud Platforms Chevron down icon Chevron up icon
Directives, Plugins, SSR, and More Chevron down icon Chevron up icon
Directives, Plugins, SSR, and More
Technical requirements
Automatically loading Vue routes
Getting ready
How to do it...
How it works...
There's more...
See also
Automatically loading Vuex modules
Getting ready
How to do it...
How it works...
See also
Creating a custom directive
Getting ready
How to do it...
How it works...
Creating a Vue plugin
Getting ready
How to do it...
How it works...
See also
Creating an SSR, SPA, PWA, Cordova, and Electron application in Vue with Quasar
Getting ready
How to do it...
Developing an SPA (Single-Page Application)
Commands
Developing a PWA (Progressive Web Application)
Configuring quasar.conf on a PWA
Commands
Developing SSR (Server-Side Rendering)
Configuring quasar.conf on SSR
Commands
Developing a mobile application (Cordova)
Configuring quasar.conf on Cordova
Commands
Developing a desktop application (Electron)
Configuring quasar.conf on Electron
Commands
How it works...
See also
Creating smarter Vue watchers and computed properties
How to do it...
Watchers
Using method names
Immediate calls and deep listening
Multiple handlers
Computed
No cached value
Getter and setter
See also
Creating a Nuxt.js SSR with Python Flask as the API
Getting ready‌
How to do it...
Creating your Flask API
Initializing the application
Starting the server
Creating your Nuxt.js server
Adding Bulma to the global CSS
Configuring the axios plugin
Running the Nuxt.js server
Creating the TodoList component
Single file component section
Single file component section
Creating the Todo form component
Single file component section
Single file component section
Creating the layout
Creating the page
Single file component section
Single file component section
How it works...
See also
The dos and don'ts of Vue applications
Linters
JavaScript
Vue
See also
Other Books You May Enjoy Chevron down icon Chevron up icon

Customer reviews

Top Reviews
Rating distribution
Full star icon Full star icon Full star icon Empty star icon Empty star icon 3
(6 Ratings)
5 star 16.7%
4 star 33.3%
3 star 16.7%
2 star 0%
1 star 33.3%
Filter icon Filter
Top Reviews

Filter reviews by




Gustavo Oct 04, 2020
Full star icon Full star icon Full star icon Full star icon Full star icon 5
Boa didática tanto na definição do que é quanto na transposição para o Vir.js 3.
Amazon Verified review Amazon
Sarita Nag Jan 25, 2021
Full star icon Full star icon Full star icon Full star icon Empty star icon 4
I Enjoy reading this Vue.Js book and well Explained the concept.
Amazon Verified review Amazon
Daniel Correa Jan 08, 2021
Full star icon Full star icon Full star icon Full star icon Empty star icon 4
This book is a good introduction to Vue.js 3.0 and the main features which vue.js contains.The book contains a lot of examples, which gives you a good overview of the different possibilities that you have when working with vue.For example, it discuses about vue files, plugins, vuex store, mixins, decorators, props, slots, vuelidate, and vue router, among others.CONS:- There is a lack of a good introduction.- Concepts should be explained better, with a proper introduction. Why are those elements useful?, etc.- Chapters 1 and 2 are very difficult to read. There is not explanation about why TypeScript, and how it increases the code maintainability and readability. Even the code doesn't work with the current vue version (I had to apply many changes by myself).- Maybe you want to quick reading after chapters 1 and 2, but things get better in chapters 3 and the rest of the book.At the end, you obtain good knowledge to understand what are your possibilities when working with vue.
Amazon Verified review Amazon
Reyewat Bissessur Jul 15, 2021
Full star icon Full star icon Full star icon Empty star icon Empty star icon 3
Good book but it defeats the purpose of buying the booking as it gives you a lot of links for additional online reading. It would have been better if all in the book
Amazon Verified review Amazon
Gaz 77 Oct 31, 2021
Full star icon Empty star icon Empty star icon Empty star icon Empty star icon 1
To the author: Have you never heard of "Don't Repeat Yourself" ?This book is a terrible bloated mess of copy paste repetition.Could have been 1/2 the length and should be 1/3 of the price.Avoid this book.Disappointing waste of money.
Amazon Verified review Amazon
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

How do I buy and download an eBook? Chevron down icon Chevron up icon

Where there is an eBook version of a title available, you can buy it from the book details for that title. Add either the standalone eBook or the eBook and print book bundle to your shopping cart. Your eBook will show in your cart as a product on its own. After completing checkout and payment in the normal way, you will receive your receipt on the screen containing a link to a personalised PDF download file. This link will remain active for 30 days. You can download backup copies of the file by logging in to your account at any time.

If you already have Adobe reader installed, then clicking on the link will download and open the PDF file directly. If you don't, then save the PDF file on your machine and download the Reader to view it.

Please Note: Packt eBooks are non-returnable and non-refundable.

Packt eBook and Licensing When you buy an eBook from Packt Publishing, completing your purchase means you accept the terms of our licence agreement. Please read the full text of the agreement. In it we have tried to balance the need for the ebook to be usable for you the reader with our needs to protect the rights of us as Publishers and of our authors. In summary, the agreement says:

  • You may make copies of your eBook for your own use onto any machine
  • You may not pass copies of the eBook on to anyone else
How can I make a purchase on your website? Chevron down icon Chevron up icon

If you want to purchase a video course, eBook or Bundle (Print+eBook) please follow below steps:

  1. Register on our website using your email address and the password.
  2. Search for the title by name or ISBN using the search option.
  3. Select the title you want to purchase.
  4. Choose the format you wish to purchase the title in; if you order the Print Book, you get a free eBook copy of the same title. 
  5. Proceed with the checkout process (payment to be made using Credit Card, Debit Cart, or PayPal)
Where can I access support around an eBook? Chevron down icon Chevron up icon
  • If you experience a problem with using or installing Adobe Reader, the contact Adobe directly.
  • To view the errata for the book, see www.packtpub.com/support and view the pages for the title you have.
  • To view your account details or to download a new copy of the book go to www.packtpub.com/account
  • To contact us directly if a problem is not resolved, use www.packtpub.com/contact-us
What eBook formats do Packt support? Chevron down icon Chevron up icon

Our eBooks are currently available in a variety of formats such as PDF and ePubs. In the future, this may well change with trends and development in technology, but please note that our PDFs are not Adobe eBook Reader format, which has greater restrictions on security.

You will need to use Adobe Reader v9 or later in order to read Packt's PDF eBooks.

What are the benefits of eBooks? Chevron down icon Chevron up icon
  • You can get the information you need immediately
  • You can easily take them with you on a laptop
  • You can download them an unlimited number of times
  • You can print them out
  • They are copy-paste enabled
  • They are searchable
  • There is no password protection
  • They are lower price than print
  • They save resources and space
What is an eBook? Chevron down icon Chevron up icon

Packt eBooks are a complete electronic version of the print edition, available in PDF and ePub formats. Every piece of content down to the page numbering is the same. Because we save the costs of printing and shipping the book to you, we are able to offer eBooks at a lower cost than print editions.

When you have purchased an eBook, simply login to your account and click on the link in Your Download Area. We recommend you saving the file to your hard drive before opening it.

For optimal viewing of our eBooks, we recommend you download and install the free Adobe Reader version 9.