book

Vue.js 3 Cookbook

Name: Vue.js 3 Cookbook
Author: Heitor Ramon Ribeiro
ISBN: 9781838826222

by Heitor Ramon Ribeiro

September 2020

Intermediate to advanced

562 pages

8h 55m

English

Packt Publishing

Read now

Unlock full access

Title Page
Copyright and Credits
Vue.js 3 Cookbook
About Packt
Why subscribe?
Contributors
About the authorAbout the reviewersPackt is searching for authors like you
Preface
Who this book is forWhat this book coversTo get the most out of this bookDownload the example code filesConventions usedSectionsGetting readyHow to do it…How it works…There's more…See alsoGet in touchReviews
Understanding Vue 3 and Creating Components
What is new in Vue 3Improvements to the frameworkUnder the hoodRender engineExposed APIsNew custom componentsFragmentsTeleportSuspenseAPI changesSome minor break changesGoodbye filters, hello filters! The Vue filters APIThe bus just left the station! The event bus APINo more global Vue – the mounting APIv-model, v-model, v-model – multiple v-modelComposition APITechnical requirementsCreating the base fileUpgrading your Vue 2 application to Vue 3Getting readyHow to do it...Using Vue-CLI to upgrade the projectUpgrading the project manuallyChanging the starting filesHow it works...Creating components with multiple root elementsHow to do it...Creating the component with the structureCreating the component with the render functionHow it works...Creating components with attribute inheritanceHow to do it...How it works...Using the reactivity and observable API outside the scope of VueHow to do it...How it works...Creating a component using the composition APIHow to do it...How it works...See also
Introducing TypeScript and the Vue Ecosystem
Technical requirementsCreating a TypeScript projectGetting readyHow to do it...How it works...See alsoUnderstanding TypeScriptGetting readyTypesStringNumberBooleanArraysTupleEnumAnyVoidObjectsFunctionsInterfacesDecoratorsIn conclusionSee alsoCreating your first TypeScript classGetting readyHow to do it...How it works...There's more...See alsoCreating your first project with Vue CLIGetting readyHow to do it...There's more...See alsoAdding plugins to a Vue CLI project with Vue UIGetting readyHow to do it...How it works...Adding TypeScript to a Vue CLI projectGetting readyHow to do it...How it works...See alsoCreating your first TypeScript Vue component with vue-class-componentGetting readyHow to do it...How it works...See alsoCreating a custom mixin with vue-class-componentGetting readyHow to do it...Creating the Counter componentExtracting similar code for the mixinHow it works...See alsoCreating a custom function decorator with vue-class-componentGetting readyHow to do it...How it works...There's more...See alsoAdding custom hooks to vue-class-componentGetting readyHow to do it...How it works...See alsoAdding vue-property-decorator to vue-class-componentGetting readyHow to do it...How it works...There's more...See also
Data Binding, Form Validations, Events, and Computed Properties
Technical requirementsCreating the "hello world" componentGetting readyHow to do it...How it works...See alsoCreating an input form with two-way data bindingGetting readyHow to do it...How it works...See alsoAdding an event listener to an elementGetting readyHow to do it...How it works...See alsoRemoving the v-model from the inputGetting readyHow to do it...How it works...See alsoCreating a dynamic to-do listGetting readyHow to do it...How it works...See alsoCreating computed properties and understanding how they workGetting readyHow to do it...How it works...See alsoDisplaying cleaner data and text with custom filtersGetting readyHow to do it...How it works...See alsoAdding form validation with VuelidateGetting readyHow to do it...How it works...See alsoCreating filters and sorters for a listGetting readyHow to do it...How it works...See alsoCreating conditional filters to sort list dataGetting readyHow to do it...How it works...See alsoAdding custom styles and transitionsGetting readyHow to do it...How it works...See alsoUsing vue-devtools to debug your applicationGetting readyHow to do it...See also
Components, Mixins, and Functional Components
Technical requirementsCreating a visual template componentGetting readyHow to do it...How it works...See alsoUsing slots and named slots to place data inside your componentsGetting readyHow to do it...How it works...See alsoPassing data to your component and validating the dataGetting readyHow to do it...How it works...See alsoCreating functional componentsGetting readyHow to do it...How it works...See alsoAccessing your children components dataGetting readyHow to do it...Creating the star rating inputCreating the StarRatingDisplay componentCreating the StarRating componentData manipulation on child componentsHow it works...There's more...See alsoCreating a dynamic injected componentGetting readyHow to do it...How it works...See alsoCreating a dependency injection componentGetting readyHow to do it...How it works...See alsoCreating a component mixinGetting readyHow to do it...How it works...See alsoLazy loading your componentsGetting readyHow to do it...How it works...See also
Fetching Data from the Web via HTTP Requests
Technical requirementsCreating a wrapper for the Fetch API as an HTTP clientGetting readyHow to do it...Creating the wrapperCreating the API methodsGET method functionPOST method functionPUT method functionPATCH method functionUPDATE method functionDELETE method functionHow it works...See alsoCreating a random cat image or GIF componentGetting readyHow to do it...Creating the componentSingle file component sectionSingle file component sectionSingle file component sectionGetting up and running with your new componentHow it works...See alsoCreating your fake JSON API server with MirageJSGetting readyHow to do it...Creating the mock serverCreating the mock databaseCreating the GET route functionCreating the POST route functionCreating the PATCH route functionCreating the DELETE route functionCreating the serverAdding to the applicationCreating the componentSingle file component sectionSingle file component sectionHow it works...See alsoUsing axios as the new HTTP clientGetting readyHow to do it...Changing from the Fetch API to AxiosChanging the GET method functionChanging the POST method functionChanging the PUT method functionChanging the PATCH method functionChanging the UPDATE method functionChanging the DELETE method functionChanging the componentHow it works...See alsoCreating different axios instancesGetting readyHow to do it...Changing the HTTP functionChanging the HTTP Fetch wrapperChanging the HTTP methods functionChanging the MirageJS serverChanging the componentSingle file component sectionSingle file component sectionHow it works...See alsoCreating a request and response interceptor for axiosGetting readyHow to do it...Creating the interceptorAdding the interceptors to the HTTP methods functionsHow it works...See alsoCreating a CRUD interface with Axios and VuesaxGetting readyHow to do it...Adding Vuesax to the applicationCreating the component routingSingle file component sectionSingle file component sectionCreating the route mixinCreating the list componentSingle file component sectionSingle file component sectionSingle file component sectionCreating a generic user form componentSingle file component sectionSingle file component sectionSingle file component sectionCreating the create user componentSingle file component sectionSingle file component sectionView componentSingle file component sectionSingle file component sectionUpdating the user componentSingle file component sectionSingle file component sectionHow it works...See also

