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

**(Select all that apply.)** Which of the following are parts of a Vuex store?

(Select all that apply.) Which of the following are parts of a Vuex store?

**(Select all that apply.)** When it comes to mutations and actions, which can trigger which?

(Select all that apply.) When it comes to mutations and actions, which can trigger which?

**(True or False)** Vuex follows the MVC pattern.

(True or False) Vuex follows the MVC pattern.

**(True or False)** We should always use actions to make API requests.

(True or False) We should always use actions to make API requests.

`this.$store.commit('myModule', 'myMutation', payload)`

`this.$store.commit('myModule/myMutation', payload)`

`this.$store.commit('myModule__myMutation', payload)`

`this.$store.dispatch('myModule/myMutation', payload)`

Which of the following is the correct syntax to commit the mutation myMutation from the submodule myModule with a `payload`?

Which of the following is the correct syntax to commit the mutation myMutation from the submodule myModule with a <code>payload</code>?

**(True or False)** Each module is always namespaced.

(True or False) Each module is always namespaced.

Keep the API away from the store at all costs. A component should know where the data comes from, and the store should simply keep the data.

Keep all the API requests in actions. That way, they can be triggered by any component but are centralized in their behavior and implementation.

To mitigate over-fetching, request every single field individually by chaining actions.

To mitigate under-fetching, load everything you could possibly need upfront.

When handling APIs (REST or GraphQL) with Vuex, what is considered good practice?

When handling APIs (REST or GraphQL) with Vuex, what is considered good practice?

**(True or False)** Vuex plugins let you add mutations and actions to existing stores.

(True or False) Vuex plugins let you add mutations and actions to existing stores.

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: Vuex