Sign In Start Free Trial

Book Overview & Buying
Table Of Contents

Vue.js 3 Cookbook

By : Heitor Ramon Ribeiro

3 (6)

Vue.js 3 Cookbook

3 (6)

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

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

Sections

Getting ready

How to do it…

How it works…

There's more…

See also

Get in touch

Reviews

Understanding Vue 3 and Creating Components

Understanding Vue 3 and Creating Components

What is new in Vue 3

Improvements to the framework

Under the hood

Render engine

Exposed APIs

New custom components

Fragments

Teleport

Suspense

API changes

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

Getting ready

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

See also

Free Chapter

Introducing TypeScript and the Vue Ecosystem

Introducing TypeScript and the Vue Ecosystem

Technical requirements

Creating a TypeScript project

Getting ready

How to do it...

How it works...

See also

Understanding TypeScript

Getting ready

Types

String

Number

Boolean

Arrays

Tuple

Enum

Any

Void

Objects

Functions

Interfaces

Decorators

In conclusion

See also

Creating your first TypeScript class

Getting ready

How to do it...

How it works...

There's more...

See also

Creating your first project with Vue CLI

Getting ready

How to do it...

There's more...

See also

Adding plugins to a Vue CLI project with Vue UI

Getting ready

How to do it...

How it works...

Adding TypeScript to a Vue CLI project

Getting ready

How to do it...

How it works...

See also

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

Getting ready

How to do it...

How it works...

See also

Creating a custom mixin with vue-class-component

Getting ready

How to do it...

Creating the Counter component

Extracting similar code for the mixin

How it works...

See also

Creating a custom function decorator with vue-class-component

Getting ready

How to do it...

How it works...

There's more...

See also

Adding custom hooks to vue-class-component

Getting ready

How to do it...

How it works...

See also

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

Getting ready

How to do it...

How it works...

There's more...

See also

Data Binding, Form Validations, Events, and Computed Properties

Data Binding, Form Validations, Events, and Computed Properties

Technical requirements

Creating the "hello world" component

Getting ready

How to do it...

How it works...

See also

Creating an input form with two-way data binding

Getting ready

How to do it...

How it works...

See also

Adding an event listener to an element

Getting ready

How to do it...

How it works...

See also

Removing the v-model from the input

Getting ready

How to do it...

How it works...

See also

Creating a dynamic to-do list

Getting ready

How to do it...

How it works...

See also

Creating computed properties and understanding how they work

Getting ready

How to do it...

How it works...

See also

Displaying cleaner data and text with custom filters

Getting ready

How to do it...

How it works...

See also

Adding form validation with Vuelidate

Getting ready

How to do it...

How it works...

See also

Creating filters and sorters for a list

Getting ready

How to do it...

How it works...

See also

Creating conditional filters to sort list data

Getting ready

How to do it...

How it works...

See also

Adding custom styles and transitions

Getting ready

How to do it...

How it works...

See also

Using vue-devtools to debug your application

Getting ready

How to do it...

See also

Components, Mixins, and Functional Components

Components, Mixins, and Functional Components

Technical requirements

Creating a visual template component

Getting ready

How to do it...

How it works...

See also

Using slots and named slots to place data inside your components

Getting ready

How to do it...

How it works...

See also

Passing data to your component and validating the data

Getting ready

How to do it...

How it works...

See also

Creating functional components

Getting ready

How to do it...

How it works...

See also

Accessing your children components data

Getting ready

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

See also

Creating a dynamic injected component

Getting ready

How to do it...

How it works...

See also

Creating a dependency injection component

Getting ready

How to do it...

How it works...

See also

Creating a component mixin

Getting ready

How to do it...

How it works...

See also

Lazy loading your components

Getting ready

How to do it...

How it works...

See also

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

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

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

Managing the Application State with Vuex

Technical requirements

Creating a simple Vuex store

Getting ready

How to do it...

Creating the store

Creating the reactive component with Vuex

Single file component section

Single file component section

How it works...

See also

Creating and understanding the Vuex state

Getting ready

How to do it...

Adding Vuex via the vue ui

Creating the Vuex state

How it works...

There's more...

See also

Creating and understanding the Vuex mutations

Getting ready

How to do it...

How it works...

See also

Creating and understanding the Vuex getters

Getting ready

How to do it...

How it works...

There's more...

See also

Creating and understanding the Vuex actions

Getting ready

How to do it...

How it works...

See also

Creating a dynamic component with Vuex

Getting ready

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

See also

Adding hot-module-reload for development

Getting ready

How to do it...

How it works...

See also

Creating a Vuex module

Getting ready

How to do it...

Creating the new authentication module

Adding the modules to Vuex

How it works...

See also

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

Getting ready

How to do it...

How it works...

See also

Creating a custom transition class with Animate.css

Getting ready

How to do it...

How it works...

There's more...

See also

Creating transactions with custom hooks

Getting ready

How to do it...

How it works...

See also

Creating animations on page render

Getting ready

How to do it...

How it works...

See also

Creating animations for lists and groups

Getting ready

How to do it...

How it works...

See also

Creating a custom transition component

Getting ready

How to do it...

How it works...

See also

Creating a seamless transition between elements

Getting ready

How to do it...

How it works...

See also

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

Getting ready

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

See also

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

Getting ready

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

See also

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

Getting ready

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

See also

Deploying an Application to Cloud Platforms

Deploying an Application to Cloud Platforms

Technical requirements

Creating a Vue project

Creating a Netlify account

Getting ready

How to do it...

How it works...

See also

Preparing your application for deployment in Netlify

Getting ready

How to do it...

How it works...

See also

Preparing for automatic deployment on Netlify with GitHub

Getting ready

How to do it...

How it works...

See also

Creating a Vercel account

Getting ready

How to do it...

How it works...

See also

Configuring the Vercel-CLI and deploying your project

Getting ready

How to do it...

How it works...

See also

Preparing for automatic deployment on Vercel with GitHub

Getting ready

How to do it...

How it works...

See also

Creating a Firebase project

Getting ready

How to do it...

How it works...

See also

Configuring the Firebase-CLI and deploying your project

Getting ready

How to do it...

How it works...

See also

Directives, Plugins, SSR, and More

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

Other Books You May Enjoy

Leave a review - let other readers know what you think

Adding Vuetify to the Vue-CLI project

To use Vuetify in a Vue project, we will use the Vue-CLI plugin installation of the framework:

In the folder that you created your Vue-CLI project in, open Terminal (macOS or Linux) or Command Prompt/PowerShell (Windows) and execute the following command:

> vue add vuetify

Vue-CLI will ask whether you want to choose an installation preset. Choose the default preset. Then, Vue-CLI will finish the installation of the framework on the project:

? Choose a preset: (Use arrow keys)
❯ Default (recommended) 
  Prototype (rapid development) 
  Configure (advanced)

After the installation is finished, Vuetify will have configured the files inside your project to load the framework. Now you are ready to use it.

Visually different images

CONTINUE READING

83

Tech Concepts

36

Programming languages

73

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Vue.js 3 Cookbook

Search

Your notes and bookmarks