Managing Routes with vue-router
Technical requirementsCreating a simple routeGetting readyHow to do it...Creating the NavigationBar componentSingle file component sectionSingle file component sectionCreating the contact pageSingle file component sectionSingle file component sectionCreating the about pageSingle file component sectionSingle file component sectionChanging the application's main componentSingle file component sectionSingle file component sectionCreating the routesHow it works...See alsoCreating a programmatic navigationGetting readyHow to do it...Changing the application's main componentSingle file component sectionChanging the contact viewSingle file component sectionHow it works...There's more...See alsoCreating a dynamic router pathGetting readyHow to do it...Changing the application's main componentSingle file component sectionChanging the route mixinAxios instance configurationUser list viewSingle file component sectionSingle file component sectionUser create viewSingle file component sectionSingle file component sectionUser information viewSingle file component sectionSingle file component sectionUser update viewSingle file component sectionSingle file component sectionCreating dynamic routesHow it works...See alsoCreating a route aliasGetting readyHow to do it...How it works...See alsoCreating route redirectsGetting readyHow to do it...How it works...See alsoCreating a nested router viewGetting readyHow to do it...Creating the router-view on the layoutChanging the router filesUser routesRouter managerHow it works...See alsoCreating a 404 error pageGetting readyHow to do it...Creating the NotFound viewSingle file component sectionSingle file component sectionChanging the router filesHow it works...See alsoCreating and applying authentication middlewareGetting readyHow to do it...Creating the login viewSingle file component sectionSingle file component sectionSingle file component sectionCreating the middlewareAdding the metadata and the middleware to the routerHow it works...See alsoLazy loading your pages asynchronouslyGetting readyHow to do it...Updating the router managerUpdating the user routesHow it works...See also
Managing the Application State with Vuex
Technical requirementsCreating a simple Vuex storeGetting readyHow to do it...Creating the storeCreating the reactive component with VuexSingle file component sectionSingle file component sectionHow it works...See alsoCreating and understanding the Vuex stateGetting readyHow to do it...Adding Vuex via the vue uiCreating the Vuex stateHow it works...There's more...See alsoCreating and understanding the Vuex mutationsGetting readyHow to do it...How it works...See alsoCreating and understanding the Vuex gettersGetting readyHow to do it...How it works...There's more...See alsoCreating and understanding the Vuex actionsGetting readyHow to do it...How it works...See alsoCreating a dynamic component with VuexGetting readyHow to do it...Creating the user list componentSingle file component sectionSingle file component sectionEditing the user list pageSingle file component sectionSingle file component sectionEditing the user view pageSingle file component sectionSingle file component sectionEditing the user edit pageSingle file component sectionSingle file component sectionEditing the user create pageSingle file component sectionHow it works...See alsoAdding hot-module-reload for developmentGetting readyHow to do it...How it works...See alsoCreating a Vuex moduleGetting readyHow to do it...Creating the new authentication moduleAdding the modules to VuexHow it works...See also
Animating Your Application with Transitions and CSS
Technical requirementsCreating the base projectCreating your first CSS animationGetting readyHow to do it...How it works...See alsoCreating a custom transition class with Animate.cssGetting readyHow to do it...How it works...There's more...See alsoCreating transactions with custom hooksGetting readyHow to do it...How it works...See alsoCreating animations on page renderGetting readyHow to do it...How it works...See alsoCreating animations for lists and groupsGetting readyHow to do it...How it works...See alsoCreating a custom transition componentGetting readyHow to do it...How it works...See alsoCreating a seamless transition between elementsGetting readyHow to do it...How it works...See also
Creating Beautiful Applications Using UI Frameworks
Technical requirementsCreating a page, a layout, and a user form with BuefyGetting readyHow to do it...Creating the Vue-CLI projectAdding Buefy to the Vue-CLI projectCreating the layout and a page with BuefyCreating the header menu componentCreating the hero section componentCreating the footer componentCreating the layout componentCreating the user registration form with BuefyHow it works...See alsoCreating a page, a layout, and a user form with VuetifyGetting readyHow to do it...Creating the Vue-CLI projectAdding Vuetify to the Vue-CLI projectCreating the layout with VuetifyCreating the top bar componentCreating the drawer menu componentCreating the layout componentCreating the user registration form with VuetifySingle file component sectionSingle file component sectionHow it works...See alsoCreating a page, a layout, and a user form with Ant-DesignGetting readyHow to do it...Creating the Vue-CLI projectAdding Ant-Design to the Vue-CLI projectCreating the layout with Ant-DesignCreating the top-bar componentCreating the drawer menuCreating the layout componentCreating the user registration form with Ant-DesignSingle file component sectionSingle file component sectionHow it works...See also
Deploying an Application to Cloud Platforms
Technical requirementsCreating a Vue projectCreating a Netlify accountGetting readyHow to do it...How it works...See alsoPreparing your application for deployment in NetlifyGetting readyHow to do it...How it works...See alsoPreparing for automatic deployment on Netlify with GitHubGetting readyHow to do it...How it works...See alsoCreating a Vercel accountGetting readyHow to do it...How it works...See alsoConfiguring the Vercel-CLI and deploying your projectGetting readyHow to do it...How it works...See alsoPreparing for automatic deployment on Vercel with GitHubGetting readyHow to do it...How it works...See alsoCreating a Firebase projectGetting readyHow to do it...How it works...See alsoConfiguring the Firebase-CLI and deploying your projectGetting readyHow to do it...How it works...See also
Directives, Plugins, SSR, and More
Technical requirementsAutomatically loading Vue routesGetting readyHow to do it...How it works...There's more...See alsoAutomatically loading Vuex modulesGetting readyHow to do it...How it works...See alsoCreating a custom directiveGetting readyHow to do it...How it works...Creating a Vue pluginGetting readyHow to do it...How it works...See alsoCreating an SSR, SPA, PWA, Cordova, and Electron application in Vue with QuasarGetting readyHow to do it...Developing an SPA (Single-Page Application)CommandsDeveloping a PWA (Progressive Web Application)Configuring quasar.conf on a PWACommandsDeveloping SSR (Server-Side Rendering)Configuring quasar.conf on SSRCommandsDeveloping a mobile application (Cordova)Configuring quasar.conf on CordovaCommandsDeveloping a desktop application (Electron)Configuring quasar.conf on ElectronCommandsHow it works...See alsoCreating smarter Vue watchers and computed propertiesHow to do it...WatchersUsing method namesImmediate calls and deep listeningMultiple handlersComputedNo cached valueGetter and setterSee alsoCreating a Nuxt.js SSR with Python Flask as the APIGetting ready‌How to do it...Creating your Flask APIInitializing the applicationStarting the serverCreating your Nuxt.js serverAdding Bulma to the global CSSConfiguring the axios pluginRunning the Nuxt.js serverCreating the TodoList componentSingle file component sectionSingle file component sectionCreating the Todo form componentSingle file component sectionSingle file component sectionCreating the layoutCreating the pageSingle file component sectionSingle file component sectionHow it works...See alsoThe dos and don'ts of Vue applicationsLintersJavaScriptVueSee also
Other Books You May Enjoy
Leave a review - let other readers know what you think

Content preview from Vue.js 3 Cookbook

Animating Your Application with Transitions and CSS

To have a more dynamic application and have the full attention of the user, using animation is crucial. Today, CSS animations are present in toasts, banners, notifications, and even input fields.

There are some cases where you need to create special animations, known as transitions, and have full control of what is happening on your page. To do this, you must use custom components and have the framework to help you with rendering your application.

With Vue, we can use two custom components that can help us create animations and transitions in our application with the help of CSS classes. Those components are Transition and TransitionGroup.

In this chapter, we will learn how to create a CSS ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Publisher Resources

ISBN: 9781838826222

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills

Vue.js 3 Cookbook

by Heitor Ramon Ribeiro

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.