VueJs — Unwrap slots content using the <template> tag

Jeff
Jeff
Mar 7, 2018 · 2 min read
Photo by Samuel Zeller on Unsplash

When you use slots within your components, is common to end up with a couple of extra elements wrapping your content, but there is an easy way to remove them from your rendered view.

General note:
I’m assuming you have a basic knowledge of the VueJs Template Syntax and Named Slots.

Let’s say you have a message-box component with two named slots (“header” and “body”):

Now, when you use this component inside another:

This component will be rendered as follows:

This works fine, but you actually don’t need those extra <div> around the content of each slot:

You can easily remove those<div> wrappers by using the reserved <template> tag

And the rendered result would be something like this:


Jeff

Written by

Jeff

Web developer. Always learning... #fullstack #less #sass #php #laravel #javascript #VueJs