Conditional Root Tag on Vue Component

Question

My Question

I have a Vue component that renders content like so:

<template>

    <div class="item">
        <h1>{{ title }}</h1>
        <p>{{ contents }}</p>
        <!-- Lot's of other stuff... -->
    </div>

</template>

<script>
    // export default...
</script>

<style lang="scss">
    // style...
</style>

Note the contents within the div...

In some circumstances, I need to change <div class="item"> to <a class="item">. With that in mind, is there a way to conditionally change the tag (e.g. a, div) for the root element of a Vue component?

Research

I have searched around online and was able to find something about using the render function like so:

render (createElement) {
    return createElement(this.tag, {}, this.$slots.default);
}

The issue I have with the above is that it implies that I need two separate components, for example; Item.vue and ItemTag.vue. Surely there is a way to do this with one component?

Answer 1

I believe you could use is:

<div :is="useA ? 'a' : 'div'">
    ...
</div>

This isn't quite what the docs suggests it's for but it does seem to have the desired effect.

https://v2.vuejs.org/v2/api/#is

Using a render function instead wouldn't necessarily require you to have two components but it would need you to rewrite your entire template as a render function.