Vue.js Fundamentals

By Jim Cooper
Vue.js is rapidly growing in popularity due to its ease-of-use. This course will teach you all the fundamentals of Vue development including creating components, directives, filters, routing, Vuex state management, and deploying to production.
Play course overview
Course info
Rating
(230)
Level
Intermediate
Updated
May 20, 2020
Duration
5h 4m
Table of contents
Course Overview
Course Overview 2m
Getting Started with the Vue.js CLI
Introduction 2m Gaining a Conceptual Understanding of Vue 2m Setting up the Environment 2m Creating a New Project with the Vue CLI 10m Creating the Home Page 10m
Creating Vue.js Components and Using Template Syntax
Introduction 0m Global Components vs. Single-file Components 5m Creating Your First Component 7m Binding Attributes to Data with v-bind 5m Binding to Events with v-on 7m Using Shorthand Bindings 1m Binding to Computed Properties 3m Displaying Data with Interpolation 3m Conditionally Displaying Content with v-if and v-show 4m Repeating Elements with v-for 11m Styling Components 5m Styling Child Components 7m Conditionally Applying Styles with Style Bindings 4m Conditionally Applying Classes with Class Bindings 4m Using SASS and Other CSS Pre-processors 2m Using Component Lifecycle Hooks 2m Reducing Duplication with Mixins 2m Summary 0m
Enabling Inter-component Communication
Introduction 1m Creating Child Components 6m Using Props to Share Data with Child Components 5m Validating Props 4m Passing Data to Parent Components with Events 10m Injecting Content into a Child Component with Slots 7m Summary 0m
Routing from Page to Page
Introduction 1m Adding Routing to Your App 5m Linking to Routed Pages 3m Styling Links Based on the Active Route 3m Navigating from Code 4m Working with Route Params 6m Passing Params as Props 2m Using Nested Routes 7m Using Named Views 6m Enabling HTML5 History Mode 3m Preventing Pages from Loading with Navigation Guards 3m Preventing Navigation Away from Pages with Navigation Guards 4m Summary 0m
Managing State and Server Communication with Vuex
Introduction 3m Creating a Vuex Store 2m Changing Vuex Store State with Mutations 4m Retreiving Items from the Vuex Store 7m Using Vuex Getters to Return Calculated Data 4m Using Actions to Work with APIs and Asynchronous Data 17m Using Actions to Save Data to an API 3m Returning Promises from Actions 1m Organizing the Store with Modules 6m Namespacing Modules 4m Accessing Namespaced Getters 1m Understanding Global and Namespaced State 10m Using the Vuex MapState Helper 4m Using the Vuex MapGetters Helper 1m Using the Vuex MapActions Helper 3m Using the Vuex MapMutations Helper 1m Summary 1m
Creating Custom Directives and Filters
Introduction 1m Creating a Custom Directive 4m Passing Data to Directives 7m Using Directive Lifecycle Hooks 5m Making Directives Available Globally 2m Creating a Custom Filter 5m Declaring Filters Globally 1m Summary 0m
Deploying Vue Applications to Production
Introduction 2m Creating a Basic Vue.js Build with the CLI 2m Using Environment Variables and Build Modes 6m Deploying to a Production Webserver 3m Handling Deep Linking on the Server 4m Inspecting the Built-in Webpack Config 2m Customizing Webpack Config 7m Summary 1m
Description
Course info
Rating
(230)
Level
Intermediate
Updated
May 20, 2020
Duration
5h 4m
Description

Vue.js is one of the most lightweight and enjoyable front-end development frameworks for building modern web applications, and there are a lot of important concepts to learn to become a skilled Vue developer. In this course, Vue.js Fundamentals, you will gain the foundational knowledge required to build robust, production-ready applications with Vue. First, you will build your own project from scratch with the Vue CLI, including creating components and manage communication between components. Then, you will learn to create routes and navigate from page to page, manage state and communicate with the server using Vuex, and create custom directives. Finally, you will deploy your application to production. When you’re finished with this course, you will have gained the fundamental skills and knowledge of Vue.js needed to create reliable and professional Vue applications.

About the author
Jim Cooper
About the author

Jim Cooper is a software developer at Pluralsight. With more than 20 years of software development experience, he has gained a passion for Agile software development -- especially Lean.

More from the author
State Management with Vuex
Intermediate
1h 49m
Nov 24, 2020
JavaScript Objects, Prototypes, and Classes
Advanced
1h 48m
Oct 30, 2019
More courses by Jim Cooper
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hi, everyone. This is Jim Cooper, and welcome to my course on Vue.js Fundamentals. I've been working as a full stack developer for more than 20 years, and I've been a serious front‑end developer for the past 6 years, working with AngularJS, Angular, React, and now Vue.js. Having spent some time in all of those frameworks, I'm excited to bring you this course on Vue.js Fundamentals. Of all the frameworks, I've found Vue to be the most enjoyable, intuitive, and lightweight. It is pure joy to work with, but there's still a lot to learn. In this course, we'll start where every Vue.js application should start, with the Vue CLI. We'll use the CLI to generate our project and then we'll immediately start exploring how to build applications as we start creating our own Vue components and learning how components interact and communicate with each other. We'll also learn a lot about the Vue.js router, including how to create and navigate between routes, and how to work with route params, named views, child routes, and route guards. Then we'll dive into managing state throughout our application with Vuex, and we'll see how to use Vuex to communicate asynchronously with APIs. We'll also learn how to use directives to easily decorate components or other elements with nicely encapsulated functionality. And we'll see how to use filters to format and modify data right from within our HTML templates. And of course, a web framework fundamentals course wouldn't be complete if you didn't learn how to package applications up and deploy them to production. We'll explore Vue's excellent tooling that makes creating production deployments a breeze. By the end of this course, you'll know everything you need to know to create production‑ready Vue applications. Before beginning the course, you should be familiar with basic HTML, CSS, and JavaScript. Some knowledge of single‑page applications will also be helpful, but if this is your first time jumping into single‑page apps, that's fine too. So please join me on this journey to learn Vue, with the Vue.js Fundamentals course, at Pluralsight.

You're the smartest person in the room

PROVE IT

Your team won't just close the skills gap

THEY'LL HURDLE IT