{"id":19950845,"url":"https://github.com/hetari/vue-and-react-library-template","last_synced_at":"2025-09-19T12:32:38.446Z","repository":{"id":262152227,"uuid":"885363214","full_name":"Hetari/vue-and-react-library-template","owner":"Hetari","description":"A template for building shared libraries in both Vue and React. This template uses Vite for fast builds and includes TypeScript support, with easy configuration for single or multiple framework targets.","archived":false,"fork":false,"pushed_at":"2024-12-12T21:48:02.000Z","size":81,"stargazers_count":10,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-12T06:09:08.939Z","etag":null,"topics":["lib","library","package","raectjs","react","template","template-project","template-repository","ts","type","vite","vite-plugin","vite-react","vite-template","vitejs","vitejs-react","vue","vue3","vuejs","vuejs3"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Hetari.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-11-08T12:50:41.000Z","updated_at":"2025-01-06T17:23:41.000Z","dependencies_parsed_at":"2024-11-10T21:38:55.011Z","dependency_job_id":null,"html_url":"https://github.com/Hetari/vue-and-react-library-template","commit_stats":null,"previous_names":["hetari/vue-and-react-library-template"],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hetari%2Fvue-and-react-library-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hetari%2Fvue-and-react-library-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hetari%2Fvue-and-react-library-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hetari%2Fvue-and-react-library-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Hetari","download_url":"https://codeload.github.com/Hetari/vue-and-react-library-template/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":233570549,"owners_count":18695866,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["lib","library","package","raectjs","react","template","template-project","template-repository","ts","type","vite","vite-plugin","vite-react","vite-template","vitejs","vitejs-react","vue","vue3","vuejs","vuejs3"],"created_at":"2024-11-13T01:05:45.989Z","updated_at":"2025-09-19T12:32:33.023Z","avatar_url":"https://github.com/Hetari.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue and React Library Template\n\n### Enjoying my project? Please show your appreciation by starring it on GitHub! ⭐\n\nThis is a monorepo template for building a reusable library that supports both **Vue** and **React** components. It is set up using **Vite** for fast builds, TypeScript for type safety, and includes configuration for generating declaration files (`.d.ts`). The template is optimized for creating UI components that can be shared across different frontend frameworks.\n\n## Features\n\n- 🚀 **Fast Builds with Vite**: Vite is used as the build tool, providing fast build times for both Vue and React libraries.\n- 💬 **TypeScript Support**: Type-safe development with automatic declaration file generation.\n- 📦 **ESM and UMD Bundles**: Outputs both ES modules (`.es.js`) and UMD bundles (`.umd.js`).\n- 🌐 **Framework-Specific Bundles**: Separate builds and types for Vue and React (`dist/vue` and `dist/react`).\n- 🏗️ **Modular Design**: Supports tree-shaking to minimize bundle sizes.\n\n## Table of Contents\n\n- [Vue and React Library Template](#vue-and-react-library-template)\n  - [Features](#features)\n  - [Table of Contents](#table-of-contents)\n  - [Installation](#installation)\n  - [Getting Started](#getting-started)\n    - [Setup Guide](#setup-guide)\n      - [Rename Placeholder](#rename-placeholder)\n    - [Commands](#commands)\n  - [Usage](#usage)\n    - [Vue](#vue)\n    - [React](#react)\n  - [Project Structure](#project-structure)\n  - [Configuration](#configuration)\n    - [Vite Config](#vite-config)\n      - [Setting Up for Vue-Only or React-Only](#setting-up-for-vue-only-or-react-only)\n        - [Vue-Only Configuration](#vue-only-configuration)\n        - [React-Only Configuration](#react-only-configuration)\n    - [TypeScript Config](#typescript-config)\n    - [Dependencies](#dependencies)\n      - [Vue and React](#vue-and-react)\n      - [Vue Only](#vue-only)\n      - [React Only](#react-only)\n  - [Build](#build)\n  - [Contributing](#contributing)\n  - [License](#license)\n\n## Installation\n\nClone this repository to start developing your library:\n\n```bash\ngit clone https://github.com/your-username/vue-and-react-library-template.git\ncd vue-and-react-library-template\n```\n\nInstall the latest version of dependencies by running\n```bash\nnpx npm-check-updates -u \u0026\u0026 npm i\n```\n\n## Getting Started\n\nThe template includes two main modes:\n\n- **Vue Mode**: Builds the library for Vue components.\n- **React Mode**: Builds the library for React components.\n\n### Setup Guide\n\n#### Rename Placeholder\n\nBefore using this template, make sure to replace all instances of `\"Library-Name\"` with your actual library name. This includes:\n\n1. **Package.json**: Update `name`, `description`, and other relevant fields.\n2. **Vite Config**: Replace `\"LibraryName\"` in `vite.config.ts`.\n3. **README.md**: Write your description and instructions for using your library.\n\n### Commands\n\n- **Build**:\n\n  ```bash\n  npm run build       # Builds both Vue and React packages\n  npm run build:vue   # Builds Vue package only\n  npm run build:react # Builds React package only\n  ```\n\n- **Clean**:\n\n  ```bash\n  npm run clean       # Removes the dist folder\n  ```\n\n- **Release Commands**:\n  Automated scripts are provided for versioning and GitHub releases using [Conventional Changelog](https://github.com/conventional-changelog/standard-version):\n  **Prerequisites: GitHub CLI installed `gh`**\n\n  - **Patch Release**:\n\n  Updates patch version (e.g., `1.0.0` → `1.0.1`).\n\n  ```bash\n  npm run release:patch\n  ```\n\n  - **Minor Release**:\n\n  Updates minor version (e.g., `1.0.0` → `1.1.0`).\n\n  ```bash\n  npm run release:minor\n  ```\n\n  - **Major Release**:\n\n  Updates major version (e.g., `1.0.0` → `2.0.0`).\n\n  ```bash\n  npm run release:major\n  ```\n\n## Usage\n\nAfter building your library, the output will be in the `dist` folder, and after publishing, it will be available on npm with the following package names:\n\n- **Vue package**: `libraryName/vue`\n- **React package**: `libraryName/react`\n\nYou can install and use your library as follows:\n\n### Vue\n\n```javascript\nimport { MyVueComponent } from 'libraryName/vue';\n\nexport default {\n  components: { MyVueComponent }\n};\n```\n\n### React\n\n```javascript\nimport { MyReactComponent } from 'libraryName/react';\n\nfunction App() {\n  return \u003cMyReactComponent /\u003e;\n}\n```\n\n## Project Structure\n\n```\nvue-and-react-library-template/\n├── dist/                 # Build output\n│   ├── vue/              # Vue library bundle\n│   └── react/            # React library bundle\n├── src/                  # Source code\n├── ├── core/             # Shared core code\n│   ├── vue/              # Vue source code\n│   └── react/            # React source code\n├── tsconfig.json         # Main TypeScript config\n├── tsconfig.vue.json     # Vue-specific TypeScript config\n├── tsconfig.react.json   # React-specific TypeScript config\n├── vite.config.ts        # Vite config for both Vue and React\n├── package.json\n└── README.md\n```\n\n## Configuration\n\n### Vite Config\n\nThe `vite.config.ts` is set up to detect the build mode (`vue` or `react`) and apply the respective configuration:\n\n```typescript\n// ... vite.config.ts code ...\nexport default defineConfig(({ mode }) =\u003e {\n  const isVue = mode === 'vue';\n  const framework = isVue ? 'vue' : 'react';\n  const global = (\n    isVue ? { vue: 'Vue' } : { react: 'React', 'react/jsx-runtime': 'JSX' }\n  ) as { [key: string]: string };\n\n  return {\n    // ... vite config code ...\n  };\n});\n```\n\n#### Setting Up for Vue-Only or React-Only\n\nIf you only want to build a Vue or React version of your library and skip dual-mode support, you can simplify your Vite configuration as follows:\n\n##### Vue-Only Configuration\n\n1. **Remove React files and configurations**:\n\n   - Delete the `src/react/` directory.\n   - Delete `tsconfig.react.json`.\n   - Delete any React-related dependencies from `package.json` like `@vitejs/plugin-react`, `react`, and `react-dom`.\n\n2. **Update `vite.config.ts`** to a Vue-only configuration:\n\n```typescript\nimport { defineConfig } from 'vite';\nimport vue from '@vitejs/plugin-vue';\nimport dts from 'vite-plugin-dts';\nimport { resolve } from 'path';\n\nexport default defineConfig({\n  plugins: [\n    vue(),\n    dts({\n      tsconfigPath: './tsconfig.vue.json',\n      outDir: 'dist/vue',\n      include: ['src/vue/**/*', 'src/vue-entry.ts'],\n      insertTypesEntry: true,\n      cleanVueFileName: true,\n      rollupTypes: true,\n      entryRoot: 'src/'\n    })\n  ],\n  build: {\n    target: 'es2015',\n    copyPublicDir: false,\n    outDir: 'dist/vue',\n    lib: {\n      entry: resolve(__dirname, 'src/vue-entry.ts'),\n      name: 'LibraryName',\n      formats: ['es', 'cjs', 'umd'],\n      fileName: (format) =\u003e\n        format === 'es' ? 'index.js' : `index.${format}.js`\n    },\n    rollupOptions: {\n      external: ['vue'],\n      output: {\n        exports: 'named',\n        globals: { vue: 'Vue' }\n      }\n    }\n  }\n});\n```\n\n##### React-Only Configuration\n\n1. **Remove Vue files and configurations**:\n\n   - Delete the `src/vue/` directory.\n   - Delete `tsconfig.vue.json`.\n   - Delete any Vue-related dependencies from `package.json` like `@vitejs/plugin-vue` and `vue`.\n\n2. **Update `vite.config.ts`** to a React-only configuration:\n\n```typescript\nimport { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\nimport dts from 'vite-plugin-dts';\nimport { resolve } from 'path';\n\nexport default defineConfig({\n  plugins: [\n    react(),\n    dts({\n      tsconfigPath: './tsconfig.react.json',\n      outDir: 'dist/react',\n      include: ['src/react/**/*', 'src/react-entry.ts'],\n      insertTypesEntry: true,\n      cleanVueFileName: true,\n      rollupTypes: true,\n      entryRoot: 'src/'\n    })\n  ],\n  build: {\n    target: 'es2015',\n    copyPublicDir: false,\n    outDir: 'dist/react',\n    lib: {\n      entry: resolve(__dirname, 'src/react-entry.ts'),\n      name: 'LibraryName',\n      formats: ['es', 'cjs', 'umd'],\n      fileName: (format) =\u003e\n        format === 'es' ? 'index.js' : `index.${format}.js`\n    },\n    rollupOptions: {\n      external: ['react', 'react/jsx-runtime'],\n      output: {\n        exports: 'named',\n        globals: { react: 'React', 'react/jsx-runtime': 'JSX' }\n      }\n    }\n  }\n});\n```\n\n### TypeScript Config\n\n- `tsconfig.json`: Common settings\n- `tsconfig.vue.json`: Vue-specific TypeScript settings\n- `tsconfig.react.json`: React-specific TypeScript settings\n\nfor individual libraries, you can add the respective TypeScript configuration file (`tsconfig.react.json` for React or `tsconfig.vue.json` for Vue) to the main `tsconfig.json` file.\n\n### Dependencies\n\nInstall necessary dependencies based on your preferred setup:\n\n#### Vue and React\n\nIf you want both Vue and React support:\n\n```bash\nnpm install vue react react-dom \\\n  @vitejs/plugin-vue @vitejs/plugin-react \\\n  @types/vue @types/react @types/node \\\n  typescript vite vite-plugin-dts generate-changelog\n```\n\n#### Vue Only\n\n```bash\nnpm install vue @vitejs/plugin-vue @types/node typescript vite vite-plugin-dts generate-changelog\n```\n\n#### React Only\n\n```bash\nnpm install react react-dom @vitejs/plugin-react @types/react @types/node typescript vite vite-plugin-dts generate-changelog\n```\n\n## Build\n\nTo build the project for both Vue and React, use:\n\n```bash\nnpm run build\n```\n\nOr to build individually:\n\n```bash\nnpm run build:vue\nnpm run build:react\n```\n\nThe compiled files will be available in:\n\n- `dist/vue`: For Vue components\n- `dist/react`: For React components\n\n## Contributing\n\nContributions are welcome! Please follow these steps:\n\n1. Fork this repository\n2. Create a feature branch (`feat/your-feature`)\n3. Commit your changes with descriptive messages (`feat: add new component`)\n4. Open a pull request\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n---\n\nHappy coding! 🎉\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhetari%2Fvue-and-react-library-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhetari%2Fvue-and-react-library-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhetari%2Fvue-and-react-library-template/lists"}