In this course you'll learn some advanced concepts of VueJS and how to leverage them to get the most out of the framework.

Advanced VueJS concepts- Build apps more efficiently.png

vue3_w_deps_and_apis.tar.gz

Vue3 + APIs

VueJS is a modern JavaScript frontend framework. Many popular websites use it for simplicity and performance every day. Vue offers a wide range of features to customize behavior, extend it, and use it for a variety of projects.

In this course, you will learn about some of the advanced features of Vue by learning all about Vue’s lifecycle hooks, reusing code, handling events, and creating custom form controls. You’ll then cover advanced templating concepts before learning about internationalization and gaining a deeper understanding of Vue. Then, you’ll learn how to create complex applications with Vuex and your own plugins, along with state handling communication with APIs. At the end, a selection of libraries and plugins is built as a more frequently reusable code for Vue.

This course requires a basic understanding of Vue to take full advantage of its contents. The practical examples discussed in this course will give you an edge in developing cleaner reusable code efficiently.

Advanced VueJS: Build Better Applications Efficiently

Imagine the following. You have a component that displays the user’s avatar and username in the top navigation and a component that allows the user to edit their avatar and username. Both need to load user data. Where would you put the user data loading?

Imagine the following. You have a component that displays the user’s avatar and username in the top navigation and a component that allows the user to edit their avatar and username. Both need to load user data. Where would you put the user data loading?

Create an abstract card component that handles most of the logic and make both card components inherit from it.

Remove duplicated logic from the more complex card and make it inherit from the more basic one.

Imagine the following. You have two different card components—one with tags, an image, and text and one with text only. You notice a lot of code duplication. How would you make the code reusable?

Imagine the following. You have two different card components—one with tags, an image, and text and one with text only. You notice a lot of code duplication. How would you make the code reusable?

In a base component. The functionality can be implemented in child components that are renderless.

Keep them separate. The changed/missing functionality makes them too different.

Imagine the following. You have two components that render a single article. The template looks the same. However, there’s some functionality that one component offers and the other doesn’t and vice versa. The loading of the article is the same.

Where would the template be located?


Imagine the following. You have two components that render a single article. The template looks the same. However, there’s some functionality that one component offers and the other doesn’t and vice versa. The loading of the article is the same.
Where would the template be located?

In the `mounted` hook of a global component that every other component inherits.

In a renderless component that wraps everything related to the list of articles.

Imagine you need to track something. Every time the user scrolls through a list component related to articles, you need to track the number of pixels they scrolled to give them a metric of how many miles they already spent on your page. There are many different such components—the user’s dashboard with selected articles in a card fashion, a search with a simple list, and an article’s detail view. Sometimes, there are multiple lists on the same page.

Where would we put such a scroll listener?

Imagine you need to track something. Every time the user scrolls through a list component related to articles, you need to track the number of pixels they scrolled to give them a metric of how many miles they already spent on your page. There are many different such components—the user’s dashboard with selected articles in a card fashion, a search with a simple list, and an article’s detail view. Sometimes, there are multiple lists on the same page.
Where would we put such a scroll listener?

In which order are setup lifecycle hooks executed when a Base component both uses a mixin and is inheriting from a parent component?

In which order are setup lifecycle hooks executed when a Base component both uses a mixin and is inheriting from a parent component?

Yes, a mixin is a component, just like any other component.

When Vue isn’t doing what you want it to do.

When they’re overwritten and you want to get rid of extra hooks coming from mixins.

In which case is it recommended to use custom merge strategies?

In which case is it recommended to use custom merge strategies?

Intend it as a mixin to keep templating lean and let the user take care of the templating.

Intend it to inherit from and let the user take care of the templating.

Develop two components, one that contains the logic and is renderless and one that contains the template and inherits from the mixin. This way, the user can choose.

Develop a single component with templating and logic, all in one place.

**(Select all that apply.)** Imagine you’re developing a library that offers animations for components. Say you’re developing an `animate` component for that. What’s the best structure for users of the library?

(Select all that apply.) Imagine you’re developing a library that offers animations for components. Say you’re developing an <code>animate</code> component for that. What’s the best structure for users of the library?

Quiz: Reusable Code

Quiz: Reusable Code

Test your knowledge about mixins, renderless components, and inheritance.

Introduction and Course Goals

Lifecycle Hooks

Reusable Code

Event Handling

Form Controls

Templating

Internationalization

Understanding Vue on a Deeper Level

Vuex

Appendix - Libraries and Plugins

Wrap-Up and Farewell

Quiz: Reusable Code