Vue.js 3 Cookbook

Vue.js 3 Cookbook

by Heitor Ramon Ribeiro
Released September 2020
Publisher(s): Packt Publishing
ISBN: 9781838826222

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Explore the new features of Vue.js 3 and discover best practices for building fault-tolerant and professional frontend web applications

Key Features

  • Migrate your apps from Vue.js 2 to Vue.js 3 with the help of practical recipes
  • Explore the latest Vue.js 3 features such as reactivity API, composition API, and TypeScript support
  • Extend the capabilities and performance of Vue.js apps with Quasar, Vuetify, and Nuxt.js frameworks

Book Description

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.

What you will learn

  • Design and develop large-scale web applications using Vue.js 3's latest features
  • Create impressive UI layouts and pages using Vuetify, Buefy, and Ant Design
  • Extend your Vue.js applications with dynamic form and custom rules validation
  • Add state management, routing, and navigation to your web apps
  • Extend Vue.js apps to the server-side with Nuxt.js
  • Discover effective techniques to deploy your web applications with Netlify
  • Develop web applications, mobile applications, and desktop applications with a single code base using the Quasar framework

Who this book is for

The book is for both new and experienced Vue.js developers looking to overcome challenges in building dynamic web applications with Vue.js 3. Knowledge of JavaScript and TypeScript is assumed. A basic understanding of Vue.js will help you to make the most of this book.

