@component-hook/create-app 1.5.1 → 1.6.0

package/template-vue/.vscode/settings.json

@@ -0,0 +1,18 @@
+{
+  "editor.tabSize": 2,
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+
+  "[json]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+
+  "debug.javascript.autoAttachFilter": "smart",
+
+  "typescript.tsdk": "node_modules/typescript/lib",
+
+  "workbench.editor.splitInGroupLayout": "vertical",
+  "terminal.integrated.shellIntegration.enabled": true,
+
+  "cSpell.words": ["dotenv", "pinia", "persistedstate", "unplugin", "Sonarjs", "typecheck", "pxtorem", "norem"]
+}

package/template-vue/README.md.art

@@ -0,0 +1,81 @@
+# {{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
+
+- **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), convert modern CSS into something most browsers can understand with [postcss-preset-env](https://www.npmjs.com/package/postcss-preset-env), and analyzes assets with [rollup-plugin-visualizer](https://github.com/btd/rollup-plugin-visualizer).
+{{ciContent}}
+
+## 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_LAST_COMMIT_HASH` is last commit hash at build time
+  - `VITE_APP_BUILD_EPOCH` is populated as `Date.now()` at build time
+  - `VITE_APP_MOCK` is use mock environment
+
+## Project Files
+
+```text
+e2e/*
+src/
+├── assets/*
+│   └── svg-icons
+│          └── vue.svg
+├── components/
+│   └── common
+│       ├── svg-icon/
+│       │   ├── src
+│       │   │   └── index.vue
+│       │   └── index.ts
+│       └── index.ts
+├── constants/*
+├── hooks/*
+├── locales/
+│   ├── en-US.json
+│   └── zh-CN.json
+├── mocks/
+│   ├── handlers/*
+│   │   ├── modules/*
+│   │   └── index.ts
+│   │── browser.ts
+│   └── server.ts
+├── pages/
+│   └── home/
+│       ├── components
+│       │   ├── HelloWorld.test.ts
+│       │   └── HelloWorld.vue
+│       ├── index.test.ts
+│       └── index.vue
+├── plugins/
+│   └── i18n.ts
+├── router/
+│   └── index.ts
+├── stores/
+│   ├── modules
+│   │   └── config.ts
+│   └── index.ts
+├── styles/
+│   ├── common/
+|   │   ├── all.css
+|   │   └── button.css
+│   ├── base.css
+│   ├── index.css
+│   └── tailwind.css
+├── test-utils/
+│   └── index.ts
+├── types/*
+├── utils/*
+├── App.vue
+├── vite-env.d.ts
+└── main.ts
+```

package/template-vue/e2e/home.spec.ts

@@ -0,0 +1,59 @@
+import { expect, test } from '@playwright/test';
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('/');
+});
+
+test('click Vite logo open Vite official website blank tab', async ({ page }) => {
+  const link = page.getByRole('link', { name: /vite logo/i });
+
+  await expect(link).toBeVisible();
+  const [popup] = await Promise.all([page.waitForEvent('popup'), link.evaluate((node: HTMLElement) => node.click())]);
+
+  await popup.waitForLoadState();
+  await expect(popup).toHaveTitle('Vite | Next Generation Frontend Tooling');
+});
+
+test('click Vue logo open Vue official website blank tab', async ({ page }) => {
+  const link = page.getByLabel(/vue link/i);
+
+  await expect(link).toBeVisible();
+  const [popup] = await Promise.all([page.waitForEvent('popup'), link.evaluate((node: HTMLElement) => node.click())]);
+
+  await popup.waitForLoadState();
+  await expect(popup).toHaveTitle('Vue.js - The Progressive JavaScript Framework | Vue.js');
+});
+
+test('homepage count button interact', async ({ page }) => {
+  await page.getByRole('button', { name: 'count is 0' }).click();
+  await expect(page.getByRole('button', { name: 'count is 1' })).toBeVisible();
+  await page.getByRole('button', { name: 'count is 1' }).click();
+  await expect(page.getByRole('button', { name: 'count is 2' })).toBeVisible();
+});
+
+test('locale change interact', async ({ page }) => {
+  await page.getByRole('button', { name: 'English' }).click();
+  await expect(page.getByRole('button', { name: '中文' })).toBeVisible();
+  await page.getByRole('button', { name: '中文' }).click();
+  await expect(page.getByRole('button', { name: 'English' })).toBeVisible();
+});
+
+test('click create-vue link open Vue quick start blank tab', async ({ page }) => {
+  const link = page.getByRole('link', { name: 'create-vue' });
+
+  await expect(link).toBeVisible();
+  const [popup] = await Promise.all([page.waitForEvent('popup'), link.evaluate((node: HTMLElement) => node.click())]);
+
+  await popup.waitForLoadState();
+  await expect(popup).toHaveTitle('Quick Start | Vue.js');
+});
+
+test('click Volar link open language-tools github blank tab', async ({ page }) => {
+  const link = page.getByRole('link', { name: 'Volar' });
+
+  await expect(link).toBeVisible();
+  const [popup] = await Promise.all([page.waitForEvent('popup'), link.evaluate((node: HTMLElement) => node.click())]);
+
+  await popup.waitForLoadState();
+  await expect(popup).toHaveTitle(/vuejs\/language-tools/);
+});

package/template-vue/eslint.config.js

@@ -0,0 +1,18 @@
+import componentHookPlugin from '@component-hook/eslint-plugin';
+
+export default [
+  ...componentHookPlugin.configs.basic,
+  ...componentHookPlugin.configs.vue,
+  componentHookPlugin.configs.prettier,
+  ...componentHookPlugin.configs.sonarjs,
+  componentHookPlugin.configs.security,
+  ...componentHookPlugin.configs.markdown,
+  {
+    files: ['**/*.test.[jt]s?(x)'],
+    ...componentHookPlugin.configs['testing-library/vue'],
+  },
+  {
+    files: ['**/e2e/**/*.spec.[jt]s?(x)'],
+    ...componentHookPlugin.configs.playwright,
+  },
+];

package/template-vue/index.html.art

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link
+      rel="icon"
+      type="image/svg+xml"
+      href="/vite.svg"
+    />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0"
+    />
+    <title>{{projectName}}</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script
+      type="module"
+      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>
+</html>

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

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

package/template-vue/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "vue-starter",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "dev:mock": "cross-env MOCK=true vite",
+    "build": "pnpm typecheck && vite build",
+    "lint": "eslint --fix .",
+    "test:unit": "vitest --coverage",
+    "test:e2e": "playwright test --headed",
+    "test:ui-e2e": "playwright test --ui",
+    "test:ci-e2e": "playwright test",
+    "typecheck": "vue-tsc --noEmit",
+    "prepare": "husky",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "axios": "^1.20.0",
+    "pinia": "^4.0.3",
+    "pinia-plugin-persistedstate": "^4.7.1",
+    "vue": "^3.5.43",
+    "vue-i18n": "^11.4.12",
+    "vue-router": "^5.3.1"
+  },
+  "devDependencies": {
+    "@component-hook/eslint-plugin": "^1.5.1",
+    "@intlify/unplugin-vue-i18n": "^11.2.5",
+    "@playwright/test": "^1.63.0",
+    "@tailwindcss/vite": "^4.3.3",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/user-event": "^14.6.7",
+    "@testing-library/vue": "^8.1.0",
+    "@tsconfig/node24": "^24.0.5",
+    "@types/node": "^24.13.5",
+    "@vitejs/plugin-vue": "^6.0.9",
+    "@vitest/coverage-v8": "^5.0.1",
+    "@vue/tsconfig": "^0.9.1",
+    "cross-env": "^10.1.0",
+    "cssnano": "^9.0.5",
+    "eslint": "^9.39.5",
+    "fast-glob": "^3.3.3",
+    "jsdom": "^30.1.0",
+    "msw": "^2.15.0",
+    "postcss": "^8.5.28",
+    "postcss-preset-env": "^11.5.3",
+    "postcss-pxtorem": "^6.1.0",
+    "prettier": "^3.9.8",
+    "prettier-plugin-tailwindcss": "^0.8.1",
+    "rollup-plugin-visualizer": "^7.1.1",
+    "tailwindcss": "^4.3.3",
+    "typescript": "^6.0.3",
+    "vite": "^8.3.0",
+    "vite-plugin-svg-icons": "^2.0.1",
+    "vitest": "^5.0.1",
+    "vue-tsc": "^3.3.11"
+  },
+  "optionalDependencies": {
+    "@commitlint/cli": "^21.2.2",
+    "@commitlint/config-conventional": "^21.2.2",
+    "husky": "^9.1.7",
+    "lint-staged": "^17.5.1"
+  },
+  "packageManager": "pnpm@12.4.2",
+  "msw": {
+    "workerDirectory": "public"
+  }
+}

package/template-vue/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/template-vue/src/App.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <router-view />
+</template>
+
+<style scoped></style>

package/template-vue/src/assets/svg-icons/vue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

package/template-vue/src/components/common/index.ts

@@ -0,0 +1 @@
+export * from './svg-icon';

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

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

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

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+interface Props {
+  name: string;
+  prefix?: string;
+  color?: string;
+}
+
+defineOptions({ name: 'SvgIcon' });
+const props = withDefaults(defineProps<Props>(), {
+  prefix: 'icon',
+  color: '#333',
+});
+
+const symbolId = computed(() => `#${props.prefix}-${props.name}`);
+</script>
+
+<template>
+  <svg
+    aria-hidden="true"
+    :title="symbolId"
+  >
+    <use
+      :href="symbolId"
+      :fill="color"
+    />
+  </svg>
+</template>

package/template-vue/src/locales/en-US.json

@@ -0,0 +1,3 @@
+{
+  "language": "English"
+}

package/template-vue/src/locales/zh-TW.json

@@ -0,0 +1,3 @@
+{
+  "language": "中文"
+}

package/template-vue/src/main.ts

@@ -0,0 +1,21 @@
+import { createApp } from 'vue';
+import i18NPlugin from '@/plugins/i18n';
+import router from '@/router';
+import App from './App.vue';
+import { createPinia } from './stores';
+import 'virtual:svg-icons-register';
+import '@/styles/index.css';
+
+if (import.meta.env.VITE_APP_MOCK === 'service-worker') {
+  const { worker } = await import('@/mocks/browser');
+
+  worker.start();
+}
+
+const app = createApp(App);
+const pinia = createPinia();
+
+app.use(pinia);
+app.use(router);
+app.use(i18NPlugin);
+app.mount('#app');

package/template-vue/src/mocks/browser.ts

@@ -0,0 +1,4 @@
+import { setupWorker } from 'msw/browser';
+import { handlers } from '@/mocks/handlers';
+
+export const worker = setupWorker(...handlers);

package/template-vue/src/mocks/handlers/index.ts

@@ -0,0 +1 @@
+export const handlers = [];

package/template-vue/src/mocks/server.ts

@@ -0,0 +1,4 @@
+import { setupServer } from 'msw/node';
+import { handlers } from '@/mocks/handlers';
+
+export const mswServer = setupServer(...handlers);

package/template-vue/src/pages/home/components/HelloWorld.test.ts

@@ -0,0 +1,57 @@
+import userEvent from '@testing-library/user-event';
+import { screen } from '@testing-library/vue';
+import HelloWorld from '@/pages/home/components/HelloWorld.vue';
+import i18n from '@/plugins/i18n';
+import { useConfigStore } from '@/stores';
+import { renderComponent } from '@/test-utils';
+
+describe('home page HelloWorld component', () => {
+  const { t } = i18n.global;
+
+  it('renders the correct content', () => {
+    const msg = 'Hello World!';
+    const { version } = useConfigStore();
+
+    renderComponent(HelloWorld, { props: { msg } });
+    expect(screen.getByRole('heading', { name: msg })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /count is 0/i })).toBeInTheDocument();
+    expect(screen.getByText(/check out , the official vue \+ vite starter/i)).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: /create-vue/i })).toBeInTheDocument();
+    expect(screen.getByText(/install in your ide for a better dx/i)).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: /volar/i })).toBeInTheDocument();
+    expect(screen.getByText(/click on the vite and vue logos to learn more/i)).toBeInTheDocument();
+    expect(screen.getByText(version)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: t('language') })).toBeInTheDocument();
+  });
+
+  it('count button interact', async () => {
+    renderComponent(HelloWorld, { props: { msg: '' } });
+    const countButton = screen.getByRole('button', { name: /count is 0/i });
+
+    await userEvent.click(countButton);
+    expect(countButton).toHaveTextContent(/count is 1/i);
+    await userEvent.click(countButton);
+    await userEvent.click(countButton);
+    expect(countButton).toHaveTextContent(/count is 3/i);
+  });
+
+  it('link correct attribute', () => {
+    renderComponent(HelloWorld, { props: { msg: '' } });
+    const createVueLink = screen.getByRole('link', { name: /create-vue/i });
+    const volarLink = screen.getByRole('link', { name: /volar/i });
+
+    expect(createVueLink).toHaveAttribute('href', 'https://vuejs.org/guide/quick-start.html#local');
+    expect(createVueLink).toHaveAttribute('target', '_blank');
+    expect(volarLink).toHaveAttribute('href', 'https://github.com/vuejs/language-tools');
+    expect(volarLink).toHaveAttribute('target', '_blank');
+  });
+
+  it('locale change interact', async () => {
+    renderComponent(HelloWorld, { props: { msg: '' } });
+    const localeButton = screen.getByRole('button', { name: t('language') });
+
+    expect(localeButton).toHaveTextContent('English');
+    await userEvent.click(localeButton);
+    expect(localeButton).toHaveTextContent('中文');
+  });
+});

package/template-vue/src/pages/home/components/HelloWorld.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useConfigStore } from '@/stores';
+
+defineProps<{ msg: string }>();
+
+const { locale } = useI18n();
+const { version } = useConfigStore();
+const count = ref(0);
+
+function changeLocale() {
+  locale.value = locale.value === 'en-US' ? 'zh-TW' : 'en-US';
+}
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+
+  <div class="p-8">
+    <button @click="count++">count is {{ count }}</button>
+  </div>
+
+  <p>
+    Check out
+    <a
+      href="https://vuejs.org/guide/quick-start.html#local"
+      target="_blank"
+      >create-vue</a
+    >, the official Vue + Vite starter
+  </p>
+  <p>
+    Install
+    <a
+      href="https://github.com/vuejs/language-tools"
+      target="_blank"
+      >Volar</a
+    >
+    in your IDE for a better DX
+  </p>
+  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
+  <p class="read-the-docs">
+    {{ version }}
+  </p>
+  <button @click="changeLocale">
+    {{ $t('language') }}
+  </button>
+</template>
+
+<style lang="css" scoped>
+.read-the-docs {
+  color: #888;
+}
+</style>

package/template-vue/src/pages/home/index.test.ts

@@ -0,0 +1,17 @@
+import { screen } from '@testing-library/vue';
+import Home from '@/pages/home/index.vue';
+import { renderComponent } from '@/test-utils';
+
+describe('home page', () => {
+  it('renders the correct content', () => {
+    renderComponent(Home);
+    const viteLink = screen.getByRole('link', { name: /vite logo/i });
+    const vueLink = screen.getByLabelText(/vue link/i);
+
+    expect(viteLink).toHaveAttribute('href', 'https://vitejs.dev');
+    expect(viteLink).toHaveAttribute('target', '_blank');
+
+    expect(vueLink).toHaveAttribute('href', 'https://vuejs.org/');
+    expect(vueLink).toHaveAttribute('target', '_blank');
+  });
+});

package/template-vue/src/pages/home/index.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { SvgIcon } from '@/components/common';
+import HelloWorld from './components/HelloWorld.vue';
+</script>
+
+<template>
+  <div>
+    <a
+      href="https://vitejs.dev"
+      target="_blank"
+    >
+      <img
+        src="/vite.svg"
+        class="logo"
+        alt="Vite logo"
+      />
+    </a>
+    <a
+      href="https://vuejs.org/"
+      target="_blank"
+      aria-label="Vue link"
+    >
+      <svg-icon
+        name="vue"
+        class="logo hover:drop-shadow-[0_0_2em_#42b883aa]"
+      />
+    </a>
+  </div>
+
+  <hello-world msg="Vite + Vue" />
+</template>
+
+<style lang="css" scoped>
+.logo {
+  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/plugins/i18n.ts

@@ -0,0 +1,11 @@
+import messages from '@intlify/unplugin-vue-i18n/messages';
+import { createI18n } from 'vue-i18n';
+
+const i18n = createI18n({
+  legacy: import.meta.env.MODE === 'test',
+  locale: navigator.language,
+  fallbackLocale: 'en-US',
+  messages,
+});
+
+export default i18n;

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

@@ -0,0 +1,23 @@
+import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router';
+import HomePage from '@/pages/home/index.vue';
+
+export const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/:catchAll(.*)',
+    redirect: '/',
+  },
+  {
+    path: '/',
+    component: HomePage,
+    meta: {
+      title: 'Vue3 Coding Standards',
+    },
+  },
+];
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+});
+
+export default router;

package/template-vue/src/stores/constants.ts.art

@@ -0,0 +1 @@
+export const STORAGE_PREFIX = '{{projectName}}';

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

@@ -0,0 +1,15 @@
+import { createPinia as create } from 'pinia';
+import { createPersistedState } from 'pinia-plugin-persistedstate';
+import { STORAGE_PREFIX } from './constants';
+export { useConfigStore } from './modules/config';
+
+export function createPinia() {
+  const pinia = create();
+  const persistedState = createPersistedState({
+    key: storeKey => `${STORAGE_PREFIX}-${storeKey}`,
+  });
+
+  pinia.use(persistedState);
+
+  return pinia;
+}

package/template-vue/src/stores/modules/config.ts

@@ -0,0 +1,20 @@
+import { defineStore } from 'pinia';
+
+const versionString = import.meta.env.DEV
+  ? `${import.meta.env.VITE_APP_VERSION}-dev`
+  : import.meta.env.VITE_APP_VERSION;
+
+const defaultState = {
+  isDev: import.meta.env.DEV,
+  version: versionString,
+};
+
+export const useConfigStore = defineStore('config', {
+  state: () => defaultState,
+  getters: {},
+  actions: {},
+  persist: {
+    storage: localStorage,
+    pick: [],
+  },
+});