Book Image

Vue.js 3 Cookbook

By : Heitor Ramon Ribeiro

Book Image

Vue.js 3 Cookbook

By: Heitor Ramon Ribeiro

Overview of this book

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.

Preface

Who this book is for

What this book covers

To get the most out of this book

Download the example code files

Conventions used

How to do it…

How it works…

There's more…

Understanding Vue 3 and Creating Components

Understanding Vue 3 and Creating Components

What is new in Vue 3

Improvements to the framework

New custom components

Some minor break changes

Goodbye filters, hello filters! The Vue filters API

The bus just left the station! The event bus API

No more global Vue – the mounting API

v-model, v-model, v-model – multiple v-model

Composition API

Technical requirements

Creating the base file

Upgrading your Vue 2 application to Vue 3

How to do it...

Using Vue-CLI to upgrade the project

Upgrading the project manually

Changing the starting files

How it works...

Creating components with multiple root elements

How to do it...

Creating the component with the structure

Creating the component with the render function

How it works...

Creating components with attribute inheritance

How to do it...

How it works...

Using the reactivity and observable API outside the scope of Vue

How to do it...

How it works...

Creating a component using the composition API

How to do it...

How it works...

Free Chapter

Introducing TypeScript and the Vue Ecosystem

Introducing TypeScript and the Vue Ecosystem

Technical requirements

Creating a TypeScript project

How to do it...

How it works...

Understanding TypeScript

Creating your first TypeScript class

How to do it...

How it works...

There's more...

Creating your first project with Vue CLI

How to do it...

There's more...

Adding plugins to a Vue CLI project with Vue UI

How to do it...

How it works...

Adding TypeScript to a Vue CLI project

How to do it...

How it works...

Creating your first TypeScript Vue component with vue-class-component

How to do it...

How it works...

Creating a custom mixin with vue-class-component

How to do it...

Creating the Counter component

Extracting similar code for the mixin

How it works...

Creating a custom function decorator with vue-class-component

How to do it...

How it works...

There's more...

Adding custom hooks to vue-class-component

How to do it...

How it works...

Adding vue-property-decorator to vue-class-component

How to do it...

How it works...

There's more...

Data Binding, Form Validations, Events, and Computed Properties

Data Binding, Form Validations, Events, and Computed Properties

Technical requirements

Creating the "hello world" component

How to do it...

How it works...

Creating an input form with two-way data binding

How to do it...

How it works...

Adding an event listener to an element

How to do it...

How it works...

Removing the v-model from the input

How to do it...

How it works...

Creating a dynamic to-do list

How to do it...

How it works...

Creating computed properties and understanding how they work

How to do it...

How it works...

Displaying cleaner data and text with custom filters

How to do it...

How it works...

Adding form validation with Vuelidate

How to do it...

How it works...

Creating filters and sorters for a list

How to do it...

How it works...

Creating conditional filters to sort list data

How to do it...

How it works...

Adding custom styles and transitions

How to do it...

How it works...

Using vue-devtools to debug your application

How to do it...

Components, Mixins, and Functional Components

Components, Mixins, and Functional Components

Technical requirements

Creating a visual template component

How to do it...

How it works...

Using slots and named slots to place data inside your components

How to do it...

How it works...

Passing data to your component and validating the data

How to do it...

How it works...

Creating functional components

How to do it...

How it works...

Accessing your children components data

How to do it...

Creating the star rating input

Creating the StarRatingDisplay component

Creating the StarRating component

Data manipulation on child components

How it works...

There's more...

Creating a dynamic injected component

How to do it...

How it works...

Creating a dependency injection component

How to do it...

How it works...

Creating a component mixin

How to do it...

How it works...

Lazy loading your components

How to do it...

How it works...

Fetching Data from the Web via HTTP Requests

Fetching Data from the Web via HTTP Requests

Technical requirements

Creating a wrapper for the Fetch API as an HTTP client

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

Creating a random cat image or GIF component

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

Creating your fake JSON API server with MirageJS

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

Using axios as the new HTTP client

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

Creating different axios instances

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

Creating a request and response interceptor for axios

How to do it...

Creating the interceptor

Adding the interceptors to the HTTP methods functions

How it works...

Creating a CRUD interface with Axios and Vuesax

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

Single file component section

Single file component section

Updating the user component

Single file component section

Single file component section

How it works...

Managing Routes with vue-router

Managing Routes with vue-router

Technical requirements

Creating a simple route

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

Creating a programmatic navigation

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

Creating a dynamic router path

How to do it...

Changing the application's main component

Single file component section

Changing the route mixin

Axios instance configuration

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

Creating a route alias

How to do it...

How it works...

Creating route redirects

How to do it...

How it works...

Creating a nested router view

How to do it...

Creating the router-view on the layout

Changing the router files

How it works...

Creating a 404 error page

How to do it...

Creating the NotFound view

Single file component section

Single file component section

Changing the router files

How it works...

Creating and applying authentication middleware

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

Lazy loading your pages asynchronously

How to do it...

