cssvue.jsnuxt.jsvue-props

How to change component css with props with Nuxt Js Vue js


I'm new to Nuxt and Vue, thanks for being indulgent ;). I have a "Subtitle" component that I use in another "Main" component (names are for the example).

How can I change the css of the "subtitle" component from the "Main" component ?

Here "Subtitle" component :

<template>
    <div>
       <h1 :class="data">{{ title }}</h1>
    </div>
</template>
<script>
export default {
    name: 'subtitle',
    props: {
        title: String,
    }
}
</script>

And here my "Main" component :

<template>
    <div class="container">
        <Subtitle :title="title""></Subtitle>           
    </div>
</template>

I searched with the props etc.... But now I've been on it for a while and I'm blocking.

Thanks for your help!


Solution

  • You can do it using the combination of props and computed

    Subtitle Component

    <template>
        <div>
           <h1 :style="getStyle">{{ title }}</h1>
        </div>
    </template>
    <script>
    export default {
        name: 'subtitle',
        props: {
            stylings: Object,
        },
       computed: {
        getStyle() {
          return this.stylings;
        }
       }
    }
    </script>
    

    Main Component

    <template>
        <div class="container">
            <Subtitle :stylings="customStyle"></Subtitle>           
        </div>
    </template>
    export default {
        name: 'subtitle',
        data() {
            return {
              customStyle: {
                  'font-weight': 'Bold',
          }
        }
    }