Style inside Vue.Component

Question

The question is quite simple: I can insert CSS/SCSS style inside a Vue.(), to stay within the scope of the component?

Something like

const Color = Vue.component('Color', {
    props: ['row'],
    template: '<div class="badge-color" :style="{backgroundColor: this.row.color}"></div>'

    //parte abaixo é sugestiva, apenas para ilustrar o exemplo
    style:{'.badge-color':'width:100%'}
})

The above scenario is a "mini" component within another component, just for organization. I don’t want to create a file. Separate for this, because it is something very simple - and necessary, due to the use of datatable Vuejs.

Answer 1

This is not possible outside single file Components, because the component instance in the traditional mode does not provide the style option CSS native, but the question is, should provide?

I do not think that because this encompasses the division of tasks between languages, this subject is being vehemently discussed, understand.

So this can (for now) only be done through libraries or using :style individually in which it is possible to encapsulate an object CSS for each component.

Answer 2

Updated response:

If I understand correctly, one way to solve it, is you create the component Color within the "parent" component, i.e., for nay create a new file/separate component for the component Color. In the tag style you place the classes normally, as if they were for the "Father" component, but they are being used exclusively in the "Son" component, example:

Component "Pai"

<template lang="pug"> 
  div
    color(:row="{ color: 'red' }")
</template>
<script>
  import Vue from 'vue'

  Vue.component('color', {
    props: ['row'],
    template: '<div class="badge-color" :style="{backgroundColor: this.row.color}"><p>teste</p></div>'
  })
</script>

<style lang="stylus">    
  .badge-color
    width 100%
</style>

Another way to accomplish, is to put Global in your file main.js or other configuration file, example:

main.js

import Vue from 'vue'
import App from '@/App'
import router from '@/router'
import store from '@/store'

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
}) 

Vue.component('color', {
  props: ['row'],
  template: '<div class="badge-color" :style="{backgroundColor: this.row.color}"><p>teste</p></div>'
})

And in your component you want to use the component Color, you call it normally, and insert the same way css into your tag style, example:

"Parent" component using the Color component globally

<template lang="pug"> 
  div
    color(:row="{ color: 'red' }")
</template>
<script>      
// código
</script>

<style lang="stylus">    
  .badge-color
    width 100%
</style>