├── src
├── index.ts
├── main.ts
├── assets
│ ├── logo.svg
│ └── base.css
├── App.vue
└── components
│ └── MyButton.vue
├── public
└── favicon.ico
├── env.d.ts
├── index.html
├── .gitignore
├── tsconfig.json
├── vite.config.ts
├── package.json
└── README.md
/src/index.ts:
--------------------------------------------------------------------------------
1 | export { default as MyButton } from './components/MyButton.vue';
2 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/josip2312/typescript-lib-vite/HEAD/public/favicon.ico
--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue'
2 | import App from './App.vue'
3 |
4 | createApp(App).mount('#app')
5 |
--------------------------------------------------------------------------------
/env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
3 | declare module '*.vue' {
4 | import { DefineComponent } from 'vue'
5 | // eslint-disable-next-line
6 | const component: DefineComponent<{}, {}, any>
7 | export default component
8 | }
9 |
--------------------------------------------------------------------------------
/src/assets/logo.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vite App
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | .DS_Store
12 | dist
13 | dist-ssr
14 | *.local
15 |
16 | /cypress/videos/
17 | /cypress/screenshots/
18 |
19 | # Editor directories and files
20 | .vscode
21 | !.vscode/extensions.json
22 | .idea
23 | *.suo
24 | *.ntvs*
25 | *.njsproj
26 | *.sln
27 | *.sw?
28 |
--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 | Click me
8 |
9 |
10 |
20 |
--------------------------------------------------------------------------------
/src/components/MyButton.vue:
--------------------------------------------------------------------------------
1 |
14 |
15 |
16 |
19 |
20 |
21 |
30 |
--------------------------------------------------------------------------------
/src/assets/base.css:
--------------------------------------------------------------------------------
1 | *,
2 | *::before,
3 | *::after {
4 | box-sizing: border-box;
5 | margin: 0;
6 | position: relative;
7 | font-weight: normal;
8 | }
9 |
10 | body {
11 | min-height: 100vh;
12 | display: flex;
13 | align-items: center;
14 | justify-content: center;
15 | line-height: 1.6;
16 | font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
17 | Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
18 | sans-serif;
19 | font-size: 15px;
20 | text-rendering: optimizeLegibility;
21 | -webkit-font-smoothing: antialiased;
22 | -moz-osx-font-smoothing: grayscale;
23 | }
24 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "baseUrl": "./",
4 | "target": "esnext",
5 | "useDefineForClassFields": true,
6 | "module": "esnext",
7 | "moduleResolution": "node",
8 | "isolatedModules": true,
9 | "strict": true,
10 | "jsx": "preserve",
11 | "sourceMap": true,
12 | "resolveJsonModule": true,
13 | "esModuleInterop": true,
14 | "paths": {
15 | "@/*": ["src/*"]
16 | },
17 | "lib": ["esnext", "dom", "dom.iterable", "scripthost"],
18 | "skipLibCheck": true,
19 | "outDir": "dist",
20 | "declaration": true
21 | },
22 | "include": ["vite.config.*", "env.d.ts", "src/**/*", "src/**/*.vue"]
23 | }
24 |
--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite';
2 | import path from 'path';
3 | import vue from '@vitejs/plugin-vue';
4 |
5 | // https://vitejs.dev/config/
6 | export default defineConfig({
7 | plugins: [vue()],
8 | resolve: {
9 | alias: {
10 | '@/': new URL('./src/', import.meta.url).pathname,
11 | },
12 | },
13 | build: {
14 | target: 'esnext',
15 | lib: {
16 | entry: path.resolve(__dirname, 'src/index.ts'),
17 | name: 'MyComponentLib',
18 | fileName: (format) => `my-component-lib.${format}.js`,
19 | },
20 | rollupOptions: {
21 | // make sure to externalize deps that shouldn't be bundled
22 | // into your library
23 | external: ['vue'],
24 | output: {
25 | // Provide global variables to use in the UMD build
26 | // for externalized deps
27 | globals: {
28 | vue: 'Vue',
29 | },
30 | },
31 | },
32 | },
33 | });
34 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "my-component-lib",
3 | "version": "0.0.0",
4 | "files": [
5 | "dist"
6 | ],
7 | "main": "./dist/my-component-lib.umd.js",
8 | "module": "./dist/my-component-lib.es.js",
9 | "exports": {
10 | ".": {
11 | "import": "./dist/my-component-lib.es.js",
12 | "require": "./dist/my-component-lib.umd.js"
13 | }
14 | },
15 | "types": "./dist/types/index.d.ts",
16 | "scripts": {
17 | "dev": "vite",
18 | "build": "vite build && vue-tsc --emitDeclarationOnly && mv dist/src dist/types",
19 | "preserve": "vite build",
20 | "serve": "vite preview --port 5050",
21 | "typecheck": "vue-tsc --noEmit"
22 | },
23 | "dependencies": {
24 | "my-component-lib": "my-component-lib-0.0.0.tgz",
25 | "vue": "^3.2.20"
26 | },
27 | "devDependencies": {
28 | "@types/node": "^16.11.9",
29 | "@vitejs/plugin-vue": "^1.9.3",
30 | "typescript": "~4.3.5",
31 | "vite": "^2.6.3",
32 | "vue-tsc": "^0.29.5"
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | Blog post: https://jivancic.com/posts/build-a-component-library.html
2 |
3 | # vite-component-library
4 |
5 | This template should help get you started developing with Vue 3 in Vite.
6 |
7 | ## Recommended IDE Setup
8 |
9 | [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur).
10 |
11 | ## Type Support for `.vue` Imports in TS
12 |
13 | Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates.
14 |
15 | However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can run `Volar: Switch TS Plugin on/off` from VSCode command palette.
16 |
17 | ## Customize configuration
18 |
19 | See [Vite Configuration Reference](https://vitejs.dev/config/).
20 |
21 | ## Project Setup
22 |
23 | ```sh
24 | npm install
25 | ```
26 |
27 | ### Compile and Hot-Reload for Development
28 |
29 | ```sh
30 | npm run dev
31 | ```
32 |
33 | ### Type-Check, Compile and Minify for Production
34 |
35 | ```sh
36 | npm run build
37 | ```
38 |
--------------------------------------------------------------------------------