create-quasar 2.2.2 → 4.0.0

package/templates/ae/js/install/ae/src/install.js

@@ -0,0 +1,9 @@
+/**
+ * Quasar App Extension install script
+ * https://quasar.dev/app-extensions/development-guide/install-api
+ */
+
+import { defineInstallScript } from '#q-app'
+
+// can be async
+export default defineInstallScript((/* api */) => {})

package/templates/ae/js/oxlint/_.oxfmtrc.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "./node_modules/oxfmt/configuration_schema.json",
+
+  "ignorePatterns": [
+    "**/node_modules/",
+    "/ae/src/templates/",
+    "/playground/dist/",
+    "/playground/quasar.config.*.temporary.compiled*",
+    "/playground/.quasar/",
+    "/playground/src-cordova/",
+    "/playground/src-capacitor/"
+  ],
+
+  "printWidth": 80,
+  "arrowParens": "avoid",
+  "bracketSpacing": true,
+  "bracketSameLine": false,
+  "htmlWhitespaceSensitivity": "strict",
+  "semi": false,
+  "singleQuote": true,
+  "quoteProps": "as-needed",
+  "trailingComma": "none",
+  "useTabs": false,
+  "vueIndentScriptAndStyle": false
+}

package/templates/ae/js/oxlint/_.oxlintrc.json

@@ -0,0 +1,34 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+
+  "ignorePatterns": [
+    "**/node_modules/",
+    "/ae/src/templates/",
+    "/playground/dist/",
+    "/playground/quasar.config.*.temporary.compiled*",
+    "/playground/.quasar/",
+    "/playground/src-cordova/",
+    "/playground/src-capacitor/"
+  ],
+
+  "options": {
+    "maxWarnings": 10
+  },
+
+  "plugins": ["vue", "import", "eslint", "promise", "unicorn"],
+
+  "categories": {
+    "correctness": "error"
+    // "style": "error",
+    // "pedantic": "warn",
+    // "suspicious": "error",
+    // "perf": "error",
+    // "restriction": "error"
+  },
+
+  "rules": {},
+
+  "env": {
+    "builtin": true
+  }
+}

package/templates/ae/js/prompts/ae/src/prompts.js

@@ -0,0 +1,38 @@
+/**
+ * Quasar App Extension prompts script
+ * https://quasar.dev/app-extensions/development-guide/prompts-api
+ */
+
+import { definePromptsScript } from '#q-app'
+import { intro, outro, text, select, group, cancel } from '@clack/prompts'
+
+export default definePromptsScript(async (/* api */) => {
+  intro('Serious questions ahead!')
+
+  const answers = await group(
+    {
+      name: () => text({ message: 'What is your name?' }),
+      color: ({ results }) =>
+        select({
+          message: `What is your favorite color, ${results.name}?`,
+          options: [
+            { value: 'red', label: 'Red' },
+            { value: 'green', label: 'Green' },
+            { value: 'blue', label: 'Blue' }
+          ]
+        })
+    },
+    {
+      // On Cancel callback that wraps the group
+      // So if the user cancels one of the prompts in the group this function will be called
+      onCancel: (/* { results } */) => {
+        cancel('Operation cancelled.')
+        process.exit(0)
+      }
+    }
+  )
+
+  outro('Thanks for answering the questions!')
+
+  return answers
+})

package/templates/ae/js/uninstall/ae/src/uninstall.js

@@ -0,0 +1,9 @@
+/**
+ * Quasar App Extension uninstall script
+ * https://quasar.dev/app-extensions/development-guide/uninstall-api
+ */
+
+import { defineUninstallScript } from '#q-app'
+
+// can be async
+export default defineUninstallScript((/* api */) => {})

package/templates/ae/ts/BASE/README.md

