Vue.js 3 By Example E-Book

John Au-Yeung

• Herausgeber: Packt Publishing
• Kategorie: Fachliteratur
• Sprache: Englisch

Seitenzahl: 312

Veröffentlichungsjahr: 2021

Beschreibung

With its huge ecosystem and wide adoption, Vue is one of the leading frameworks thanks to its ease of use when developing applications. However, it can get challenging for aspiring Vue.js developers to make sense of the ecosystem and build meaningful applications.
This book will help you understand how you can leverage Vue effectively to develop impressive apps quickly using its latest version – Vue 3.0.
The book takes an example-based approach to help you get to grips with the basics of Vue 3 and create a simple application by exploring features such as components and directives. You'll then enhance your app building skills by learning how to test the app with Jest and Vue Test Utils. As you advance, you'll understand how to write non-web apps with Vue 3, create cross-platform desktop apps with the Electron plugin, and build a multi-purpose mobile app with Vue and Ionic. You'll also be able to develop web apps with Vue 3 that interact well with GraphQL APIs. Finally, you'll build a chat app that performs real-time communication using Vue 3 and Laravel.
By the end of this Vue.js book, you'll have developed the skills you need to build real-world apps using Vue 3 by working through a range of projects.

Leseprobe

Vue.js 3 By Example

Blueprints to learn Vue web development, full-stack development, and cross-platform development quickly

John Au-Yeung

BIRMINGHAM—MUMBAI

Vue.js 3 By Example

Copyright © 2021 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author(s), nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

Publishing Product Manager: Kaustubh Manglurkar

Senior Editor: Keagan Carneiro

Content Development Editor: Abhishek Jadhav

Technical Editor: Deepesh Patel

Copy Editor: Safis Editing

Project Coordinator: Manthan Patel

Proofreader: Safis Editing

Indexer: Vinayak Purushotham

Production Designer: Roshan Kawale

First published: April 2021

Production reference: 1230421

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham

B3 2PB, UK.

ISBN 978-1-83882-634-5

www.packt.com

Contributors

About the author

John Au-Yeung is a frontend developer who has extensive experience with the latest frontend technologies.

He has an MSc in information technology and a BSc in mathematics.

He is also a part-time blogger who writes about the latest frontend development technologies. In addition, he is an author of many self-published books about JavaScript programming. He has extensive experience with Vue and React and loves working with both. JavaScript programming is his focus and is what he does every day.

About the reviewer

Jaime Jones is a software engineer with a passion for frontend development, mostly focused on Vue.js. She graduated from Boise State University with a degree in psychology, but then decided to turn her hobby into her career and pursued development instead. She works as a lead frontend developer at Ritter Insurance Marketing and enjoys speaking at conferences and writing blog posts to contribute to the community.

Table of Contents

Preface

Chapter 1: Creating Your First Application in Vue 3

Technical requirements

Understanding Vue as a framework

Setting up the Vue project with the Vue CLI and script tag

Creating your Vue instance

Vue 3 core features – components and built-in directives

Components

Directives

Debugging with Vue.js Devtools

Summary

Chapter 2: Building a Vue 3 Progressive Web App

Technical requirements

Basic theory on components and PWAs

Introducing the GitHub portfolio app

Creating the PWA

Creating the GitHub client for our app

Adding a display for issues and comments

Letting users access GitHub data with a GitHub token

Serving the PWA

Summary

Chapter 3: Building a Slider Puzzle Game with Tests

Technical requirements

Understanding the basics of components and mixins

Setting up the Vue project

Creating the components for shuffling pictures

Rearranging the slides

Calculating the score based on timing

Unit testing with Jest

Adding a test for the Puzzles.vue component

Adding a test for the Records component

Adding a test for the SliderPuzzle component

Running all the tests

Summary

Chapter 4: Building a Photo Management Desktop App

Technical requirements

Understanding components

Understanding Vue CLI Plugin Electron Builder

Creating a project with Vue CLI Plugin Electron Builder

Adding a photo submission UI

Adding a photo display

Adding routing to the Photo Manager app

Using our app with photo management APIs

Summary

Chapter 5: Building a Multipurpose Calculator Mobile App with Ionic

Technical requirements

