Vuetify v-btn how to remove follow up slot span tag

Question

I'm trying to remove the span tag which follow up in the v-btn component provided by Vuetify, that is getting in the way of tracking via HTML id attributes in analytics

Code provided below using UI component (v-btn) from Vuetify

<v-btn
   id="btn-home-sectionSix-partner"
   to="/about/partnership"
   class="ma-2 HomeLastBtn textBtn text-center"
   outlined
   style="text-align: -webkit-center;"
 >Become a partner
</v-btn>

Renders the following in browser

<a data-v-fae5bece="" 
 href="/about/partnership" 
 class="ma-2 HomeLastBtn textBtn text-center v-btn v-btn--outlined v-btn--router theme--light v-size--default" 
 id="btn-home-sectionSix-partner" 
 style="text-align: -webkit-center;"
>
 <span class="v-btn__content">
   Become a partner
 </span>
</a>

As mentioned above, I do not want the text in the span tag, but in the a tag directly

<a data-v-fae5bece="" 
 href="/about/partnership" 
 class="ma-2 HomeLastBtn textBtn text-center v-btn v-btn--outlined v-btn--router theme--light v-size--default" 
 id="btn-home-sectionSix-partner" 
 style="text-align: -webkit-center;"
 >
  Become a partner
</a>

I have referred to the following sources but not getting the answer I want.

• Vuetify V-Btn API
• How to use Vuetify Component Slot Function

Have also tried the following

<a data-v-fae5bece="" 
  href="/about/partnership" 
  class="ma-2 HomeLastBtn textBtn text-center v-btn v-btn--outlined v-btn--router theme--light v-size--default" 
  id="btn-home-sectionSix-partner" 
  style="text-align: -webkit-center;"
>
 <template v-slot:default>
   Try For Free Now
 </template>
</a>

But leads to the same result above.

Thanks & appreciate all the help I can get.

Answer 1

The V-Btn component have a genContent function implementation which will be invoked to generate the child elements while rendering the root component. By default it provides the following implementation.

genContent (): VNode {
  return this.$createElement('span', {
    staticClass: 'v-btn__content',
  }, this.$slots.default)
}

As you can see it creates a span element with a static class v-btn__content .That's why the text is rendered with in the span tag.

So to answer your question, you might have to extend the V-btn component and provide your own implementation of genContent function. The official doc provides a sample example(codepen) on how to extend the componet and override the genContent(which is copied below)

// src/components/ActivateBtn
import { VBtn } from 'vuetify/lib'

export default {
  extends: VBtn,

  methods: {
    // Here we overwrite the genContent method of VBtn
    // to override the default genContent method
    genContent() {
      return this.$createElement('div', {
        staticClass: 'v-btn__contents'
      }, [
        'Activate ',
        this.$slots.default
      ])
    }
  }
}