Building Web Apps with Vue

Paths

Building Web Apps with Vue

Authors: Daniel Stern, John Papa, Shawn Wildermuth, Nertil Poci, Jim Cooper, Marko Vajs, Eduardo Freitas, Yaser Mehraban, Mateo Prigl, Jeremy Morgan

Vue.js is an open-source model–view–viewmodel front end JavaScript framework for building user interfaces and single-page applications. It features an adaptable architecture with... Read more

  • Setting Up Your Vue Environment
  • Vue CLI
  • Vue Forms
  • Vue Router
  • State Management with Vuex
  • Testing Vue Components with Jest
  • End-to-end Vue Testing with Cypress
  • Creating Animations with Vue
  • Vue Authentication and Authorization
  • Preparing a Vue App for Internationalization
  • Deploying Static Vue Applications: Playbook

Pre-requisites

  • HTML
  • CSS
  • JavaScript

Building Web Apps with Vue

Vue.js is an open-source model–view–viewmodel front end JavaScript framework for building user interfaces and single-page applications. It features an adaptable architecture with the core library focused on the view layer only. Features such as routing and state management are supported through officially maintained libraries and packages. Vue is flexible and easy to learn giving developers the ability to quickly create fast and reliable applications.

Vue.js: Big Picture

by Daniel Stern

Dec 21, 2020 / 1h 32m

1h 32m

Start Course
Description

Saying Vue.js is a fast-growing and exciting library is a major understatement. With nearly 100,000 stars on GitHub, Vue.js is rapidly becoming the default choice for web application development. In this course, Vue.js: Big Picture, you will get a big picture overview of Vue, understanding what its features are and where those features are most useful. First, you will learn Vue's capabilities and limitations. Next, you will discover the libraries of the Vue ecosystem. Finally, you will explore how to use Vue for prototyping. When you’re finished with this course, you will be ready to start your journey towards being a Vue expert.

Table of contents
  1. Course Overview
  2. What Is Vue.js?
  3. Why Use Vue.js?
  4. The Vue Ecosystem
  5. Summary/Next Steps

Vue: Getting Started

by John Papa

Sep 5, 2019 / 3h 44m

3h 44m

Start Course
Description

Are you interested in how to use the fundamental features of Vue? In this course, Vue: Getting Started, you will learn foundational knowledge of how to start developing with Vue to create web applications. First, you will discover how to create and run your app with the Vue CLI, and how to build components which are the building blocks of your application. Next, you will learn how to build the user interface with templates, and how to choose the right data binding features. Finally, you will explore how to get and send data with HTTP, add menus to navigate your application with routing, and how to manage data and state with Vuex. When you are finished with this course, you will know all the basics you need to build your own Vue applications.

Table of contents
  1. Course Overview
  2. Getting Started with Vue
  3. Displaying Data and Responding to Events
  4. Displaying Lists and Conditional Content
  5. Interacting within a Component
  6. Component Communication
  7. Accessing Data
  8. Navigating Vue Apps with Routing
  9. Managing Data State with Vuex

Developing Faster with the Vue CLI

by John Papa

Jan 1, 2019 / 2h 25m

2h 25m

Start Course
Description

Do you want to learn to develop Vue apps quickly while following the recommended tooling?

In this course, Developing Faster with the Vue CLI, you will gain the ability to build Vue apps efficiently with the Vue CLI and popular Vue developer tools. First, you will learn what the Vue CLI does, how to install it, and how to use it to generate and serve Vue apps. Next, you will discover the various options and outcomes of using the CLI to build apps, libraries, and web components. Finally, you will explore how to add unit and end to end testing, extend your Vue app with plugins, and take advantage of the Vue CLI's UI. When you are finished with this course, you will have the skills and knowledge of the Vue CLI needed to develop Vue apps efficiently.

Table of contents
  1. Course Overview
  2. Getting Started with the Vue CLI
  3. Setting up the Vue CLI
  4. Mastering Essential Vue Tools
  5. Creating a Vue Application
  6. Building and Serving Vue
  7. Running Unit and End to End Tests
  8. Adding Packages and Plugins to Your Vue App with the Vue CLI
  9. Creating Vue Apps with Vue CLI's UI

Building Forms with Vue

by Shawn Wildermuth

Dec 4, 2020 / 2h 6m

2h 6m

Start Course
Description

