[Vuejs]-Can you set custom height to a custom component in vue3?

0👍

You could add a prop to the component and then a computed property which saves the height in a css variable.

So where you import the component:

  <BaseCard :height="80vh"/>

And in the BaseCard.vue component:

<template>
    <div id="base-card" :style="cssVars"></div>
</template>

<script>
export default {
    props: ['height'],
    computed: {
      cssVars () {
        return{
          '--card-height': this.height,
        }
    }
}
<script>

<style scoped>
#base-card{
    height: var(--card-height);
}
</style>

Leave a comment