Vue.js Fundamentals

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.
Course info
Rating
(137)
Level
Intermediate
Updated
Jun 21, 2018
Duration
5h 5m
Table of contents
Course Overview
Getting Started with the Vue.js CLI
Creating Vue.js Components and Using Template Syntax
Enabling Inter-component Communication
Routing from Page to Page
Managing State and Server Communication with Vuex
Creating Custom Directives and Filters
Deploying Vue Applications to Production
Description
Course info
Rating
(137)
Level
Intermediate
Updated
Jun 21, 2018
Duration
5h 5m
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
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
Angular Best Practices
Intermediate
1h 41m
Oct 23, 2017
Angular Fundamentals
Intermediate
9h 35m
Feb 1, 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.

Getting Started with the Vue.js CLI
Hello. This is Jim Cooper, and welcome to this Vue. js Fundamentals module on getting started with the Vue. js CLI. In this module, we'll spend a few minutes gaining a high-level understanding of Vue. js applications, and then we'll dive into creating our first project with the Vue CLI. We'll even start writing some of our own code in this module, including building this home page for the Build-a-Bot application that we'll build throughout this course. We're going to have some fun in this course using Vue to create a simple website for building and buying custom robots. This application will be rich enough to demonstrate all the fundamental concepts you need in order to create your own applications with Vue, but it will also be simple enough that we won't waste our time building unnecessary features that have no educational value. And this is what it'll look like when you're finished. As you can see, I can come to the build page and start customizing my robot. And I can build the robot that I want and then click Add to Cart to add it to my cart. And then you can see, it shows up in my cart here, and I even show which robots I saved money on, if they happen to be on sale. And back on the Build page, I can click on any of these parts and learn more about the individual parts. This site doesn't seem like much, but there's a ton of concepts and learning built into this. It will be just enough to allow us to dive into things like creating components and child components, communicating between those components, routing and navigation, state management, and even API calls to a separate server. We'll even explore how to build and deploy this application to production. So let's jump right in and start learning about Vue.

Creating Vue.js Components and Using Template Syntax
In this module, we're going to explore all the fundamentals of creating Vue. js components and working with component syntax. This includes creating components, using bindings to display data and handle events, conditionally displaying elements with v-if and v-show, showing elements with v-for, styling components, working with component livecycle hooks, and reducing duplication with mixins. There's a lot here, so let's get started.

Enabling Inter-component Communication
In this module on intersection-component communication, we'll explore how to communicate between components. You don't get far in building an application before you run into situations where one component needs to know something about what's going on with another component, so it'll be good to learn how to accomplish this with Vue. There are a few topics to cover including using props to share data with child components, validating component props, passing data to parent components with events, and injecting content into a child component with slots. Understanding how to do this will allow us to build rich client-side applications with Vue, so let's dive in.

Routing from Page to Page
All modern front-end frameworks provide some sort of routing mechanism for defining routes and navigating between pages in your single-page app. Vue. js, of course, is no different. In this module, we'll explore how to do this with Vue. This will include adding routing to our app, linking to routed pages, styling links based on the active route, navigating from code, working with route params, using nested routes, using named views, enabling HTML5 History Mode, and preventing navigation with navigation guards. Our build-a-bot app really needs some routing love, so let's go check it out.

Creating Custom Directives and Filters
Welcome to this module on creating custom directives and filters. In this module we'll learn how to create and use our own directives similar to directives we've already been using, such as b if. We'll also learn about view filters and how to create and use them. We'll learn about creating and using custom directives, passing data to directives, declaring directives locally versus declaring them globally, creating and using filters, and declaring filters locally versus declaring them globally. Alright, let's check it out.