Table of contents

  1. Title Page
  2. Copyright and Credits
    1. Vue.js 3 Cookbook
  3. About Packt
    1. Why subscribe?
  4. Contributors
    1. About the author
    2. About the reviewers
    3. Packt is searching for authors like you
  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. Sections
    7. Getting ready
    8. How to do it…
    9. How it works…
    10. There's more…
    11. See also
    12. Get in touch
    13. Reviews
  6. Understanding Vue 3 and Creating Components
    1. What is new in Vue 3
    2. Improvements to the framework
    3. Under the hood
    4. Render engine
    5. Exposed APIs
    6. New custom components
    7. Fragments
    8. Teleport
    9. Suspense
    10. API changes
    11. Some minor break changes
    12. Goodbye filters, hello filters! The Vue filters API
    13. The bus just left the station! The event bus API
    14. No more global Vue – the mounting API
    15. v-model, v-model, v-model – multiple v-model
    16. Composition API
    17. Technical requirements
    18. Creating the base file
    19. Upgrading your Vue 2 application to Vue 3
    20. Getting ready
    21. How to do it...
    22. Using Vue-CLI to upgrade the project
    23. Upgrading the project manually
    24. Changing the starting files
    25. How it works...
    26. Creating components with multiple root elements
    27. How to do it...
    28. Creating the component with the structure
    29. Creating the component with the render function
    30. How it works...
    31. Creating components with attribute inheritance
    32. How to do it...
    33. How it works...
    34. Using the reactivity and observable API outside the scope of Vue
    35. How to do it...
    36. How it works...
    37. Creating a component using the composition API
    38. How to do it...
    39. How it works...
    40. See also
  7. Introducing TypeScript and the Vue Ecosystem
    1. Technical requirements
    2. Creating a TypeScript project
    3. Getting ready
    4. How to do it...
    5. How it works...
    6. See also
    7. Understanding TypeScript
    8. Getting ready
    9. Types
    10. String
    11. Number
    12. Boolean
    13. Arrays
    14. Tuple
    15. Enum
    16. Any
    17. Void
    18. Objects
    19. Functions
    20. Interfaces
    21. Decorators
    22. In conclusion
    23. See also
    24. Creating your first TypeScript class
    25. Getting ready
    26. How to do it...
    27. How it works...
    28. There's more...
    29. See also
    30. Creating your first project with Vue CLI
    31. Getting ready
    32. How to do it...
    33. There's more...
    34. See also
    35. Adding plugins to a Vue CLI project with Vue UI
    36. Getting ready
    37. How to do it...
    38. How it works...
    39. Adding TypeScript to a Vue CLI project
    40. Getting ready
    41. How to do it...
    42. How it works...
    43. See also
    44. Creating your first TypeScript Vue component with vue-class-component
    45. Getting ready
    46. How to do it...
    47. How it works...
    48. See also
    49. Creating a custom mixin with vue-class-component
    50. Getting ready
    51. How to do it...
    52. Creating the Counter component
    53. Extracting similar code for the mixin
    54. How it works...
    55. See also
    56. Creating a custom function decorator with vue-class-component
    57. Getting ready
    58. How to do it...
    59. How it works...
    60. There's more...
    61. See also
    62. Adding custom hooks to vue-class-component
    63. Getting ready
    64. How to do it...
    65. How it works...
    66. See also
    67. Adding vue-property-decorator to vue-class-component
    68. Getting ready
    69. How to do it...
    70. How it works...
    71. There's more...
    72. See also
  8. Data Binding, Form Validations, Events, and Computed Properties
    1. Technical requirements
    2. Creating the "hello world" component
    3. Getting ready
    4. How to do it...
    5. How it works...
    6. See also
    7. Creating an input form with two-way data binding
    8. Getting ready
    9. How to do it...
    10. How it works...
    11. See also
    12. Adding an event listener to an element
    13. Getting ready
    14. How to do it...
    15. How it works...
    16. See also
    17. Removing the v-model from the input
    18. Getting ready
    19. How to do it...
    20. How it works...
    21. See also
    22. Creating a dynamic to-do list
    23. Getting ready
    24. How to do it...
    25. How it works...
    26. See also
    27. Creating computed properties and understanding how they work
    28. Getting ready
    29. How to do it...
    30. How it works...
    31. See also
    32. Displaying cleaner data and text with custom filters
    33. Getting ready
    34. How to do it...
    35. How it works...
    36. See also
    37. Adding form validation with Vuelidate
    38. Getting ready
    39. How to do it...
    40. How it works...
    41. See also
    42. Creating filters and sorters for a list
    43. Getting ready
    44. How to do it...
    45. How it works...
    46. See also
    47. Creating conditional filters to sort list data
    48. Getting ready
    49. How to do it...
    50. How it works...
    51. See also
    52. Adding custom styles and transitions
    53. Getting ready
    54. How to do it...
    55. How it works...
    56. See also
    57. Using vue-devtools to debug your application
    58. Getting ready
    59. How to do it...
    60. See also
  9. Components, Mixins, and Functional Components
    1. Technical requirements
    2. Creating a visual template component
    3. Getting ready
    4. How to do it...
    5. How it works...
    6. See also
    7. Using slots and named slots to place data inside your components
    8. Getting ready
    9. How to do it...
    10. How it works...
    11. See also
    12. Passing data to your component and validating the data
    13. Getting ready
    14. How to do it...
    15. How it works...
    16. See also
    17. Creating functional components
    18. Getting ready
    19. How to do it...
    20. How it works...
    21. See also
    22. Accessing your children components data
    23. Getting ready
    24. How to do it...
    25. Creating the star rating input
    26. Creating the StarRatingDisplay component
    27. Creating the StarRating component
    28. Data manipulation on child components
    29. How it works...
    30. There's more...
    31. See also
    32. Creating a dynamic injected component
    33. Getting ready
    34. How to do it...
    35. How it works...
    36. See also
    37. Creating a dependency injection component
    38. Getting ready
    39. How to do it...
    40. How it works...
    41. See also
    42. Creating a component mixin
    43. Getting ready
    44. How to do it...
    45. How it works...
    46. See also
    47. Lazy loading your components
    48. Getting ready
    49. How to do it...
    50. How it works...
    51. See also
  10. Fetching Data from the Web via HTTP Requests
    1. Technical requirements
    2. Creating a wrapper for the Fetch API as an HTTP client
    3. Getting ready
    4. How to do it...
    5. Creating the wrapper
    6. Creating the API methods
    7. GET method function
    8. POST method function
    9. PUT method function
    10. PATCH method function
    11. UPDATE method function
    12. DELETE method function
    13. How it works...
    14. See also
    15. Creating a random cat image or GIF component
    16. Getting ready
    17. How to do it...
    18. Creating the component
    19. Single file component section
    20. Single file component section
    21. Single file component section
    22. Getting up and running with your new component
    23. How it works...
    24. See also
    25. Creating your fake JSON API server with MirageJS
    26. Getting ready
    27. How to do it...
    28. Creating the mock server
    29. Creating the mock database
    30. Creating the GET route function
    31. Creating the POST route function
    32. Creating the PATCH route function
    33. Creating the DELETE route function
    34. Creating the server
    35. Adding to the application
    36. Creating the component
    37. Single file component section
    38. Single file component section
    39. How it works...
    40. See also
    41. Using axios as the new HTTP client
    42. Getting ready
    43. How to do it...
    44. Changing from the Fetch API to Axios
    45. Changing the GET method function
    46. Changing the POST method function
    47. Changing the PUT method function
    48. Changing the PATCH method function
    49. Changing the UPDATE method function
    50. Changing the DELETE method function
    51. Changing the component
    52. How it works...
    53. See also
    54. Creating different axios instances
    55. Getting ready
    56. How to do it...
    57. Changing the HTTP function
    58. Changing the HTTP Fetch wrapper
    59. Changing the HTTP methods function
    60. Changing the MirageJS server
    61. Changing the component
    62. Single file component section
    63. Single file component section
    64. How it works...
    65. See also
    66. Creating a request and response interceptor for axios
    67. Getting ready
    68. How to do it...
    69. Creating the interceptor
    70. Adding the interceptors to the HTTP methods functions
    71. How it works...
    72. See also
    73. Creating a CRUD interface with Axios and Vuesax
    74. Getting ready
    75. How to do it...
    76. Adding Vuesax to the application
    77. Creating the component routing
    78. Single file component section
    79. Single file component section
    80. Creating the route mixin
    81. Creating the list component
    82. Single file component section
    83. Single file component section
    84. Single file component section
    85. Creating a generic user form component
    86. Single file component section
    87. Single file component section
    88. Single file component section
    89. Creating the create user component
    90. Single file component section
    91. Single file component section
    92. View component
    93. Single file component section
    94. Single file component section
    95. Updating the user component
    96. Single file component section
    97. Single file component section
    98. How it works...
    99. See also
  11. Managing Routes with vue-router
    1. Technical requirements
    2. Creating a simple route
    3. Getting ready
    4. How to do it...
    5. Creating the NavigationBar component
    6. Single file component section
    7. Single file component section
    8. Creating the contact page
    9. Single file component section
    10. Single file component section
    11. Creating the about page
    12. Single file component section
    13. Single file component section
    14. Changing the application's main component
    15. Single file component section
    16. Single file component section
    17. Creating the routes
    18. How it works...
    19. See also
    20. Creating a programmatic navigation
    21. Getting ready
    22. How to do it...
    23. Changing the application's main component
    24. Single file component section
    25. Changing the contact view
    26. Single file component section
    27. How it works...
    28. There's more...
    29. See also
    30. Creating a dynamic router path
    31. Getting ready
    32. How to do it...
    33. Changing the application's main component
    34. Single file component section
    35. Changing the route mixin
    36. Axios instance configuration
    37. User list view
    38. Single file component section
    39. Single file component section
    40. User create view
    41. Single file component section
    42. Single file component section
    43. User information view
    44. Single file component section
    45. Single file component section
    46. User update view
    47. Single file component section
    48. Single file component section
    49. Creating dynamic routes
    50. How it works...
    51. See also
    52. Creating a route alias
    53. Getting ready
    54. How to do it...
    55. How it works...
    56. See also
    57. Creating route redirects
    58. Getting ready
    59. How to do it...
    60. How it works...
    61. See also
    62. Creating a nested router view
    63. Getting ready
    64. How to do it...
    65. Creating the router-view on the layout
    66. Changing the router files
    67. User routes
    68. Router manager
    69. How it works...
    70. See also
    71. Creating a 404 error page
    72. Getting ready
    73. How to do it...
    74. Creating the NotFound view
    75. Single file component section
    76. Single file component section
    77. Changing the router files
    78. How it works...
    79. See also
    80. Creating and applying authentication middleware
    81. Getting ready
    82. How to do it...
    83. Creating the login view
    84. Single file component section
    85. Single file component section
    86. Single file component section
    87. Creating the middleware
    88. Adding the metadata and the middleware to the router
    89. How it works...
    90. See also
    91. Lazy loading your pages asynchronously
    92. Getting ready
    93. How to do it...
    94. Updating the router manager
    95. Updating the user routes
    96. How it works...
    97. See also
  12. Managing the Application State with Vuex
    1. Technical requirements
    2. Creating a simple Vuex store
    3. Getting ready
    4. How to do it...
    5. Creating the store
    6. Creating the reactive component with Vuex
    7. Single file component section
    8. Single file component section
    9. How it works...
    10. See also
    11. Creating and understanding the Vuex state
    12. Getting ready
    13. How to do it...
    14. Adding Vuex via the vue ui
    15. Creating the Vuex state
    16. How it works...
    17. There's more...
    18. See also
    19. Creating and understanding the Vuex mutations
    20. Getting ready
    21. How to do it...
    22. How it works...
    23. See also
    24. Creating and understanding the Vuex getters
    25. Getting ready
    26. How to do it...
    27. How it works...
    28. There's more...
    29. See also
    30. Creating and understanding the Vuex actions
    31. Getting ready
    32. How to do it...
    33. How it works...
    34. See also
    35. Creating a dynamic component with Vuex
    36. Getting ready
    37. How to do it...
    38. Creating the user list component
    39. Single file component section
    40. Single file component section
    41. Editing the user list page
    42. Single file component section
    43. Single file component section
    44. Editing the user view page
    45. Single file component section
    46. Single file component section
    47. Editing the user edit page
    48. Single file component section
    49. Single file component section
    50. Editing the user create page
    51. Single file component section
    52. How it works...
    53. See also
    54. Adding hot-module-reload for development
    55. Getting ready
    56. How to do it...
    57. How it works...
    58. See also
    59. Creating a Vuex module
    60. Getting ready
    61. How to do it...
    62. Creating the new authentication module
    63. Adding the modules to Vuex
    64. How it works...
    65. See also
  13. Animating Your Application with Transitions and CSS
    1. Technical requirements
    2. Creating the base project
    3. Creating your first CSS animation
    4. Getting ready
    5. How to do it...
    6. How it works...
    7. See also
    8. Creating a custom transition class with Animate.css
    9. Getting ready
    10. How to do it...
    11. How it works...
    12. There's more...
    13. See also
    14. Creating transactions with custom hooks
    15. Getting ready
    16. How to do it...
    17. How it works...
    18. See also
    19. Creating animations on page render
    20. Getting ready
    21. How to do it...
    22. How it works...
    23. See also
    24. Creating animations for lists and groups
    25. Getting ready
    26. How to do it...
    27. How it works...
    28. See also
    29. Creating a custom transition component
    30. Getting ready
    31. How to do it...
    32. How it works...
    33. See also
    34. Creating a seamless transition between elements
    35. Getting ready
    36. How to do it...
    37. How it works...
    38. See also
  14. Creating Beautiful Applications Using UI Frameworks
    1. Technical requirements
    2. Creating a page, a layout, and a user form with Buefy
    3. Getting ready
    4. How to do it...
    5. Creating the Vue-CLI project
    6. Adding Buefy to the Vue-CLI project
    7. Creating the layout and a page with Buefy
    8. Creating the header menu component
    9. Creating the hero section component
    10. Creating the footer component
    11. Creating the layout component
    12. Creating the user registration form with Buefy
    13. How it works...
    14. See also
    15. Creating a page, a layout, and a user form with Vuetify
    16. Getting ready
    17. How to do it...
    18. Creating the Vue-CLI project
    19. Adding Vuetify to the Vue-CLI project
    20. Creating the layout with Vuetify
    21. Creating the top bar component
    22. Creating the drawer menu component
    23. Creating the layout component
    24. Creating the user registration form with Vuetify
    25. Single file component section
    26. Single file component section
    27. How it works...
    28. See also
    29. Creating a page, a layout, and a user form with Ant-Design
    30. Getting ready
    31. How to do it...
    32. Creating the Vue-CLI project
    33. Adding Ant-Design to the Vue-CLI project
    34. Creating the layout with Ant-Design
    35. Creating the top-bar component
    36. Creating the drawer menu
    37. Creating the layout component
    38. Creating the user registration form with Ant-Design
    39. Single file component section
    40. Single file component section
    41. How it works...
    42. See also
  15. Deploying an Application to Cloud Platforms
    1. Technical requirements
    2. Creating a Vue project
    3. Creating a Netlify account
    4. Getting ready
    5. How to do it...
    6. How it works...
    7. See also
    8. Preparing your application for deployment in Netlify
    9. Getting ready
    10. How to do it...
    11. How it works...
    12. See also
    13. Preparing for automatic deployment on Netlify with GitHub
    14. Getting ready
    15. How to do it...
    16. How it works...
    17. See also
    18. Creating a Vercel account
    19. Getting ready
    20. How to do it...
    21. How it works...
    22. See also
    23. Configuring the Vercel-CLI and deploying your project
    24. Getting ready
    25. How to do it...
    26. How it works...
    27. See also
    28. Preparing for automatic deployment on Vercel with GitHub
    29. Getting ready
    30. How to do it...
    31. How it works...
    32. See also
    33. Creating a Firebase project
    34. Getting ready
    35. How to do it...
    36. How it works...
    37. See also
    38. Configuring the Firebase-CLI and deploying your project
    39. Getting ready
    40. How to do it...
    41. How it works...
    42. See also
  16. Directives, Plugins, SSR, and More
    1. Technical requirements
    2. Automatically loading Vue routes
    3. Getting ready
    4. How to do it...
    5. How it works...
    6. There's more...
    7. See also
    8. Automatically loading Vuex modules
    9. Getting ready
    10. How to do it...
    11. How it works...
    12. See also
    13. Creating a custom directive
    14. Getting ready
    15. How to do it...
    16. How it works...
    17. Creating a Vue plugin
    18. Getting ready
    19. How to do it...
    20. How it works...
    21. See also
    22. Creating an SSR, SPA, PWA, Cordova, and Electron application in Vue with Quasar
    23. Getting ready
    24. How to do it...
    25. Developing an SPA (Single-Page Application)
    26. Commands
    27. Developing a PWA (Progressive Web Application)
    28. Configuring quasar.conf on a PWA
    29. Commands
    30. Developing SSR (Server-Side Rendering)
    31. Configuring quasar.conf on SSR
    32. Commands
    33. Developing a mobile application (Cordova)
    34. Configuring quasar.conf on Cordova
    35. Commands
    36. Developing a desktop application (Electron)
    37. Configuring quasar.conf on Electron
    38. Commands
    39. How it works...
    40. See also
    41. Creating smarter Vue watchers and computed properties
    42. How to do it...
    43. Watchers
    44. Using method names
    45. Immediate calls and deep listening
    46. Multiple handlers
    47. Computed
    48. No cached value
    49. Getter and setter
    50. See also
    51. Creating a Nuxt.js SSR with Python Flask as the API
    52. Getting ready‌
    53. How to do it...
    54. Creating your Flask API
    55. Initializing the application
    56. Starting the server
    57. Creating your Nuxt.js server
    58. Adding Bulma to the global CSS
    59. Configuring the axios plugin
    60. Running the Nuxt.js server
    61. Creating the TodoList component
    62. Single file component section
    63. Single file component section
    64. Creating the Todo form component
    65. Single file component section
    66. Single file component section
    67. Creating the layout
    68. Creating the page
    69. Single file component section
    70. Single file component section
    71. How it works...
    72. See also
    73. The dos and don'ts of Vue applications
    74. Linters
    75. JavaScript
    76. Vue
    77. See also
  17. Other Books You May Enjoy
    1. Leave a review - let other readers know what you think

Product information

  • Title: Vue.js 3 Cookbook
  • Author(s): Heitor Ramon Ribeiro
  • Release date: September 2020
  • Publisher(s): Packt Publishing
  • ISBN: 9781838826222