Vue Slots Tutorial

1. Vue Tutorial Youtube
2. Vue Js Slots
3. Vue Slots Tutorial App
4. Vue Slot Example
5. Vue Slot Class

Vue introduces Composition API (Function-based API) as an addition to current Options-based API. The API will be released with Vue 3, but now you can try it with Vue 3 Composition API added to your Vue 2 app. In this tutorial, we’re gonna show you:

• New Vue Composition API overview and comparison with classic Vue Options-based API
• Examples to implement a Vue Component with new API: props, data, watchers, lifecycle hooks
• Example to take advantage of new Vue 3 Composition API (function-based API): split Topics into Functions

Related Post: Vue v-slot tutorial with examples

With Vue 3, we have a new Vue Router that uses Vue 3, with many features similar to Vue 3, but there are a few differences from Vue 2. In this tutorial section, we'll introduce you to Vue Router for Vue 3, with example code. The Vue router enables you to create single pages apps with multiple views using the latest Vue 3 library. If you have no idea how to proceed, the good news is that after reading this article, you will understand most of the things you should know about a handy Vue.js feature: slots. When I started with Vue.js, I was not using slots very much. But to be honest with you, now, it’s one of my favorite features. It makes things so much easier when.

Contents

• If you have no idea how to proceed, the good news is that after reading this article, you will understand most of the things you should know about a handy Vue.js feature: slots. When I started with Vue.js, I was not using slots very much. But to be honest with you, now, it’s one of my favorite features. It makes things so much easier when.
• .wrapper. will target every slot element. If you need to target only a specific slot element, you can use.wrapper.:nth-child(2) or.wrapper.child.What specifically are you trying to do?

• Vue Composition API examples

What’s changed when Vue Composition API is added?

Everything will still work as it works before. Almost things don’t change:

• CLI
• Template syntax
• Object format
• Reactivity system
• Concepts of computed properties, watchers & component lifecycle
• SFC format
• Progressive nature of Vue framework

Options-based API vs Composition API

The difference of current Options-based API concept vs new Composition API (Function-based API) concept is the way we think of what a component contains:

• Options-based API: A component contains types of properties/methods/options.
• Composition API: A component encapsulates logical topics into functions.

Component options could become complicated to be organized and hard to maintain (monster component). A logical topic could involve properties in props and data(), some methods, a certain hook (beforeMount/ mounted), and a watcher in watch. Hence one single topic will be fragmented across multiple options.

With Composition API, every function, which is a part of the big component, encapsulates all the code related to the logical topic (properties, methods, hooks, watchers). Now that smaller code (function) can be reused, and well-organized.

Use Vue 3 Composition API in current Vue 2 project

We can use new Vue 3 Composition API in our current Vue 2.x project by installing @vue/composition-api module.

It is so easy, just run the command:

Or

Then import it in main.js.

Vue setup() function

setup() is the new component option that we will use new Vue Composition API to setup the logic (logical topics) of the component. If setup() function becomes complex, we can easily split it into multiple functions with corresponding to logical topics.

When setup() is called?
It is called after props resolution, when an instance of the component is created.

Now look at the Vue component with setup() function:

The function has 2 arguments:
– props
– context

context has properties (attrs, slots, emit, parent, root) that are corresponding to this.$attrs, this.$slots, this.$emit, this.$parent, this.$root.

We can also destructure them with the latest values even after updates:

*Note:this keyword is not available inside setup() function.

So this.$emit cannot be used like this:

this.$refs with new Composition API

To get a reference to an element or component instance in the template, we use ref API so that setup() can return reactive and mutable object for render context.

ref automatically unwraps to the inner value, so we don’t need to append .value in the template: {{ name }} is enough, not {{ name.value }}.

Vue Composition API examples

In this section, we’re gonna show you examples that use new API along with old Vue2 options-based API syntax.

Vue Composition API Computed Values

Vue2 options-based API syntax:

Vue 3 Composition API syntax:

With new computed API, we can create a writable ref object with get and set functions.

Vue Composition API Watchers

This is how we use Vue2 options-based API syntax:

Like watch option, we can use new Vue watch API to perform side effect everytime a state is changed.

The syntax is: watch(source, callback, options)

• source: could be a getter function, a value wrapper, or an array containing the two above types (in case of watching multiple sources)
• callback: is the function like Vue2 watcher handler function, with 2 arguments: newVal, oldVal. Each argument could be an array (for watching multiple sources): [newVal1, newVal2, ... newValN], [oldVal1, oldVal2, ... oldValN]
• options (optional): is used for configuring watcher type containing: lazy, deep, flush.

For more details about WatchOption, please visit: api#watch.

In case we want to watch multiple sources:

We can also split the multiple sources watcher into smaller watchers. This helps us organize our code and create watchers with distinct options:

Vue Composition API Lifecycle Hooks

With Vue2, we implement Lifecycle Hooks functions by this way:

Vue Tutorial Youtube

New Vue 3 Composition API has equivalent functions, we can use those with on prefix inside setup() function:

You can see the mapping between Lifecycle Vue2 Options and Composition API in the following table:

Encapsulate logical Topics into Functions

Now we combine all code above into one Vue Component, you can see a complex component with multiple topics. We need to implement logic for title, for todo, for items:

It comes time to take advantage of Vue Composition API: split complex component into multiple functions with corresponding to logical topics:

The results:

It works like a charm.
We can easily view each topic by its own function. Each topic has its own props, data, watchers, methods. Our component now only need to inject these functions and return them inside its setup() function.

Fantastic!

Vue Js Slots

Conclusion

Maybe you feel comfortable when using the old Vue options-based API, or maybe you don’t like to think of everything as functions but properties/methods with OOP mindset. The creators are developing Vue, make it better year after year and give us more options. Just try it and feel the good.

Vue Slots Tutorial App

Happy learning! See you again!

Source Code

Vue Slot Example

You can find the complete source code for this ‘Vue Composition Api example’ on Github.

Vue Slot Class

Further Reading