In this course, Building Forms with Vue, you’ll learn to create forms for accepting user input. First, you’ll explore how to build forms in Vue. Next, you’ll discover How to compose forms from multiple components.. Finally, you’ll learn how to provide validation for those forms. When you’re finished with this course, you’ll have the skills and knowledge of Forms in Vue needed to build complex, enterprise-ready Vue projects.

Table of contents
  1. Course Overview
  2. Creating Forms
  3. Building Complex Forms
  4. Adding Validation

Vue Router

by Nertil Poci

Apr 28, 2021 / 2h 14m

2h 14m

Start Course
Description

Modern applications are continuously growing in complexity. Even the smallest application is made up of multiple components that are either visible or hidden based on the view of the user.

In this course, Vue Router, you’ll learn how to configure routing in your Vue.js applications using the Vue Router.

First, you’ll start by installing and configuring the basic application routes, as well as handling Page Not Found cases.

Next, you’ll learn how to manage component state via the router.

Then, you'll explore how to pass props to components, how to access route params from the component, and how to listen to route change events to update the component state.

Once you have your application setup, you'll discover how to extend your routing by adding nested routes to render components within other components and interact with the Vue Router API programmatically using JavaScript to navigate the user to different components based on different application events.

By the end of this course, you will be able to implement complex routing scenarios in your Vue.js applications.

Table of contents
  1. Course Overview
  2. Getting Started with Vue Router
  3. Managing Components Using the Vue Router
  4. Extending Application Routes Using Vue Router
  5. Interacting with the Vue Router Programmatically
  6. Handling Transitioning and Scrolling
  7. Lazy Loading and Route Guards

State Management with Vuex

by Jim Cooper

Nov 24, 2020 / 1h 49m

1h 49m

Start Course
Description

Every modern web application needs a way to manage and store client-side application state and interact with the server via APIs. In this course, State Management with Vuex, you’ll learn how to manage application state in Vue.js applications using Vuex; Vue’s official and recommended state management library. First, you’ll explore how to create a Vuex store and retrieve data from the store. Next, you’ll discover how to safely change data in the store with mutations. Finally, you’ll learn how to use Vuex to integrate with external APIs for retrieving and storing data on a back-end server. When you’re finished with this course, you’ll have the skills and knowledge of Vuex needed to create robust Vue applications with advanced state management requirements.

Table of contents
  1. Course Overview
  2. Storing and Retrieving State with Vuex
  3. Using Vuex Actions to Make API Calls
  4. Organizing a Vuex Store with Modules
  5. Simplifying Vuex with MapHelpers

Testing Vue Components with Jest

by Daniel Stern

Mar 31, 2021 / 1h 29m

1h 29m

Start Course
Description

Vue applications are designed to work at all levels of complexity. However, as projects get larger, it becomes harder and harder to test existing components against regression.

In this course, Testing Vue Components with Jest, you’ll learn to ensure the proper functioning of your Vue Components and the whole application by intelligently applying the Jest framework.

First, you’ll explore how to install Jest and integrate it with a boilerplate Vue project .

Next, you’ll discover how to write tests for Vue components, integrating mocks, snapshots and async tests to create a reliable test suite.

Finally, you’ll learn how to integrate a Jest-enabled project with continuous integration, greatly reducing the amount of effort needed to deploy your application.

When you’re finished with this course, you’ll have the skills and knowledge of Vue and Jest needed to test any personal project, work with a large team using Vue and Jest, or create basic dev ops for Vue teams wishing to use Jest.

Table of contents
  1. Course Overview
  2. Setting up a Jest Testing Suite for Vue Applications
  3. Verifying Vue Components’ Functionality with Jest
  4. Working with Continuous Integration

End-to-end Vue Testing with Cypress

by Marko Vajs

Apr 20, 2021 / 1h 35m

1h 35m

Start Course
Description

As a developer, you may want to take advantage of Cypress to test your web applications written with Vue.

In this course, End-to-end Vue Testing with Cypress, you'll learn about Cypress and how it can help you test your Vue applications:

  1. set up your development environment and create a Cypress project
  2. write your first Cypress test
  3. dive into interacting with different UI elements and explore Cypress's additional features
  4. explore running tests in a continuous integration server and taking advantage of Cypress's Vue-specific features
By the end of this course, you'll be ready to use Cypress to boost your testing efforts and gain confidence in your application's quality.