@@ -0,0 +1,43 @@
+# Quasar App Extension "<%= scope.aeShortName %>"
+
+## Developing
+
+- Use PNPM v11+.
+- Notice /package.json scripts:
+
+```bash
+<% if (scope.linter === 'oxlint') { %>
+# Lint & format
+$ pnpm run lint
+$ pnpm run lint:check
+
+<% } %>
+# Use playground to develop;
+# Helps you test the Index script as well
+$ pnpm run dev
+$ pnpm run dev -m ssr
+
+# Invokes the AE into /playground when needed
+# (like when changing the scripts themselves);
+# Helps you run the Install & Prompts scripts
+$ pnpm run invoke
+
+# Uninstall & re-install AE;
+# Helps you mainly to run the Uninstall script
+$ pnpm run cycle
+```
+
+## Publishing
+
+- Make sure to edit /ae/README.md.
+- In order to publish the AE, do it from within /ae folder:
+
+```bash
+# from /ae folder ONLY:
+pnpm login
+pnpm publish
+```
+
+## Donate
+
+If you appreciate the work that went into this App Extension, please consider [donating to Quasar](https://donate.quasar.dev).

package/templates/ae/ts/BASE/_.gitignore

@@ -0,0 +1,24 @@
+.DS_Store
+.thumbs.db
+node_modules
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# .env files
+.env*
+
+# Quasar core related directories
+/playground/.quasar
+/playground/dist
+/playground/quasar.config.*.temporary.compiled*
+
+# Cordova related directories and files
+/playground/src-cordova/node_modules
+/playground/src-cordova/platforms
+/playground/src-cordova/plugins
+/playground/src-cordova/www
+
+# Capacitor related directories and files
+/playground/src-capacitor/www
+/playground/src-capacitor/node_modules

package/templates/{app/quasar-v2/js-vite-2 → ae/ts}/BASE/_.vscode/extensions.json

@@ -1,7 +1,8 @@
 {
   "recommendations": [
-    <% if (scope.preset.eslint) { %>"dbaeumer.vscode-eslint",<% } %>
-    <% if (scope.prettier) { %>"esbenp.prettier-vscode",<% } %>
+    <% if (scope.linter === 'oxlint') { %>
+    "oxc.oxc-vscode",
+    <% } %>
     "editorconfig.editorconfig",
     "vue.volar",
     "wayou.vscode-todo-highlight"

package/templates/ae/ts/BASE/_.vscode/settings.json

@@ -0,0 +1,18 @@
+{
+  <% if (scope.linter === 'oxlint') { %>
+  "editor.codeActionsOnSave": {
+    "source.fixAll.oxc": "always"
+  },
+  "oxc.fmt.configPath": "oxfmt.config.ts",
+  "editor.defaultFormatter": "oxc.oxc-vscode",
+  "editor.formatOnSave": true,
+  <% } %>
+  "editor.bracketPairColorization.enabled": true,
+  "editor.guides.bracketPairs": true,
+  "js/ts.tsdk.path": "node_modules/typescript/lib",
+  "search.exclude": {
+    "playground/dist/": true,
+    "playground/.quasar/": true,
+    "playground/quasar.config.js.temporary.*": true
+  }
+}

package/templates/ae/ts/BASE/_package.json

@@ -0,0 +1,34 @@
+{
+  "name": "quasar-app-extension",
+  "version": "0.0.1",
+  "private": true,
+  "description": "A Quasar App Extension Project",
+  <% if (scope.author) { %>
+  "author": "<%= scope.author %>",
+  <% } %>
+  "type": "module",
+  "scripts": {
+<% if (scope.linter === 'oxlint') { %>
+    "lint": "oxfmt && oxlint --fix",
+    "lint:check": "oxfmt --check && oxlint",
+<% } %>
+    "typecheck": "vue-tsc --noEmit",
+    "dev": "pnpm --filter playground dev",
+    "invoke": "pnpm --filter playground invoke",
+    "cycle": "pnpm --filter playground cycle",
+    "postinstall": "pnpm --filter playground prepare"
+  },
+  "devDependencies": {
+<% if (scope.linter === 'oxlint') { %>
+    "oxfmt": "^0.x",
+    "oxlint": "^1.x",
+    "oxlint-tsgolint": "^0.x",
+<% } %>
+    "typescript": "^6.0.0",
+    "vue-tsc": "^3.3.3"
+  },
+  "engines": {
+    "node": ">= 26 || ^24 || ^22.12"
+  },
+  "productName": "Quasar App Extension"
+}

package/templates/ae/ts/BASE/_pnpm-workspace.yaml

@@ -0,0 +1,23 @@
+# https://pnpm.io/settings
+
+packages:
+  - ae
+  - playground
+
+linkWorkspacePackages: true
+publishBranch: dev
+
+catalog:
+  "@quasar/app-vite": "^3.0.0-rc.1"
+  "@quasar/extras": "^2.0.0"
+  "quasar": "^2.16.0"
+  "vue": "^3.5.22"
+
+allowBuilds:
+  '@parcel/watcher': true
+  core-js: true
+  electron-winstaller: true
+  esbuild: true
+  lightningcss: true
+  rolldown: true
+  unrs-resolver: true

package/templates/ae/ts/BASE/ae/README.md

@@ -0,0 +1,37 @@
+# Quasar App Extension "<%= scope.aeShortName %>"
+
+_Be sure to change this readme as appropriate for your app extension._
+
+_Think about the organization of this file and how the information will be beneficial to the user._
+
+> Add a short description of your App Extension. What does it do? How is it beneficial? Why would someone want to use it?
+
+## Install
+
+```bash
+quasar ext add <%= scope.aeShortName %>
+
+```
+
+### Prompts
+
+> Explain the prompts here
+
+## Uninstall
+
+```bash
+quasar ext remove <%= scope.aeShortName %>
+
+```
+
+## Info
+
+> Add longer information here that will help the user of your app extension.
+
+## Other Info
+
+> Add other information that's not as important to know
+
+## Donate
+
+If you appreciate the work that went into this App Extension, please consider [donating to Quasar](https://donate.quasar.dev).

package/templates/ae/ts/BASE/ae/_package.json

@@ -0,0 +1,38 @@
+{
+  "name": "<%= scope.aeFullName %>",
+  "version": "0.0.1",
+  "description": "A Quasar App Extension",
+  <% if (scope.author) { %>
+  "author": "<%= scope.author %>",
+  <% } %>
+  "license": "MIT",
+  "type": "module",
+  "main": "src/index.ts",
+  "imports": {
+    "#q-app": "@quasar/app-vite"
+  },
+<% if (scope.preset.prompts) { %>
+  "dependencies": {
+    "@clack/prompts": "^1.4.0"
+  },
+<% } %>
+  "devDependencies": {
+    "@quasar/app-vite": "catalog:",
+    "quasar": "catalog:",
+    "vue": "catalog:"
+  },
+  "peerDependencies": {
+    "@quasar/app-vite": "^3.0.0-rc.1"
+  },
+  "keywords": [
+    "quasar",
+    "quasar-app-extension",
+    "quasar-cli",
+    "quasar-app-vite",
+    "vue",
+    "vuejs"
+  ],
+  "engines": {
+    "node": ">= 26 || ^24 || ^22.12"
+  }
+}

package/templates/ae/ts/BASE/ae/_tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "target": "esnext",
+    "allowJs": true,
+    "resolveJsonModule": true,
+    "moduleDetection": "force",
+    "moduleResolution": "bundler",
+    "isolatedModules": true,
+    "module": "preserve",
+    "noEmit": true,
+    "lib": ["esnext", "dom", "dom.iterable"],
+    "strict": true,
+    "allowUnreachableCode": false,
+    "allowUnusedLabels": false,
+    "noImplicitOverride": true,
+    "exactOptionalPropertyTypes": true,
+    "noUncheckedIndexedAccess": true
+  },
+  "include": ["./src/**/*"],
+  "exclude": ["./node_modules"]
+}

package/templates/ae/ts/BASE/ae/src/index.ts

@@ -0,0 +1,15 @@
+/**
+ * Quasar App Extension index/runner script
+ * (runs on each dev/build)
+ *
+ * Docs: https://quasar.dev/app-extensions/development-guide/index-api
+ */
+
+import { defineIndexScript } from "#q-app";
+
+// can be async
+export default defineIndexScript(api => {
+  api.extendQuasarConf(() => ({
+    boot: ["~<%= scope.aeFullName %>/src/runtime/boot.register.ts"]
+  }));
+});

package/templates/ae/ts/BASE/ae/src/runtime/MyComponent.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="my-component">
+    <div>My Component</div>
+    <div>This is a simple Vue component.</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+//
+</script>
+
+<style lang="sass">
+.my-component
+  > div:first-child
+    font-weight: bold
+</style>

package/templates/ae/ts/BASE/ae/src/runtime/_env.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="@quasar/app-vite/client" />
+
+/**
+ * Uncomment and add types for your custom environment
+ * variables to avoid TypeScript errors
+ * when using them via import.meta.env.VARIABLE_NAME
+ *
+ * Example:
+ *
+ * interface ImportMetaEnv {
+ *   readonly MY_VAR: string
+ *   readonly MY_OTHER_VAR: boolean
+ * }
+ */
+// interface ImportMetaEnv {}

package/templates/ae/ts/BASE/ae/src/runtime/_shims-vue.d.ts

@@ -0,0 +1,5 @@
+declare module "*.vue" {
+  import { DefineComponent } from "vue";
+  const component: DefineComponent;
+  export default component;
+}

package/templates/ae/ts/BASE/ae/src/runtime/boot.register.ts

@@ -0,0 +1,6 @@
+import { defineBoot } from "#q-app";
+import MyComponent from "./MyComponent.vue";
+
+export default defineBoot(async ({ app }) => {
+  app.component("my-component", MyComponent);
+});

package/templates/ae/ts/BASE/playground/_package.json

@@ -0,0 +1,29 @@
+{
+  "name": "playground",
+  "version": "0.0.1",
+  "private": true,
+  "description": "A Quasar App Extension Playground",
+  <% if (scope.author) { %>
+  "author": "<%= scope.author %>",
+  <% } %>
+  "type": "module",
+  "scripts": {
+    "dev": "quasar dev",
+    "build": "quasar build",
+    "prepare": "quasar prepare --silent",
+    "invoke": "quasar ext invoke <%= scope.aeShortName %>",
+    "cycle": "quasar ext uninvoke <%= scope.aeShortName %> && quasar ext invoke <%= scope.aeShortName %>"
+  },
+  "dependencies": {
+    "@quasar/extras": "^2.0.0",
+    "quasar": "catalog:",
+    "vue": "catalog:",
+    "vue-router": "^5.0.6"
+  },
+  "devDependencies": {
+    "@quasar/app-vite": "catalog:",
+    "@types/node": "^22.19.11",
+    "<%= scope.aeFullName %>": "workspace:*"
+  },
+  "productName": "Quasar App Extension Playground"
+}

package/templates/ae/ts/BASE/playground/env.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Add types (that are not auto-magically added by Quasar CLI already)
+ * for your custom variables to avoid TypeScript errors, like dynamic
+ * process.env variables or definitions in dotenv files configured ONLY
+ * for the /quasar.config file itself.
+ *
+ * https://quasar.dev/quasar-cli-vite/handling-import-meta-env#type-inference
+ *
+ * @example
+ * interface ImportMetaEnv {
+ *   readonly MY_VAR: string;
+ *   readonly MY_OTHER_VAR: string;
+ * }
+ */
+interface ImportMetaEnv {}

package/templates/ae/ts/BASE/playground/index.html

@@ -0,0 +1,20 @@
+<!doctype html>
+<html>
+  <head>
+    <title>App Extension Playground</title>
+
+    <meta charset="utf-8">
+    <meta name="format-detection" content="telephone=no">
+    <meta name="msapplication-tap-highlight" content="no">
+    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<%~ <% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %> ~%>">
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline';<%~ <% if (ctx.dev) { %> connect-src \'self\' ws://localhost:*; worker-src \'self\' blob:;<% } %> ~%>"
+    />
+
+    <link rel="icon" type="image/ico" href="favicon.ico">
+  </head>
+  <body>
+    <!-- quasar:entry-point -->
+  </body>
+</html>

package/templates/ae/ts/BASE/playground/quasar.config.ts

@@ -0,0 +1,25 @@
+// https://v2.quasar.dev/quasar-cli-vite/quasar-config-file
+
+import { defineConfig } from "#q-app";
+
+export default defineConfig((/* ctx */) => ({
+  boot: [],
+  css: ["app.scss"],
+  extras: [
+    "roboto-font", // optional, you are not bound to it
+    "material-icons" // optional, you are not bound to it
+  ],
+
+  build: {
+    filenameBasedRouting: true,
+    vueRouterMode: "history",
+    typescript: {
+      strict: true,
+      vueShim: true
+    }
+  },
+
+  devServer: {
+    open: true
+  }
+}));

package/templates/ae/ts/BASE/playground/quasar.extensions.json

@@ -0,0 +1,3 @@
+{
+  "<%= scope.aeShortName %>": {}
+}

package/templates/ae/ts/BASE/playground/src/components/DrawerLink.vue

@@ -0,0 +1,19 @@
+<template>
+  <q-item clickable :to="path" exact>
+    <q-item-section>
+      <q-item-label>{{ name }}</q-item-label>
+    </q-item-section>
+  </q-item>
+</template>
+
+<script setup lang="ts">
+export interface DrawerLinkProps {
+  name: string;
+  path: string;
+}
+
+withDefaults(defineProps<DrawerLinkProps>(), {
+  name: "",
+  path: "/"
+});
+</script>

package/templates/{app-extension/ae-ts/BASE/playground/quasar-cli-vite → ae/ts/BASE/playground}/src/css/quasar.variables.scss

@@ -1,4 +1,4 @@
-// Quasar SCSS (& Sass) Variables
+// Quasar Sass (& SCSS) Variables
 // --------------------------------------------------
 // To customize the look and feel of this app, you can override
 // the Sass/SCSS variables found in Quasar's source Sass/SCSS files.

package/templates/{app-extension/ae-ts/BASE/playground/quasar-cli-webpack/src/pages/ErrorNotFound.vue → ae/ts/BASE/playground/src/pages/[...path].vue}

@@ -3,9 +3,9 @@
     class="fullscreen bg-blue text-white text-center q-pa-md flex flex-center"
   >
     <div>
-      <div style="font-size: 30vh">404</div>
+      <div style="font-size: 30vh"> 404 </div>
 
-      <div class="text-h2" style="opacity: 0.4">Oops. Nothing here...</div>
+      <div class="text-h2" style="opacity: 0.4"> Oops. Nothing here... </div>
 
       <q-btn
         class="q-mt-xl"

package/templates/ae/ts/BASE/playground/src/pages/index/(index).vue

@@ -0,0 +1,11 @@
+<template>
+  <q-page class="flex flex-center">
+    <div class="column items-center">
+      Use the drawer to navigate to different pages in this playground.
+    </div>
+  </q-page>
+</template>
+
+<script setup lang="ts">
+//
+</script>

package/templates/ae/ts/BASE/playground/src/pages/index/test1.vue

@@ -0,0 +1,9 @@
+<template>
+  <q-page padding>
+    <my-component />
+  </q-page>
+</template>
+
+<script setup lang="ts">
+//
+</script>

package/templates/ae/ts/BASE/playground/src/pages/index/test2.vue

@@ -0,0 +1,7 @@
+<template>
+  <q-page padding> Test 2 </q-page>
+</template>
+
+<script setup lang="ts">
+//
+</script>