Introducing Ionic Vue

Understanding the Composition API

Understanding TypeScript

Creating our Ionic Vue mobile app project

Using Capacitor and Genymotion

Installing the packages for our project

Adding the calculators to our calculator app

Adding routes

Adding the currency converter page

Adding the script tag

Working on the setup method

Working on the calculate method

Adding the Tips calculator

Adding the Home page

Creating the Vuex store

Summary

Chapter 6: Building a Vacation Booking App with the PrimeVue UI Framework

Technical requirements

Understanding PrimeVue

Understanding Vee-Validate and Yup

Understanding Express

Connecting the frontend and the backend

Creating the vacation booking project

Creating the backend

Creating the admin frontend

Creating the user frontend

Summary

Chapter 7: Creating a Shopping Cart System with GraphQL

Technical requirements

Introducing the GraphQL API

Setting up the shopping cart system project

Creating a GraphQL API with Express

Working with resolver functions

Creating the admin frontend

Working with components

Adding the login logic and making our first GraphQL request

Creating the orders page

Adding and removing shop items for sale

Creating the customer frontend

Creating the plugins folder

Creating the order form page

Summary

Chapter 8: Building a Chat App with Vue 3, Laravel, and Socket.IO

Technical requirements

Creating the API endpoints with Laravel

Installing the required libraries

Creating databases and migration files

Running the migration files

Creating our application logic

Exposing controller methods for endpoints

Setting up JWT authentication

Configuring our authentication

Enabling cross-domain communication

Adding real-time communication

Communication with Socket.IO

Creating the frontend to let users chat

Installing the Vue dependencies

Creating our components

Creating the login page

Summary

Why subscribe?

Other Books You May Enjoy

Packt is searching for authors like you

Leave a review - let other readers know what you think

Preface

Vue is one of the leading frameworks with a huge ecosystem and increasing adoption due to its ease of use when developing applications and the fact that it can help you achieve impressive results during development quickly. This book explores the latest Vue version – Vue 3.0 – and how you can leverage it effectively.

You'll learn with the help of an example-based approach, starting with exploring the basics of Vue 3 by creating a simple application and looking at features such as components, directives, and their usage. To build your knowledge and enable you to have confidence in your app-building skills, the book will show you how to test that app with Jest and Vue Test Utils. Later, you'll learn how to write non-web apps with Vue 3 and create cross-platform desktop apps with the Electron plugin. You'll also learn how to create a multi-purpose mobile app with Vue and Ionic. As you progress, you'll learn how to develop web apps with Vue 3 that interact well with GraphQL APIs. Finally, you'll build a real-time chat app that performs real-time communication using Vue 3 and Laravel.

By the end of this book, you'll have developed the real-world skills you need by working through a range of app-building projects using Vue 3.

Who this book is for

This book is for web developers who are interested in learning frontend web development with Vue 3 and creating professional applications using it. You will also find this book useful if you want to learn how to create full-stack web apps with Vue.js 3.0 as the frontend. Prior knowledge of basic JavaScript programming is required to get the most out of this book.

What this book covers

Chapter 1, Creating Your First Application in Vue 3, will look at how to use Vue 3 to create simple apps. You will start by building the most basic apps and then move on to building more complex solutions.

Chapter 2, Building a Vue 3 Progressive Web App, will teach you how to create a GitHub Progressive Web App (PWA) with Vue 3. As you build the project, you will examine the inner workings of Vue apps by looking at the basic building blocks in depth. You will create Vue apps with components and will look at the parts that make up a component and how they work.

Chapter 3, Building a Slider Puzzle Game with Tests, will introduce you to Vue by having you create a simple game with Vue 3. You will learn how to use different methods, mixins, directives, and computed properties to be added to the project.

Chapter 4, Building a Photo Management Desktop App, will help you build a photo management desktop app with the Vue Electron plugin. You will learn how to build cross-platform desktop apps easily with Electron and Vue.

Chapter 5, Building a Multipurpose Calculator Mobile App with Ionic, will see you create a multi-purpose calculator mobile app with NativeScript. You will use Vuex to manage the state and save results data so that you can use it later in local storage. Finally, you will master currency conversions, unit conversions, and tips calculations.

