Up and Running with Vue.js
0.0 (0 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
6 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Up and Running with Vue.js to your Wishlist.

Add to Wishlist

Up and Running with Vue.js

Build powerful user interfaces with the progressive JavaScript framework
0.0 (0 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
6 students enrolled
Created by Packt Publishing
Last updated 7/2017
Curiosity Sale
Current price: $10 Original price: $200 Discount: 95% off
30-Day Money-Back Guarantee
  • 2.5 hours on-demand video
  • 4 Articles
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Basics of Vue Js
  • SPA-building blocks with Vue Js
  • Vue Js components and directives
View Curriculum
  • It is necessary for potential course-takers to possess an elementary to intermediate-level proficiency in JavaScript, HTML, and CSS before getting started with this course.

Vue.js is one of the most progressive open source JavaScript framework capable of building user interfaces and powering Single-Page Applications. Supported by other libraries and projects, Vue.js is focused on the view layer only. This course will act as a guide to help customers build robust web applications seamlessly.

Start with the fundamentals of this powerful framework and explore all about modern apps and their requirements. Leverage Vue.js tools to build highly scalable and fast apps. Use this guide, to setup and build simple components and understand how to use events to communicate between components. Get to grips with SPA building blocks like templates, events, forms, and components. This guide is very practical in its approach and will require relatable ideologies to help them understand the concepts that are being taught.

About the Author

Chidiebere Nnadi is a software developer/designer based in Lagos, Nigeria. He has diverse interests in software development, hardware and music. He spends most of his time helping startups and medium-scale enterprises build applications for the web using Javascript/Python. His previous experience is as Sr. Technical Trainer at Andela where he taught both Javascript and Python and led internal product teams. He is extremely passionate about Vue.js and the web, and hopes to spend more and more time helping young developers in the community become proficient at front-end development.

Who is the target audience?
  • This course is targeted at those who want to get started with, and eventually master building amazing websites with Vue.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
30 Lectures
Introduction to working with Vue.js
4 Lectures 21:58

This video gives an overview of the entire course.

Preview 04:06

In this video, we shall be starting our journey with Vue.js. We shall also be looking at some distinguishing characteristics of Vue.js with respect to other frameworks:

  • Features of Vue.js as a modern JavaScript framework.
  • Comparing Vue.js with other modern JavaScript frameworks such as React and Angular. 
The Vue.js Framework

Here, we shall learn how to get started with Vue.js in actual projects: 

  • Installing Vue.js within existing projects
  • Bootstrapping a new Vue.js project
  • Setting up Vue Dev Tools
Setting up Vue.js + Vue DevTools

In this video, you will walk through the steps to create a single-page application with Vue.js

  • Rendering data on a page using Vue.js
  • Handling user data and events
  • Vue.js dynamic data-binding basics
An SPA in 10 mins with Vue.js

Test Your Knowledge
5 questions
SPA building blocks using Vue.js
5 Lectures 21:28

In this video, you will learn all about working with templates in Vue.js:

  • Learn Vue.js template syntax
  • Directives and filters
  • Vue.js shorthand syntax
Preview 07:07

In this video, you shall be working with Vue.js events:

  • Event handling
  • Event modifiers
  • The v-on directive
Working with Events

Here, you shall learn to create and work with forms in Vue.js:

  • The v-model directive and v-model modifiers
  • Various types of form fields in Vue.js
Working with Forms

Form Validation with vuelidate

In this video, you will learn to use vue-resource, and create AJAX requests. Additionally, you will also learn to use interceptors:

  • vue-resource
  • AJAX requests with vue-resource
  • Configuring interceptors in frontend applications  
Ajax with Vue.js

Test Your Knowlege
5 questions
Working with Components
5 Lectures 19:07

In this video, you will learn all about Vue.js components, and use them to build highly efficient applications:

  • Learn what are Vue.js components
  • Registering components
  • Working with components and creating components efficiently 
Preview 04:44

In this video, you shall be introduced to Vue.js props, which help facilitate parent components to pass data down to the child components Here, you will:

  • Define props
  • Learn about dynamic props and one-way data-flow
  • Learn to validate your props

In this video, you will learn to create custom events in Vue.js,that enable us to communicate between parent and child components : 

  • Vue.js custom events
  • Some useful directives in Vue.js 
Custom component Events

Vue instance properties

In this video, you will learn about slots in Vue.js. There are 2 types of slots in Vue.js that you will learn about:

  • Single slots
  • Named slots 

Test Your Knowlege
5 questions
Sample application with Vue.js
3 Lectures 20:20

In this video, you will be learning about the Vue.js application structure. Here, you will be getting started with building a real-life, complex Vue.js application.

  • Learn how Vue.js applications are structured
  • Plan your application structure 
Preview 02:33

Here, you shall continue to develop your Vue.js application. You will:

  • Learn how to use components to create structured, modular code that is less confusing to debug, while being more concise and effective at the same time. 
A fancy to-do list application (Part 2)

In this video, you will finally proceed to building component logic in your application. By now, you would have already defined all your components and structured your application. 

A fancy to-do list application (Part 3)

Test Your Knowlege
2 questions
Vue.js Directives
3 Lectures 09:33

In this video, you will start with learning about the structure of a Vue.js directive. Then, you will study about some common Vue.js directives and their usage.

  • Structure of a directive
  • Using directives 
Preview 04:41

Directive hook functions are functions that can be hooked into at various points during the lifecycle of a directive. In this video, you will learn a number of such functions, as well as learn to use them in a Vue.js application:

  • Understanding directive hook functions.
  • Using directive hook functions appropriately 
Directive hook functions

In this video, you will learn about modifiers in Vue.js. As introduced earlier, modifiers extend the functionality of directives, and provide a great help to developers while creating Vue.js applications. Here, you will:

  • Learn what modifiers are
  • Using modifiers  

Test Your Knowlege
2 questions
Vue.js Tooling and automation
2 Lectures 07:32

In this video, you will start with learning how to use vue-cli to get started with building Vue.js applications. Here, you will:

  • Learn what is vue-cli
  • Build Vue.js applications using vue-cli 
Preview 06:35

vue-loader and Single file components

Test Your Knowlege
2 questions
Routing with Vue.js
4 Lectures 25:15

In this video, you will be learning about vue-router, which helps us to create routes in Vue.js.

  • Get started with vue-router
  • Create routes in Vue.js
Getting started with vue-router

In this video, you will learn about route matching, which is nothing but a defined route pointing to a specific URL. Here, you will

  • Define routes by creating an array of route objects
  • Nested routes
  • Setting route properties such as 'path', 'name', and so on
Route matching

In this video, you will learn how to programmatically navigate to different pages from your current component.

  • Automatic navigation to certain page from within your component, i.e auto-routing
  • Redirecting to a certain page based on some specified parameters 
Programmatic navigation

Here, you shall learn to secure your application from unauthorized access using navigation guards. You will:

  • Learn about the different types of navigation guards in Vue.js
  • Use navigation guards to secure your application.
Navigation guards

Test Your Knowlege
3 questions
2 Lectures 15:59

We will be using the Vue CLI Bootstrap setup as testing comes built-in. In this video, we will look at:

  • The folder structure
  • Learn how to customize the setup based on your environment 
Preview 03:26

We take a simple progress bar element as a sample and get started with writing tests for this element. This video covers: 

  • How to import the prerequisites into the spec file
  • How to define the 'describe' and 'it' blocks
  • Creating constructor for the component and getting new mounted instances of the components
  • Writing basic tests
  • Running tests
Testing Components

Test Your Knowlege
2 questions
Additional Topics
2 Lectures 11:40

Deploying to Production

Test Your Knowlege
2 questions
About the Instructor
Packt Publishing
3.9 Average rating
7,336 Reviews
52,330 Students
616 Courses
Tech Knowledge in Motion

Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.

With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.

From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.

Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.