[Vuejs]-How to apply CSS class to child component with two root nodes?

0👍

So, you are trying to assign classes to a component, but your component contains fragments.

Wrap your Child.vue component tags:

<template>
  <div>
    <v-alert type="warning" title="Contains button to display dialog" />
    <v-dialog>
      dialog goes here
    </v-dialog>
  </div>
</template>

enter image description here

0👍

Yes you can!
First thing you need to do is to specify the

inheritAttrs: false

option in your alert component:

<script>
  export default {
   inheritAttrs: false,
  }
</script>

and than you can apply class attribute to the desired component using

:class="$attrs.class"

But you must know, that now every other attribute must be specified in code using $attrs, because your component would not apply them by default anymore

More on this topic can be found here Vue Docs

Leave a comment