Effective Front-end Development with Vue.js
- 7 hours on-demand video
- 1 downloadable resource
- Full lifetime access
- Access on mobile and TV
- Certificate of Completion
Get your team access to 4,000+ top Udemy courses anytime, anywhere.Try Udemy for Business
- 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
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
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
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
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
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
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
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
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
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 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
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
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
We’ll discuss a few popular Vuex libraries:
Talks about the types of plugins we would cover
Vuex Persisted State and Vuex Cache
Vuex Map Fields and Vuex Connect
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.
- 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.