@citruslime/create-boilerplate 1.0.0 → 1.0.1

package/hooks/post-checkout

@@ -8,4 +8,4 @@ if ! command -v "$yarn_directory\yarn" -v; then
     npm install --global yarn
 fi
 
-"$yarn_directory\yarn" install -W
+"$yarn_directory\yarn" install --cwd "[[PACKAGE_DIR]]"

package/hooks/post-merge

@@ -8,4 +8,4 @@ if ! command -v "$yarn_directory\yarn" -v; then
     npm install --global yarn
 fi
 
-"$yarn_directory\yarn" install -W
+"$yarn_directory\yarn" install --cwd "[[PACKAGE_DIR]]"

package/hooks/pre-commit

@@ -8,4 +8,4 @@ if ! command -v "$yarn_directory\yarn" -v; then
     npm install --global yarn
 fi
 
-"$yarn_directory\yarn" pre-commit-lint
+"$yarn_directory\yarn" --cwd "[[PACKAGE_DIR]]" pre-commit-lint

package/main.mjs

@@ -1,26 +1,26 @@
 #!/usr/bin/env node
 
-import { execSync } from 'child_process';
-import { existsSync, mkdirSync, readdirSync, readFileSync, rmSync, statSync, writeFileSync } from 'fs';
-import { dirname, join } from 'path';
-import { fileURLToPath } from 'url';
+import { execSync } from 'node:child_process';
+import { existsSync, mkdirSync, readdirSync, readFileSync, rmSync, statSync, writeFileSync } from 'node:fs';
+import { join, relative } from 'node:path';
+import { fileURLToPath, URL } from 'node:url';
 
-import { lightBlue, green, red } from 'kolorist';
+import { green, lightBlue, lightYellow, red } from 'kolorist';
 import parseArgs from 'minimist';
 import prompts from 'prompts';
 
 const argv = parseArgs(process.argv.slice(2));
 const cwd = process.cwd();
-const codeDir = fileURLToPath(dirname(import.meta.url));
+const codeDir = fileURLToPath(new URL('./', import.meta.url));
 
 const placeholdersToReplace = {
     /* eslint-disable @typescript-eslint/naming-convention */
     '[[PACKAGE_NAME]]': '',
-    '[[REPOSITORY_ROOT]]': '',
+    '[[PACKAGE_DIR]]': '',
+    '[[ROOT_DIR]]': '',
     '[[HUSKY_DIR]]': '',
-    '[[BACKEND_PORT]]': 0,
-    '[[FRONTEND_PORT]]': 0,
-    '\n        // eslint-disable-next-line array-bracket-spacing': ''
+    '\'[[PROXY]]\'': '{}',
+    '\'[[FRONTEND_PORT]]\'': 0
     /* eslint-enable @typescript-eslint/naming-convention */
 };
 
@@ -29,10 +29,10 @@ const filesToRename = {
     _gitignore: '.gitignore',
     _editorconfig: '.editorconfig',
     _eslintignore: '.eslintignore',
-    '_eslintrc.js': '.eslintrc.js',
+    '_eslintrc.cjs': '.eslintrc.cjs',
     '_lintstagedrc.json': '.lintstagedrc.json',
     _stylelintignore: '.stylelintignore',
-    '_stylelintrc.js': '.stylelintrc.js',
+    '_stylelintrc.cjs': '.stylelintrc.cjs',
     'template.code-workspace': 'citrus-lime.code-workspace'
     /* eslint-enable @typescript-eslint/naming-convention */
 };
@@ -70,6 +70,10 @@ const dependenciesToInstall = [
         name: '@citruslime/theme',
         dev: true
     },