Chapter 6, Building a Vacation Booking App with the PrimeVue UI Framework, will teach you how to create a travel booking app with admin functionality. The admin side will be a dashboard for users to manage bookings. It will involve using state management and routing to create a full-fledged app. The backend will be simple so that you can focus more on Vue. State management with Vuex and routing with Vue Router will also be required.

Chapter 7, Creating a Shopping Cart System with GraphQL, will help you create a Vue 3 app and use it with GraphQL APIs. You will learn how to use a GraphQL client within our Vue 3 app. The API will have queries, mutations, and database interactions, and you will learn how to create a GraphQL API with Express.

Chapter 8, Building a Chat App with Vue 3, Laravel, and Socket.IO, will teach you how to create a chat app with Vue 3, socket.io, and Laravel. This app will make HTTP requests and have real-time communication. It can be used by multiple users.

To get the most out of this book

To get the most out of this book, you should know the basics of modern JavaScript. Knowing how to program with JavaScript features introduced from 2015 onward would make understanding this book much easier. Basic TypeScript concepts, such as defining interfaces and advanced data types, will be used in Chapter 5, Building a Multipurpose Calculator Mobile App with Ionic.

Also, Chapter 8, Building a Chat App with Vue 3, Laravel, and Socket.IO, covers Laravel, which requires a basic understanding of PHP. The backend portions of the more advanced projects also require understanding very basic SQL syntax. Commands such as Select, Insert, and Create table will be helpful.

The other things required are the latest versions of Node.js and Visual Studio Code. Visual Studio Code supports JavaScript and TypeScript development out of the box. Node.js is required to run Vue CLI and Ionic CLI.

After reading this book, you should try to practice more by creating your own projects. This way, you will utilize the knowledge that you gained from this book. Learning from tutorials is only a start; creating projects on your own will make you proficient.

If you are using the digital version of this book, we advise you to type the code yourself or access the code via the GitHub repository (link available in the next section). Doing so will help you avoid any potential errors related to the copying and pasting of code.

Download the example code files

You can download the example code files for this book from your account at www.packt.com. If you purchased this book elsewhere, you can visit www.packtpub.com/support and register to have the files emailed directly to you.

You can download the code files by following these steps:

Log in or register at www.packt.com.Select the Support tab.Click on Code Downloads.Enter the name of the book in the Search box and follow the onscreen instructions.

Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:

WinRAR/7-Zip for WindowsZipeg/iZip/UnRarX for Mac7-Zip/PeaZip for Linux

The code bundle for the book is also hosted on GitHub at https://github.com/PacktPublishing/-Vue.js-3-By-Example. In case there's an update to the code, it will be updated on the existing GitHub repository.

We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!

Conventions used

There are a number of text conventions used throughout this book.

Code in text: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: "Mount the downloaded WebStorm-10*.dmg disk image file as another disk in your system."

A block of code is set as follows:

html, body, #map {

height: 100%;

margin: 0;

padding: 0

}

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

[default]

exten => s,1,Dial(Zap/1|30)

exten => s,2,Voicemail(u100)

exten => s,102,Voicemail(b100)

exten => i,1,Voicemail(s0)

Any command-line input or output is written as follows:

$ mkdir css

$ cd css

Bold: Indicates a new term, an important word, or words that you see onscreen. For example, words in menus or dialog boxes appear in the text like this. Here is an example: "Select System info from the Administration panel."

Tips or important notes

Appear like this.

Get in touch

Feedback from our readers is always welcome.

General feedback: If you have questions about any aspect of this book, mention the book title in the subject of your message and email us at [email protected].

Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packtpub.com/support/errata, selecting your book, clicking on the Errata Submission Form link, and entering the details.

Piracy: If you come across any illegal copies of our works in any form on the Internet, we would be grateful if you would provide us with the location address or website name. Please contact us at [email protected] with a link to the material.

If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit authors.packtpub.com.

Reviews

Please leave a review. Once you have read and used this book, why not leave a review on the site that you purchased it from? Potential readers can then see and use your unbiased opinion to make purchase decisions, we at Packt can understand what you think about our products, and our authors can see your feedback on their book. Thank you!

For more information about Packt, please visit packt.com.