Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Vue component for slots to ensure each element has class(es) or tag
/**
* Ensures each child node (element or text) of the slot has a given tag or class.
*/
export default {
name: "SlotWrapper",
functional: true,
props: ["tag", "value"],
render: function(h, ctx) {
const { tag = "div", value: node, class: className = "" } = ctx.props;
// Render elements
if (node.tag) {
// handle given classes
node.data = node.data || {};
node.data.staticClass = (nodes.data.staticClass || "") + className;
return node;
}
// Render text
else if (!node.text.replace(/\s/g, "")) {
// ignore space nodes
return null;
}
return h(tag, [].concat(node));
},
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment