@component-hook/create-app 1.1.0 → 1.1.1

package/README.md

@@ -3,7 +3,7 @@
 Scaffolding a basic `typescript` project.
 
 > **Compatibility Note:**
-> Requires [Node.js](https://nodejs.org/en/) version 18+, 20+. However, some templates require a higher Node.js version to work, please upgrade if your package manager warns about it.
+> Requires [Node.js](https://nodejs.org/en/) version 20+. However, some templates require a higher Node.js version to work, please upgrade if your package manager warns about it.
 
 <p>
   <a href="https://npm-stat.com/charts.html?package=@component-hook/create-app">
@@ -44,39 +44,63 @@ Currently supported template presets include:
 
 - `vue`
 
-## Project Default Setup
-
-- [Vite](https://cn.vite.dev/)
-- [TypeScript](https://www.typescriptlang.org/)
-- [Axios](https://github.com/axios/axios)
-- [TailwindcSS](https://tailwindcss.com/)
-- [PostCSS](https://postcss.org/) w/ `postcss-nesting` plugin
-- [Cssnano](https://cssnano.github.io/cssnano/) for minimizing production CSS
-- [Postcss-pxtorem](https://www.npmjs.com/package/postcss-pxtorem) generates rem units from pixel units
-- [Vite-plugin-svg-icons](https://github.com/vbenjs/vite-plugin-svg-icons) generate svg sprite map
-- [Eslint](https://eslint.org/)
-  - [@component-hook/eslint-plugin](https://www.npmjs.com/package/@component-hook/eslint-plugin?activeTab=readme)
-- [Prettier](https://prettier.io/)
-- [Husky](https://www.npmjs.com/package/husky) to improves commits
-  - if encounter npx: command not found, can execute `ln -s $(which npx) /usr/local/bin/npx` in zsh
-  - [commitlint](https://commitlint.js.org/#/) checks if your commit messages meet the conventional commit format
-  - [lint-staged](https://github.com/okonet/lint-staged) filter files checked by pre commit lint
-- Alias `@` to `<project_root>/src`
-- Mock use [msw](https://mswjs.io/)
-  - `npx msw init ./public`
-- Unit test use [Vitest](https://vitest.dev/) + [Testing Library](https://testing-library.com/)
-  - [jsdom](https://www.npmjs.com/package/jsdom)
-  - [@vitest/coverage-v8](https://vitest.dev/guide/coverage.html)
-  - [@testing-library/jest-dom](https://testing-library.com/docs/ecosystem-jest-dom/)
-  - [@testing-library/user-event](https://testing-library.com/docs/ecosystem-user-event/)
-- E2E test use [playwright](https://playwright.dev/)
-- [Rollup-plugin-visualizer](https://github.com/btd/rollup-plugin-visualizer) visualize and analyze your Rollup bundle to see which modules are taking up space
-- Predefined and fully typed global variables:
-  - `VITE_APP_VERSION` is read from `package.json` version at build time
-  - `VITE_APP_BUILD_EPOCH` is populated as `new Date().getTime()` at build time
-- Github workflows (default)
-  - ci - on workflow call and dispatch
-  - deploy - on push main branch
-  - preview - on pull request
-- Gitlab CI (use `--gitlab` command create project)
-  - run tests - on branches, merge request and manual
+## Project Features Overview
+
+This project leverages modern frontend practices and tooling, covering development experience, code quality, testing, and deployment.
+
+### Development Experience
+
+- **Written in TypeScript**: Provides type safety and better maintainability.
+- **Styled with Tailwind CSS**: Utility-first CSS framework for fast and consistent UI styling.
+- **SVG Support**: Integrated [`vite-plugin-svg-icons`](https://github.com/vbenjs/vite-plugin-svg-icons) to use SVGs as Vue components.
+
+### API & Mocking
+
+- Handles HTTP requests using `axios`.
+- Uses `msw` (Mock Service Worker) for mocking APIs, enabling smooth local development and testing.
+
+### Code Quality
+
+- Enforces consistent code style with `ESLint` and `Prettier`.
+- Enhanced with:
+  - `husky`: For Git hooks.
+  - `lint-staged`: Only runs linters on staged files.
+  - `commitlint`: Ensures commit messages follow conventional format.
+
+### Testing
+
+- Unit testing with `Vitest` + `Testing Library`.
+- End-to-end (E2E) testing using `Playwright`.
+
+### Optimization
+
+- Minifies CSS with `cssnano`.
+- Converts px to rem using `postcss-pxtorem` for responsive design.
+- Uses `rollup-plugin-visualizer` to analyze bundle sizes.
+
+### CI / CD
+
+- Integrated `GitHub Actions` and `GitLab CI` for automated testing and deployment.
+
+### Project Structure & Conventions
+
+- The project root alias `@` points to the `src` directory (`<project_root>/src`).
+- ESLint uses a custom plugin: [`@component-hook/eslint-plugin`](https://www.npmjs.com/package/@component-hook/eslint-plugin).
+
+### Tip: Solving `npx: command not found`
+
+If you encounter `npx: command not found`, run the following command to create a symbolic link:
+
+```bash
+ln -s $(which npx) /usr/local/bin/npx
+```
+
+### Predefined Global Variables
+
+These variables are injected at build time and are fully typed:
+
+| Variable Name          | Description                                  |
+| ---------------------- | -------------------------------------------- |
+| `VITE_APP_VERSION`     | Read from `package.json` version             |
+| `VITE_APP_BUILD_EPOCH` | Timestamp generated at build time            |
+| `VITE_APP_MOCK`        | Indicates whether the mock environment is on |

package/dist/index.js

@@ -1,28 +1,29 @@
 // src/index.ts
+import { readdirSync as readdirSync2, statSync } from "node:fs";
+import { readdir, readFile, writeFile } from "node:fs/promises";
 import path2 from "node:path";
 import { fileURLToPath } from "node:url";
-import { readdir, readFile, writeFile } from "node:fs/promises";
-import minimist from "minimist";
-import colors2 from "picocolors";
-import { copy, ensureDirSync } from "fs-extra/esm";
 import artTemplate from "art-template";
+import { copy, ensureDirSync } from "fs-extra/esm";
+import minimist from "minimist";
 import ora from "ora";
+import colors2 from "picocolors";
+
+// src/constants.ts
+var DEFAULT_PROJECT_NAME = "basic-project";
+var TEMPLATES = ["vue"];
+var GITHUB_ACTIONS = "GitHub Actions";
+var GITLAB_CI = "GitLab CI";
 
 // src/prompts.ts
 import { existsSync as existsSync2 } from "node:fs";
-import prompts from "prompts";
 import colors from "picocolors";
+import prompts from "prompts";
 
 // src/utils.ts
-import path from "node:path";
 import { existsSync, readdirSync } from "node:fs";
+import path from "node:path";
 import { remove } from "fs-extra/esm";
-
-// src/config.ts
-var DEFAULT_PROJECT_NAME = "basic-project";
-var TEMPLATES = ["vue"];
-
-// src/utils.ts
 function formatTargetDir(targetDir) {
   if (!targetDir) return targetDir;
   targetDir = targetDir.trim();
@@ -46,6 +47,9 @@ function isValidPackageName(projectName) {
 function toValidPackageName(projectName) {
   return projectName.trim().toLowerCase().replaceAll(/\s+/g, "-").replace(/^[._]/, "").replaceAll(/[^a-z\d\-~]+/g, "-");
 }
+function toUpperCasePackageName(projectName) {
+  return projectName.split("-").map((str) => `${str[0].toUpperCase()}${str.slice(1)}`).join(" ");
+}
 function getPkgManagerInfo() {
   const userAgent = process.env.npm_config_user_agent;
   if (!userAgent) return;
@@ -108,7 +112,7 @@ function operationPrompts({ targetDir, template }) {
     type: (_, { projectName: nameAnswer }) => {
       return isValidPackageName(getProjectName(nameAnswer)) ? null : "text";
     },
-    name: "projectName",
+    name: "packageName",
     message: styleTitle("Package name:"),
     initial: (_, { projectName: nameAnswer }) => toValidPackageName(getProjectName(nameAnswer)),
     validate: (name) => {
@@ -154,7 +158,7 @@ Available templates:
   ${colors2.green("vue")}
 `;
 async function copyTemplateFolder(root, templateDir, packageName) {
-  const isGitlab = argv.lab || argv.gitlab;
+  const isGitlab = argv.l || argv.gitlab;
   const [files, pkgJson] = await Promise.all([
     readdir(templateDir),
     readFile(path2.join(templateDir, "package.json"), "utf-8")
@@ -172,11 +176,24 @@ async function copyTemplateFolder(root, templateDir, packageName) {
     }
     const templatePath = path2.join(templateDir, file);
     if (file.endsWith(".art")) {
-      const name = packageName.split("-").map((str) => `${str[0].toUpperCase()}${str.slice(1)}`).join(" ");
-      const renderedResult = artTemplate(templatePath, { projectName: name });
-      return writeFile(targetPath.replace(".art", ""), renderedResult);
+      const isScript = file.endsWith(".js.art") || file.endsWith(".ts.art");
+      const name = isScript ? packageName : toUpperCasePackageName(packageName);
+      const replacedPath = targetPath.replace(".art", "");
+      const renderedResult = artTemplate(templatePath, {
+        projectName: name,
+        gitRepository: isGitlab ? GITLAB_CI : GITHUB_ACTIONS
+      });
+      ensureDirSync(path2.dirname(replacedPath));
+      return writeFile(replacedPath, renderedResult);
+    }
+    if (statSync(templatePath).isDirectory()) {
+      const subFiles = readdirSync2(templatePath);
+      const rewriteOrCopySubFilePromises = subFiles.map((subFile) => rewriteOrCopyFile(path2.join(file, subFile)));
+      return Promise.all(rewriteOrCopySubFilePromises).then(() => {
+      });
+    } else {
+      return copy(templatePath, targetPath);
     }
-    return copy(templatePath, targetPath);
   };
   pkg.name = packageName;
   return Promise.all([

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@component-hook/create-app",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Scaffolding a basic typescript project",
   "type": "module",
   "license": "MIT",

package/template-vue/README.md.art

@@ -1,49 +1,26 @@
 # {{projectName}}
 
+This project is built with [vue3](https://vuejs.org/) + [vite](https://vite.dev/), using [pnpm](https://pnpm.io/) for package management and [pinia](https://pinia.vuejs.org/) for state management.
+
 ## Features
 
-- Vue 3
-- Pnpm 9
-- Vite 5
-- [Pinia](https://pinia.vuejs.org/) store
-  - [pinia-plugin-persistedstate](https://www.npmjs.com/package/pinia-plugin-persistedstate)
-- Routing using [vue-router 4](https://router.vuejs.org/)
-- TypeScript 5
-- Axios
-- Tailwind CSS 3
-- Vue-i18n 9
-- PostCSS 8 w/ `postcss-nesting` plugin
-- [Cssnano](https://cssnano.github.io/cssnano/) for minimizing production CSS
-- [Postcss-pxtorem](https://www.npmjs.com/package/postcss-pxtorem) generates rem units from pixel units
-- [Vite-plugin-svg-icons](https://github.com/vbenjs/vite-plugin-svg-icons) generate svg sprite map
-- [Unplugin-vue-components](https://www.npmjs.com/package/unplugin-vue-components) auto importing for common components
-- Eslint
-  - [@component-hook/eslint-plugin](https://www.npmjs.com/package/@component-hook/eslint-plugin?activeTab=readme)
-- Prettier
-- [Husky](https://www.npmjs.com/package/husky) to improves commits
-  - if encounter npx: command not found, can execute `ln -s $(which npx) /usr/local/bin/npx` in zsh
-  - [commitlint](https://commitlint.js.org/#/) checks if your commit messages meet the conventional commit format
-  - [lint-staged](https://github.com/okonet/lint-staged) filter files checked by pre commit lint
-- Alias `@` to `<project_root>/src`
-- Mock use [msw](https://mswjs.io/)
-  - `npx msw init ./public`
-- Unit test use [Vitest](https://vitest.dev/) + [Testing Library](https://testing-library.com/)
-  - [jsdom](https://www.npmjs.com/package/jsdom)
-  - [@vitest/coverage-v8](https://vitest.dev/guide/coverage.html)
-  - [@testing-library/jest-dom](https://testing-library.com/docs/ecosystem-jest-dom/)
-  - [@testing-library/vue](https://testing-library.com/docs/vue-testing-library/intro/)
-  - [@testing-library/user-event](https://testing-library.com/docs/ecosystem-user-event/)
-- E2E test use [playwright](https://playwright.dev/)
-- [Rollup-plugin-visualizer](https://github.com/btd/rollup-plugin-visualizer) visualize and analyze your Rollup bundle to see which modules are taking up space
+- **Development Experience**: Written in [typeScript](https://www.typescriptlang.org/), styled with [tailwindcss](https://tailwindcss.com/), and structured with [vue-router](https://router.vuejs.org/), and [vue-i18n](https://vue-i18n.intlify.dev/). Supports SVGs ([vite-plugin-svg-icons](https://github.com/vbenjs/vite-plugin-svg-icons)).
+- **API & Mocking**: Handles requests with [axios](https://axios-http.com/docs/intro) and mocks APIs using [msw](https://mswjs.io/).
+- **Code Quality**: Enforces standards with [eslint](https://eslint.org/) and [prettier](https://prettier.io/), with [husky](https://www.npmjs.com/package/husky), [commitlint](https://commitlint.js.org/#/), and [lint-staged](https://github.com/okonet/lint-staged) for commit validation.
+- **Testing**: Uses [vitest](https://vitest.dev/) + [testing-library](https://testing-library.com/) for unit testing and [playwright](https://playwright.dev/) for E2E testing.
+- **Optimization**: Compresses CSS with [cssnano](https://cssnano.github.io/cssnano/) , converts units with [postcss-pxtorem](https://www.npmjs.com/package/postcss-pxtorem), and analyzes assets with [rollup-plugin-visualizer](https://github.com/btd/rollup-plugin-visualizer).
+- **CI/CD**: Integrates `{{gitRepository}}` for automated testing and deployment.
+
+## Code Features / Opinions
+
+- Project root aliased as `@` to `<project_root>/src`
+- Store persistedstate use [pinia-plugin-persistedstate](https://www.npmjs.com/package/pinia-plugin-persistedstate)
+- ESlint plugin use [@component-hook/eslint-plugin](https://www.npmjs.com/package/@component-hook/eslint-plugin?activeTab=readme)
+- if encounter npx: command not found, can execute `ln -s $(which npx) /usr/local/bin/npx` in zsh
 - Predefined and fully typed global variables:
   - `VITE_APP_VERSION` is read from `package.json` version at build time
   - `VITE_APP_BUILD_EPOCH` is populated as `new Date().getTime()` at build time
-- Github workflows
-  - ci - on workflow call and dispatch
-  - deploy - on push main branch
-  - preview - on pull request
-- Gitlab CI
-  - run tests - on branches, merge request and manual
+  - `VITE_APP_MOCK` is use mock environment
 
 ## Project Files
 
@@ -58,14 +35,14 @@ src/
 ├── apis/*
 ├── assets/*
 │   └── images/
-│       └── svgIcons
+│       └── svg-icons
 │          └── vue.svg
 ├── components/
-│   ├── common/
-│   │   └── SvgIcon.vue
-│   └── indexPage/
-│       └── HelloWorld.vue
-├── configs/*
+│   └── svg-icon/
+│       ├── src
+│       │   └── index.vue
+│       └── index.ts
+├── constants/*
 ├── hooks/*
 ├── locales/
 │   ├── en-US.json
@@ -77,7 +54,10 @@ src/
 │   │── browser.ts
 │   └── server.ts
 ├── pages/
-│   └── IndexPage.vue
+│   └── home/
+│       ├── components
+│       │   └── HelloWorld.vue
+│       └── index.vue
 ├── plugins/
 │   └── i18n.ts
 ├── router/
@@ -88,10 +68,11 @@ src/
 │   └── index.ts
 ├── styles/
 │   ├── common/
-|   │   ├── all.postcss
-|   │   └── button.postcss
-│   ├── index.postcss
-│   └── tailwind.postcss
+|   │   ├── all.css
+|   │   └── button.css
+│   ├── base.css
+│   ├── index.css
+│   └── tailwind.css
 ├── types/*
 ├── utils/*
 ├── App.vue

package/template-vue/index.html.art

@@ -20,6 +20,8 @@
       src="/src/main.ts"
     ></script>
     <noscript>
+      <h1>Opinionated, production ready template for Vite and Vue 3</h1>
+
       <p>This site requires JavaScript to work.</p>
     </noscript>
   </body>

package/template-vue/lint-staged.config.js

@@ -1,3 +1,5 @@
+/** @type {import('lint-staged').Configuration} */
+
 export default {
   '*.{ts,vue}': () => 'pnpm typecheck',
   '*.{ts,js,vue}': () => 'pnpm lint',

package/template-vue/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "license": "MIT",
   "type": "module",
-  "packageManager": "pnpm@10.6.3",
+  "packageManager": "pnpm@10.10.0",
   "scripts": {
     "dev": "vite",
     "dev:mock": "MOCK=true vite",
@@ -18,43 +18,41 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "axios": "^1.8.3",
-    "pinia": "^3.0.1",
-    "pinia-plugin-persistedstate": "^4.2.0",
+    "axios": "^1.9.0",
+    "pinia": "^3.0.2",
+    "pinia-plugin-persistedstate": "^4.3.0",
     "vue": "^3.5.13",
-    "vue-i18n": "^11.1.2",
-    "vue-router": "^4.5.0"
+    "vue-i18n": "^11.1.3",
+    "vue-router": "^4.5.1"
   },
   "devDependencies": {
-    "@component-hook/eslint-plugin": "1.0.1",
-    "@intlify/unplugin-vue-i18n": "^6.0.3",
-    "@playwright/test": "^1.51.0",
+    "@component-hook/eslint-plugin": "1.1.0",
+    "@intlify/unplugin-vue-i18n": "^6.0.8",
+    "@playwright/test": "^1.52.0",
+    "@tailwindcss/vite": "^4.1.6",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/user-event": "^14.6.1",
     "@testing-library/vue": "^8.1.0",
-    "@tsconfig/node22": "22.0.0",
-    "@types/node": "^22.13.10",
-    "@vitejs/plugin-vue": "^5.2.2",
-    "@vitest/coverage-v8": "^2.1.9",
+    "@tsconfig/node22": "^22.0.1",
+    "@types/node": "^22.15.17",
+    "@vitejs/plugin-vue": "^5.2.4",
+    "@vitest/coverage-v8": "^3.1.3",
     "@vue/tsconfig": "^0.7.0",
     "autoprefixer": "^10.4.21",
-    "cssnano": "^7.0.6",
-    "eslint": "^9.22.0",
-    "jsdom": "^26.0.0",
-    "msw": "^2.7.3",
+    "cssnano": "^7.0.7",
+    "eslint": "^9.26.0",
+    "jsdom": "^26.1.0",
+    "msw": "^2.8.2",
     "postcss": "^8.5.3",
-    "postcss-import": "^16.1.0",
-    "postcss-nesting": "^13.0.1",
     "postcss-pxtorem": "^6.1.0",
     "prettier": "^3.5.3",
-    "rollup-plugin-visualizer": "^5.14.0",
-    "tailwindcss": "^3.4.17",
-    "typescript": "^5.8.2",
-    "unplugin-vue-components": "^0.28.0",
-    "vite": "^5.4.14",
+    "rollup-plugin-visualizer": "^5.13.1",
+    "tailwindcss": "^4.1.6",
+    "typescript": "^5.8.3",
+    "vite": "^6.3.5",
     "vite-plugin-svg-icons": "^2.0.1",
-    "vitest": "^2.1.9",
-    "vue-tsc": "^2.2.8"
+    "vitest": "^3.1.3",
+    "vue-tsc": "^2.2.10"
   },
   "browserslist": [
     "> 1%",
@@ -65,9 +63,9 @@
     "workerDirectory": "public"
   },
   "optionalDependencies": {
-    "@commitlint/cli": "^19.8.0",
-    "@commitlint/config-conventional": "^19.8.0",
+    "@commitlint/cli": "^19.8.1",
+    "@commitlint/config-conventional": "^19.8.1",
     "husky": "^9.1.7",
-    "lint-staged": "^15.5.0"
+    "lint-staged": "^16.0.0"
   }
 }

package/template-vue/playwright.config.ts

@@ -24,37 +24,26 @@ export default defineConfig({
   projects: [
     {
       name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
+      use: {
+        browserName: 'chromium',
+        ...devices['Macbook Pro'],
+      },
     },
 
     {
       name: 'firefox',
-      use: { ...devices['Desktop Firefox'] },
+      use: {
+        browserName: 'firefox',
+        ...devices['Macbook 11'],
+      },
     },
 
     {
       name: 'webkit',
-      use: { ...devices['Desktop Safari'] },
+      use: {
+        browserName: 'webkit',
+        ...devices['iPhone SE'],
+      },
     },
-
-    /* Test against mobile viewports. */
-    // {
-    //   name: 'Mobile Chrome',
-    //   use: { ...devices['Pixel 5'] },
-    // },
-    // {
-    //   name: 'Mobile Safari',
-    //   use: { ...devices['iPhone 12'] },
-    // },
-
-    /* Test against branded browsers. */
-    // {
-    //   name: 'Microsoft Edge',
-    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
-    // },
-    // {
-    //   name: 'Google Chrome',
-    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
-    // },
   ],
 });

package/template-vue/postcss.config.js

@@ -1,14 +1,15 @@
+import autoprefixer from 'autoprefixer';
+import cssnano from 'cssnano';
+import postcssPxtorem from 'postcss-pxtorem';
+
 export default {
-  plugins: {
-    'postcss-import': {},
-    'tailwindcss/nesting': {},
-    'postcss-nesting': {},
-    tailwindcss: {},
-    autoprefixer: {},
-    'postcss-pxtorem': {
+  plugins: [
+    autoprefixer(),
+    postcssPxtorem({
       rootValue: 16,
       propList: ['*'],
-    },
-    ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {}),
-  },
+      selectorBlackList: ['norem'],
+    }),
+    ...(process.env.NODE_ENV === 'production' ? [cssnano({ preset: 'default' })] : []),
+  ],
 };

package/template-vue/src/__tests__/e2e/{IndexPage.spec.ts → home.spec.ts}

@@ -7,14 +7,16 @@ test.beforeEach(async ({ page }) => {
 test('click Vite logo open Vite official website blank tab', async ({ page, context }) => {
   await page.getByRole('link', { name: 'Vite logo' }).click();
   const newPage = await context.waitForEvent('page');
-  await newPage.waitForLoadState();
+
+  await newPage.waitForLoadState('load');
   await expect(newPage).toHaveTitle('Vite | Next Generation Frontend Tooling');
 });
 
 test('click Vue logo open Vue official website blank tab', async ({ page, context }) => {
   await page.getByTitle('#icon-vue').click();
   const newPage = await context.waitForEvent('page');
-  await newPage.waitForLoadState();
+
+  await newPage.waitForLoadState('load');
   await expect(newPage).toHaveTitle('Vue.js - The Progressive JavaScript Framework | Vue.js');
 });
 
@@ -35,14 +37,16 @@ test('locale change interact', async ({ page }) => {
 test('click create-vue link open Vue quick start blank tab', async ({ page, context }) => {
   await page.getByRole('link', { name: 'create-vue' }).click();
   const newPage = await context.waitForEvent('page');
-  await newPage.waitForLoadState();
+
+  await newPage.waitForLoadState('load');
   await expect(newPage).toHaveTitle('Quick Start | Vue.js');
 });
 
 test('click Volar link open language-tools github blank tab', async ({ page, context }) => {
   await page.getByRole('link', { name: 'Volar' }).click();
   const newPage = await context.waitForEvent('page');
-  await newPage.waitForLoadState();
+
+  await newPage.waitForLoadState('load');
   await expect(newPage).toHaveTitle(
     'GitHub - vuejs/language-tools: ⚡ High-performance Vue language tooling based-on Volar.js',
   );

package/template-vue/src/__tests__/unit/components/{indexPage → home}/HelloWorld.test.ts

@@ -1,7 +1,7 @@
 import userEvent from '@testing-library/user-event';
 import { screen } from '@testing-library/vue';
 import { renderComponent } from '@/__tests__/unit/render';
-import HelloWorld from '@/components/indexPage/HelloWorld.vue';
+import HelloWorld from '@/pages/home/components/HelloWorld.vue';
 import i18n from '@/plugins/i18n';
 import { useConfigStore } from '@/stores';
 

package/template-vue/src/components/svg-icon/index.ts

@@ -0,0 +1 @@
+export { default as SvgIcon } from './src/index.vue';

package/template-vue/src/main.ts

@@ -6,10 +6,9 @@ import i18NPlugin from '@/plugins/i18n';
 import router from '@/router';
 import App from './App.vue';
 import 'virtual:svg-icons-register';
-import '@/styles/tailwind.postcss';
-import '@/styles/index.postcss';
+import '@/styles/index.css';
 
-if (process.env.NODE_ENV === 'mockServiceWorker') {
+if (import.meta.env.VITE_APP_MOCK === 'service-worker') {
   const { worker } = await import('@/mocks/browser');
 
   worker.start();

package/template-vue/src/{components/indexPage → pages/home/components}/HelloWorld.vue

@@ -18,12 +18,7 @@ function changeLocale() {
   <h1>{{ msg }}</h1>
 
   <div class="p-8">
-    <button
-      type="button"
-      @click="count++"
-    >
-      count is {{ count }}
-    </button>
+    <button @click="count++">count is {{ count }}</button>
   </div>
 
   <p>
@@ -52,8 +47,8 @@ function changeLocale() {
   </button>
 </template>
 
-<style lang="postcss" scoped>
+<style lang="css" scoped>
 .read-the-docs {
-  @apply text-[#888];
+  color: #888;
 }
 </style>

package/template-vue/src/pages/{IndexPage.vue → home/index.vue}

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import HelloWorld from '@/components/indexPage/HelloWorld.vue';
+import { SvgIcon } from '@/components/svg-icon';
+import HelloWorld from './components/HelloWorld.vue';
 </script>
 
 <template>
@@ -24,11 +25,21 @@ import HelloWorld from '@/components/indexPage/HelloWorld.vue';
       />
     </a>
   </div>
+
   <hello-world msg="Vite + Vue" />
 </template>
 
-<style lang="postcss" scoped>
+<style lang="css" scoped>
 .logo {
-  @apply w-24 h-24 p-6 mx-auto will-change-[filter] transition-[filter] duration-300 hover:drop-shadow-[0_0_2em_#646cffaa];
+  width: 96px;
+  height: 96px;
+  margin: 0 auto;
+  padding: 24px;
+  will-change: filter;
+  transition: filter 300ms;
+
+  &:hover {
+    filter: drop-shadow(0 0 2em #646cffaa);
+  }
 }
 </style>

package/template-vue/src/router/index.ts

@@ -1,5 +1,5 @@
 import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router';
-import IndexPage from '@/pages/IndexPage.vue';
+import HomePage from '@/pages/home/index.vue';
 
 export const routes: Array<RouteRecordRaw> = [
   {
@@ -8,7 +8,7 @@ export const routes: Array<RouteRecordRaw> = [
   },
   {
     path: '/',
-    component: IndexPage,
+    component: HomePage,
     meta: {
       title: 'Vue3 Coding Standards',
     },

package/template-vue/src/stores/modules/{config.ts → config.ts.art}

@@ -9,7 +9,7 @@ const defaultState = {
   version: versionString,
 };
 
-export default defineStore('coding-standards-config', {
+export default defineStore('{{projectName}}-config', {
   state: () => defaultState,
   getters: {},
   actions: {},

package/template-vue/src/styles/base.css

@@ -0,0 +1,48 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    background-color: #ffffff;
+    color: #213547;
+  }
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+#app {
+  max-width: 80rem;
+  margin: auto;
+  padding: 32px;
+  text-align: center;
+}
+
+a {
+  font-weight: 500;
+  text-decoration-color: inherit;
+  color: #646cff;
+  transition: color 150ms;
+
+  &:hover {
+    color: #535bf2;
+  }
+}

package/template-vue/src/styles/common/all.css

@@ -0,0 +1 @@
+@import './button.css';

package/template-vue/src/styles/common/button.css

@@ -0,0 +1,15 @@
+button {
+  border-radius: 8px;
+  padding: 8px;
+  border-width: 1px;
+  border-color: transparent;
+  transition-property: border-color;
+  transition-duration: 300ms;
+  &:hover {
+    border-color: #646cff;
+  }
+  &:focus {
+    outline-width: 4px;
+    outline-color: -webkit-focus-ring-color;
+  }
+}

package/template-vue/src/styles/index.css

@@ -0,0 +1,3 @@
+@import './tailwind.css';
+@import './base.css';
+@import './common/all.css';

package/template-vue/src/styles/tailwind.css

@@ -0,0 +1 @@
+@import 'tailwindcss';

package/template-vue/src/vite-env.d.ts

@@ -9,4 +9,5 @@ declare module '*.vue' {
 interface ImportMetaEnv extends Readonly<Record<string, string>> {
   readonly VITE_APP_VERSION: string;
   readonly VITE_APP_BUILD_EPOCH?: string;
+  readonly VITE_APP_MOCK?: string;
 }

package/template-vue/vite.config.ts

@@ -1,15 +1,19 @@
 import { dirname, resolve } from 'node:path';
 import { fileURLToPath, URL } from 'node:url';
 import vueI18nPlugin from '@intlify/unplugin-vue-i18n/vite';
+import tailwindcss from '@tailwindcss/vite';
 import vue from '@vitejs/plugin-vue';
 import { visualizer } from 'rollup-plugin-visualizer';
-import Components from 'unplugin-vue-components/vite';
 import { defineConfig } from 'vite';
 import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
 import packageJson from './package.json' with { type: 'json' };
 
 process.env.VITE_APP_VERSION = packageJson.version;
-process.env.NODE_ENV = process.env.MOCK ? 'mockServiceWorker' : process.env.NODE_ENV;
+
+if (process.env.MOCK) {
+  process.env.VITE_APP_MOCK = 'service-worker';
+}
+
 if (process.env.NODE_ENV === 'production') {
   process.env.VITE_APP_BUILD_EPOCH = Date.now().toString();
 }
@@ -18,15 +22,12 @@ export default defineConfig({
   base: './',
   plugins: [
     vue(),
-    Components({
-      dirs: ['src/components/common'],
-      dts: 'src/components.d.ts',
-    }),
+    tailwindcss(),
     vueI18nPlugin({
       include: resolve(dirname(fileURLToPath(import.meta.url)), 'src/locales/**'),
     }),
     createSvgIconsPlugin({
-      iconDirs: [resolve(process.cwd(), 'src/assets/images/svgIcons')],
+      iconDirs: [resolve(process.cwd(), 'src/assets/images/svg-icons')],
     }),
     visualizer({ gzipSize: true }),
   ],

package/template-vue/public/mockServiceWorker.js

@@ -1,307 +0,0 @@
-/* eslint-disable */
-/* tslint:disable */
-
-/**
- * Mock Service Worker.
- * @see https://github.com/mswjs/msw
- * - Please do NOT modify this file.
- * - Please do NOT serve this file on production.
- */
-
-const PACKAGE_VERSION = '2.6.8'
-const INTEGRITY_CHECKSUM = '00729d72e3b82faf54ca8b9621dbb96f'
-const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
-const activeClientIds = new Set()
-
-self.addEventListener('install', function () {
-  self.skipWaiting()
-})
-
-self.addEventListener('activate', function (event) {
-  event.waitUntil(self.clients.claim())
-})
-
-self.addEventListener('message', async function (event) {
-  const clientId = event.source.id
-
-  if (!clientId || !self.clients) {
-    return
-  }
-
-  const client = await self.clients.get(clientId)
-
-  if (!client) {
-    return
-  }
-
-  const allClients = await self.clients.matchAll({
-    type: 'window',
-  })
-
-  switch (event.data) {
-    case 'KEEPALIVE_REQUEST': {
-      sendToClient(client, {
-        type: 'KEEPALIVE_RESPONSE',
-      })
-      break
-    }
-
-    case 'INTEGRITY_CHECK_REQUEST': {
-      sendToClient(client, {
-        type: 'INTEGRITY_CHECK_RESPONSE',
-        payload: {
-          packageVersion: PACKAGE_VERSION,
-          checksum: INTEGRITY_CHECKSUM,
-        },
-      })
-      break
-    }
-
-    case 'MOCK_ACTIVATE': {
-      activeClientIds.add(clientId)
-
-      sendToClient(client, {
-        type: 'MOCKING_ENABLED',
-        payload: {
-          client: {
-            id: client.id,
-            frameType: client.frameType,
-          },
-        },
-      })
-      break
-    }
-
-    case 'MOCK_DEACTIVATE': {
-      activeClientIds.delete(clientId)
-      break
-    }
-
-    case 'CLIENT_CLOSED': {
-      activeClientIds.delete(clientId)
-
-      const remainingClients = allClients.filter((client) => {
-        return client.id !== clientId
-      })
-
-      // Unregister itself when there are no more clients
-      if (remainingClients.length === 0) {
-        self.registration.unregister()
-      }
-
-      break
-    }
-  }
-})
-
-self.addEventListener('fetch', function (event) {
-  const { request } = event
-
-  // Bypass navigation requests.
-  if (request.mode === 'navigate') {
-    return
-  }
-
-  // Opening the DevTools triggers the "only-if-cached" request
-  // that cannot be handled by the worker. Bypass such requests.
-  if (request.cache === 'only-if-cached' && request.mode !== 'same-origin') {
-    return
-  }
-
-  // Bypass all requests when there are no active clients.
-  // Prevents the self-unregistered worked from handling requests
-  // after it's been deleted (still remains active until the next reload).
-  if (activeClientIds.size === 0) {
-    return
-  }
-
-  // Generate unique request ID.
-  const requestId = crypto.randomUUID()
-  event.respondWith(handleRequest(event, requestId))
-})
-
-async function handleRequest(event, requestId) {
-  const client = await resolveMainClient(event)
-  const response = await getResponse(event, client, requestId)
-
-  // Send back the response clone for the "response:*" life-cycle events.
-  // Ensure MSW is active and ready to handle the message, otherwise
-  // this message will pend indefinitely.
-  if (client && activeClientIds.has(client.id)) {
-    ;(async function () {
-      const responseClone = response.clone()
-
-      sendToClient(
-        client,
-        {
-          type: 'RESPONSE',
-          payload: {
-            requestId,
-            isMockedResponse: IS_MOCKED_RESPONSE in response,
-            type: responseClone.type,
-            status: responseClone.status,
-            statusText: responseClone.statusText,
-            body: responseClone.body,
-            headers: Object.fromEntries(responseClone.headers.entries()),
-          },
-        },
-        [responseClone.body],
-      )
-    })()
-  }
-
-  return response
-}
-
-// Resolve the main client for the given event.
-// Client that issues a request doesn't necessarily equal the client
-// that registered the worker. It's with the latter the worker should
-// communicate with during the response resolving phase.
-async function resolveMainClient(event) {
-  const client = await self.clients.get(event.clientId)
-
-  if (activeClientIds.has(event.clientId)) {
-    return client
-  }
-
-  if (client?.frameType === 'top-level') {
-    return client
-  }
-
-  const allClients = await self.clients.matchAll({
-    type: 'window',
-  })
-
-  return allClients
-    .filter((client) => {
-      // Get only those clients that are currently visible.
-      return client.visibilityState === 'visible'
-    })
-    .find((client) => {
-      // Find the client ID that's recorded in the
-      // set of clients that have registered the worker.
-      return activeClientIds.has(client.id)
-    })
-}
-
-async function getResponse(event, client, requestId) {
-  const { request } = event
-
-  // Clone the request because it might've been already used
-  // (i.e. its body has been read and sent to the client).
-  const requestClone = request.clone()
-
-  function passthrough() {
-    // Cast the request headers to a new Headers instance
-    // so the headers can be manipulated with.
-    const headers = new Headers(requestClone.headers)
-
-    // Remove the "accept" header value that marked this request as passthrough.
-    // This prevents request alteration and also keeps it compliant with the
-    // user-defined CORS policies.
-    const acceptHeader = headers.get('accept')
-    if (acceptHeader) {
-      const values = acceptHeader.split(',').map((value) => value.trim())
-      const filteredValues = values.filter(
-        (value) => value !== 'msw/passthrough',
-      )
-
-      if (filteredValues.length > 0) {
-        headers.set('accept', filteredValues.join(', '))
-      } else {
-        headers.delete('accept')
-      }
-    }
-
-    return fetch(requestClone, { headers })
-  }
-
-  // Bypass mocking when the client is not active.
-  if (!client) {
-    return passthrough()
-  }
-
-  // Bypass initial page load requests (i.e. static assets).
-  // The absence of the immediate/parent client in the map of the active clients
-  // means that MSW hasn't dispatched the "MOCK_ACTIVATE" event yet
-  // and is not ready to handle requests.
-  if (!activeClientIds.has(client.id)) {
-    return passthrough()
-  }
-
-  // Notify the client that a request has been intercepted.
-  const requestBuffer = await request.arrayBuffer()
-  const clientMessage = await sendToClient(
-    client,
-    {
-      type: 'REQUEST',
-      payload: {
-        id: requestId,
-        url: request.url,
-        mode: request.mode,
-        method: request.method,
-        headers: Object.fromEntries(request.headers.entries()),
-        cache: request.cache,
-        credentials: request.credentials,
-        destination: request.destination,
-        integrity: request.integrity,
-        redirect: request.redirect,
-        referrer: request.referrer,
-        referrerPolicy: request.referrerPolicy,
-        body: requestBuffer,
-        keepalive: request.keepalive,
-      },
-    },
-    [requestBuffer],
-  )
-
-  switch (clientMessage.type) {
-    case 'MOCK_RESPONSE': {
-      return respondWithMock(clientMessage.data)
-    }
-
-    case 'PASSTHROUGH': {
-      return passthrough()
-    }
-  }
-
-  return passthrough()
-}
-
-function sendToClient(client, message, transferrables = []) {
-  return new Promise((resolve, reject) => {
-    const channel = new MessageChannel()
-
-    channel.port1.onmessage = (event) => {
-      if (event.data && event.data.error) {
-        return reject(event.data.error)
-      }
-
-      resolve(event.data)
-    }
-
-    client.postMessage(
-      message,
-      [channel.port2].concat(transferrables.filter(Boolean)),
-    )
-  })
-}
-
-async function respondWithMock(response) {
-  // Setting response status code to 0 is a no-op.
-  // However, when responding with a "Response.error()", the produced Response
-  // instance will have status code set to 0. Since it's not possible to create
-  // a Response instance with status code 0, handle that use-case separately.
-  if (response.status === 0) {
-    return Response.error()
-  }
-
-  const mockedResponse = new Response(response.body, response)
-
-  Reflect.defineProperty(mockedResponse, IS_MOCKED_RESPONSE, {
-    value: true,
-    enumerable: true,
-  })
-
-  return mockedResponse
-}

package/template-vue/src/components.d.ts

@@ -1,14 +0,0 @@
-/* eslint-disable */
-// @ts-nocheck
-// Generated by unplugin-vue-components
-// Read more: https://github.com/vuejs/core/pull/3399
-export {}
-
-/* prettier-ignore */
-declare module 'vue' {
-  export interface GlobalComponents {
-    RouterLink: typeof import('vue-router')['RouterLink']
-    RouterView: typeof import('vue-router')['RouterView']
-    SvgIcon: typeof import('./components/common/SvgIcon.vue')['default']
-  }
-}

package/template-vue/src/styles/common/all.postcss

@@ -1 +0,0 @@
-@import './button.postcss';

package/template-vue/src/styles/common/button.postcss

@@ -1,12 +0,0 @@
-button {
-  @apply
-  rounded-lg
-  p-2
-  border-[1px]
-  border-transparent
-  transition-[border-color]
-  duration-300
-  hover:border-[#646cff]
-  focus:outline-4
-  focus:outline-[-webkit-focus-ring-color];
-}

package/template-vue/src/styles/index.postcss

@@ -1 +0,0 @@
-@import './common/all.postcss';

package/template-vue/src/styles/tailwind.postcss

@@ -1,39 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :root {
-    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-    line-height: 1.5;
-    font-weight: 400;
-  
-    color-scheme: light dark;
-    color: rgba(255, 255, 255, 0.87);
-    background-color: #242424;
-  
-    font-synthesis: none;
-    text-rendering: optimizeLegibility;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    -webkit-text-size-adjust: 100%;
-  }
-  
-  body {
-    @apply m-0 flex place-items-center min-w-[320px] min-h-screen; 
-  }
-
-  #app {
-    @apply max-w-7xl mx-auto p-8 text-center;
-  }
-
-  a {
-    @apply font-medium text-[#646cff] decoration-inherit hover:text-[#535bf2];
-  }
-
-  @media (prefers-color-scheme: light) {
-    :root {
-      @apply bg-white text-[#213547];
-    }
-  }
-}

package/template-vue/tailwind.config.js

@@ -1,20 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-
-export default {
-  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
-  theme: {
-    // fontFamily: {
-    //   sans: ["Monda", "Noto Sans TC", "sans-serif"],
-    // },
-    extend: {
-      colors: {
-        primary: '',
-        secondary: '',
-      },
-      backgroundImage: {},
-      animation: {},
-      keyframes: {},
-    },
-  },
-  plugins: [],
-};