title: How to define css styles for a vue.js component when registering that component?
body: <p>I am able to register a custom vue.js component with</p>
  <pre><code>// register
  Vue.component('my-component', {
    template: '&lt;div class=&quot;my-class&quot;&gt;A custom component!&lt;/div&gt;'
  })   
  </code></pre>
  <p>Also see <a href="https://v2.vuejs.org/v2/guide/components.html" rel="nofollow noreferrer">https://v2.vuejs.org/v2/guide/components.html</a></p>
  <p>How can I include css classes for my component?</p>
  <p>I would expect something like</p>
  <pre><code> Vue.component('my-component', {
        template: '&lt;div class=&quot;my-class&quot;&gt;A custom component!&lt;/div&gt;',
        css: '#... my css stylesheet...'
      })
  </code></pre>
  <p>but there does not seem to be a <code>css</code> option.</p>
  <p>I know that I could</p>
  <p>a) define all css classes in a global css stylesheet or</p>
  <p>b) use singe-file-vue-components (would require build tool supporing *.vue files, see <a href="https://v2.vuejs.org/v2/guide/single-file-components.html" rel="nofollow noreferrer">https://v2.vuejs.org/v2/guide/single-file-components.html</a>)</p>
  <p>but I would prefer to</p>
  <p>c) specify a css stylesheet for the component when registering the component.</p>
  <p>=&gt; How to do so?</p>