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 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">

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

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

    export default {
      props: {
        url: { type: String, default: '' },

Any suggestions?

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

Otherwise, tried dynamic components?

<component :is="linkElement">
    My content
components: {

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: