Adding style inside Vue components' template without using vue-loader

app-style.js

// app-style.js
// adding <style></style> directly inside template will result in error or empty element which
// this component is trying to address
// this will allow you to dynamically insert css inside Vue template without the use of vue loader
// or if you do not want to use .vue extension at all
// however it doesnt really apply scope css (for now).
export default {
  name: 'app-style',
  data: function(){
    return {
      style: ''
    }
  },
  created: function () {
    this.$slots.default.forEach((val, index) => {
      this.style += val.text
    }) 
  },
  mounted: function() {
    // create <style/>
    const styl = document.createElement('style')
    const txtNode = document.createTextNode(this.style)
    // replace current node
    styl.append(txtNode)
    this.$el.replaceWith(styl)
  },
  template:'<span><!-- please see styling in head section--></span>'
}

custom-component.js

/**------------------------------------------------------------------------------------------------------
| another Vue component
--------------------------------------------------------------------------------------------------------*/
import appStyle from './app-style'
import style from './your-style-file'

export default {
  data: { },
  components: {
    'app-style':  appStyle, // app-style component
  },
  template: `
      <app-style>${style.toString()}</app-style>
      <another-custom-component></another-custom-component> 
      <app-sidebar></app-sidebar>
  `
}