Table of contents
  1. Course Overview
  2. Getting Started with Cypress
  3. Testing Your Application with Cypress
  4. Exploring Features and Core Concepts
  5. Using Cypress within Vue Project
  6. Setting up Continuous Integration

Creating Animations with Vue

by Eduardo Freitas

Apr 27, 2021 / 50m

50m

Start Course
Description

Vue transitions and animations can be used to create more engaging websites and web apps. In this course, Creating Animations with Vue, you'll gain the ability to add transitions and animations to websites and web apps created with the Vue JavaScript framework. First, you'll explore how to bootstrap the Vue project that will be used for adding transitions and animations, by delving into the Vue transition component. Next, you'll discover how to work with key animation features such as animated notifications, keyframes, list transitions, transitioning between elements, and how to create, enter, and leave transitions. Finally, you'll learn how to combine all these techniques to build your own reusable animated Vue components. When you're finished with this course, you'll have the skills and knowledge of working with element transitions and animations needed to create and add animations to websites and web apps created with the Vue framework.

Table of contents
  1. Course Overview
  2. Introduction to Vue Animations
  3. Building Vue Animations

Vue Authentication and Authorization

by Yaser Mehraban

Feb 11, 2021 / 2h 5m

2h 5m

Start Course
Description

In this day and age, having a website is not as easy as it was a long time ago. Hackers are always on the hunt for unauthenticated web applications to steal information, deform a website to get ransom, and other malicious activities. In this course, Vue Authentication and Authorization, you'll gain the ability to secure your Vue applications using modern authentication methods. First, you’ll explore the basic concepts of authentication and authorization and topics such as OpenID Connect and OAuth 2.0. Next, you’ll discover how to add authentication to your Vue application using an identity provider, and then give access to what the user has access to using roles and scopes. Finally, you'll learn how to integrate your Vue application with Octa, Auth0 and Firebase which are some of the common providers in the market today. When you’re finished with this course, you'll have the skills and knowledge of authentication and authorization needed to secure your Vue applications and keep your user’s data safe, plus how to test your auth code.

Table of contents
  1. Course Overview
  2. Setting the Stage
  3. Creating the Application
  4. Managing User’s Information
  5. Role-based Access Control
  6. Integrating with Identity Providers
  7. Testing Vue Applications with Authentication

Preparing a Vue App for Internationalization

by Mateo Prigl

Apr 6, 2021 / 1h 42m

1h 42m

Start Course
Description

Globally accessible Vue applications need to adapt to different parts of the world. In this course, Preparing a Vue App for Internationalization, you’ll learn how to adjust your Vue application to different locales. First, you’ll explore how the vue-i18n package works and how to implement it into a current project. Next, you’ll discover how to customize the translation options. Finally, you’ll learn how to persist the chosen locale and optimize the translation with lazy loading. When you’re finished with this course, you’ll have the skills and knowledge of implementing localization based on the chosen locale needed to internationalize your Vue applications.

Table of contents
  1. Course Overview
  2. Implementing the Vue I18n Plugin
  3. Customizing Translations
  4. Persisting the Locale
  5. Optimizing Routes
  6. Lazy Loading the Translations

Deploying Static Vue Applications: Playbook

by Jeremy Morgan

May 19, 2021 / 2h 13m

2h 13m

Start Course
Description

Once you’ve chosen a platform for your Vue application, you need to the best way to deploy it. In this course, Deploying Static Vue Applications, you’ll gain the ability to deploy applications with ease. First, you'll explore AWS options. Then, you'll learn about deployment with Netlify and Azure. Finally you'll dive into publishing with Vercel. When you’re finished with this course you’ll have the skills and knowledge of Vue needed to deploy applications on major cloud platforms.

Table of contents
  1. Course Overview
  2. Deploying to AWS
  3. Deploying to Netlify
  4. Deploying to Azure
  5. Deploying to Vercel
Offer Code *
Email * First name * Last name *
Company
Title
Phone
Country *

* Required field

Opt in for the latest promotions and events. You may unsubscribe at any time. Privacy Policy

By providing my phone number to Pluralsight and toggling this feature on, I agree and acknowledge that Pluralsight may use that number to contact me for marketing purposes, including using autodialed or pre-recorded calls and text messages. I understand that consent is not required as a condition of purchase from Pluralsight.

By activating this benefit, you agree to abide by Pluralsight's terms of use and privacy policy.

I agree, activate benefit