Paths

Vue

Authors: Daniel Stern, John Papa, Carolina Powers, Jim Cooper, Bill Stavroulakis

Vue is an open-source, easy to learn progressive web framework built in JavaScript. It puts an emphasis on being flexible but easy to learn. You can still build complex... Read more

What you will learn

  • Vue core concepts
  • Component architecture
  • State Management
  • Building single page applications

Pre-requisites

JavaScript, HTML, CSS

Beginner

Get started quickly learning with the latest version of Vue. We won’t cover all the details of the framework here but you’ll learn enough to create useful applications. In fact, you’ll code along with us and interactively build your first application.

Vue.js: Big Picture

by Daniel Stern

Aug 31, 2018 / 1h 7m

1h 7m

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 45m

3h 45m

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 26m

2h 26m

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
Project

Build a Reading List Application With Vue.js

by Hampton Paulk

May 24, 2018 / 1h 30m

1h 30m

Start Project
Description

In this project you’ll follow along with our instructions and build a reading list application with Vue.js 2.x. You'll create multiple components that are connected together to display a list of authors and book titles, and you'll create a form that adds new books to the list.

Project overview
  1. Setup15m
  2. Creating the BookList Component15m
  3. Looping Through a List of Books15m
  4. Creating a Child Component10m
  5. Connecting BookItem as a Child Component of BookList10m
  6. Creating a BookForm Component25m
Project

Add Features with Forms to a Vue.js Reading List Application

by Carolina Powers

Nov 29, 2018 / 1h 35m

1h 35m

Start Project
Description

In this project, you’ll follow along with our instructions and use forms and Vue.js to add features to the application built in the Build a Reading List Application With Vue.js project.

Project overview
  1. Setup15m
  2. Enhancing the BookForm Component20m
  3. Dynamically Show and Hide Text15m
  4. Filtering the Books List30m
  5. Adding a Search Functionality15m

Intermediate

We’ll dig deeper into some more advanced areas of Vue and cover all the major features you’ll need to build a variety of applications. You’ll understand the full power of Vue by the end of this section.

Vue.js Fundamentals

by Jim Cooper

Jun 21, 2018 / 5h 5m

5h 5m

Start Course
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.

Table of contents
  1. Course Overview
  2. Getting Started with the Vue.js CLI
  3. Creating Vue.js Components and Using Template Syntax
  4. Enabling Inter-component Communication
  5. Routing from Page to Page
  6. Managing State and Server Communication with Vuex
  7. Creating Custom Directives and Filters
  8. Deploying Vue Applications to Production

Advanced

We’ll take your deeper knowledge and help you build your first Single Page Application with vue. This time, though you’ll be more independent. You won’t code in the browser but you’ll follow along building the application with your preferred toolset that you use for your normal development.

Single Page Applications with Vue.js

by Bill Stavroulakis

Oct 10, 2017 / 3h 11m

3h 11m

Start Course
Description

How can you create a full-blown application with one of the most popular JavaScript frameworks, Vue.js? In this course, Single Page Applications with Vue.js, you'll learn how to setup the environment and build processes necessary for your application. First, you'll discover how to include single file components, routing, and API communication functionalities with plugins and modules. Next, you’ll explore state management and server-side rendering for faster and more manageable apps. Lastly, you’ll cover how to create tests and deploy your application on the cloud. When you’re finished with this course, you’ll have the necessary knowledge to efficiently create an application from start to finish using the Vue.js framework.

Table of contents
  1. Course Overview
  2. Environment Setup - Build Process
  3. Single File Components
  4. Routing
  5. API Communication
  6. State Management
  7. Server-side Rendering
  8. Testing
  9. Deploying