Effective Front-end Development with Vue.js
2.4 (3 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
19 students enrolled

Effective Front-end Development with Vue.js

Design stunning UIs for Vue apps with Element UI and iView. Uncover the hidden features of Vuex to build powerful apps
2.4 (2 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
19 students enrolled
Created by Packt Publishing
Last updated 6/2019
English
English [Auto-generated]
Current price: $139.99 Original price: $199.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 7 hours on-demand video
  • 1 downloadable resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Import Bootstrap-Vue into your new and existing web applications
  • Design responsive mobile web pages
  • Learn Bootstrap 4 CSS for styling and animations
  • Learn how to import iView and Element UI into your new and existing web applications
  • Get up to speed with the workings of the iView and Element UI layout and grid system
  • Build a shopping cart application in Vue
  • Learn ways to organize and modularize a Vuex app for cleaner code
  • Know how Vuex can simplify the process of building complex applications
  • Write unit and end-to-end tests for an app that uses Vuex
  • Learn to build your own plugins and libraries that work with Vuex
Course content
Expand all 66 lectures 07:01:00
+ Hands-On Web Development with Bootstrap and Vue
13 lectures 56:39

This video contains information about the entire course.

Preview 02:27

The aim of this video is to get started with Vue.js and Bootstrap.

  • Introduce Vue.js

  • Introduce Bootstrap-Vue

  • Setup Vue project

First Step Towards Bootstrap-Vue and Vue.js
03:30

The aim of this video is to learn how we can set up a Vue project quickly with Bootstrap-Vue.

  • Setup Vue and Bootstrap using Webpack

  • Setup Vue and Bootstrap using Vue CLI

Setting Up Bootstrap-Vue Using webpack and Vue CLI
05:52

The aim of this video is to learn how we can import individual components of Bootstrap to minimize the size of the project bundle.

  • Import Bootstrap-Vue components

  • Import Bootstrap-Vue directive

Importing Bootstrap-Vue Individual Components and Directives
02:29

The aim of this video is to learn about Vue build variants, browser support, and tooling support.

  • Understand Vue build variants

  • Install and import @babel/polyfill

  • Add Vetur extension in Visual Code Studio

Build Variants, Browser Support, and Tooling Support
02:47

The aim of the video is to implement the form components that Bootstrap-Vue provides.

  • Implement a form using Bootstrap-Vue

  • Implement Bootstrap input, radio, and select

  • Implement Bootstrap checkbox and form validation

Preview 08:46

The aim of this video is to learn how we can quickly and easily design a landing page using Bootstrap-Vue layout.

  • Understand and design with Bootstrap-Vue layout

  • Implement Bootstrap-Vue carousel

  • Implement Bootstrap-Vue cards

Designing a Landing Page for a Web Application
04:47

The aim of this video is to get started with Bootstrap-Vue tables, tabs, and progress components.

  • Implement Bootstrap-Vue tables

  • Implement Bootstrap-Vue tabs

  • Implement Bootstrap-Vue progress

Utilizing Tables, Tabs, and Progress Components
06:10

The aim of this video is to understand Bootstrap-Vue layout and grid system.

  • Understand Bootstrap-Vue layout

  • Implement Bootstrap-Vue layout and grid system

Working with Layout and Grid System
04:21

The aim of this video is to understand and implement the popover directive.

  • Integrate v-b-popover over b-button

  • Understand and implement popover positioning

  • Understand and implement popover triggers, header, and contents

Bootstrap-Vue Popovers Using Bootstrap V4 CSS for Styling and Animation
03:51

The aim of this video is to understand and implement the Scrollspy directive.

  • Integrate v-b-Scrollspy directive

  • Understand how it works using an example

Introduction to Scrollspy and How It Works?
02:46

The aim of this video is to understand and implement the tooltips directive.

  • Integrate v-b-tooltip directive

  • Understand and implement tooltip positioning

  • Understand and implement tooltip triggers and title content

Adding Custom Bootstrap-Vue Tooltips
03:26

The aim of the video is to understand and implement Bootstrap-Vue router links, spacing classes, and form validation plugins.

  • Implement <b-link> router links

  • Understand and implement the concept of spacing classes in Bootstrap-Vue

  • Implement form validation using Vuelidate

Router Support, Spacing Classes, and Form Validations
05:27
Test your knowledge
5 questions
+ Hands-On Styling Vue.js Web Apps with Element UI and iView
18 lectures 01:41:22

This video provides an overview of the entire course.

Preview 03:49

The aim of this video is to learn how we can set up an Element UI project quickly as a beginner.

  • Introduce Element UI

  • Setup Element UI quickly with CDN

  • Setup Element UI quickly with NPM

Setting Up Element UI Using CDN and NPM
07:33

The aim of this video is to learn how we can change the default language and theme of the framework.

  • Install node-sass and sass-loader

  • Import the .scss file in your entry script file

  • Import the language file in your entry script file

Internationalization and Custom Themes in Element UI
04:30

The aim of this video is to get started with selecting your web page layout and understanding the grid system of Element UI.

  • Introduce Element UI grid system

  • Select an Element UI layout syntax

Exploring Element UI Layout and Implementing Built-In Transitions
06:48

The aim of this video is to design a landing page for your web application using the Element UI components.

  • Choose a layout

  • Implement a carousel

  • Finalize the landing page by using Element UI Cards

Designing a Landing Page with Element UI
07:06

The aim of this video is to learn how we can utilize all the Form components such as Radio, select, Datepicker etc.

  • Create a Login component and adding a Login form

  • Implement the Signup form using Radio, select, Datepicker components

Designing Form Components Using Element UI
06:56

The aim of this video is to learn how we can utilize all the Data components such as Table, Pagination, Badge etc.

  • Create an Items component and add Table data in it

  • Add pagination using pagination component that Element UI provides

  • Add Tags and Badge components into your Items page

Designing Data Components Using Element UI
05:19

The aim of the video is to learn how we can utilize all the Notices the Element UI provides such as Alert, Loading, Notifications etc.

  • Add an alert component using type success, info, warning

  • Add a loading overlay on the Table data using the loading prop

  • Utilize Message, MessageBox and Notification components

Adding Element UI Notices to Your Web Pages
07:58

The aim of the video is to learn how we can utilize all the Navigation components Element UI provides such as NavMenu, Breadcrumb, Tabs etc.

  • Add breadcrumbs into your items page

  • Implement NavMenu components

  • Utilize Tabs and Dropdown in your webpage

Designing Navigation Components Using Element UI
06:16

The aim of this video is to learn how we can set up iView project quickly as a beginner.

  • Introduce iView

  • Setup iView quickly with CDN

  • Setup iView quickly with NPM

Setting Up iView Using CDN and NPM
04:55

The aim of the video is to learn how we can change the default language and Theme of the framework.

  • Install less-loader

  • Import the .less file in your entry script file

  • Import the language file in your entry script file

Internationalization and Custom Themes in iView
03:41

The aim of this video is to learn how we can enable Vue.js to allow us to use restricted tags such as Switch and Circle.

  • Install iView-loader in your view project using NPM

  • Configure your webpack.config.js file and add iView-loader with option prefix set to false

  • Restart your server and you should be able to use Switch and Circle restricted tags with Vue.js

Implementing iView Loader in Vue.js
03:06

The aim of the video is to get started with selecting your web page layout and understanding the grid system and design a landing page for your web application using the iView components.

  • Introduce the iView grid system and choose a layout

  • Implement a carousel

  • Finalize the landing page by using iView Cards

Exploring Layouts and Designing a Landing Page with iView
05:25

The aim of this video is to learn how we can utilize all the Form components such as Radio, select, Datepicker etc.

  • Create a Login component and add a Login form

  • Implement the Signup form using Radio, select, Datepicker components

Designing Form Components Using iView
07:23

The aim of this video is to learn how we can utilize Table components and all the options it provides.

  • Create an Items component and add Table data in it

  • Utilize the attributes on the table components for sorting and displaying data

  • Add download CSV button to extract data from the table and export it in a CSV file

Designing Tables in iView
05:23

The aim of this video is to learn how we can utilize all the Notices the iView provides such as Alert, Message, Notice.

  • Add an alert component using type success, info, warning

  • Utilize Message component

  • Utilize Notification component

Adding iView Notices to Your Web Pages
05:19

The aim of this video is to learn how we can utilize all the Navigation components iView provides such as Menu, Breadcrumb, Page etc.

  • Add breadcrumbs into your items page

  • Utilize Tabs and Dropdown in your webpage

Designing Navigation Components Using iView
04:56

The aim of this video is to learn some valuable tips/tricks while designing an app or a webpage.

Tips and Tricks to Improve Your UI/UX Design Skills
04:59
Test your knowledge
5 questions
+ Hands-On Vuex for Vue.js Applications
35 lectures 04:22:59

This video will give you an overview about the course.

Preview 03:45

We’ll start by learning about state management and how it can be useful. We’ll also briefly summarize the Vuex API.

  • Learn what state management is

  • Learn what Vuex is

  • Discuss different aspects of the Vuex API

Why Vuex?
04:22

We’ll jump right into code by adding a Vuex store with an initial state to a project.

  • Instantiate the Vuex store with an initial state

  • Register the store with Vue

  • Include the store’s state in a component

Building State
06:16

A store isn’t as good if you can’t change its state, so we’ll learn about mutations, i.e. simple changes to your store’s state. Then, we’ll add in a mutation to our example project.

  • Review what mutations are

  • Add an example mutation to our store

  • Execute mutations by committing them to the store

Committing Mutations
04:21

We’ll talk about actions, which can cause more complicated changes to the state. We’ll create an action to call an API from our app and put the result in our store.

  • Review what actions are

  • Create and use an action that calls an API

  • Discuss when to use actions versus mutations

Dispatching Actions
05:27

We’ll start out by showing how to use getters, which are like computed properties in components. Then, we’ll go over the map helpers, which can make it a lot simpler to access the store.

  • Go over what getters are and how to use them

  • Show how to use getters that take arguments

  • Use the mapMutations, mapActions, and mapGetters helpers

Using Getters and Map Helpers
08:17

We’ll introduce the Shopping List project and create its state and mutations.

  • Go over the Shopping List app

  • Describe the item data structure and build the state

  • Create mutations to add, edit, and delete items

Creating the State and Mutations
05:25

We’ll build the Shopping List component to display items from the store created in the last video.

  • Create the Shopping List component

  • Create a table with columns for item name, price, and quantity

  • Populate the table with items from our store

Displaying Items in the UI
03:09

We’ll create a form, that adds items to our Shopping List, using the add item mutation.

  • Add a “new item” object to the Shopping List data

  • Build the form to add items to the Shopping List

  • Add a submitForm method, that commits the add item mutation

Building the Add Item Feature
06:51

We’ll add buttons that edit and delete items in the Shopping List, using mutations from the first video.

  • Add an edit button to each item

  • Add logic for the edit item process

  • Add a delete button, that commits the delete item mutation

Editing and Deleting Items
04:40

We’ll create a component that uses getters to display the total price and quantity of our Shopping List.

  • Add total price and total quantity getters

  • Build the ItemsSummary component

  • Discuss how Vuex was helpful in this project

Building the List Summary Component
04:41

We’ll discuss the problem that we’re trying to solve, and start working on the books list page and store.

  • Describe the problem we’re solving

  • Create some initial parts of the store

  • Add the books lists UI

Getting Started
07:09

We’ll implement the Lists page and add a way to create new lists.

  • Add the Create Lists component

  • Implement the Create List mutation

  • Add the Lists page to show all created list

Creating and Viewing Lists
06:26

We’ll create a way to add books to Lists and view the books in each list.

  • Implement the ADD_BOOK_TO_LIST mutation

  • Implement the REMOVE_BOOK_FROM_LIST mutation

  • Add the UI for viewing books in a list

Adding Books to Lists
07:41

We’ll start refactoring the store, so it has users. Then, we’ll implement a way to create users.

  • Go over what refactoring we’ll be doing

  • Implement adding new users

  • Fix the list-related pages, so they work with users

Creating Users
07:50

First, we’ll finish refactoring the store, so everything still works with users. Then, we’ll add the ability to login or switch users.

  • Implement the initial temporary user

  • Finish refactoring the rest of the store and components

  • Add login functionality

User Login
10:53

We’ll go into more detail on what actions area and when you would want to use them.

  • Create the mutations that we’ll need

  • Create the updateUserName action

  • Create the updateUserPhoneNumber action

Using Actions
04:42

We’ll learn how to use more complex actions, like with async/await, Promise.all, and dispatching actions from within actions.

  • Create an action that calls multiple actions with Promise.all

  • Create an action that uses async/await

  • Discuss where actions can be useful

More Complex Actions
06:04

We’ll go over the new API for the reading tracker in Postman, and write helper functions to access it.

  • Discuss the biggest changes the API will introduce

  • Go over how the JWT authentication flow works

  • Go over the list related API calls

Accessing the API
08:43

Using the helper functions from the last video, we’ll create actions to implement the JWT auth flow. Then, we’ll update the add user and login UIs.

  • Cleanup now, no longer a necessary part of the store

  • Create the add user action and update the corresponding page

  • Create the login action and update the corresponding page

Implementing the JWT Auth Flow
12:34

We’ll refactor the rest of the application to use the new API, by updating the store and components.

  • Create and use the Load Books action

  • Make the Create List action and update the corresponding page

  • Implement adding/removing books to/from a list

Using Books and Lists APIs
10:19

We’ll start with the most basic way to organize a store: Putting each part in a separate file.

  • Create separate files for actions, mutations, and getters

  • Use mutation and action type constants

  • Refactor the rest of the app

File Organization
11:39

We’ll go over what Vuex modules are, and how to use them in a simplified scenario.

  • Go over what modules are

  • Create a file for each module

  • Learn how to namespace modules

Introducing Modules
09:09

Using what we learned in the last video, we’ll create a user module in our reading tracker app.

  • Create a file for the module

  • Move over all user-related parts of the store

  • Refactor the app to work with the user module

Creating the User Module
08:15

We’ll create the namespaced Lists module for our reading tracker. Information about new getters syntax: https://github.com/vuejs/vuex/pull/1364

  • Create a file for the module

  • Move all list-related parts of the store over

  • Refactor the app to work with the Lists module

Creating the Lists Module
09:13

We’ll learn how to divide a module into separate files, to further break up our app. We’ll also discuss, when it’s best to use each organization scheme that we’ve talked about in this section.

  • Split up each module into separate files

  • Refactor the app to work with the new file structure

  • Discuss when to use different organization types

Modules in Separate Folders
07:40

We’ll use Jest to create automated unit tests for the mutations in the reading tracker. Jest docs: https://jestjs.io/docs/en/getting-started

  • Discuss our goals in unit testing mutations

  • Write unit tests for the user module’s mutations

  • Go through unit tests for the Lists module’s mutations

Writing Unit Tests for Mutations
07:57

We’ll write unit tests for the actions in the reading tracker. We’ll use Jest mocks to simulate async calls and commits.

  • Discuss our goals in unit testing actions

  • Go over mocking in Jest

  • Write a unit test for a Lists module action

Writing Unit Tests for Actions
10:53

We’ll use Cypress to write some end-to-end tests for our reading tracker app. Cypress docs: https://docs.cypress.io/

  • Learn how to add Cypress to a Vue CLI app

  • Go over what makes Cypress unique

  • Write E2E tests for user registration and login

Introduction to Cypress
09:22

We’ll go over some tricks that can help simplify end-to-end testing Vuex apps with Cypress.

  • Go over a way to simplify E2E tests

  • Create custom Cypress commands for our E2E tests

  • Write E2E tests for list creation using the custom commands

Cypress and Vuex
09:50

We’ll go over the Vuex plugin API, and use it to create an example plugin.

  • How to create a plugin

  • Subscribe to mutations and actions

  • Register dynamic modules

Building Vuex Plugins
07:53

We’ll discuss a few popular Vuex libraries:

  • https://github.com/robinvdvleuten/vuex-persistedstate

  • https://github.com/superwf/vuex-cache

  • https://github.com/maoberlehner/vuex-map-fields

  • https://github.com/ktsn/vuex-connect


  • Talks about the types of plugins we would cover

  • Vuex Persisted State and Vuex Cache

  • Vuex Map Fields and Vuex Connect

Popular Vuex Libraries – Part One
06:52

We’ll talk about a few more popular Vuex libraries:

  • https://github.com/f/vue-wait

  • https://github.com/xanf/vuex-shared-mutations

  • https://github.com/eunjae-lee/vuex-dry


  • Learn about Vue Wait

  • Learn about Vuex Shared Mutations

  • Learn about Vuex Dry

Popular Vuex Libraries – Part Two
03:36

We’ll go over how to use Vuex ORM, and then integrate it into the reading tracker. https://github.com/vuex-orm/vuex-orm

  • Discuss the goals of Vuex ORM

  • Create model classes for books and lists

  • Integrate Vuex ORM throughout the reading tracker app

Vuex ORM
11:40

We’ll discuss how to use Vuex Pathify, a plugin that aims to simplify and unify Vuex usage, without replacing Vuex. https://github.com/davestewart/vuex-pathify

  • Discuss the goals of Vuex Pathify

  • Add Vuex Pathify to an example app

  • Learn how to use Vuex Pathify with more complex stores

Vuex Pathify
09:25
Test your knowledge
5 questions
Requirements
  • Prior knowledge of JavaScript and Vue .js is assumed.
Description

Vue.js is a JavaScript framework that has taken some of the best practices and features of the most popular JavaScript frameworks. It’s purpose is to build a lightweight, progressive framework that can be used for rapid web design and development as well as for building enterprise-level applications. Vuex is the official state management tool for Vue.js, that makes your application’s state architecture easier to understand, maintain and evolve.

This course is a practical guide to designing and developing stunning applications using Vue.js. You will begin with creating the user interface for your application using Bootstrap-Vue. You will then delve into styling your application and making it more responsive and engaging for users with the help of Element and iView. You will also learn how to improve your application’s architecture and overall user experience using Vuex. Next, you will learn all about the Vuex API, including the Vuex store, changing application state, carrying out asynchronous operations, and persisting state changes to a server by building a reading tracker app. Finally, you will learn advanced techniques for testing and organizing complex Vuex applications.

By the end of this course, you will be able to design and develop your own Vue.js applications that are powerful, consistent, and maintainable.

Meet Your Expert(s):

We have the best work of the following esteemed author(s) to ensure that your learning journey is smooth:

  • Haider Rehman works as a DevOps and a Software Engineer for a well-known software company and has over 8 years of experience as a developer. He has a master’s degree in telecom systems and a bachelor's degree in telecommunication. After obtaining these, he switched to programming in IT and telecommunications to get a feel for the industry. Haider enjoys music, coding, and hanging out with friends.


  • Matthew Dangerfield started out as an Angular developer but grew to love Vue and its ecosystem after attending a workshop with its creator, Evan You. Since then, he’s built several applications with it, and presented to hundreds of people about its state management system, Vuex.

Who this course is for:
  • This course is for developers who want to design enhanced Uis for the front-end and build maintainable applications using Vue .js, its libraries, and toolkit.