Vue version

3.2.41

Link to minimal reproduction

https://github.com/cowith/td6578

Steps to reproduce

git clone https://github.com/cowith/td6578

cd td6578 yarn install yarn deploy yarn dev

switch to /about

======================================================================

create a component

<template>
  <div class="vite-alert">
    <div class="vite-alert__content">
      <h1 class="red">{{ message }} - {{ email }}</h1>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    email: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      message: 'Hello World',
    };
  },
};
</script>

<style scoped>
.red {
  color: red;
}
</style>

build component as lib mode

1 - export the component

import ViteAlert from './packages/alert/index.vue';

export { ViteAlert };

2 - setting the config file

import { fileURLToPath, URL } from 'node:url';
import { resolve } from 'node:path';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue({
      compilerOptions: {},
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
  build: {
    outDir: 'lib',
    lib: {
      entry: resolve(__dirname, './src/comp.js'),
      name: 'MyLib',
      formats: ['es', 'umd'],
      fileName: format => `my-lib.${format}.js`,
    },
    rollupOptions: {
      external: ['vue'],
      output: {
        globals: {
          vue: 'Vue',
        },
      },
    },
  },
});

======================================================================

host the lib files

http-server ./lib --cors

====================================================================== use in AboutView.vue

<script type="module" setup>
// import { ViteAlert } from 'http://127.0.0.1:3001/my-lib.es.js';
</script>

<template>
  <div class="about">
    <ViteAlert email="google.com"></ViteAlert>
    <h1 class="red">This is an about page</h1>
  </div>
</template>

<script type="module">
import { ViteAlert } from 'http://127.0.0.1:3001/my-lib.es.js';
// import ViteAlert from '../packages/alert/index.vue';
export default {
  components: {
    ViteAlert,
  },
};
</script>

<style scoped>
.red {
  color: red;
}
</style>

What is expected?

text should be red

What is actually happening?

the __scopedId not render on the DOM

System Info

No response

Any additional comments?

No response

The lib itself does not insert the generated CSS. You need to explicitly import the CSS.