+    {
+        name: '@iconify/vue',
+        dev: true
+    },
     {
         name: '@types/node',
         dev: true
@@ -79,7 +83,7 @@ const dependenciesToInstall = [
         dev: true
     },
     {
-        name: '@iconify/vue',
+        name: '@vue/tsconfig',
         dev: true
     },
     {
@@ -94,10 +98,18 @@ const dependenciesToInstall = [
         name: 'postcss',
         dev: true
     },
+    {
+        name: 'npm-run-all',
+        dev: true
+    },
     {
         name: 'typescript',
         dev: true
     },
+    {
+        name: 'unplugin-auto-import',
+        dev: true
+    },
     {
         name: 'unplugin-vue-components',
         dev: true
@@ -125,25 +137,27 @@ const dependenciesToInstall = [
  */
 async function init () {
     let packageDir = argv._[0];
+    const rootDir = execSync('git rev-parse --show-toplevel')
+        .toString()
+        .trim();
 
     const {
         packageName,
         empty,
-        packageManager,
-        rootDir,
-        frontendPort,
-        backendPort
+        backendPort,
+        packageManager
     } = await prompts([
         {
             type: 'text',
             name: 'packageName',
-            message: 'Enter a package name:',
-            validate: (value) => /^(?:@[a-z0-9-*~][a-z0-9-*._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/.test(value)
+            message: 'Enter a name for the project:',
+            validate: (value) => /^(?:@[a-z0-9-*~][a-z0-9-*._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/.test(value) || 'Invalid package name'
         },
         {
             type: packageDir ? null : 'text',
             name: 'packageDir',
-            message: 'Enter a directory for the package:',
+            message: 'Enter a directory for the project:',
+            initial: '.',
             onState: (state) => packageDir = state.value
         },
         {
@@ -161,6 +175,18 @@ async function init () {
             },
             name: 'emptyConfirmation'
         },
+        {
+            type: 'confirm',
+            name: 'hasApi',
+            message: 'Setup backend proxy?',
+            initial: true
+        },
+        {
+            type: (prev) => prev ? 'text' : null,
+            name: 'backendPort',
+            message: 'Enter the port that the backend server runs on:',
+            initial: 0
+        },
         {
             type: 'select',
             name: 'packageManager',
@@ -170,28 +196,16 @@ async function init () {
                     title: 'yarn',
                     value: 'yarn'
                 },
+                {
+                    title: 'pnpm',
+                    value: 'pnpm'
+                },
                 {
                     title: 'npm',
                     value: 'npm'
                 }
             ],
             initial: 0
-        },
-        {
-            type: 'text',
-            name: 'rootDir',
-            message: 'Enter the relative path to the root of the repository:',
-            validate: (value) => value && value?.trim() !== ''
-        },
-        {
-            type: 'number',
-            name: 'frontendPort',
-            message: 'Enter the port for the dev server to run on:'
-        },
-        {
-            type: 'text',
-            name: 'backendPort',
-            message: 'Enter the port that the backend server runs on:'
         }
     ], {
         onCancel: () => cancel()
@@ -201,7 +215,7 @@ async function init () {
 
     packageDir = packageDir.toString();
 
-    setReplacements(packageName, rootDir, frontendPort, backendPort);
+    setReplacements(packageName, packageDir, rootDir, backendPort ?? 0);
     prepareDir(join(cwd, packageDir), empty);
     copyTemplate(packageDir);
 
@@ -209,7 +223,7 @@ async function init () {
     installDependencies(packageManager);
 
     print(lightBlue('Creating hooks...'), true);
-    copyHooks(packageDir, rootDir);
+    copyHooks(rootDir);
 
     print(green(`Package ${packageName} has been successfully initialised in ${packageDir}.`), true);
 }
@@ -218,18 +232,31 @@ async function init () {
  * Set the dynamic values for the file renaming and placeholder replacements.
  *
  * @param {string} packageName The name of the package being created.
+ * @param {string} packageDir The directory of the package being created.
  * @param {string} rootDir The relative path of the root of the repository.
- * @param {number} frontendPort The port that the frontend dev server will run on.
  * @param {number} backendPort The port that the backend server runs on.
  */
-function setReplacements (packageName, rootDir, frontendPort, backendPort) {
-    filesToRename['template.code-workspace'] = `${packageName}.code-workspace`;
+function setReplacements (packageName, packageDir, rootDir, backendPort) {
+    const husky = relative(join(cwd, packageDir, '.vscode'), join(rootDir, '.husky'));
+    const repoRoot = relative(join(cwd, packageDir), rootDir);
+    const projDir = relative(rootDir, join(cwd, packageDir));
 
+    filesToRename['template.code-workspace'] = `${packageName}.code-workspace`;
     placeholdersToReplace['[[PACKAGE_NAME]]'] = packageName;
-    placeholdersToReplace['[[REPOSITORY_ROOT]]'] = rootDir;
-    placeholdersToReplace['[[HUSKY_DIR]]'] = join(rootDir, '.husky').replace('\\', '/');
-    placeholdersToReplace['[[FRONTEND_PORT]]'] = frontendPort;
-    placeholdersToReplace['[[BACKEND_PORT]]'] = backendPort;
+    placeholdersToReplace['[[PACKAGE_DIR]]'] = projDir;
+    placeholdersToReplace['[[ROOT_DIR]]'] = repoRoot.replaceAll('\\', '/');
+    placeholdersToReplace['[[HUSKY_DIR]]'] = husky.replaceAll('\\', '/');
+    placeholdersToReplace['\'[[FRONTEND_PORT]]\''] = Math.floor(Math.random() * 1001) + 4000;
+
+    if (backendPort !== 0) {
+        placeholdersToReplace['\'[[PROXY]]\''] = `{
+            '/api': {
+                target: 'https://localhost:${backendPort}',
+                secure: false,
+                rewrite: (path) => path.replace('/api', '')
+            }
+        }`;
+    }
 }
 
 /**
@@ -270,14 +297,18 @@ function copyTemplate (packageDir) {
 /**
  * Copies the hooks directory into the husky directory for the repository.
  *
- * @param {string} packageDir The directory of the new package.
  * @param {string} rootDir The relative path from the package directory to the root of the repository.
  */
-function copyHooks (packageDir, rootDir) {
+function copyHooks (rootDir) {
     const hooksDir = join(codeDir, 'hooks');
-    const huskyDir = join(cwd, packageDir, rootDir, '.husky');
+    const huskyDir = join(rootDir, '.husky');
 
-    forEachInDir(hooksDir, (item) => copy(hooksDir, huskyDir, item));
+    if (existsSync(join(huskyDir, 'common.sh'))) {
+        print(lightYellow('Git Hooks already installed by another package in this repo. These will need to be edited manually.\n'), true);
+    }
+    else {
+        forEachInDir(hooksDir, (item) => copy(hooksDir, huskyDir, item));
+    }
 }
 
 /**
@@ -331,7 +362,7 @@ function copy (source, destination, item) {
  * @param {string} packageManager The package manager to use.
  */
 function installDependencies (packageManager) {
-    const prefix = `${packageManager} ${packageManager === 'yarn' ? 'add' : 'install'}`;
+    const prefix = `${packageManager} ${packageManager !== 'npm' ? 'add' : 'install'}`;
 
     print(lightBlue('Installing dev dependencies...'), true);
 
@@ -367,6 +398,8 @@ function forEachInDir (dir, callback) {
 
 /**
  * Throws an error to indicate that the current operation has been cancelled.
+ *
+ * @throws Operation cancelled error.
  */
 function cancel () {
     throw new Error('Operation was cancelled.');
@@ -376,11 +409,11 @@ function cancel () {
  * Prints a message to the console.
  *
  * @param {string} message The message to display.
- * @param {boolean} clearPrevious Whether to clear the previous line before displaying the new one.
+ * @param {boolean} clearPrevious Whether to clear any existing message.
  */
 function print (message, clearPrevious = false) {
     if (clearPrevious) {
-        process.stdout.clearLine();
+        process.stdout.clearLine(0);
         process.stdout.cursorTo(0);
     }
 
@@ -392,4 +425,5 @@ try {
 }
 catch (e) {
     print(`\n${red(e.message)}`);
+    process.exit(1);
 }

package/package.json

@@ -1,6 +1,7 @@
 {
     "name": "@citruslime/create-boilerplate",
-    "version": "1.0.0",
+    "type": "module",
+    "version": "1.0.1",
     "author": {
         "name": "Citrus-Lime Ltd",
         "url": "https://citruslime.com"
@@ -15,19 +16,19 @@
         "template",
         "hooks"
     ],
+    "maintainers": [
+        "Citrus-Lime"
+    ],
     "main": "main.mjs",
     "bin": {
         "create-boilerplate": "main.mjs"
     },
     "engines": {
-        "node": ">=14.0.0"
+        "node": ">=16.0.0"
     },
     "dependencies": {
         "kolorist": "^1.5.1",
-        "minimist": "^1.2.5",
+        "minimist": "^1.2.6",
         "prompts": "^2.4.2"
-    },
-    "devDependencies": {
-        "@types/prompts": "^2.0.14"
     }
 }

package/template/.vscode/extensions.json

@@ -1,11 +1,12 @@
 {
     "recommendations": [
-        "johnsoncodehk.volar",
+        "Vue.volar",
         "dbaeumer.vscode-eslint",
         "stylelint.vscode-stylelint",
         "bradlc.vscode-tailwindcss",
         "eamodio.gitlens",
         "christian-kohler.npm-intellisense",
+        "pmneo.tsimporter",
         "editorconfig.editorconfig",
         "cpylua.language-postcss",
         "antfu.iconify"

package/template/.vscode/settings.json

@@ -1,9 +1,10 @@
 {
-    "[css]": {
-        "editor.insertSpaces": false
+    "[json]": {
+        "editor.defaultFormatter": "vscode.json-language-features"
+    },
+    "[jsonc]": {
+        "editor.defaultFormatter": "vscode.json-language-features"
     },
-    "css.validate": false,
-    "diffEditor.ignoreTrimWhitespace": false,
     "editor.codeActionsOnSave": {
         "source.fixAll": true,
         "source.fixAll.eslint": true,
@@ -11,10 +12,7 @@
         "source.organizeImports": false
     },
     "editor.defaultFormatter": "dbaeumer.vscode-eslint",
-    "editor.detectIndentation": false,
     "editor.formatOnSave": true,
-    "editor.linkedEditing": true,
-    "eslint.alwaysShowStatus": true,
     "eslint.validate": [
         "html",
         "javascript",
@@ -23,15 +21,21 @@
     ],
     "files.encoding": "utf8",
     "files.eol": "\n",
-    "files.trimTrailingWhitespace": true,
-    "npm-intellisense.scanDevDependencies": true,
-    "npm-intellisense.showBuildInLibs": true,
+    "files.exclude": {
+        ".husky": true,
+        "node_modules": true,
+        "packages": true,
+        "pipelines": true
+    },
     "stylelint.validate": [
         "css",
         "postcss",
         "vue"
     ],
     "tailwindCSS.includeLanguages": {
-        "vue": "html"
-    }
+        "vue": "html",
+        "vue-html": "html"
+    },
+    "volar.codeLens.pugTools": false,
+    "volar.completion.autoImportComponent": false
 }

package/template/.vscode/template.code-workspace

@@ -6,15 +6,16 @@
         },
         {
             "name": "Hooks",
-            "path": "../[[HUSKY_DIR]]"
+            "path": "[[HUSKY_DIR]]"
         }
     ],
     "settings": {
-        "[css]": {
-            "editor.insertSpaces": false
+        "[json]": {
+            "editor.defaultFormatter": "vscode.json-language-features"
+        },
+        "[jsonc]": {
+            "editor.defaultFormatter": "vscode.json-language-features"
         },
-        "css.validate": false,
-        "diffEditor.ignoreTrimWhitespace": false,
         "editor.codeActionsOnSave": {
             "source.fixAll": true,
             "source.fixAll.eslint": true,
@@ -22,10 +23,7 @@
             "source.organizeImports": false
         },
         "editor.defaultFormatter": "dbaeumer.vscode-eslint",
-        "editor.detectIndentation": false,
         "editor.formatOnSave": true,
-        "editor.linkedEditing": true,
-        "eslint.alwaysShowStatus": true,
         "eslint.validate": [
             "html",
             "javascript",
@@ -34,26 +32,33 @@
         ],
         "files.encoding": "utf8",
         "files.eol": "\n",
-        "files.trimTrailingWhitespace": true,
-        "npm-intellisense.scanDevDependencies": true,
-        "npm-intellisense.showBuildInLibs": true,
+        "files.exclude": {
+            ".husky": true,
+            "node_modules": true,
+            "packages": true,
+            "pipelines": true
+        },
         "stylelint.validate": [
             "css",
             "postcss",
             "vue"
         ],
         "tailwindCSS.includeLanguages": {
-            "vue": "html"
-        }
+            "vue": "html",
+            "vue-html": "html"
+        },
+        "volar.codeLens.pugTools": false,
+        "volar.completion.autoImportComponent": false
     },
     "extensions": {
         "recommendations": [
-            "johnsoncodehk.volar",
+            "Vue.volar",
             "dbaeumer.vscode-eslint",
             "stylelint.vscode-stylelint",
             "bradlc.vscode-tailwindcss",
             "eamodio.gitlens",
             "christian-kohler.npm-intellisense",
+            "pmneo.tsimporter",
             "editorconfig.editorconfig",
             "cpylua.language-postcss",
             "antfu.iconify"

package/template/_eslintignore

@@ -1,3 +1,6 @@
 dist
 node_modules
-index.html
+auto-imports.d.ts
+components.d.ts
+**/*.html
+

package/template/_eslintrc.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+    extends: [
+        require.resolve('@citruslime/config/eslint'),
+        './.eslintrc-auto-import.json'
+    ]
+};

package/template/_gitignore

@@ -1,6 +1,22 @@
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
 node_modules
 .DS_Store
 dist
 dist-ssr
 *.local
-*.log
+
+.vscode/*
+!.vscode/*.code-workspace
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

package/template/_lintstagedrc.json

@@ -1,5 +1,5 @@
 {
-    "./**/*.+(js|ts|vue)": [
+    "./**/*.+(js|cjs|mjs|ts|vue)": [
         "eslint --fix"
     ],
     "./**/*.(css|vue)": [

package/template/_stylelintrc.cjs

@@ -0,0 +1,3 @@
+module.exports = {
+    extends: [require.resolve('@citruslime/config/stylelint')]
+};

package/template/env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="vite/client" />
+/// <reference types="vite-plugin-pages/client" />

package/template/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Citrus-Lime</title>
+    <title>[[PACKAGE_NAME]]</title>
   </head>
   <body>
     <div id="app"></div>

package/template/package.json

@@ -1,13 +1,16 @@
 {
     "name": "[[PACKAGE_NAME]]",
+    "type": "module",
     "version": "0.0.0",
     "private": true,
     "scripts": {
         "dev": "vite",
-        "build": "vue-tsc --noEmit --skipLibCheck && vite build",
+        "build": "run-p type-check build-only",
+        "build-only": "vite build",
+        "type-check": "vue-tsc --noEmit",
         "serve": "vite preview",
-        "lint": "eslint . --ext .js,.ts,.vue --fix && stylelint **/*.{css,vue} --fix",
+        "lint": "eslint . --ext .js,.cjs,.mjs,.ts,.vue --fix && stylelint **/*.{css,vue} --fix",
         "pre-commit-lint": "yarn lint-staged",
-        "prepare": "cd [[REPOSITORY_ROOT]] && husky install"
+        "prepare": "cd [[ROOT_DIR]] && husky install"
     }
 }

package/template/src/app.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { useRoute } from 'vue-router';
-
 const route = useRoute();
 </script>
 

package/template/src/main.ts

@@ -1,10 +1,8 @@
 import ui from '@citruslime/ui';
-import { createPinia } from 'pinia';
+import '@citruslime/utils';
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
-import { createApp } from 'vue';
 
 import app from './app.vue';
-import router from './router';
 
 const pinia = createPinia();
 

package/template/src/{views → pages}/dasboard/index.vue

@@ -6,10 +6,6 @@
 
 <script setup lang="ts">
 import { setLocaleMessages } from '@citruslime/ui';
-import { storeToRefs } from 'pinia';
-import { useI18n } from 'vue-i18n';
-
-import { useAuthStore } from '@/state';
 
 const { username } = storeToRefs(useAuthStore());
 const { t } = useI18n();

package/template/src/state/{authentication/index.ts → authentication.ts}

@@ -1,5 +1,3 @@
-import { defineStore } from 'pinia';
-
 export const useAuthStore = defineStore('auth', {
     state: () => ({
         username: 'Nobody',

package/template/tailwind.config.cjs

@@ -0,0 +1,7 @@
+module.exports = {
+    presets: [require('@citruslime/theme')],
+    content: [
+        './index.html',
+        './src/**/*.{vue,js,cjs,mjs,ts}'
+    ]
+};

package/template/tsconfig.app.json

@@ -0,0 +1,28 @@
+{
+    "extends": "@vue/tsconfig/tsconfig.web.json",
+    "include": [
+        "auto-imports.d.ts",
+        "components.d.ts",
+        "env.d.ts",
+        "src/**/*.ts",
+        "src/**/*.d.ts",
+        "src/**/*.vue"
+    ],
+    "exclude": [
+        "src/**/__tests__/*"
+    ],
+    "compilerOptions": {
+        "composite": true,
+        "baseUrl": ".",
+        "lib": [
+            "ESNext",
+            "DOM",
+            "DOM.Iterable"
+        ],
+        "paths": {
+            "@/*": [
+                "./src/*"
+            ]
+        }
+    }
+}

package/template/tsconfig.config.json

@@ -0,0 +1,14 @@
+{
+    "extends": "@vue/tsconfig/tsconfig.node.json",
+    "include": [
+        "vite.config.*",
+        "vitest.config.*",
+        "cypress.config.*"
+    ],
+    "compilerOptions": {
+        "composite": true,
+        "types": [
+            "node"
+        ]
+    }
+}

package/template/tsconfig.json

@@ -1,29 +1,14 @@
 {
-    "compilerOptions": {
-        "target": "esnext",
-        "useDefineForClassFields": true,
-        "module": "esnext",
-        "moduleResolution": "node",
-        "strict": true,
-        "jsx": "preserve",
-        "sourceMap": true,
-        "resolveJsonModule": true,
-        "esModuleInterop": true,
-        "strictNullChecks": true,
-        "lib": [
-            "esnext",
-            "dom"
-        ],
-        "paths": {
-            "@/*": [
-                "./src/*"
-            ]
+    "files": [],
+    "references": [
+        {
+            "path": "./tsconfig.config.json"
+        },
+        {
+            "path": "./tsconfig.app.json"
+        },
+        {
+            "path": "./tsconfig.vitest.json"
         }
-    },
-    "include": [
-        "src/**/*.ts",
-        "src/**/*.d.ts",
-        "src/**/*.vue",
-        "./components.d.ts"
     ]
 }

package/template/tsconfig.vitest.json

@@ -0,0 +1,12 @@
+{
+    "extends": "./tsconfig.app.json",
+    "exclude": [],
+    "compilerOptions": {
+        "composite": true,
+        "lib": [],
+        "types": [
+            "node",
+            "jsdom"
+        ]
+    }
+}

package/template/vite.config.ts

@@ -1,6 +1,7 @@
-import path from 'path';
+import { fileURLToPath, URL } from 'node:url';
 
 import vue from '@vitejs/plugin-vue';
+import autoImport from 'unplugin-auto-import/vite';
 import { VueUseComponentsResolver } from 'unplugin-vue-components/resolvers';
 import components from 'unplugin-vue-components/vite';
 import { defineConfig } from 'vite';
@@ -9,19 +10,39 @@ import pages from 'vite-plugin-pages';
 
 export default defineConfig({
     plugins: [
-        vue(),
-        pages({
-            pagesDir: 'src/views',
-            extensions: [ 'vue' ]
+        autoImport({
+            dts: true,
+            dirs: [
+                'src/router/**',
+                'src/state/**'
+            ],
+            imports: [
+                '@vueuse/core',
+                'pinia',
+                'vue',
+                'vue-i18n',
+                'vue-router'
+            ],
+            eslintrc: {
+                enabled: true,
+                filepath: '.eslintrc-auto-import.json',
+                globalsPropValue: true
+            },
+            vueTemplate: true
         }),
         components({
+            dts: true,
             dirs: [
                 'src/components',
                 'src/pages'
             ],
-            dts: true,
-            resolvers: [ VueUseComponentsResolver() ]
+            resolvers: [VueUseComponentsResolver()]
         }),
+        pages({
+            pagesDir: 'src/pages',
+            extensions: ['vue']
+        }),
+        vue(),
         mkcert()
     ],
     build: {
@@ -35,37 +56,26 @@ export default defineConfig({
             }
         }
     },
+    optimizeDeps: {
+        include: ['vue-i18n']
+    },
+    /* eslint-disable @typescript-eslint/naming-convention */
     define: {
-        /* eslint-disable @typescript-eslint/naming-convention */
         __VUE_I18N_FULL_INSTALL__: true,
         __VUE_I18N_LEGACY_API__: false,
         __INTLIFY_PROD_DEVTOOLS__: false
-        /* eslint-enable @typescript-eslint/naming-convention */
-    },
-    optimizeDeps: {
-        include: [ 'vue-i18n' ]
     },
     resolve: {
         alias: {
-            /* eslint-disable @typescript-eslint/naming-convention */
-            '@': path.resolve(__dirname, 'src'),
+            '@': fileURLToPath(new URL('./src', import.meta.url)),
             'vue-i18n': 'vue-i18n/dist/vue-i18n.esm-bundler.js'
-            /* eslint-enable @typescript-eslint/naming-convention */
         }
     },
     server: {
         open: true,
         https: true,
-        // eslint-disable-next-line array-bracket-spacing
-        port: [[FRONTEND_PORT]],
-        proxy: {
-            /* eslint-disable @typescript-eslint/naming-convention */
-            '/api': {
-                target: 'https://localhost:[[BACKEND_PORT]]',
-                secure: false,
-                rewrite: (path) => path.replace('/api', '')
-            }
-            /* eslint-enable @typescript-eslint/naming-convention */
-        }
+        port: '[[FRONTEND_PORT]]',
+        proxy: '[[PROXY]]'
     }
+    /* eslint-enable @typescript-eslint/naming-convention */
 });

package/template/_eslintrc.js

@@ -1,3 +0,0 @@
-module.exports = {
-    extends: [ require.resolve('@citruslime/config/eslint') ]
-};

package/template/_stylelintrc.js

@@ -1,3 +0,0 @@
-module.exports = {
-    extends: [ require.resolve('@citruslime/config/stylelint') ]
-};

package/template/src/env.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="vite/client" />
-/// <reference types="vite-plugin-pages/client" />
-
-declare module '*.vue' {
-    import type { DefineComponent } from 'vue';
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
-    const component: DefineComponent<{}, {}, any>;
-    export default component;
-}

package/template/src/state/index.ts

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

package/template/tailwind.config.js

@@ -1,7 +0,0 @@
-module.exports = {
-    presets: [ require('@citruslime/theme') ],
-    content: [
-        './index.html',
-        './src/**/*.{vue,js,ts,jsx,tsx}'
-    ]
-};