I built a library project (Vue 3, Vite) and I want to include it in a host project via package.json.

But I faced a problem where I can import the ponents and run a simple programme with those imported ponents but their styles are gone.

Please let me know what is wrong with my config. It doesn't make sense when I have to manually import css into my host project.

Just to clarify, I don't have any .css source files in my project. style.css was piled from my *.vue ponents

This is the vite.config.ts for my library project. Everything that I need exported is in src/.

// Library project
import { defineConfig } from "vite"

import vue from "@vitejs/plugin-vue"

import typescript from '@rollup/plugin-typescript';

const path = require("path")
// /config/
export default defineConfig( {
  plugins: [{
    ...typescript( { tsconfig: "./tsconfig.json" } ),
    apply: "build",
    declaration: true,
    declarationDir: "types/",
    rootDir: "/",
  }, vue()],
  resolve: { alias: { "@": path.resolve(__dirname, "./src") } },
  build: {
    lib: {
      entry: path.resolve(__dirname, "src/index.ts"),
      name: "gsd-vue-egui",
      // fileName: (format) => `gsd-vue-egui.${format}.js`,
    },
    rollupOptions: {
      external: ["vue"],
      output: {
        // Provide global variables to use in the UMD build
        // Add external deps here
        globals: { vue: "Vue" },
      },
    },
  },
  server: {
    port: 30001,
  }
} )

And this is the relevant part of my package.json

{
  "name": "gsd-vue-egui",
  "private": true,
  "version": "0.0.0",

  "scripts": {
    "preinstall": "npx npm-force-resolutions",
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook",
    "test": "npm run test:unit",
    "test:unit": "jest --config=jest.config.js test",
    "lint:css": "stylelint --formatter verbose --config .stylelintrc \".\" --fix",
    "lint:eslint": "eslint --ext js,vue,ts \".\" --fix",
    "lint": "npm run lint:css && npm run lint:eslint"
  },
  ...
}

The structure of my dist/ folder after running npm run build is as follows:

dist/
|-ponents/
|  |-Button.vue.d.ts
|-App.vue.d.ts
|-MyLibraryName.es.js
|-MyLibraryName.umd.js
|-index.d.ts
|-main.d.ts
|-style.css

I built a library project (Vue 3, Vite) and I want to include it in a host project via package.json.

But I faced a problem where I can import the ponents and run a simple programme with those imported ponents but their styles are gone.

Please let me know what is wrong with my config. It doesn't make sense when I have to manually import css into my host project.

Just to clarify, I don't have any .css source files in my project. style.css was piled from my *.vue ponents

This is the vite.config.ts for my library project. Everything that I need exported is in src/.

// Library project
import { defineConfig } from "vite"

import vue from "@vitejs/plugin-vue"

import typescript from '@rollup/plugin-typescript';

const path = require("path")
// https://vitejs.dev/config/
export default defineConfig( {
  plugins: [{
    ...typescript( { tsconfig: "./tsconfig.json" } ),
    apply: "build",
    declaration: true,
    declarationDir: "types/",
    rootDir: "/",
  }, vue()],
  resolve: { alias: { "@": path.resolve(__dirname, "./src") } },
  build: {
    lib: {
      entry: path.resolve(__dirname, "src/index.ts"),
      name: "gsd-vue-egui",
      // fileName: (format) => `gsd-vue-egui.${format}.js`,
    },
    rollupOptions: {
      external: ["vue"],
      output: {
        // Provide global variables to use in the UMD build
        // Add external deps here
        globals: { vue: "Vue" },
      },
    },
  },
  server: {
    port: 30001,
  }
} )

And this is the relevant part of my package.json

{
  "name": "gsd-vue-egui",
  "private": true,
  "version": "0.0.0",

  "scripts": {
    "preinstall": "npx npm-force-resolutions",
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook",
    "test": "npm run test:unit",
    "test:unit": "jest --config=jest.config.js test",
    "lint:css": "stylelint --formatter verbose --config .stylelintrc \".\" --fix",
    "lint:eslint": "eslint --ext js,vue,ts \".\" --fix",
    "lint": "npm run lint:css && npm run lint:eslint"
  },
  ...
}

The structure of my dist/ folder after running npm run build is as follows:

dist/
|-ponents/
|  |-Button.vue.d.ts
|-App.vue.d.ts
|-MyLibraryName.es.js
|-MyLibraryName.umd.js
|-index.d.ts
|-main.d.ts
|-style.css

• javascript
• typescript
• vuejs3
• vite
• npm-build

• were you able to make this work? – Forkmohit Commented Apr 22, 2023 at 4:21
• 1 I haven't been able to make this work. A bounty was offered by a kind soul but no one took it up – Beast Commented Aug 23, 2023 at 1:23

1 Answer 1

You need to manually import your CSS because you are shipping JS and CSS files independently in your package. If you don't want to manually import your CSS, you need to package your SFC files for npm. This is the document for Vue 2, but its idea can totally apply to Vue 3.

Here are some points to note:

• You must ship your .vue files along with your npm package by NOT adding the /src folder to the .npmignore file
• In your host project, import your .vue file directly from your package import YourComponent from 'your-package/src/your-ponent.vue'
• This approach will not work for anyone who wishes to use the ponent directly in a browser via the <script> tag, anyone who uses a runtime-only build or build processes which don’t understand what to do with .vue files
• Some ponents might provide side effects like directives, or extend other libraries with additional functionality
• Manually importing CSS files will never be a bad idea and almost all the Vue packages I know use that approach