[Vuejs]-Vue vuetify 3 slots not working properly with icons

by

0👍

I guess, to achieve it you have to use Vue Render Functions: h() and resolveComponent()

Like the IconSlot does

const IconSlot = {
  setup(props, {slots}) {    
    const vIcon = resolveComponent('v-icon');
    return () => h(vIcon, null, slots.default());
  }
}

I would better do it then over props, like the IconProp does

const IconProp = {
  props: ['icon'],
  template: `<v-icon :icon="icon"></v-icon>`
}

and then

<icon-prop icon="mdi-vuetify"></icon-prop>

Here is the playground

const { createApp, h, resolveComponent } = Vue;
const { createVuetify } = Vuetify;

const Icon = {
  template: `<v-icon><slot></slot></v-icon>`
}

const IconProp = {
  props: ['icon'],
  template: `<v-icon :icon="icon"></v-icon>`
}

const IconSlot = {
  setup(props, {slots}) {    
    const vIcon = resolveComponent('v-icon');
    return () => h(vIcon, null, slots.default());
  }
}

const App = { components: { Icon, IconProp, IconSlot } }

const vuetify = createVuetify();
const app = createApp(App);
app.use(vuetify);
app.mount('#app');
#app { line-height: 3; }
[v-cloak] { display: none; }
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@3.1.4/dist/vuetify.min.css" />
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet" />
<div id="app">
  1. v-icon: <v-icon icon="mdi-vuetify"></v-icon><br/>
  2. icon: <Icon>myprefix-plus</Icon> <br/>
  3. icon-prop: <icon-prop icon="mdi-vuetify"></icon-prop><br/>
  4. icon-slot: <icon-slot>mdi-vuetify</icon-slot> 
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@3.1.4/dist/vuetify-labs.min.js"></script>

0👍

You can get the content of the default slot by executing its render function:

import { useSlots } from 'vue'

const iconName = useSlots().default()[0].children

Have a look at how Vuetify’s VIcon does it.

Leave a comment