Cover image for Vue.js 3 By Example

Vue.js 3 By Example

Release Date: 2021/04/01
ISBN: 9781838826345
Topic:
0%
13
Chapters
0-1
Hours read
0k
Total Words
    Start Reading Now    
       Add to Wishlist       
View table of contents

Kick-start your Vue.js development career by learning the fundamentals of Vue 3 and its integration with modern web technologies such as Electron, GraphQL, Ionic, and Laravel

Key Features

  • Download complete source code for all Vue.js projects built throughout the book
  • Discover steps to build production-ready Vue.js apps across web, mobile, and desktop
  • Build a compelling portfolio of web apps, including shopping cart system, booking app, slider puzzle game, real-time chat app, and more

Book Description

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.

What you will learn

  • Get to grips with Vue architecture, components, props, directives, mixins, and other advanced features
  • Understand the Vue 3 template system and use directives
  • Use third-party libraries such as Vue Router for routing and Vuex for state management
  • Create GraphQL APIs to power your Vue 3 web apps
  • Build cross-platform Vue 3 apps with Electron and Ionic
  • Make your Vue 3 apps more captivating with PrimeVue
  • Build real-time communication apps with Vue 3 as the frontend and Laravel

Who this book is for

This book is for web developers who want to learn frontend web development with Vue 3 and use it to create professional applications. You'll also find this book useful if you're looking to create full-stack web apps with Vue.js 3.0 as the frontend. Knowledge of JavaScript programming is required to get the most out of this book.

Table of Contents

  1. Vue.js 3 By Example
  2. Contributors
  3. About the author
  4. About the reviewer
  5. Preface
    1. Who this book is for
    2. What this book covers
    3. To get the most out of this book
    4. Download the example code files
    5. Conventions used
    6. Get in touch
    7. Reviews
  6. Chapter 1: Creating Your First Application in Vue 3
    1. Technical requirements
    2. Understanding Vue as a framework
    3. Setting up the Vue project with the Vue CLI and script tag
    4. Creating your Vue instance
    5. Vue 3 core features – components and built-in directives
    6. Components
    7. Directives
    8. Debugging with Vue.js Devtools
    9. Summary
  7. Chapter 2: Building a Vue 3 Progressive Web App
    1. Technical requirements
    2. Basic theory on components and PWAs
    3. Introducing the GitHub portfolio app
    4. Creating the PWA
    5. Creating the GitHub client for our app
    6. Adding a display for issues and comments
    7. Letting users access GitHub data with a GitHub token
    8. Serving the PWA
    9. Summary
  8. Chapter 3: Building a Slider Puzzle Game with Tests
    1. Technical requirements
    2. Understanding the basics of components and mixins
    3. Setting up the Vue project
    4. Creating the components for shuffling pictures
    5. Rearranging the slides
    6. Calculating the score based on timing
    7. Unit testing with Jest
    8. Adding a test for the Puzzles.vue component
    9. Adding a test for the Records component
    10. Adding a test for the SliderPuzzle component
    11. Running all the tests
    12. Summary
  9. Chapter 4: Building a Photo Management Desktop App
    1. Technical requirements
    2. Understanding components
    3. Understanding Vue CLI Plugin Electron Builder
    4. Creating a project with Vue CLI Plugin Electron Builder
    5. Adding a photo submission UI
    6. Adding a photo display
    7. Adding routing to the Photo Manager app
    8. Using our app with photo management APIs
    9. Summary
  10. Chapter 5: Building a Multipurpose Calculator Mobile App with Ionic
    1. Technical requirements
    2. Introducing Ionic Vue
    3. Understanding the Composition API
    4. Understanding TypeScript
    5. Creating our Ionic Vue mobile app project
    6. Using Capacitor and Genymotion
    7. Installing the packages for our project
    8. Adding the calculators to our calculator app
    9. Adding routes
    10. Adding the currency converter page
    11. Adding the script tag
    12. Working on the setup method
    13. Working on the calculate method
    14. Adding the Tips calculator
    15. Adding the Home page
    16. Creating the Vuex store
    17. Summary
  11. Chapter 6: Building a Vacation Booking App with the PrimeVue UI Framework
    1. Technical requirements
    2. Understanding PrimeVue
    3. Understanding Vee-Validate and Yup
    4. Understanding Express
    5. Connecting the frontend and the backend
    6. Creating the vacation booking project
    7. Creating the backend
    8. Creating the admin frontend
    9. Creating the user frontend
    10. Summary
  12. Chapter 7: Creating a Shopping Cart System with GraphQL
    1. Technical requirements
    2. Introducing the GraphQL API
    3. Setting up the shopping cart system project
    4. Creating a GraphQL API with Express
    5. Working with resolver functions
    6. Creating the admin frontend
    7. Working with components
    8. Adding the login logic and making our first GraphQL request
    9. Creating the orders page
    10. Adding and removing shop items for sale
    11. Creating the customer frontend
    12. Creating the plugins folder
    13. Creating the order form page
    14. Summary
  13. Chapter 8: Building a Chat App with Vue 3, Laravel, and Socket.IO
    1. Technical requirements
    2. Creating the API endpoints with Laravel
    3. Installing the required libraries
    4. Creating databases and migration files
    5. Running the migration files
    6. Creating our application logic
    7. Exposing controller methods for endpoints
    8. Setting up JWT authentication
    9. Configuring our authentication
    10. Enabling cross-domain communication
    11. Adding real-time communication
    12. Communication with Socket.IO
    13. Creating the frontend to let users chat
    14. Installing the Vue dependencies
    15. Creating our components
    16. Creating the login page
    17. Summary
    18. Why subscribe?
  14. Other Books You May Enjoy
    1. Packt is searching for authors like you
    2. Leave a review - let other readers know what you think
3.129.13.201