• Learn Vue Js
• Vue Js Slots
• Vue Js Tutorials
• Js Vue
• Vue Js Install

While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It's on our list, and we're working on it! You can help us out by using the 'report an issue' button at the bottom of the tutorial.

The js directory – the transpiled code which is generated from our files in the src directory. The css directory – the compiled style from the SCSS files. The src directory and Vue template files. Inside this directory, there are two files: main.js and App.vue. The main.js file is the entry point for the application. It attaches the Vue app. Introduced with Vue.js 2.3.0, scoped slots have considerably improved component reusability. For example, the renderless component pattern emerged and solved the problem of providing reusable behavior and pluggable presentation. Here we’ll see how to solve the opposite problem: providing reusable presentation and pluggable behavior.

Let’s go over the renderless slot pattern in Vue and see the problems that it can help solve.

Introduced with Vue.js 2.3.0, scoped slots have considerably improved component reusability. For example, the renderless component pattern emerged and solved the problem of providing reusable behavior and pluggable presentation.

Here we’ll see how to solve the opposite problem: providing reusable presentation and pluggable behavior.

Renderless Components

This pattern applies for components that implement complex behavior and have customizable presentation.

To do so:

1. The component implements all the behavior
2. Scoped slots are responsible for the rendering
3. Fallback content ensures that the component can be used out-of-the-box.

Let’s take an example: a component performing an Ajax request and having a slot to display the result. The component handles the Ajax request and the loading state while the default slot provides the presentation.

Here a simplified implementation:

Usage:

For the original post about this pattern, check here.

A different problem

What if the problem is the contrary: imagine the main feature of a component is its presentation. On the other hand, behaviors should be customizable.

Imagine you are creating a tree component based on SVG, like this one:

You want to provide the SVG display and behavior such as retracting node and text highlighting on click.

Learn Vue Js

A problem arises when you decide to not hard-code these behaviors and let the user of the component free to override them.

A simple solution to expose these behaviors would be to add methods and events to the component.

You’ll end up with something like:

To add behavior to the component, the consumer of the component will need to use a ref in a parent component, something like:

This approach has several drawbacks:

1. It’s not possible to provide a default behavior anymore
2. Behaviors end up as a cookbook that you need to duplicate
3. Behaviors are not reusable

Let’s see how renderless slots can solve these issues.

Vue Js Slots

Renderless Slots

A behavior consists basically of proving a reaction to an event. So let’s create a slot that receives access to events and component methods:

The on attribute is the $on method of the parent component, so it’s possible to listen to all events.

Implementing a behavior can be done as a renderless component. Let’s write the expand-on-click component:

Usage:

The main advantages of this solution are:

Vue Js Tutorials

• The possibility to provide a default behavior by providing a fallback content:

For example, by declaring the graph component as:

• The possibility to create a reusable component that implements standard behavior that the component’s user can cherry pick

Let’s consider a highlight-on-hover component:

Overriding standard behavior:

• Behavior slot are composable

Let’s add two pre-defined behaviors:

• Readability of the solution

Component as behavior are self-explanatory.

• Extensibility

The on attribute gives access to all the component events. New events are by default available for the slot.

Js Vue

Wrapping Up

Renderless slots present an interesting alternative to expose method and events in a component. They provide more readable and reusable code.

Vue Js Install

The code of the tree component implementing this pattern is available on github: Vue.D3.tree