Vue.js conditional module styles

Question

I want to separate the styles in a Vue.js component in modules. Each style module will have far more than just a class, and new classes will be added regularly. So, it will be hard to change the entire component's template. So, I'm looking for a more practical solution.

I came with the idea of, using a v-if in the styles, but not exactly sure how it should be implemented or if such thing is possible after all.

It will be way more practical, if just depending on the name sent with props, the entire styles changes.

<template>
  <div class="color-text">
    Text in the color of the class with just the name
  </div>
</template>

<script>
export default {
  name: 'comp',
  props: ['name']
}
</script>

<!-- General styles -->
<style scoped>
div{
  float: right;
}
</style>

<!-- red styles -->
<style module v-if="name === 'red'">
  .color-text{
    color: red;
  }
</style>

<!-- blue styles -->
<style module v-if="name === 'blue'">
  .color-text{
    color: blue;
  }
</style>

<!-- green styles -->
<style module v-if="name === 'green'">
  .color-text{
    color: green;
  }
</style>

Possible duplicate of Vue.js: Conditional class styling

thanksd
– thanksd

2017-09-14 16:55:30 +00:00
Commented Sep 14, 2017 at 16:55 — thanksd
– thanksd, Commented Sep 14, 2017 at 16:55

Justin MacArthur · Accepted Answer · 2017-09-14 20:22:54Z

1

If I was tackling this I'd use a transitive class value. and not worry about props at all.

<template>
  <div class="color-text">
    Text in the color of the class with just the name
  </div>
</template>

<script>
export default {
  name: 'comp'
}
</script>

<!-- General styles -->
<style scoped>
  div{
    float: right;
  }

  .red .color-text{
    color: red;
  }

  .blue .color-text{
    color: blue;
  }

  .green .color-text{
    color: green;
  }
</style>

then you can use the class property to pass in your color type

<div id="app">
    <comp class="red"></comp>
    <comp class="green"></comp>
    <comp class="blue"></comp>
</div>

I've put together an example jsfiddle though it may need some tweaking when it comes to scoped styles and how webpack handles the injection

answered Sep 14, 2017 at 20:22

Justin MacArthur

4,05024 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue.js conditional module styles

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related