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.

Related Content you might be interested in

Current Title:

Small book image
Vue.js 3 Cookbook
Heitor Ramon Ribeiro
Sep, 2020 | 562 pages
Small book image
Front-End Development Projects with Vue.js
Raymond Camden | Clifford Gurney | Maya Shavin | Hugo Di Francesco | Philip Kirkbride
Nov, 2020 | 774 pages
Small book image
Vue.js: Understanding its Tools and Ecosystem
Dave Berning
Nov, 2019 | 194 pages
Small book image
Vue.js Quick Start Guide
Ajdin Imsirovic
Oct, 2018 | 186 pages
Table of Contents (13 chapters)
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
1
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
2
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
3
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
4
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
5
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
6
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
7
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
8
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
9
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
10
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
11
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
12
Other Books You May Enjoy
Other Books You May Enjoy
Leave a review - let other readers know what you think

Creating a component using the composition API

The composition API is a new way to write Vue components, based on the use of functions to compose the component, and it makes the organization and reusability of the code better.

This method is inspired by React Hooks and introduces the technique of creating a special function to compose the applications that can be shared without the need to be inside the Vue application because of the use of the exposed Vue APIs.

In this recipe, we will learn how to create an external function that fetches the user's geolocation and displays that data on the screen using the composition API.

Previous Section
End of Section 38
Next Section