How to wrap an element with a "link"

I would like to wrap an element with a link ONLY if a link is available:

Normally I would use:

    <a v-if="url" href="url">
      <some-content></some-content>
    </a>
    <some-content v-else></some-content>

BUT this leads to a lot of code duplication, especially if some-content is complex.

I tried to use it like this:

    <wrap-link :url="url">
      <some-content></some-content>
    </wrap-link>

Where wrap-link is like the following, but I can’t get rid of the “span” in the v-else part.

    <template>
      <a v-if="url" :href="url">
        <slot></slot>
      </a>
      <span v-else>
        <slot></slot>
      </span>
    </template>

    <script>
    export default {
      props: {
        url: { type: String, default: '' },
      }
    }
    </script>

Any suggestions?

What you have should work with the wrapper component: bold-bardeen-gf6qk - CodeSandbox

Otherwise, tried dynamic components?

<component :is="linkElement">
    My content
</component>
components: {
   AppLink,
   AppLinkFallback
},

computed: {
    linkElement () {
        return this.url ? AppLink : AppLinkFallback
    }
}

You can use <component> and is

<component :is="url ? 'a' : 'span'"></component>

or render

render() {
  return h(this.url ? 'a' : 'span')
}

A good solution here: