Publishing a component library with Vite, Vue 3 and Typescript to npm

Question

I'm attempting to publish a Vue 3 component library with Vite. I've written it in Typescript. However, I'm running into an issue whereby my type definitions aren't being carried across to the package.

When importing the component in another project, I am seeing the following issue:

Try `npm i --save-dev @types/repo__mypackagename` if it exists or add a new declaration (.d.ts) file containing `declare module '@repo/mypackagename';

I get that I need to provide a declaration file, but I'm wondering how the is achieved specifically with Vite & Vue 3...

Useful parts of my package.json file:

{
  ...
  "files": [
    "dist"
  ],
  "main": "./dist/celestia-vue.umd.js",
  "module": "./dist/celestia-vue.es.js",
  "exports": {
    ".": {
      "import": "./dist/celestia-vue.es.js",
      "require": "./dist/celestia-vue.umd.js"
    }
  },
  "unpkg": "./dist/celestia-vue.umd.js",
  "jsdelivr": "./dist/celestia-vue.umd.js",
  "scripts": {
    "vite:dev": "vite",
    "serve": "vue-cli-service serve",
    "vite:serve": "vite preview",
    "build": "vue-cli-service build",
    "vite:build": "vue-tsc --noEmit && vite build",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint"
  },
  ...
}

My tsconfig.json:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "lib": [
      "es6",
      "esnext",
      "es2016",
      "dom",
      "dom.iterable",
      "scripthost"
    ],
    "allowJs": true,
    "declaration": true,
    "sourceMap": false,
    "outDir": "dist",
    "rootDir": "",
    "importHelpers": true,
    "strict": true,
    "noImplicitAny": true,
    "moduleResolution": "node",
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "types": [
      "webpack-env",
      "jest"
    ],
    "allowSyntheticDefaultImports": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules",
    "dist",
    "test"
  ]
}

I also have the following vite.config.ts file:

import { defineConfig } from 'vite'

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

import { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    {
      ...typescript({ tsconfig: './tsconfig.json' }),
      apply: 'build',
      declaration: true,
      declarationDir: 'types/',
      rootDir: '/'
    },
    vue()
  ],
  resolve: {
    alias: {
      '@': resolve(__dirname, '/src'),
    },
  },
  build: {
    lib: {
      entry: resolve(__dirname, 'src/index.ts'),
      name: 'celestia-vue',
    },
    rollupOptions: {
      external: ['vue'],
      output: {
        sourcemap: false,
        // Provide global variables to use in the UMD build
        // for externalized deps
        globals: {
          vue: 'Vue'
        }
      }
    }
  }
})

The output of the build process is into the dist folder:

I'm hoping there is something simple I am missing ... maybe in the vite.config.ts file, or elsewhere in my code.

N.B. The organisation of my Vue 3 component library is as follows if helpful:

Answer 1

https://www.typescriptlang.org/docs/handbook/declaration-files/publishing.html#including-declarations-in-your-npm-package

Have you tried adding the "types" property? I can see your dist folder contains the main.d.ts file so it should be a matter of just making it be recognized (by adding that property)