How to pass vuetify components correctly into vueJs component dynamically

Question

I have this in my data;

data(){
    text: 'Go to <v-btn> to="profile">Profile</v-btn>'}

Now I need to render this with the html in my component. I tried using this <div v-html="text"></div> but it wouldn't render. What is the right way to do this.

Answer 1

I think this might help you. The v-btn has an extra >.

<div>
   Go To<v-btn :to="{name:'nameofcomponent'}">Profile</v-btn>
</div>

Name of the component will be the name that you've defined in your routes for your component. For ex:

{
 path: "/profile",
 name: "profile",
 component: () => import("path to profile file")
},

Answer 2

As stated in the docs, you cannot compose a template using v-html and also is it prone to XSS attack.

If you want to compile the template, you can use v-runtime-template, this will accept your template and compile it to display the vuetify components.