![Vue - The Complete Guide (Including Vue Router, Vuex, and Composition API) [Video]](https://content.packt.com/_/image/original/V10777/cover_image_large.jpeg)
Vue - The Complete Guide (Including Vue Router, Vuex, and Composition API) [Video]
Video
Video
$39.99
Subscription
$15.99
$10 p/m for three months
What do you get with a Packt Subscription?
This book & 7000+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with Video + Subscription?
Download this video in MP4 format, plus a monthly download credit
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook?
Download this book in EPUB and PDF formats
Access this title in our online reader
DRM FREE - Read whenever, wherever and however you want
Online reader with customised display settings for better reading experience
What do I get with Print?
Get a paperback copy of the book delivered to your specified Address*
Access this title in our online reader
Online reader with customised display settings for better reading experience
What do I get with Print?
Get a paperback copy of the book delivered to your specified Address*
Access this title in our online reader
Online reader with customised display settings for better reading experience
What do you get with video?
Download this video in MP4 format
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with video?
Stream this video
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with Audiobook?
Download a zip folder consisting of audio files (in MP3 Format) along with supplementary PDF
What do you get with Exam Trainer?
Flashcards, Mock exams, Exam Tips, Practice Questions
Access these resources with our interactive certification platform
Mobile compatible-Practice whenever, wherever, however you want
Video
$39.99
Subscription
$15.99
$10 p/m for three months
What do you get with a Packt Subscription?
This book & 7000+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with Video + Subscription?
Download this video in MP4 format, plus a monthly download credit
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook?
Download this book in EPUB and PDF formats
Access this title in our online reader
DRM FREE - Read whenever, wherever and however you want
Online reader with customised display settings for better reading experience
What do I get with Print?
Get a paperback copy of the book delivered to your specified Address*
Access this title in our online reader
Online reader with customised display settings for better reading experience
What do I get with Print?
Get a paperback copy of the book delivered to your specified Address*
Access this title in our online reader
Online reader with customised display settings for better reading experience
What do you get with video?
Download this video in MP4 format
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with video?
Stream this video
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with Audiobook?
Download a zip folder consisting of audio files (in MP3 Format) along with supplementary PDF
What do you get with Exam Trainer?
Flashcards, Mock exams, Exam Tips, Practice Questions
Access these resources with our interactive certification platform
Mobile compatible-Practice whenever, wherever, however you want
-
Free ChapterGetting Started
- Welcome to the Course!
- What is Vue.js?
- Different Ways of Using Vue
- Exploring Vue Alternatives
- Building Your First App with JavaScript
- Re-Building the App with Vue.js
- Vue Versus Vanilla JavaScript (Just JavaScript)
- Setting Up the Course Development Environment
- Course Outline and Contents
- How to Get the Most Out of This Course
-
Basics and Core Concepts – Document Object Model (DOM) Interaction with Vue
- Module Introduction
- Creating and Connecting Vue App Instances
- Interpolation and Data Binding
- Binding Attributes with the “V-Bind†Directive
- Understanding “Methods†in Vue Apps
- Working with Data Inside a Vue App
- Outputting Raw HTML Content with V-html
- First Summary
- Understanding Event Binding
- Events and Methods
- Working with Events and Arguments
- Using the Native Event Object
- Exploring Event Modifiers
- Locking Content with V-Once
- Data Binding + Event Binding = Two-Way Binding
- Methods Used for Data Binding: How it Works?
- Introducing Computed Properties
- Working with Watchers
- Methods Versus Computed Properties Versus Watchers
- V-Bind and V-On Shorthands
- Dynamic Styling with Inline Styles
- Adding CSS Classes Dynamically
- Classes and Computed Properties
- Dynamic Classes: Array Syntax
- Module Summary
-
Rendering Conditional Content and Lists
-
Course Project: The Monster Slayer Game
-
Vue: Behind the Scenes
-
Introducing Components
-
Moving to a Better Development Setup and Workflow with the Vue CLI
- Module Introduction
- Why You Need a Development Server?
- Why You Want a Better Developer Experience?
- Installing and Using the Vue CLI
- Inspecting the Created Project
- Inspecting the Vue Code and “.vue†Files
- Adding the “Vetur†Extension to Visual Studio Code
- More on “.vue†Files
- A New Vue Project
- Creating a Basic Vue App
- Adding a Component
- Adding Styling
-
Component Communication
- Module Introduction
- Introducing “Props†(Parent => Child Communication)
- Prop Behavior and Changing Props
- Validating Props
- Working with Dynamic Prop Values
- Emitting Custom Events (Child => Parent Communication)
- Defining and Validating Custom Events
- Demo: Adding Components and Connecting Them
- Demo: Adding More Component Communication
- A Potential Problem
- Provide + Inject to the Rescue
- Provide + Inject for Functions/Methods
- Provide + Inject Versus Props and Custom Events
- Module Summary
-
Diving Deeper into Components
- Module Introduction
- Project Setup
- Global Versus Local Components
- Scoped Styles
- Introducing Slots
- Named Slots
- Slot Styles and Compilation
- More on Slots
- Scoped Slots
- Dynamic Components
- Keeping Dynamic Components Alive
- Applying What You Know + a Problem
- Teleporting Elements
- Working with Fragments
- The Vue Style Guide
- Moving to a Different Folder Structure
- Module Summary
-
Course Project: The Learning Resources App
- Module Introduction
- Setup and First Steps
- First Component and Prop
- Styling and More Components
- Header and BaseCard Components
- Adding a Base Button
- Dynamic Components and the Fallthrough Attribute
- Adding and Styling Tabs
- Adding a Form
- Fetching User Input
- Adding a Modal Dialog
- Deleting Items
- Adding “Teleportâ€
-
Forms
-
Sending HTTP Requests
- Module Introduction
- Starting App and Why You Need a Backend
- Adding a Backend
- How to (Not) Send HTTP Requests
- Sending a POST Request to Store Data
- Getting Data (GET Request) and Transforming Response Data
- Loading Data When a Component Mounts
- Showing a “Loading…†Message
- Handling the “No Data†State
- Handling Technical/Browser-Side Errors
- Handling Error Responses
- Module Summary
-
Routing: Building “Multi-Page†Single Page Applications
- Module Introduction
- Routing: What and Why?
- Routing Setup
- Registering and Rendering Routes
- Navigating with Router-link
- Styling Active Links
- Programmatic Navigation
- Passing Data with Route Params (Dynamic Segments)
- Navigation and Dynamic Paths
- Updating Params Data with Watchers
- Passing Params as Props
- Redirecting and “Catch All†Routes
- Using Nested Routes
- More Fun with Named Routes and Location Objects
- Using Query Params
- Rendering Multiple Routes with Named Router Views
- Controlling Scroll Behavior
- Introducing Navigation Guards
- Diving Deeper into Navigation Guards
- The Global “afterEach†Guard
- Beyond Entering: Route Leave Guards
- Utilizing Route Metadata
- Organizing Route Files
- Summary
-
Animations and Transitions
- Module Introduction
- Animation Basics and CSS Transitions
- Understanding CSS Animations
- Why Is “Just CSS†Not Enough?
- Playing CSS Animations with Vue's Help
- Using the Transition Component
- CSS Animations with the Transition Component
- Using Custom CSS Class Names
- Example: Animating a Modal
- Transitioning Between Multiple Elements
- Using Transition Events
- Building JavaScript Transitions (Instead of CSS)
- Disabling CSS Transitions
- Getting Started with Animated Lists
- Animating Lists with “Transition-Groupâ€
- Animating List Item Movement
- Animating Route Changes
-
Vuex
- Module Introduction
- Vuex: What and Why?
- Creating and Using a Store
- Connecting Components to State
- Introducing Mutations - A Better Way of Changing Data
- Passing Data to Mutations with Payloads
- Introducing Getters - A Better Way of Getting Data
- Running Async Code with Actions
- Understanding the Action “Contextâ€
- Using Mapper Helpers
- Example: Adding More States
- Organizing Your Store with Modules
- Understanding Local Module State
- Namespacing Modules
- Structuring Vuex Code and Files
- A Challenge!
- Challenge Solution – Part 1
- Challenge Solution – Part 2
- Challenge Solution – Part 3
- Summary
-
Main Project: “Find a Coach†Web App
- Module Introduction
- Planning the Project/Web App
- Planning the Data Requirements
- Planning the Layout/Components
- Registering Routes
- Adding Route Page Components
- Working on the Main Layout and Styling
- Wiring Up Pages
- Adding Vuex and Coach Data
- Working on the Coaches List and List Items
- Adding a Couple of Base Components (Base Card, Base Button, Base Badge)
- Building the Coach Detail Component
- Filtering Coaches
- Registering as a Coach: The Form
- Adding Coaches to Vuex
- Adding Form Validation
- Working on the Contact Form
- Storing Requests (Messages) with Vuex
- Outputting Incoming Requests (Messages)
- Filtering Requests for the Active Coach
- Sending a PUT HTTP Request to Store Coach Data
- Fetching Coach Data (GET HTTP Request)
- Rendering a Loading Spinner
- Adding HTTP Error Handling
- Sending Coaching Requests Using HTTP Requests
- Caching HTTP Response Data
- Adding Route Transitions
- The “Not Found†Page and Summary
-
Vue and Authentication
- Module Introduction
- How Authentication Works in Vue Apps [or Any Single-Page Application (SPA)]?
- Locking/Protecting Backend Resources
- Adding an Authentication Page (Login and Signup)
- Preparing Vuex
- Adding a “Signup†Action and Flow
- Better UX: Loading Spinner and Error Handling
- Adding a “Login†Action and Flow
- Attaching the Token to Outgoing Requests
- Updating the UI Based on Auth State
- Adding a “Logout†Action and Flow
- Authentication and Routing (Including Navigation Guards)
- Adding “Auto Loginâ€
- Adding “Auto Logoutâ€
- Summary
-
Optimizing and Deploying Vue Apps
-
The Composition API – Replacing the Options API
- Module Introduction
- Which Problem Does the Composition API Solve?
- Replacing “Data†with “Refsâ€
- Building “Reactive†Objects
- Reactivity: A Deep Dive
- Replacing “Methods†with Regular Functions
- Replacing “Computed Properties†with the “Computed†Function
- Two-Way Binding and the Composition API
- Working with Watchers
- A First Summary
- How to Use Template Refs
- Components, Props, and the Composition API
- Emitting Custom Events
- Working with Provide/Inject
- Lifecycle Hooks in the Composition API
- Migrating from Options API to Composition API - An Example Project
- Migrating a First Component
- Migrating a Big Component
- Migrating the Remaining Components
- Routing, Params, and the Composition API
- Route and Router Objects and the Composition API
- Using Vuex with the Composition API
- Summary
-
Reusing Functionality: Mixins and Custom Composition Functions
- Module Introduction
- Reusability Concepts
- Using Mixins
- Merging Mixins
- Global Mixins
- Disadvantages of Mixins
- Custom Hooks/Composable and the Composition API
- More Custom Composition Functions
- Why Hooks/Composable Beat Mixins?
- Example: Creating a “Search†Hook
- Custom Hooks Gotchas
- More Thoughts on Custom Hooks/Composable
- Example: A Custom “Sort†Hook
-
Roundup and Next Steps
-
Vue 2 to Vue 3 Migration
-
Getting Started [VUE2]
-
Using Vue.js to Interact with the Document Object Model (DOM) [VUE2]
- Module Introduction
- Understanding Vue.js Templates
- How the Vue.js Template Syntax and Instance Work Together
- Accessing Data in the Vue Instance
- Binding Attributes
- Understanding and Using Directives
- Disable Re-Rendering with V-Once
- How to Output Raw HTML?
- Listening to Events
- Getting Event Data from the Event Object
- Passing Your Own Arguments with Events
- Modifying an Event - with Event Modifiers
- Listening to Keyboard Events
- Writing JavaScript Code in the Templates
- Using Two-Way Binding
- Writing JavaScript Code in the Templates
- Reacting to Changes with Computed Properties
- An Alternative to Computed Properties: Watching for Changes
- Saving Time with Shorthands
- Dynamic Styling with CSS Classes – Basics
- Dynamic Styling with CSS Classes - Using Objects
- Dynamic Styling with CSS Classes - Using Names Setting Styles Dynamically (without CSS Classes)
- Styling Elements with the Array Syntax
- Module Wrap Up
-
Using Conditionals and Rendering Lists [VUE2]
- Module Introduction
- Conditional Rendering with V-If
- Using an Alternative V-If Syntax
- Don't Detach it with V-Show
- Rendering Lists with V-For
- Getting the Current Index
- Using an Alternative V-For Syntax
- Looping through Objects
- Looping through a List of Numbers
- Keeping Track of Elements While Using V-For
- Module Wrap Up
-
First Course Project - The Monster Slayer [VUE2]
- Introduction and Challenge
- Setting Up the Course Project
- Creating the Vue Instance and Styling the Healthbars
- Showing the Player Controls Conditionally
- Implementing a “Start Game†Method
- Implementing an “Attack†Method
- Write better Code - Time for Refactoring!
- Implementing a “Special Attackâ€
- Implementing a “Heal†Method
- Finishing the Action Buttons
- Creating an Action Log
- Printing the Log (v-for)
- Finishing the Log
- Styling the Log Conditionally
- Wrap Up
-
Understanding the Vue.js Instance [VUE2]
- Module Introduction
- Some Basics about the Vue.js Instance
- Using Multiple Vue Instances
- Accessing the Vue Instance from Outside
- How Vue.js Manages Your Data and Methods
- A r Look at $el and $data
- Placing $refs and Using Them on Your Templates
- Where to Learn More about the Vue API?
- Mounting a Template
- Using Components
- Limitations of Some Templates
- How Vue.js Updates the Document Object Model (DOM)?
- The Vue.js Instance Lifecycle
- The Vue.js Instance Lifecycle in Practice
- Module Wrap Up
-
Moving to a “Real†Development Workflow with Webpack and Vue CLI [VUE2]
- Module Introduction
- Why Do You Need a Development Server?
- What Does “Development Workflow†Mean?
- Using the Vue CLI to Create Projects
- Installing the Vue CLI and Creating a New Project
- Overview of the Webpack Template Folder Structure
- Understanding the “.vue†Files
- Understanding the Object in the Vue File
- How to Build Your App for Production
- Module Wrap Up
-
An Introduction to Components [VUE2]
- Module Introduction
- An Introduction to Components
- Storing Data in Components with the Data Method
- Registering Components Locally and Globally
- “Root Component†in the App.vue File
- Creating a Component
- Using Components
- Moving to a Better Folder Structure
- How to Name Your Component Tags (Selectors)
- Scoping Component Styles
- Module Wrap Up
-
Communicating Between Components [VUE2]
- Module Introduction
- Communication Problems
- Using Props for Parent => Child Communication
- Naming “propsâ€
- Using “Props†in the Child Component
- Validating “Propsâ€
- Using Custom Events for Child => Parent Communication
- Understanding Unidirectional Data Flow
- Communicating with Callback Functions
- Communication between Sibling Components
- Using an Event Bus for Communication
- Centralizing Code in an Event Bus
- Wrap Up
-
Advanced Component Usage [VUE2]
- Module Introduction
- Setting Up the Module Project
- Passing Content - The Suboptimal Solution
- Passing Content with Slots
- How Slot Content Gets Compiled and Styled?
- Using Multiple Slots (Named Slots)
- Default Slots
- A Summary on Slots
- Switching Multiple Components with Dynamic Components
- Understanding Dynamic Component Behavior
- Keeping Dynamic Components Alive
- Dynamic Component Lifecycle Hooks
- Wrap Up
-
Second Course Project - Wonderful Quotes [VUE2]
- Module Introduction
- Setting Up the Project
- Initializing the Application
- Creating the Application Components
- Passing Data with Props and Slots
- Allowing Users to Create Quotes with a NewQuote Component
- Adding Quotes with Custom Events
- Adding an Info Box
- Allowing for Quote Deletion
- Controlling Quotes with a Progress Bar
- Finishing Touches and State Management
-
Handling User Input with Forms [VUE2]
- Module Introduction
- A Basic <input> Form Binding
- Grouping Data and Pre-Populating Inputs
- Modifying User Input with Input Modifiers
- Binding <textarea> and Handling User Input
- Using Checkboxes and Saving Data in Arrays
- Using Radio Buttons
- Handling Dropdowns with <select> and <option>
- What V-Model Does and How to Create a Custom Control
- Creating a Custom Control (Input)
- Submitting a Form
- Wrap Up
-
Using and Creating Directives [VUE2]
- Module Introduction
- Understanding Directives
- How Directives Work? Hook Functions
- Creating a Simple Directive
- Passing Values to Custom Directives
- Passing Arguments to Custom Directives
- Modifying a Custom Directive with Modifiers
- Custom Directives - A Summary
- Registering Directives Locally
- Using Multiple Modifiers
- Passing More Complex Values to Directives
- Wrap Up
-
Improving your App with Filters and Mixins [VUE2]
-
Adding Animations and Transitions [VUE2]
- Module Introduction
- Understanding Transitions
- Preparing a Code to Use Transitions
- Setting Up a Transition
- Assigning CSS Classes for Transitions
- Creating a “Fade†Transition with the CSS Transition Property
- Creating a “Slide†Transition with the CSS Animation Property
- Mixing Transition and Animation Properties
- Animating V-If and V-Show
- Setting Up an Initial (On-Load) Animation
- Using Different CSS Class Names
- Using Dynamic Names and Attributes
- Transitioning between Multiple Elements (Theory)
- Transitioning between Multiple Elements (Practice)
- Listening to Transition Event Hooks
- Understanding JavaScript Animations
- Excluding CSS from your Animation
- Creating an Animation in JavaScript
- Animating Dynamic Components
- Animating Lists with <transition-group>
- Using <transition-group> - Preparations
- Using <transition-group> to Animate a List
- Understanding the App
- Creating the App
- Adding Animations
- Wrap Up
-
Connecting to Servers through HTTP - Using Vue-Resource [VUE2]
- Module Introduction
- Accessing HTTP through Vue-Resource – Setup
- Creating an Application and Setting Up a Server (Firebase)
- POST Data to a Server (Sending a POST Request)
- Sending and Transforming Data (Sending a GET Request)
- Configuring Vue-Resource Globally
- Intercepting Requests
- Intercepting Responses
- Where the “Resource†in Vue-Resource Comes From
- Creating Custom Resources
- Resources Versus “Normal†HTTP Requests
- Understanding Template URLs
- Wrap Up
-
Routing in a Vue.js Application [VUE2]
- Module Introduction
- Setting Up the Vue.js Router (Vue-router)
- Setting Up and Loading Routes
- Understanding Routing Modes (Hash Versus History)
- Navigating with Router Links
- Styling Active Links
- Navigating from a Code (Imperative Navigation)
- Setting Up Route Parameters
- Fetching and Using Route Parameters
- Reacting to Changes in Route Parameters
- Setting Up Child Routes (Nested Routes)
- Navigating to Nested Routes
- Making Router Links More Dynamic
- A Better Way of Creating Links - With Named Routes
- Using Query Parameters
- Multiple Router Views (Named Router Views)
- Redirecting
- Setting Up “Catch All†Routes/Wildcards
- Animating Route Transitions
- Passing the Hash Fragment
- Controlling the Scroll Behavior
- Protecting Routes with Guards
- Using the “BeforeEnter†Guard
- Using the “BeforeLeave†Guard
- Loading Routes Lazily
- Wrap Up
-
Better State Management with Vuex [VUE2]
- Module Introduction
- Why a Different State Management may Be Needed
- Understanding “Centralized Stateâ€
- Using the Centralized State
- Why a Centralized State Alone Won't Fix it
- Understanding Getters
- Using Getters
- Mapping Getters to Properties
- Understanding Mutations
- Using Mutations
- Why Mutations Have to Run Synchronously
- How Actions Improve Mutations
- Using Actions
- Mapping Actions to Methods
- A Summary of Vuex
- Two-Way Binding (v-model) and Vuex
- Improving Folder Structures
- Modularizing the State Management
- Using Separate Files
- Using Namespaces to Avoid Naming Problems
- Wrap Up
-
Final Project - The Stock Trader [VUE2]
- Project Introduction
- Project Setup and Planning
- Creating the First Components
- Set Up Project Routes
- Adding a Header and Navigation
- Planning the Next Steps
- Creating Stocks Components
- Adding a “Buy†Button
- Setting Up the Vuex State Management
- Adding a Portfolio Module to Vuex
- Working on the Portfolio Stocks
- Connecting the Portfolio with Vuex
- Time to fix some Errors
- Displaying the Funds
- Adding Some Order Checks
- Making Funds Look Nicer with Filters
- Ending the Day - Randomizing Stocks
- Animating the Route Transitions
- Saving and Fetching Data - Adding a Dropdown
- Setting Up Vue-Resource and Firebase
- Saving Data (PUT Request)
- Fetching Data (GET Request)
- Testing and Bug Fixes
- Project Wrap Up
- Bonus: Debugging Vuex with Vue Developer Tools
-
Deploying a Vue.js Application [VUE2]
-
Bonus: Using Axios Instead of Vue-Resource [VUE2]
-
Bonus: Authentication in Vue Apps
- Section Introduction
- Module Introduction
- How Authentication Works in Single-Page Applications (SPAs)
- Project Setup
- Adding User Sign-Up
- Adding User Sign-In (Login)
- Using Vuex to Send Auth Requests
- Storing Auth Data in Vuex
- Accessing Other Resources from Vuex
- Sending the Token to the Backend
- Protecting Routes (Auth Guard)
- Updating the UI State (Based on Authentication State)
- Adding User Logout
- Adding Auto Logout
- Adding Auto Login
- Wrap Up
About this
video
Vue.js is a highly popular framework that provides a reactive and great user experience not only for mobile apps but also for browser applications. Hence, it is the highest-paid one in the front-end development industry.
This course starts with an introduction to Vue.js and explains why it is a great JavaScript framework. Then you will learn the basic syntaxes and templates of Vue.js and see how to output reactive data and handle keyboard events. Moving along, you will learn how to interact with Document Object Model (DOM) and set up a development environment and workflow with the Vue CLI. Then we will walk through the various components and show you how to work with forms and HTTP requests.
Next, you will learn how to make your app appealing with animations and transitions and understand the importance of routing and Vuex in Vue.js. Finally, we will create a stock trader application and learn the stages in deploying a Vue.js application. You will also learn how to use Axios instead of Vue resources and underline the concepts of authentication in Vue apps.
By the end of this course, you will have developed the essential Vue.js skills needed for frontend web development and to develop reactive browser applications.
All the resources for this course are available at https://github.com/PacktPublishing/Vue---The-Complete-Guide-incl.-Vue-Router-Vuex-and-Composition-API-
- Publication date:
- April 2018
- Publisher
- Packt
- Duration
- 44 hours 59 minutes
- ISBN
- 9781788992817
Download code from GitHub
Latest Reviews
(4 reviews total)
Unable to download the course video
3
good content thanks a lot
5
Отличный видос, хорошие примеры, только english напрягает, но со временем его перестаешь замечать. Для меня оказалось полезной.
5
![Node.js - The Complete Guide [Video]](https://static.packt-cdn.com/products/9781838826864/cover/smaller)
![CSS - The Complete Guide (incl. Flexbox, Grid and Sass) [Video]](https://static.packt-cdn.com/products/9781789954692/cover/smaller)
![Vue - The Complete Guide (Including Vue Router, Vuex, and Composition API) [Video]](https://content.packt.com/V10777/cover_image_small.jpeg)