How to create an asynchronous web component on vuetify?

Question

Vue.js

I create a new project
vue create my-project

, add vuetify there and create a component

<template>
  <v-container><v-btn @click="testClick">Кнопочка 1</v-btn></v-container>
</template>

<script>
import { VBtn, VContainer } from "vuetify/lib";
import vuetify from "../plugins/vuetify";

export default {
  name: "HelloWorld",
  vuetify,
  components: {
    VBtn,
    VContainer,
  },
  data: () => {
    return {};
  },
  methods: {
    testClick: function () {
      alert("Click Ok");
    },
  },
};
</script>

compile it via

npx vue-cli-service build --inline-vue --target wc-async --name hello-world ./src/components/HelloWorld.vue

I get demo.html

<meta charset="utf-8">
<title>hello-world demo</title>
<script src="https://unpkg.com/vue"></script>
<script src="./hello-world.js"></script>

<hello-world></hello-world>

add resources to it

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>

Firstly , a button on the screen without styles (although the style file is loaded)

Secondly , I expected that the hello-world.js file would not be so big (450 Kb!), since there is almost no functionality in the component.

What am I doing wrong? And then I already tried 100,500 different options, playing with the keys and code.

ps while clicking on the button works successfully. Those. javascript Compiled successfully.

Answer 1

vue-cli-service build --inline-vuedrags the whole VUE along with it, although you then import it.
CSS is not present when building the web component.