title: Vue JS problems creating web components
body: <p>I am trying to create a web component from a vue component but I am having some issues.
  The reason behind this is I am creating a new project with vue, but my manager wants me to be able to use all the components I'm writing to our existing project which is quite a complex web app, without any frameworks (only vanilla and jquery).</p>
  <p>The problem I'm facing is when I try to do this with components which use third party libraries such as vuetify.
  This simply does not work as expected and the styling is not being applied when I use the web component in a non-vue app.</p>
  <p>Here is an example of one of these components:</p>
  <pre><code>&lt;template&gt;
    &lt;v-card dark class=&quot;mx-auto&quot;
      outlined&gt;
      &lt;v-card-title&gt;
        {{title}}
      &lt;/v-card-title&gt;
      &lt;v-row&gt;
        &lt;v-col cols=&quot;sm&quot; v-for=&quot;stat in stats&quot; :key=&quot;stat.text&quot;&gt;
          &lt;div class=&quot;col pa-4&quot;&gt;
            &lt;h3&gt;{{stat.value}}&lt;/h3&gt;
            &lt;h5 class=&quot; text-uppercase&quot;&gt;{{stat.text}}&lt;/h5&gt;
          &lt;/div&gt;
        &lt;/v-col&gt;
      &lt;/v-row&gt;
    &lt;/v-card&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import {VCard, VCol, VRow} from 'vuetify'
  export default {
    name: &quot;StatusCard&quot;,
    props: {
      title: String,
      //stats: Array
    },
    components:{VCard, VCol,VRow},
    data: () =&gt; ({
        stats: [{text: 'test 1', value: 11}, {text: 'test 2', value: 22}]
  
    })
  };
  &lt;/script&gt;
  
  &lt;style&gt;
  .small-icon {
    padding-bottom: 3px;
    padding-right: 5px;
  }
  &lt;/style&gt;
  </code></pre>
  <p>This is how it looks in my <strong>vue app</strong>:</p>
  <p><a href="https://i.stack.imgur.com/KxfhF.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KxfhF.jpg" alt="component inside vue" /></a></p>
  <p>Now I run this line:</p>
  <pre><code>vue-cli-service build --target wc --inline-vue --name card-test src/components/StatusCard.vue
  </code></pre>
  <p>and I get all the files, when I start a simple HTTP server and serve the demo.html file that was created, this is what I get:</p>
  <p><a href="https://i.stack.imgur.com/08DwY.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/08DwY.jpg" alt="enter image description here" /></a></p>
  <p>What am I doing wrong?</p>