Updating the router manager

Updating the user routes

How it works...

Managing the Application State with Vuex

Managing the Application State with Vuex

Technical requirements

Creating a simple Vuex store

How to do it...

Creating the store

Creating the reactive component with Vuex

Single file component section

Single file component section

How it works...

Creating and understanding the Vuex state

How to do it...

Adding Vuex via the vue ui

Creating the Vuex state

How it works...

There's more...

Creating and understanding the Vuex mutations

How to do it...

How it works...

Creating and understanding the Vuex getters

How to do it...

How it works...

There's more...

Creating and understanding the Vuex actions

How to do it...

How it works...

Creating a dynamic component with Vuex

How to do it...

Creating the user list component

Single file component section

Single file component section

Editing the user list page

Single file component section

Single file component section

Editing the user view page

Single file component section

Single file component section

Editing the user edit page

Single file component section

Single file component section

Editing the user create page

Single file component section

How it works...

Adding hot-module-reload for development

How to do it...

How it works...

Creating a Vuex module

How to do it...

Creating the new authentication module

Adding the modules to Vuex

How it works...

Animating Your Application with Transitions and CSS

Animating Your Application with Transitions and CSS

Technical requirements

Creating the base project

Creating your first CSS animation

How to do it...

How it works...

Creating a custom transition class with Animate.css

How to do it...

How it works...

There's more...

Creating transactions with custom hooks

How to do it...

How it works...

Creating animations on page render

How to do it...

How it works...

Creating animations for lists and groups

How to do it...

How it works...

Creating a custom transition component

How to do it...

How it works...

Creating a seamless transition between elements

How to do it...

How it works...

Creating Beautiful Applications Using UI Frameworks

Creating Beautiful Applications Using UI Frameworks

Technical requirements

Creating a page, a layout, and a user form with Buefy

How to do it...

Creating the Vue-CLI project

Adding Buefy to the Vue-CLI project

Creating the layout and a page with Buefy

Creating the header menu component

Creating the hero section component

Creating the footer component

Creating the layout component

Creating the user registration form with Buefy

How it works...

Creating a page, a layout, and a user form with Vuetify

How to do it...

Creating the Vue-CLI project

Adding Vuetify to the Vue-CLI project

Creating the layout with Vuetify

Creating the top bar component

Creating the drawer menu component

Creating the layout component

Creating the user registration form with Vuetify

Single file component section

Single file component section

How it works...

Creating a page, a layout, and a user form with Ant-Design

How to do it...

Creating the Vue-CLI project

Adding Ant-Design to the Vue-CLI project

Creating the layout with Ant-Design

Creating the top-bar component

Creating the drawer menu

Creating the layout component

Creating the user registration form with Ant-Design

Single file component section

Single file component section

How it works...

Deploying an Application to Cloud Platforms

Deploying an Application to Cloud Platforms

Technical requirements

Creating a Vue project

Creating a Netlify account

How to do it...

How it works...

Preparing your application for deployment in Netlify

How to do it...

How it works...

Preparing for automatic deployment on Netlify with GitHub

How to do it...

How it works...

Creating a Vercel account

How to do it...

How it works...

Configuring the Vercel-CLI and deploying your project

How to do it...

How it works...

Preparing for automatic deployment on Vercel with GitHub

How to do it...

How it works...

Creating a Firebase project

How to do it...

How it works...

Configuring the Firebase-CLI and deploying your project

How to do it...

How it works...

Directives, Plugins, SSR, and More

Directives, Plugins, SSR, and More

Technical requirements

Automatically loading Vue routes

How to do it...

How it works...

There's more...

Automatically loading Vuex modules

How to do it...

How it works...

Creating a custom directive

How to do it...

How it works...

Creating a Vue plugin

How to do it...

How it works...

Creating an SSR, SPA, PWA, Cordova, and Electron application in Vue with Quasar

How to do it...

Developing an SPA (Single-Page Application)

Developing a PWA (Progressive Web Application)

Configuring quasar.conf on a PWA

Developing SSR (Server-Side Rendering)

Configuring quasar.conf on SSR

Developing a mobile application (Cordova)

Configuring quasar.conf on Cordova

Developing a desktop application (Electron)

Configuring quasar.conf on Electron

How it works...

Creating smarter Vue watchers and computed properties

How to do it...

Using method names

Immediate calls and deep listening

Multiple handlers

No cached value

Getter and setter

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

The dos and don'ts of Vue applications

Other Books You May Enjoy

Other Books You May Enjoy

Leave a review - let other readers know what you think

Customer Reviews

5 star

0

4 star

0

3 star

0

2 star

0

1 star

0

How it works...

First, we created a custom component using the functional component method, where there is no need to declare the <script> section of the single file component.

In this custom component, we used the Transaction component as the base component. Then, we defined the appear attribute with the injected functional context, prop.appear, and added the animations classes for the transition to slide in from the left when the component is rendered and slide out from the right when it's destroyed.

Then, in the main application, we used this custom component to wrap the img HTML element and make it work as the Transition component.