Vue.js 3 Cookbook

Other Books You May Enjoy

The dos and don'ts of Vue applications

Creating a Nuxt.js SSR with Python Flask as the API

Creating smarter Vue watchers and computed properties

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

Creating a Vue plugin

Creating a custom directive

Automatically loading Vuex modules

Automatically loading Vue routes

Technical requirements

Directives Plugins SSR and More

Configuring the Firebase-CLI and deploying your project

Creating a Firebase project

Preparing for automatic deployment on Vercel with GitHub

Configuring the Vercel-CLI and deploying your project

Creating a Vercel account

Preparing for automatic deployment on Netlify with GitHub

Preparing your application for deployment in Netlify

Creating a Netlify account

Technical requirements

Deploying an Application to Cloud Platforms

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

Creating a page a layout and a user form with Vuetify

Creating a page a layout and a user form with Buefy

Technical requirements

Creating Beautiful Applications Using UI Frameworks

Creating a seamless transition between elements

Creating a custom transition component

Creating animations for lists and groups

Creating animations on page render

Creating transactions with custom hooks

Creating a custom transition class with Animate.css

Creating your first CSS animation

Technical requirements

Animating Your Application with Transitions and CSS

Creating a Vuex module

Adding hot-module-reload for development

Creating a dynamic component with Vuex

Creating and understanding the Vuex actions

Creating and understanding the Vuex getters

Creating and understanding the Vuex mutations

Creating and understanding the Vuex state

Creating a simple Vuex store

Technical requirements

Managing the Application State with Vuex

Lazy loading your pages asynchronously

Creating and applying authentication middleware

Creating a 404 error page

Creating a nested router view

Creating route redirects

Creating a route alias

Creating a dynamic router path

Creating a programmatic navigation

Creating a simple route

Technical requirements

Managing Routes with vue-router

Creating a CRUD interface with Axios and Vuesax

Creating a request and response interceptor for axios

Creating different axios instances

Using axios as the new HTTP client

Creating your fake JSON API server with MirageJS

Creating a random cat image or GIF component

Creating a wrapper for the Fetch API as an HTTP client

Technical requirements

Fetching Data from the Web via HTTP Requests

Lazy loading your components

Creating a component mixin

Creating a dependency injection component

Creating a dynamic injected component

Accessing your children components data

Creating functional components

Passing data to your component and validating the data

Using slots and named slots to place data inside your components

Creating a visual template component

Technical requirements

Components Mixins and Functional Components

Using vue-devtools to debug your application

Adding custom styles and transitions

Creating conditional filters to sort list data

Creating filters and sorters for a list

Adding form validation with Vuelidate

Displaying cleaner data and text with custom filters

Creating computed properties and understanding how they work

Creating a dynamic to-do list

Removing the v-model from the input

Adding an event listener to an element

Creating an input form with two-way data binding

Creating the "hello world" component

Technical requirements

Data Binding Form Validations Events and Computed Properties

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

Adding custom hooks to vue-class-component

Creating a custom function decorator with vue-class-component

Creating a custom mixin with vue-class-component

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

Adding TypeScript to a Vue CLI project

Adding plugins to a Vue CLI project with Vue UI

Creating your first project with Vue CLI

Creating your first TypeScript class

Understanding TypeScript

Creating a TypeScript project

Technical requirements

Introducing TypeScript and the Vue Ecosystem

Creating a component using the composition API

Using the reactivity and observable API outside the scope of Vue

Creating components with attribute inheritance

Creating components with multiple root elements

Upgrading your Vue 2 application to Vue 3

Technical requirements

What is new in Vue 3

Understanding Vue 3 and Creating Components

Get in touch

Sections

To get the most out of this book

What this book covers

Who this book is for

Preface

Packt is searching for authors like you

About the reviewers

About the author

Contributors

Why subscribe?

About Packt

版权信息

封面

封面

版权信息

About Packt

Why subscribe?

Contributors

About the author

About the reviewers

Packt is searching for authors like you

Preface

Who this book is for

What this book covers

To get the most out of this book

Sections

Get in touch

Understanding Vue 3 and Creating Components

What is new in Vue 3

Technical requirements

Upgrading your Vue 2 application to Vue 3

Creating components with multiple root elements

Creating components with attribute inheritance

Using the reactivity and observable API outside the scope of Vue

Creating a component using the composition API

Introducing TypeScript and the Vue Ecosystem

Technical requirements

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

Data Binding Form Validations Events and Computed Properties

Technical requirements

Creating the "hello world" component

Creating an input form with two-way data binding

Adding an event listener to an element

Removing the v-model from the input

Creating a dynamic to-do list

Creating computed properties and understanding how they work

Displaying cleaner data and text with custom filters

Adding form validation with Vuelidate

Creating filters and sorters for a list

Creating conditional filters to sort list data

Adding custom styles and transitions

Using vue-devtools to debug your application

Components Mixins and Functional Components

Technical requirements

Creating a visual template component

Using slots and named slots to place data inside your components

Passing data to your component and validating the data

Creating functional components

Accessing your children components data

Creating a dynamic injected component

Creating a dependency injection component

Creating a component mixin

Lazy loading your components

Fetching Data from the Web via HTTP Requests

Technical requirements

Creating a wrapper for the Fetch API as an HTTP client

Creating a random cat image or GIF component

Creating your fake JSON API server with MirageJS

Using axios as the new HTTP client

Creating different axios instances

Creating a request and response interceptor for axios

Creating a CRUD interface with Axios and Vuesax

Managing Routes with vue-router

Technical requirements

Creating a simple route

Creating a programmatic navigation

Creating a dynamic router path

Creating a route alias

Creating route redirects

Creating a nested router view

Creating a 404 error page

Creating and applying authentication middleware

Lazy loading your pages asynchronously

Managing the Application State with Vuex

Technical requirements

Creating a simple Vuex store

Creating and understanding the Vuex state

Creating and understanding the Vuex mutations

Creating and understanding the Vuex getters

Creating and understanding the Vuex actions

Creating a dynamic component with Vuex

Adding hot-module-reload for development

Creating a Vuex module

Animating Your Application with Transitions and CSS

Technical requirements

Creating your first CSS animation

Creating a custom transition class with Animate.css

Creating transactions with custom hooks

Creating animations on page render

Creating animations for lists and groups

Creating a custom transition component

Creating a seamless transition between elements

Creating Beautiful Applications Using UI Frameworks

Technical requirements

Creating a page a layout and a user form with Buefy

Creating a page a layout and a user form with Vuetify

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

Deploying an Application to Cloud Platforms

Technical requirements

Creating a Netlify account

Preparing your application for deployment in Netlify

Preparing for automatic deployment on Netlify with GitHub

Creating a Vercel account

Configuring the Vercel-CLI and deploying your project

Preparing for automatic deployment on Vercel with GitHub

Creating a Firebase project

Configuring the Firebase-CLI and deploying your project

Directives Plugins SSR and More

Technical requirements

Automatically loading Vue routes

Automatically loading Vuex modules

Creating a custom directive

Creating a Vue plugin

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

Creating smarter Vue watchers and computed properties

Creating a Nuxt.js SSR with Python Flask as the API

The dos and don'ts of Vue applications

Other Books You May Enjoy