Vue JS problems creating web components

Question

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).

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.

Here is an example of one of these components:

<template>
  <v-card dark class="mx-auto"
    outlined>
    <v-card-title>
      {{title}}
    </v-card-title>
    <v-row>
      <v-col cols="sm" v-for="stat in stats" :key="stat.text">
        <div class="col pa-4">
          <h3>{{stat.value}}</h3>
          <h5 class=" text-uppercase">{{stat.text}}</h5>
        </div>
      </v-col>
    </v-row>
  </v-card>
</template>

<script>
import {VCard, VCol, VRow} from 'vuetify'
export default {
  name: "StatusCard",
  props: {
    title: String,
    //stats: Array
  },
  components:{VCard, VCol,VRow},
  data: () => ({
      stats: [{text: 'test 1', value: 11}, {text: 'test 2', value: 22}]

  })
};
</script>

<style>
.small-icon {
  padding-bottom: 3px;
  padding-right: 5px;
}
</style>

This is how it looks in my vue app:

Now I run this line:

vue-cli-service build --target wc --inline-vue --name card-test src/components/StatusCard.vue

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:

What am I doing wrong?

Answer 1

OK so i finally got this to work, in case any one else is having the same issue. i just ended up importing the vuetify css inside my component:

<style>
@import '../../node_modules/vuetify/dist/vuetify.min.css';
</style>