Build next-generation applications with Vue.js!
Vue.js is awesome! Do you want to be awesome, too?
We’ve all seen them. Cool, modern, state-of-the-art websites.
Learn how they are implemented and take your web development skills to the next level!
Boost your career and stay on top of the game!
Knowing jQuery just doesn’t cut it anymore. Times have changed and technologies have evolved. Prepare yourself for the future of web development by learning Vue.js.
For beginners
- from a professional
- from a professional
All you need to know, is the basics of HTML and JavaScript. You don't have to be an expert by any means. Want to learn Vue.js as your first framework? No problem!
Learn by doing
The course starts from the beginning and includes examples and exercises, giving you the perfect balance between theory and practical exercises.
All code is available on
Rated 4.6 of 5 by more than 3,000 students
We're so confident that you will like the course that we have a 30 day money back guarantee in case you don't.
Curriculum
With more than 15 hours of video content, this is the most complete course on Vue.js
- Introduction to this section Preview
- Working with templates Preview
- Methods Preview
- A word about ES6 arrow functions Preview
- Introduction to directives Preview
- Exercises: String interpolation, methods and directives Preview
- Using expressions with directives
- Introduction to events
- Passing arguments to event listeners
- Directive & event modifiers
- Key modifiers
- Modifier keys
- Exercises: Events & modifiers
- Two-way data binding
- Security: Outputting and escaping HTML
- Rendering elements only once
- Conditionally rendering elements
- Showing and hiding elements
- Hiding elements until the Vue instance is ready
- Looping through arrays
- Accessing the loop index
- Looping through object properties
- Looping through number ranges
- Understanding the v-for update strategy
- Array change detection
- Exercises: Two-way data binding, conditionals, and loops
- Optimizing performance with computed properties
- Adding getters & setters to computed properties
- Watchers
- Exercises: Computed properties & watchers
- Filters
- Exercises: Filters
- Styling with inline CSS styles
- Styling with CSS classes
- Exercises: Styling with inline styles and classes
- Shorthands for events and bindings
- Introduction to this section
- Accessing a Vue instance outside of its declaration
- Using multiple Vue instances on the same page
- Proxying
- Understanding reactivity
- Asynchronous update queue
- Understanding the Virtual DOM Preview
- Adding watchers dynamically
- Accessing the DOM with $refs
- Mounting templates dynamically
- Using inline templates
- Destroying a Vue instance
- Vue instance lifecycle & hooks Preview
- Using lifecycle hooks
- Introduction to components
- Why the data property must be a function
- Global & Local Components
- Component naming conventions
- Creating a component in the project
- Exercises: Global, local and child components
- Organizing components
- Global & scoped styles
- Passing data to components
- Validating passed data
- Working with events
- Communicating through an event bus
- Exercises: Passing data & events
- Slots
- Named slots
- Dynamic components
- Keeping dynamic components alive
- Dynamic components lifecycle hooks
- Vue developer tool in action
- Introduction to the application Preview
- Creating components for the views
- Adding the sidebar markup
- Switching between views
- Loading messages from file
- Adding numbers to navigation menu
- Displaying the inbox
- Marking messages as important
- Displaying sent, important and trashed messages
- Displaying a message
- Automatically marking messages as read
- Navigating back to previous view
- Deleting messages
- Marking messages as read or unread
- Refreshing the inbox
- Sending messages
- Wrap up
- Introduction to transitions and animations Preview
- Understanding single element transitions
- Transitioning with CSS classes
- Implementing our first transition
- Specifying transition names
- Specifying custom transition classes Preview
- Implementing a custom CSS animation
- Mixing transitions and animations
- Transitioning between elements
- Transition modes
- Transitioning elements initially (on page load)
- Transitioning with JavaScript hooks
- Ignoring CSS classes
- Transitioning dynamic components
- Transitioning multiple elements
- Transitioning moving elements Preview
- Introduction to Single Page Applications (SPA) Preview
- Installing vue-router
- Enabling the router
- Registering routes
- Rendering routed components
- Changing the router mode Preview
- Catch-all route
- Moving routes to file
- Adding navigation links Preview
- Styling the active link Preview
- Dynamic route matching
- Linking to dynamic routes
- Named routes
- Retrieving route parameters
- Using route props
- Reacting to parameter changes
- Navigating programmatically
- Navigating in the browser’s history stack
- Redirecting
- Aliases
- Nested routes
- Query parameters
- Hash fragment
- Controlling the scroll behavior
- Named views
- Route transitions
- Route guards
- Component guards
- Global guards & meta fields
- Reacting to navigations
- Introduction to Vuex
- Why Vuex is needed
- Installing Vuex
- Setting up a simple store
- Accessing a store’s state
- Changing state
- Introduction to getters
- Implementing a getter
- Accessing other getters
- Passing arguments to getters
- Mapping getters to computed properties
- Introduction to mutations
- Implementing a mutation
- Committing mutations with payloads
- Mapping mutations to methods
- Using constants for mutation types
- Mutations must be synchronous
- Introduction to actions
- Implementing an action
- Destructuring the context argument
- Accessing getters within actions
- Using promises with actions
- Mapping actions to methods
- Two-way data binding
- Introduction to modules
- Implementing modules
- Accessing root state from getters
- Accessing root state from actions
- Adding mutations to modules
- Introduction to namespaces
- Adding namespaces
- Accessing namespaced types with helpers
- Accessing root getters from namespaced modules
- Dispatching root actions and committing root mutations
- Integration with developer tools
- Should you use Vuex?