├── .gitignore ├── .prettierrc ├── LICENSE ├── README.md ├── jest.config.js ├── package.json ├── src ├── components │ └── Button.vue ├── index.ts └── types │ └── vue.d.ts ├── test ├── setup.ts └── unit │ └── components │ ├── Button.spec.ts │ └── __snapshots__ │ └── Button.spec.ts.snap ├── tsconfig.json ├── vite.config.ts └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | dist/ 2 | node_modules/ 3 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": false, 3 | "singleQuote": true 4 | } 5 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Takuma HANATANI (potato4d) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vite template for Vue 3 library development 2 | 3 | > Sample repository for developing libraries for Vue 3 using Vite. 4 | 5 | **Features** 6 | 7 | - Optimized environment for Vue 3 library 8 | - Support Component / Plugin 9 | - Support CommonJS & ESModule 10 | - Support TypeScript 11 | - Test Environment with Jest and Vue Test Utils 12 | 13 | ## Setup environment 14 | 15 | 1. Click `Use this template` button in GitHub. 16 | 2. Clone the forked repository to local. 17 | 3. Run the following command to set up the development environment. 18 | 19 | ```sh 20 | $ yarn 21 | ``` 22 | 23 | ### Build library 24 | 25 | ```sh 26 | $ yarn build 27 | ``` 28 | 29 | ### Run test 30 | 31 | ```sh 32 | $ yarn test 33 | ``` 34 | 35 | ## Licence 36 | 37 | [MIT](./LICENCE) 38 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: 'ts-jest', 3 | testEnvironment: 'jsdom', 4 | transform: { 5 | '^.+\\.vue$': 'vue-jest' 6 | }, 7 | moduleFileExtensions: ['vue', 'js', 'json', 'jsx', 'ts', 'tsx', 'node'], 8 | }; 9 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vite-template-vue3-library", 3 | "version": "0.1.0", 4 | "main": "dist/index.cjs.js", 5 | "module": "dist/index.es.js", 6 | "exports": { 7 | ".": { 8 | "import": "./dist/index.es.js", 9 | "require": "./dist/index.cjs.js" 10 | } 11 | }, 12 | "license": "MIT", 13 | "scripts": { 14 | "dev": "vite", 15 | "build": "vue-tsc --noEmit;vite build", 16 | "test": "jest", 17 | "format": "prettier './{src,test}/**/*.{js,ts,tsx,vue}' --write" 18 | }, 19 | "devDependencies": { 20 | "@types/jest": "^26.0.23", 21 | "@types/node": "^15.0.2", 22 | "@vitejs/plugin-vue": "^1.2.2", 23 | "@vue/compiler-sfc": "^3.0.11", 24 | "@vue/test-utils": "^2.0.0-rc.6", 25 | "jest": "^26.6.3", 26 | "prettier": "^2.3.0", 27 | "ts-jest": "^26.5.6", 28 | "ts-node": "^9.1.1", 29 | "typescript": "^4.2.4", 30 | "vite": "^2.3.0", 31 | "vue": "^3.0.11", 32 | "vue-jest": "^5.0.0-alpha.9", 33 | "vue-tsc": "^0.1.2" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/components/Button.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 26 | 27 | 41 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | import Button from './components/Button.vue' 2 | 3 | export { Button } 4 | -------------------------------------------------------------------------------- /src/types/vue.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.vue' { 2 | import type { DefineComponent } from 'vue' 3 | const component: DefineComponent<{}, {}, any> 4 | export default component 5 | } 6 | -------------------------------------------------------------------------------- /test/setup.ts: -------------------------------------------------------------------------------- 1 | // Write setup configuration 2 | -------------------------------------------------------------------------------- /test/unit/components/Button.spec.ts: -------------------------------------------------------------------------------- 1 | import Button from '../../../src/components/Button.vue' 2 | import { shallowMount } from '@vue/test-utils' 3 | 4 | describe('~/src/components/Button.vue', () => { 5 | test('can mount', () => { 6 | const wrapper = shallowMount(Button) 7 | expect(wrapper.html()).toMatchSnapshot() 8 | }) 9 | }) 10 | -------------------------------------------------------------------------------- /test/unit/components/__snapshots__/Button.spec.ts.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`~/src/components/Button.vue can mount 1`] = `""`; 4 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2017", 4 | "module": "esnext", 5 | "moduleResolution": "node", 6 | "strict": true, 7 | "jsx": "preserve", 8 | "sourceMap": true, 9 | "resolveJsonModule": true, 10 | "esModuleInterop": true, 11 | "lib": [ 12 | "esnext", 13 | "dom" 14 | ], 15 | "types": [ 16 | "vite/client", 17 | "@types/node", 18 | "@types/jest" 19 | ] 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import vue from '@vitejs/plugin-vue' 3 | 4 | export default defineConfig({ 5 | build: { 6 | lib: { 7 | entry: './src/index.ts', 8 | fileName: 'index', 9 | formats: [ 10 | 'cjs', 11 | 'es' 12 | ] 13 | }, 14 | rollupOptions: { 15 | external: [ 16 | 'vue' 17 | ], 18 | output: { 19 | globals: { 20 | vue: 'vue' 21 | } 22 | } 23 | } 24 | }, 25 | plugins: [vue()] 26 | }) 27 | --------------------------------------------------------------------------------