Maintain file structure in dist using Vue and Vite library mode.

[dbzx10299]

I have a project setup for a component library and I am having some issues getting the file structure to stay the same as it is in the lib folder.

I have the following tsconfig.json files.

tsconfig.json

{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.lib.json" },
    { "path": "./tsconfig.node.json" }
  ]
}

tsconfig.lib.json

{
  "extends": "./tsconfig.app.json",
  "include": ["lib/**/*.ts", "lib/**/*.vue"]
}

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { libInjectCss } from 'vite-plugin-lib-inject-css'
import { resolve } from 'path'
import { globSync } from 'glob'
import path from 'node:path';
import { fileURLToPath } from 'node:url';
import dts from 'vite-plugin-dts'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    libInjectCss(),
    dts({ tsconfigPath: resolve(__dirname, "tsconfig.lib.json") })
  ],
  build: {
    copyPublicDir: false,
    lib: {
      entry: resolve(__dirname, 'lib/main.ts'),
      formats: ['es']
    },
    rollupOptions: {
      external: ['vue'],
      input: Object.fromEntries(
        globSync('lib/**/*.{ts,vue}', {
          ignore: ['lib/**/*.d.ts']
        }).map(file => [
          path.relative(
            'lib',
            file.slice(0, file.length - path.extname(file).length)
          ),
          fileURLToPath(new URL(file, import.meta.url))
        ])
      ),
      output: {
        assetFileNames: 'assets/[name][extname]',
        entryFileNames: '[name].js'
      }
    }
  }
})

package.json

{
  "name": "testtest",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc -b && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.5.13"
  },
  "devDependencies": {
    "@types/node": "^22.10.2",
    "@vitejs/plugin-vue": "^5.2.1",
    "@vue/tsconfig": "^0.7.0",
    "glob": "^11.0.0",
    "typescript": "~5.6.2",
    "vite": "^6.0.5",
    "vite-plugin-dts": "^4.4.0",
    "vite-plugin-lib-inject-css": "^2.1.1",
    "vue-tsc": "^2.2.0"
  },
  "main": "./dist/main.js",
  "files": [
    "dist"
  ],
  "exports": {
    ".": {
      "import": "./dist/main.js"
    }
  },
  "sideEffects": [
    "**/*.css"
  ]
}

This is the folder structure that I have and I want this to end up in /dist after running npm run build.

.
└── lib/
    ├── components/
    │   └── Button/
    │       ├── index.js
    │       └── styles.module.css
    └── main.ts

What I actually get is this and I don't know where index.vue_vue_type_script_setup_true_lang-Bvhkb65H.js is coming from. Also if I were to do the same thing in Vite with a React project, I would get the same file structure in dist as lib.

.
└── dist/
    ├── assets/
    │   └── index.css
    ├── components/
    │   └── Button/
    │       ├── index.js
    │       └── index.vue.d.ts
    ├── index.vue_vue_type_script_setup_true_lang-Bvhkb65H.js
    ├── main.d.ts
    └── main.ts

What can be done so that the output in /dist is

.
└── dist/
    ├── assets/
    │   └── index.css
    ├── components/
    │   └── Button/
    │       ├── index.js
    │       └── index.vue.d.ts
    ├── main.d.ts
    └── main.ts

[mitar]

Related: #19