create-vuetify 1.0.4 → 1.0.6

package/README.md

@@ -4,11 +4,10 @@
 
 `create-vuetify` provides flags that can be passed when using the CLI to generate a new project.
 
-| **Flags**      | **Values**                        | **Example**                             |
-|:---------------|-----------------------------------|-----------------------------------------|
-| `preset`       | `default, base, essentials`       | `--preset="default" or --preset default`|
-| `typescript`   | `boolean`                         | `--typescript`                          |
-
+| **Flags**    | **Values**                                | **Example**                              |
+| :----------- | ----------------------------------------- | ---------------------------------------- |
+| `preset`     | `default`, `base`, `essentials`, `custom` | `--preset="default" or --preset default` |
+| `typescript` | `boolean`                                 | `--typescript`                           |
 
 ## 💪 Supporting Vuetify
 

package/dist/output.cjs

@@ -17,12 +17,139 @@ var __copyProps = (to, from, except, desc) => {
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
 
 // src/index.ts
-var import_path2 = require("path");
-var import_fs2 = require("fs");
+var import_path3 = require("path");
+var import_fs3 = require("fs");
+
+// src/utils/prompts.ts
+var import_path = require("path");
+var import_fs = require("fs");
+
+// src/utils/presets.ts
+var defaultContext = {
+  useEslint: false,
+  useRouter: false,
+  useStore: false
+};
+var baseContext = {
+  ...defaultContext,
+  useEslint: true,
+  useRouter: true
+};
+var essentialsContext = {
+  ...baseContext,
+  useStore: true
+};
+var presets = {
+  base: baseContext,
+  default: defaultContext,
+  essentials: essentialsContext
+};
+
+// src/utils/prompts.ts
 var import_kolorist = require("kolorist");
-var import_minimist = __toESM(require("minimist"), 1);
 var import_prompts = __toESM(require("prompts"), 1);
 var import_validate_npm_package_name = __toESM(require("validate-npm-package-name"), 1);
+var promptQuestions = (context) => [
+  {
+    name: "projectName",
+    type: "text",
+    message: "Project name:",
+    initial: "vuetify-project",
+    validate: (v) => {
+      const { errors } = (0, import_validate_npm_package_name.default)(String(v).trim());
+      return !(errors && errors.length) || `Package ${errors[0]}`;
+    }
+  },
+  {
+    name: "canOverwrite",
+    active: "Yes",
+    inactive: "No",
+    initial: false,
+    type: (_, { projectName }) => {
+      const projectPath = (0, import_path.join)(context.cwd, projectName);
+      return !(0, import_fs.existsSync)(projectPath) || (0, import_fs.readdirSync)(projectPath).length === 0 ? null : "toggle";
+    },
+    message: (prev) => `The project path: ${(0, import_path.resolve)(context.cwd, prev)} already exists, would you like to overwrite this directory?`
+  },
+  {
+    name: "usePreset",
+    type: context.usePreset ? null : "select",
+    message: "Which preset would you like to install?",
+    initial: 1,
+    choices: [
+      { title: "Default (Vuetify)", value: "default" },
+      { title: "Base (Vuetify, VueRouter)", value: "base" },
+      { title: "Essentials (Vuetify, VueRouter, Pinia)", value: "essentials" },
+      { title: "Custom (Choose your features)", value: "custom" }
+    ]
+  },
+  {
+    name: "useTypeScript",
+    type: context.useTypeScript ? null : "toggle",
+    message: "Use TypeScript?",
+    active: "Yes",
+    inactive: "No",
+    initial: false
+  },
+  {
+    name: "useRouter",
+    type: (_, { usePreset }) => usePreset !== "custom" && context.usePreset !== "custom" ? null : "toggle",
+    message: "Use Vue Router?",
+    active: "Yes",
+    inactive: "No",
+    initial: false
+  },
+  {
+    name: "useStore",
+    type: (_, { usePreset }) => usePreset !== "custom" && context.usePreset !== "custom" ? null : "toggle",
+    message: "Use Pinia?",
+    active: "Yes",
+    inactive: "No",
+    initial: false
+  },
+  {
+    name: "useEslint",
+    type: (_, { usePreset }) => usePreset !== "custom" && context.usePreset !== "custom" ? null : "toggle",
+    message: "Use ESLint?",
+    active: "Yes",
+    inactive: "No",
+    initial: false
+  },
+  {
+    name: "usePackageManager",
+    type: "select",
+    message: "Would you like to install dependencies with yarn, npm, or pnpm?",
+    initial: 0,
+    choices: [
+      { title: "yarn", value: "yarn" },
+      { title: "npm", value: "npm" },
+      { title: "pnpm", value: "pnpm" },
+      { title: "none", value: null }
+    ]
+  }
+];
+var promptOptions = {
+  onCancel: () => {
+    throw new Error((0, import_kolorist.red)("\u2716") + " Operation cancelled");
+  }
+};
+var initPrompts = async (context) => {
+  if (context.usePreset && context.usePreset !== "custom") {
+    context = {
+      ...context,
+      ...presets[context.usePreset]
+    };
+  }
+  const answers = await (0, import_prompts.default)(promptQuestions(context), promptOptions);
+  return {
+    ...context,
+    ...answers
+  };
+};
+
+// src/index.ts
+var import_kolorist2 = require("kolorist");
+var import_minimist = __toESM(require("minimist"), 1);
 
 // src/utils/installDependencies.ts
 var import_child_process = require("child_process");
@@ -39,8 +166,8 @@ function installDependencies(projectRoot, packageManager) {
 }
 
 // src/utils/renderTemplate.ts
-var import_fs = require("fs");
-var import_path = require("path");
+var import_fs2 = require("fs");
+var import_path2 = require("path");
 
 // src/utils/deepMerge.ts
 var isObject = (v) => {
@@ -61,26 +188,30 @@ var deepMerge = (...sources) => sources.reduce((acc, curr) => {
 
 // src/utils/renderTemplate.ts
 function mergePkg(source, destination) {
-  const target = JSON.parse((0, import_fs.readFileSync)(destination, "utf8"));
-  const src = JSON.parse((0, import_fs.readFileSync)(source, "utf8"));
+  const target = JSON.parse((0, import_fs2.readFileSync)(destination, "utf8"));
+  const src = JSON.parse((0, import_fs2.readFileSync)(source, "utf8"));
   const mergedPkg = deepMerge(target, src);
-  (0, import_fs.writeFileSync)(destination, JSON.stringify(mergedPkg, null, 2) + "\n");
+  const keysToSort = ["devDependencies", "dependencies"];
+  keysToSort.forEach((k) => {
+    mergedPkg[k] = Object.keys(mergedPkg[k]).sort().reduce((a, c) => (a[c] = mergedPkg[k][c], a), {});
+  });
+  (0, import_fs2.writeFileSync)(destination, JSON.stringify(mergedPkg, null, 2) + "\n");
 }
 function renderDirectory(source, destination) {
-  (0, import_fs.mkdirSync)(destination, { recursive: true });
-  (0, import_fs.readdirSync)(source).forEach((path) => renderTemplate((0, import_path.resolve)(source, path), (0, import_path.resolve)(destination, path)));
+  (0, import_fs2.mkdirSync)(destination, { recursive: true });
+  (0, import_fs2.readdirSync)(source).forEach((path) => renderTemplate((0, import_path2.resolve)(source, path), (0, import_path2.resolve)(destination, path)));
 }
 function renderFile(source, destination) {
-  const filename = (0, import_path.basename)(source);
+  const filename = (0, import_path2.basename)(source);
   if (filename.startsWith("_"))
-    destination = (0, import_path.resolve)((0, import_path.dirname)(destination), filename.replace("_", "."));
+    destination = (0, import_path2.resolve)((0, import_path2.dirname)(destination), filename.replace("_", "."));
   if (filename === "package.json")
     mergePkg(source, destination);
   else
-    (0, import_fs.copyFileSync)(source, destination);
+    (0, import_fs2.copyFileSync)(source, destination);
 }
 function renderTemplate(source, destination) {
-  if ((0, import_fs.statSync)(source).isDirectory()) {
+  if ((0, import_fs2.statSync)(source).isDirectory()) {
     renderDirectory(source, destination);
   } else {
     renderFile(source, destination);
@@ -88,96 +219,68 @@ function renderTemplate(source, destination) {
 }
 
 // src/index.ts
-var validPresets = ["base", "default", "essentials"];
+var validPresets = ["base", "custom", "default", "essentials"];
 async function run() {
-  const cwd = process.cwd();
   const argv = (0, import_minimist.default)(process.argv.slice(2), {
     alias: {
       "typescript": ["ts"]
     }
   });
   if (argv.preset && !validPresets.includes(argv.preset)) {
-    throw new Error(`'${argv.preset}' is not a valid preset. Valid presets are: 'default', 'base', 'essentials'.`);
+    throw new Error(`'${argv.preset}' is not a valid preset. Valid presets are: ${validPresets.join(", ")}.`);
   }
   const banner = "\x1B[38;2;22;151;246mV\x1B[39m\x1B[38;2;22;147;242mu\x1B[39m\x1B[38;2;22;144;238me\x1B[39m\x1B[38;2;22;140;234mt\x1B[39m\x1B[38;2;23;136;229mi\x1B[39m\x1B[38;2;23;133;225mf\x1B[39m\x1B[38;2;23;129;221my\x1B[39m\x1B[38;2;23;125;217m.\x1B[39m\x1B[38;2;23;121;213mj\x1B[39m\x1B[38;2;23;118;209ms\x1B[39m \x1B[38;2;24;114;204m-\x1B[39m \x1B[38;2;24;110;200mM\x1B[39m\x1B[38;2;24;107;196ma\x1B[39m\x1B[38;2;24;103;192mt\x1B[39m\x1B[38;2;32;110;197me\x1B[39m\x1B[38;2;39;118;202mr\x1B[39m\x1B[38;2;47;125;207mi\x1B[39m\x1B[38;2;54;132;211ma\x1B[39m\x1B[38;2;62;140;216ml\x1B[39m \x1B[38;2;70;147;221mC\x1B[39m\x1B[38;2;77;154;226mo\x1B[39m\x1B[38;2;85;161;231mm\x1B[39m\x1B[38;2;93;169;236mp\x1B[39m\x1B[38;2;100;176;240mo\x1B[39m\x1B[38;2;108;183;245mn\x1B[39m\x1B[38;2;115;191;250me\x1B[39m\x1B[38;2;123;198;255mn\x1B[39m\x1B[38;2;126;199;255mt\x1B[39m \x1B[38;2;129;201;255mF\x1B[39m\x1B[38;2;133;202;255mr\x1B[39m\x1B[38;2;136;204;255ma\x1B[39m\x1B[38;2;139;205;255mm\x1B[39m\x1B[38;2;142;207;255me\x1B[39m\x1B[38;2;145;208;255mw\x1B[39m\x1B[38;2;149;210;255mo\x1B[39m\x1B[38;2;152;211;255mr\x1B[39m\x1B[38;2;155;212;255mk\x1B[39m \x1B[38;2;158;214;255mf\x1B[39m\x1B[38;2;161;215;255mo\x1B[39m\x1B[38;2;164;217;255mr\x1B[39m \x1B[38;2;168;218;255mV\x1B[39m\x1B[38;2;171;220;255mu\x1B[39m\x1B[38;2;174;221;255me\x1B[39m";
   console.log(`
 ${banner}
 `);
-  let context = {
-    projectName: void 0,
-    canOverwrite: void 0,
+  const context = {
+    canOverwrite: false,
+    cwd: process.cwd(),
+    projectName: "vuetify-project",
+    useRouter: false,
     useTypeScript: argv.typescript,
+    usePreset: argv.preset,
+    useStore: void 0,
     usePackageManager: void 0
   };
-  try {
-    context = await (0, import_prompts.default)([
-      {
-        name: "projectName",
-        type: "text",
-        message: "Project name:",
-        initial: "vuetify-project",
-        validate: (v) => {
-          const { errors } = (0, import_validate_npm_package_name.default)(String(v).trim());
-          return !(errors && errors.length) || `Package ${errors[0]}`;
-        }
-      },
-      {
-        name: "canOverwrite",
-        active: "Yes",
-        inactive: "No",
-        initial: false,
-        type: (_, { projectName: projectName2 }) => {
-          const projectPath = (0, import_path2.join)(cwd, projectName2);
-          return !(0, import_fs2.existsSync)(projectPath) || (0, import_fs2.readdirSync)(projectPath).length === 0 ? null : "toggle";
-        },
-        message: (prev) => `The project path: ${(0, import_path2.resolve)(cwd, prev)} already exists, would you like to overwrite this directory?`
-      },
-      {
-        name: "useTypeScript",
-        type: context.useTypeScript ? null : "toggle",
-        message: "Use TypeScript?",
-        active: "Yes",
-        inactive: "No",
-        initial: false
-      },
-      {
-        name: "usePackageManager",
-        type: "select",
-        message: "Would you like to install dependencies with yarn, npm, or pnpm?",
-        initial: 0,
-        choices: [
-          { title: "yarn", value: "yarn" },
-          { title: "npm", value: "npm" },
-          { title: "pnpm", value: "pnpm" },
-          { title: "none", value: null }
-        ]
-      }
-    ], {
-      onCancel: () => {
-        throw new Error((0, import_kolorist.red)("\u2716") + " Operation cancelled");
-      }
-    });
-  } catch (err) {
-    throw err;
-  }
   const {
     canOverwrite,
+    cwd,
     projectName,
     useTypeScript,
-    usePackageManager
-  } = context;
-  const projectRoot = (0, import_path2.join)(cwd, projectName);
+    usePackageManager,
+    usePreset,
+    useStore,
+    useEslint,
+    useRouter
+  } = await initPrompts(context);
+  const projectRoot = (0, import_path3.join)(cwd, projectName);
   if (canOverwrite) {
-    (0, import_fs2.rmSync)(projectRoot, { recursive: true });
+    (0, import_fs3.rmSync)(projectRoot, { recursive: true });
   }
-  (0, import_fs2.mkdirSync)(projectRoot);
-  const rootPkg = { name: projectName };
-  (0, import_fs2.writeFileSync)((0, import_path2.resolve)(projectRoot, "package.json"), JSON.stringify(rootPkg, null, 2));
-  const rootTemplatePath = (0, import_path2.resolve)(__dirname, "../template");
-  const jsOrTs = useTypeScript || argv.typescript ? "typescript" : "javascript";
-  const preset = !!argv.preset ? argv.preset : "default";
+  (0, import_fs3.mkdirSync)(projectRoot);
+  (0, import_fs3.writeFileSync)((0, import_path3.resolve)(projectRoot, "package.json"), JSON.stringify({ name: projectName }, null, 2));
+  const jsOrTs = useTypeScript ? "typescript" : "javascript";
+  let templatePath = (0, import_path3.resolve)(__dirname, "../template", jsOrTs);
   console.log("\n\u25CC Generating scaffold...");
-  renderTemplate((0, import_path2.resolve)(rootTemplatePath, jsOrTs, preset), projectRoot);
+  if (usePreset !== "custom") {
+    renderTemplate((0, import_path3.resolve)(templatePath, usePreset), projectRoot);
+  } else {
+    renderTemplate((0, import_path3.resolve)(templatePath, "default"), projectRoot);
+    templatePath = (0, import_path3.resolve)(templatePath, usePreset);
+    if (useEslint) {
+      renderTemplate((0, import_path3.resolve)(templatePath, "eslint"), projectRoot);
+    }
+    if (useRouter) {
+      renderTemplate((0, import_path3.resolve)(templatePath, "router"), projectRoot);
+    }
+    if (useStore) {
+      renderTemplate((0, import_path3.resolve)(templatePath, "store"), projectRoot);
+      if (useRouter) {
+        renderTemplate((0, import_path3.resolve)(templatePath, "router-pinia"), projectRoot);
+      }
+    }
+  }
   if (usePackageManager) {
     console.log(`\u25CC Installing dependencies with ${usePackageManager}...
 `);
@@ -193,7 +296,7 @@ run().then(() => {
   console.log("Support Vuetify: https://github.com/sponsors/johnleider");
 }).catch((err) => {
   console.error(`
-${(0, import_kolorist.red)("\u2716")} ${err}
+${(0, import_kolorist2.red)("\u2716")} ${err}
 `);
-  process.exit();
+  process.exit(1);
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-vuetify",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "main": "dist/output.cjs",
   "author": "Elijah Kotyluk <elijah@elijahkotyluk.com>",
   "license": "MIT",

package/template/javascript/base/src/components/HelloWorld.vue

@@ -4,7 +4,7 @@
       <v-img
         contain
         height="300"
-        src="src/assets/logo.svg"
+        src="@/assets/logo.svg"
       />
 
       <div class="text-body-2 font-weight-light mb-n1">Welcome to</div>

package/template/javascript/base/vite.config.js

@@ -1,6 +1,6 @@
 // Plugins
 import vue from '@vitejs/plugin-vue'
-import vuetify from 'vite-plugin-vuetify'
+import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
 
 // Utilities
 import { defineConfig } from 'vite'
@@ -9,7 +9,9 @@ import { fileURLToPath, URL } from 'node:url'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
-    vue(),
+    vue({ 
+      template: { transformAssetUrls }
+    }),
     // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
     vuetify({
       autoImport: true,

package/template/javascript/custom/eslint/_eslintrc.js

@@ -0,0 +1,10 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+  },
+  extends: [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+  ],
+}

package/template/javascript/custom/eslint/package.json

@@ -0,0 +1,9 @@
+{
+  "scripts": {
+    "lint": "eslint . --fix --ignore-path .gitignore"
+  },
+  "devDependencies": {
+    "eslint": "^8.22.0",
+    "eslint-plugin-vue": "^9.3.0"
+  }
+}

package/template/javascript/custom/router/package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "vue-router": "^4.0.0"
+  }
+}

package/template/javascript/custom/router/src/App.vue

@@ -0,0 +1,7 @@
+<template>
+  <router-view />
+</template>
+
+<script setup>
+  //
+</script>

package/template/javascript/custom/router/src/layouts/default/Default.vue

@@ -0,0 +1,9 @@
+<template>
+  <v-app>
+    <default-view />
+  </v-app>
+</template>
+
+<script setup>
+  import DefaultView from './View.vue'
+</script>

package/template/javascript/custom/router/src/layouts/default/View.vue

@@ -0,0 +1,9 @@
+<template>
+  <v-main>
+    <router-view />
+  </v-main>
+</template>
+
+<script setup>
+  //
+</script>

package/template/javascript/custom/router/src/plugins/index.js

@@ -0,0 +1,17 @@
+/**
+ * plugins/index.js
+ *
+ * Automatically included in `./src/main.js`
+ */
+
+// Plugins
+import { loadFonts } from './webfontloader'
+import vuetify from './vuetify'
+import router from '../router'
+
+export function registerPlugins (app) {
+  loadFonts()
+  app
+    .use(vuetify)
+    .use(router)
+}

package/template/javascript/custom/router/src/router/index.js

@@ -0,0 +1,26 @@
+// Composables
+import { createRouter, createWebHistory } from 'vue-router'
+
+const routes = [
+  {
+    path: '/',
+    component: () => import('@/layouts/default/Default.vue'),
+    children: [
+      {
+        path: '',
+        name: 'Home',
+        // route level code-splitting
+        // this generates a separate chunk (about.[hash].js) for this route
+        // which is lazy-loaded when the route is visited.
+        component: () => import(/* webpackChunkName: "home" */ '@/views/Home.vue'),
+      },
+    ],
+  },
+]
+
+const router = createRouter({
+  history: createWebHistory(process.env.BASE_URL),
+  routes,
+})
+
+export default router

package/template/javascript/custom/router/src/views/Home.vue

@@ -0,0 +1,7 @@
+<template>
+  <HelloWorld />
+</template>
+
+<script setup>
+  import HelloWorld from '@/components/HelloWorld.vue'
+</script>

package/template/javascript/custom/router-pinia/src/plugins/index.js

@@ -0,0 +1,19 @@
+/**
+ * plugins/index.js
+ *
+ * Automatically included in `./src/main.js`
+ */
+
+// Plugins
+import { loadFonts } from './webfontloader'
+import vuetify from './vuetify'
+import pinia from '../store'
+import router from '../router'
+
+export function registerPlugins (app) {
+  loadFonts()
+  app
+    .use(vuetify)
+    .use(pinia)
+    .use(router)
+}

package/template/javascript/custom/store/package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "pinia": "^2.0.23"
+  }
+}

package/template/javascript/custom/store/src/plugins/index.js

@@ -0,0 +1,17 @@
+/**
+ * plugins/index.js
+ *
+ * Automatically included in `./src/main.js`
+ */
+
+// Plugins
+import { loadFonts } from './webfontloader'
+import vuetify from './vuetify'
+import pinia from '../store'
+
+export function registerPlugins (app) {
+  loadFonts()
+  app
+    .use(vuetify)
+    .use(pinia)
+}

package/template/javascript/custom/store/src/store/app.js

@@ -0,0 +1,8 @@
+// Utilities
+import { defineStore } from 'pinia'
+
+export const useAppStore = defineStore('app', {
+  state: () => ({
+    //
+  }),
+})

package/template/javascript/custom/store/src/store/index.js

@@ -0,0 +1,4 @@
+// Utilities
+import { createPinia } from 'pinia'
+
+export default createPinia()

package/template/javascript/default/src/components/HelloWorld.vue

@@ -4,7 +4,7 @@
       <v-img
         contain
         height="300"
-        src="src/assets/logo.svg"
+        src="@/assets/logo.svg"
       />
 
       <div class="text-body-2 font-weight-light mb-n1">Welcome to</div>

package/template/javascript/default/vite.config.js

@@ -1,6 +1,6 @@
 // Plugins
 import vue from '@vitejs/plugin-vue'
-import vuetify from 'vite-plugin-vuetify'
+import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
 
 // Utilities
 import { defineConfig } from 'vite'
@@ -9,7 +9,9 @@ import { fileURLToPath, URL } from 'node:url'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
-    vue(),
+    vue({ 
+      template: { transformAssetUrls }
+    }),
     // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
     vuetify({
       autoImport: true,

package/template/javascript/essentials/src/components/HelloWorld.vue

@@ -4,7 +4,7 @@
       <v-img
         contain
         height="300"
-        src="src/assets/logo.svg"
+        src="@/assets/logo.svg"
       />
 
       <div class="text-body-2 font-weight-light mb-n1">Welcome to</div>

package/template/javascript/essentials/vite.config.js

@@ -1,6 +1,6 @@
 // Plugins
 import vue from '@vitejs/plugin-vue'
-import vuetify from 'vite-plugin-vuetify'
+import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
 
 // Utilities
 import { defineConfig } from 'vite'
@@ -9,7 +9,9 @@ import { fileURLToPath, URL } from 'node:url'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
-    vue(),
+    vue({ 
+      template: { transformAssetUrls }
+    }),
     // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
     vuetify({
       autoImport: true,

package/template/typescript/base/src/components/HelloWorld.vue

@@ -4,7 +4,7 @@
       <v-img
         contain
         height="300"
-        src="src/assets/logo.svg"
+        src="@/assets/logo.svg"
       />
 
       <div class="text-body-2 font-weight-light mb-n1">Welcome to</div>

package/template/typescript/base/src/vite-env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

package/template/typescript/base/tsconfig.json

@@ -1,28 +1,25 @@
 {
   "compilerOptions": {
     "baseUrl": ".",
-    "target": "esnext",
+    "target": "ESNext",
     "useDefineForClassFields": true,
-    "allowSyntheticDefaultImports": true,
-    "composite": true,
-    "module": "esnext",
-    "moduleResolution": "node",
+    "module": "ESNext",
+    "moduleResolution": "Node",
     "strict": true,
     "jsx": "preserve",
-    "sourceMap": false,
     "resolveJsonModule": true,
+    "isolatedModules": true,
     "esModuleInterop": true,
-    "lib": ["esnext", "dom"],
-    "types": ["vuetify"],
+    "lib": ["ESNext", "DOM"],
+    "skipLibCheck": true,
+    "noEmit": true,
     "paths": {
-      "@/*": ["src/*"]
-    },
+      "@/*": [
+       "src/*"
+      ]
+     }
   },
-  "include": [
-    "src/**/*.ts",
-    "src/**/*.d.ts",
-    "src/**/*.tsx",
-    "src/**/*.vue",
-    "vite.config.ts"
-  ]
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "references": [{ "path": "./tsconfig.node.json" }],
+  "exclude": ["node_modules"]
 }

package/template/typescript/base/tsconfig.node.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/template/typescript/base/vite.config.ts

@@ -1,6 +1,6 @@
 // Plugins
 import vue from '@vitejs/plugin-vue'
-import vuetify from 'vite-plugin-vuetify'
+import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
 
 // Utilities
 import { defineConfig } from 'vite'
@@ -9,7 +9,9 @@ import { fileURLToPath, URL } from 'node:url'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
-    vue(),
+    vue({ 
+      template: { transformAssetUrls }
+    }),
     // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
     vuetify({
       autoImport: true,

package/template/typescript/custom/eslint/_eslintrc.js

@@ -0,0 +1,14 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+  },
+  extends: [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/eslint-config-typescript',
+  ],
+  rules: {
+    'vue/multi-word-component-names': 'off',
+  },
+}

package/template/typescript/custom/eslint/package.json

@@ -0,0 +1,10 @@
+{
+  "scripts": {
+    "lint": "eslint . --fix --ignore-path .gitignore"
+  },
+  "devDependencies": {
+    "@vue/eslint-config-typescript": "^11.0.0",
+    "eslint": "^8.22.0",
+    "eslint-plugin-vue": "^9.3.0"
+  }
+}

package/template/typescript/custom/router/package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "vue-router": "^4.0.0"
+  }
+}

package/template/typescript/custom/router/src/layouts/default/Default.vue

@@ -0,0 +1,9 @@
+<template>
+  <v-app>
+    <default-view />
+  </v-app>
+</template>
+
+<script lang="ts" setup>
+  import DefaultView from './View.vue'
+</script>

package/template/typescript/custom/router/src/layouts/default/View.vue

@@ -0,0 +1,9 @@
+<template>
+  <v-main>
+    <router-view />
+  </v-main>
+</template>
+
+<script lang="ts" setup>
+  //
+</script>

package/template/typescript/custom/router/src/plugins/index.ts

@@ -0,0 +1,20 @@
+/**
+ * plugins/index.ts
+ *
+ * Automatically included in `./src/main.ts`
+ */
+
+// Plugins
+import { loadFonts } from './webfontloader'
+import vuetify from './vuetify'
+import router from '../router'
+
+// Types
+import type { App } from 'vue'
+
+export function registerPlugins (app: App) {
+  loadFonts()
+  app
+    .use(vuetify)
+    .use(router)
+}

package/template/typescript/custom/router/src/router/index.ts

@@ -0,0 +1,26 @@
+// Composables
+import { createRouter, createWebHistory } from 'vue-router'
+
+const routes = [
+  {
+    path: '/',
+    component: () => import('@/layouts/default/Default.vue'),
+    children: [
+      {
+        path: '',
+        name: 'Home',
+        // route level code-splitting
+        // this generates a separate chunk (about.[hash].js) for this route
+        // which is lazy-loaded when the route is visited.
+        component: () => import(/* webpackChunkName: "home" */ '@/views/Home.vue'),
+      },
+    ],
+  },
+]
+
+const router = createRouter({
+  history: createWebHistory(process.env.BASE_URL),
+  routes,
+})
+
+export default router

package/template/typescript/custom/router/src/views/Home.vue

@@ -0,0 +1,7 @@
+<template>
+  <HelloWorld />
+</template>
+
+<script lang="ts" setup>
+  import HelloWorld from '@/components/HelloWorld.vue'
+</script>

package/template/typescript/custom/router-pinia/src/plugins/index.ts

@@ -0,0 +1,22 @@
+/**
+ * plugins/index.ts
+ *
+ * Automatically included in `./src/main.ts`
+ */
+
+// Plugins
+import { loadFonts } from './webfontloader'
+import vuetify from './vuetify'
+import pinia from '../store'
+import router from '../router'
+
+// Types
+import type { App } from 'vue'
+
+export function registerPlugins (app: App) {
+  loadFonts()
+  app
+    .use(vuetify)
+    .use(router)
+    .use(pinia)
+}

package/template/typescript/custom/store/package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "pinia": "^2.0.23"
+  }
+}

package/template/typescript/custom/store/src/plugins/index.ts

@@ -0,0 +1,20 @@
+/**
+ * plugins/index.ts
+ *
+ * Automatically included in `./src/main.ts`
+ */
+
+// Plugins
+import { loadFonts } from './webfontloader'
+import vuetify from './vuetify'
+import pinia from '../store'
+
+// Types
+import type { App } from 'vue'
+
+export function registerPlugins (app: App) {
+  loadFonts()
+  app
+    .use(vuetify)
+    .use(pinia)
+}

package/template/typescript/custom/store/src/store/app.ts

@@ -0,0 +1,8 @@
+// Utilities
+import { defineStore } from 'pinia'
+
+export const useAppStore = defineStore('app', {
+  state: () => ({
+    //
+  }),
+})

package/template/typescript/custom/store/src/store/index.ts

@@ -0,0 +1,4 @@
+// Utilities
+import { createPinia } from 'pinia'
+
+export default createPinia()

package/template/typescript/default/src/components/HelloWorld.vue

@@ -4,7 +4,7 @@
       <v-img
         contain
         height="300"
-        src="src/assets/logo.svg"
+        src="@/assets/logo.svg"
       />
 
       <div class="text-body-2 font-weight-light mb-n1">Welcome to</div>

package/template/typescript/default/src/vite-env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

package/template/typescript/default/tsconfig.json

@@ -1,28 +1,25 @@
 {
   "compilerOptions": {
     "baseUrl": ".",
-    "target": "esnext",
+    "target": "ESNext",
     "useDefineForClassFields": true,
-    "allowSyntheticDefaultImports": true,
-    "composite": true,
-    "module": "esnext",
-    "moduleResolution": "node",
+    "module": "ESNext",
+    "moduleResolution": "Node",
     "strict": true,
     "jsx": "preserve",
-    "sourceMap": false,
     "resolveJsonModule": true,
+    "isolatedModules": true,
     "esModuleInterop": true,
-    "lib": ["esnext", "dom"],
-    "types": ["vuetify"],
+    "lib": ["ESNext", "DOM"],
+    "skipLibCheck": true,
+    "noEmit": true,
     "paths": {
-      "@/*": ["src/*"]
-    },
+      "@/*": [
+       "src/*"
+      ]
+     }
   },
-  "include": [
-    "src/**/*.ts",
-    "src/**/*.d.ts",
-    "src/**/*.tsx",
-    "src/**/*.vue",
-    "vite.config.ts"
-  ]
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "references": [{ "path": "./tsconfig.node.json" }],
+  "exclude": ["node_modules"]
 }

package/template/typescript/default/tsconfig.node.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/template/typescript/default/vite.config.ts

@@ -1,6 +1,6 @@
 // Plugins
 import vue from '@vitejs/plugin-vue'
-import vuetify from 'vite-plugin-vuetify'
+import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
 
 // Utilities
 import { defineConfig } from 'vite'
@@ -9,7 +9,9 @@ import { fileURLToPath, URL } from 'node:url'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
-    vue(),
+    vue({ 
+      template: { transformAssetUrls }
+    }),
     // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
     vuetify({
       autoImport: true,

package/template/typescript/essentials/src/components/HelloWorld.vue

@@ -4,7 +4,7 @@
       <v-img
         contain
         height="300"
-        src="src/assets/logo.svg"
+        src="@/assets/logo.svg"
       />
 
       <div class="text-body-2 font-weight-light mb-n1">Welcome to</div>

package/template/typescript/essentials/src/vite-env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

package/template/typescript/essentials/tsconfig.node.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/template/typescript/essentials/vite.config.ts

@@ -1,6 +1,6 @@
 // Plugins
 import vue from '@vitejs/plugin-vue'
-import vuetify from 'vite-plugin-vuetify'
+import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
 
 // Utilities
 import { defineConfig } from 'vite'
@@ -9,7 +9,9 @@ import { fileURLToPath, URL } from 'node:url'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
-    vue(),
+    vue({ 
+      template: { transformAssetUrls }
+    }),
     // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
     vuetify({
       autoImport: true,

package/template/typescript/base/env.d.ts

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

package/template/typescript/default/env.d.ts

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

package/template/typescript/essentials/env.d.ts

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