create-quasar 2.2.3 → 4.0.0

package/templates/app/{quasar-v2/ts-vite-2 → vite-2/ts}/BASE/src/layouts/MainLayout.vue

@@ -33,7 +33,7 @@
 
         <EssentialLink
           v-for="link in linksList"
-          :key="link.title"
+          :key="link.label"
           v-bind="link"
         />
       </q-list>
@@ -51,43 +51,43 @@ import EssentialLink, { type EssentialLinkProps } from 'components/EssentialLink
 
 const linksList: EssentialLinkProps[] = [
   {
-    title: 'Docs',
+    label: 'Docs',
     caption: 'quasar.dev',
     icon: 'school',
     link: 'https://quasar.dev'
   },
   {
-    title: 'Github',
+    label: 'Github',
     caption: 'github.com/quasarframework',
     icon: 'code',
     link: 'https://github.com/quasarframework'
   },
   {
-    title: 'Discord Chat Channel',
+    label: 'Discord Chat Channel',
     caption: 'chat.quasar.dev',
     icon: 'chat',
     link: 'https://chat.quasar.dev'
   },
   {
-    title: 'Forum',
+    label: 'Forum',
     caption: 'forum.quasar.dev',
     icon: 'record_voice_over',
     link: 'https://forum.quasar.dev'
   },
   {
-    title: 'Twitter',
+    label: 'Twitter',
     caption: '@quasarframework',
     icon: 'rss_feed',
     link: 'https://twitter.quasar.dev'
   },
   {
-    title: 'Facebook',
+    label: 'Facebook',
     caption: '@QuasarFramework',
     icon: 'public',
     link: 'https://facebook.quasar.dev'
   },
   {
-    title: 'Quasar Awesome',
+    label: 'Quasar Awesome',
     caption: 'Community Quasar projects',
     icon: 'favorite',
     link: 'https://awesome.quasar.dev'

package/templates/app/{quasar-v2/ts-vite-2 → vite-2/ts}/eslint/_eslint.config.js

@@ -3,9 +3,7 @@ import globals from 'globals'
 import pluginVue from 'eslint-plugin-vue'
 import pluginQuasar from '@quasar/app-vite/eslint'
 import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
-<% if (scope.prettier) { %>
 import prettierSkipFormatting from '@vue/eslint-config-prettier/skip-formatting'
-<% } %>
 
 export default defineConfigWithVueTs(
   {
@@ -82,10 +80,7 @@ export default defineConfigWithVueTs(
         ...globals.serviceworker
       }
     }
-  }<% if (scope.prettier) { %>,<% } %>
-
-<% if (scope.prettier) { %>
+  },
 
   prettierSkipFormatting
-<% } %>
 )

package/templates/app/vite-3/create-quasar-script.js

@@ -0,0 +1,94 @@
+export async function createQuasarScript({ scope, utils }) {
+  await utils.promptUser(scope, {
+    preset: () =>
+      utils.prompts.multiselect({
+        message: 'Pick features:',
+        initialValues: ['sass', 'linting'],
+        options: [
+          {
+            label: 'Typescript',
+            value: 'typescript'
+          },
+          {
+            label: 'Sass CSS preprocessor',
+            value: 'sass'
+          },
+          {
+            label: 'Linting & Formatting (oxlint + oxfmt or ESLint + Prettier)',
+            value: 'linting',
+            hint: 'recommended'
+          },
+          {
+            label: 'Vue Router filename-based routing',
+            value: 'fbr',
+            hint: 'https://v2.quasar.dev/quasar-cli-vite/page-routing-with-vue-router#filename-based-routing'
+          },
+          {
+            label: 'State Management (Pinia)',
+            value: 'pinia',
+            hint: 'https://pinia.vuejs.org'
+          },
+          {
+            label: 'Internationalization (vue-i18n)',
+            value: 'i18n',
+            hint: 'https://vue-i18n.intlify.dev'
+          }
+        ]
+      })
+  })
+
+  scope.preset = utils.convertArrayToObject(scope.preset)
+
+  if (scope.preset.linting) {
+    const eslintTSBanner = scope.preset.typescript
+      ? ' (TS6 required instead of TS7)'
+      : ''
+
+    await utils.promptUser(scope, {
+      linter: () =>
+        utils.prompts.select({
+          message: 'Project linter & formatter:',
+          options: [
+            {
+              label: 'oxlint + oxfmt',
+              value: 'oxlint',
+              hint: 'recommended, but full .vue support is still in progress'
+            },
+            {
+              label: `ESLint + vite-plugin-checker + Prettier${eslintTSBanner}`,
+              value: 'eslint'
+            }
+          ]
+        })
+    })
+  }
+
+  const log = utils.prompts.taskLog({
+    title: 'Scaffolding Quasar App...'
+  })
+
+  const dir = scope.preset.typescript ? 'ts' : 'js'
+  utils.createTargetDir(scope)
+  utils.renderTemplate(`${dir}/BASE`, scope)
+
+  const css = scope.preset.sass ? 'sass' : 'css'
+  utils.renderTemplate(`${dir}/${css}`, scope)
+
+  if (scope.preset.i18n) utils.renderTemplate(`${dir}/i18n`, scope)
+  if (scope.preset.pinia) {
+    utils.renderTemplate(`${dir}/pinia`, scope)
+  }
+
+  if (scope.linter === 'oxlint') {
+    utils.renderTemplate(`${dir}/oxlint`, scope)
+  } else if (scope.linter === 'eslint') {
+    utils.renderTemplate(`${dir}/eslint`, scope)
+  }
+
+  utils.renderTemplate(
+    scope.preset.fbr ? `${dir}/filenameBasedRouting` : `${dir}/manualRouting`,
+    scope
+  )
+
+  log.success('Quasar App scaffolded successfully!')
+}

package/templates/app/vite-3/js/BASE/README.md

@@ -0,0 +1,39 @@
+# <%= scope.product %> (<%= scope.name %>)
+
+## Install the dependencies
+
+```bash
+pnpm install
+# or: yarn/npm/bun install
+```
+
+### Start the app in development mode (HMR, error reporting, etc.)
+
+```bash
+quasar dev
+```
+<% if (scope.preset.linter) { %>
+
+### Format & Lint the files
+
+```bash
+pnpm run lint
+# or: yarn/npm/bun run lint
+```
+
+...or just check formatting & linting:
+
+```bash
+pnpm run lint:check
+# or: yarn/npm/bun run lint:check
+```
+<% } %>
+
+### Build the app for production
+
+```bash
+quasar build
+```
+
+### Customize the configuration
+See [Configuring quasar.config.js](https://v2.quasar.dev/quasar-cli-vite/quasar-config-js).

package/templates/app/vite-3/js/BASE/_.editorconfig

@@ -0,0 +1,7 @@
+[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue}]
+charset = utf-8
+indent_size = 2
+indent_style = space
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

package/templates/app/{quasar-v2/js-webpack-4 → vite-3/js}/BASE/_.gitignore

@@ -2,6 +2,9 @@
 .thumbs.db
 node_modules
 
+# .env files
+.env*
+
 # Quasar core related directories
 .quasar
 /dist
@@ -21,13 +24,3 @@ node_modules
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-
-# Editor directories and files
-.idea
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-
-# local .env files
-.env.local*

package/templates/app/vite-3/js/BASE/_.vscode/extensions.json

@@ -0,0 +1,19 @@
+{
+  "recommendations": [
+    <% if (scope.linter === 'oxlint') { %>
+    "oxc.oxc-vscode",
+    <% } else if (scope.linter === 'eslint') { %>
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    <% } %>
+    "editorconfig.editorconfig",
+    "vue.volar",
+    "wayou.vscode-todo-highlight"
+  ],
+  "unwantedRecommendations": [
+    "octref.vetur",
+    "hookyqr.beautify",
+    "dbaeumer.jshint",
+    "ms-vscode.vscode-typescript-tslint-plugin"
+  ]
+}

package/templates/app/vite-3/js/BASE/_.vscode/settings.json

@@ -0,0 +1,24 @@
+{
+  "editor.bracketPairColorization.enabled": true,
+  "editor.guides.bracketPairs": true,
+  <% if (scope.linter === 'oxlint') { %>
+  "editor.codeActionsOnSave": {
+    "source.fixAll.oxc": "always"
+  },
+  "oxc.fmt.configPath": ".oxfmtrc.json",
+  "editor.defaultFormatter": "oxc.oxc-vscode",
+  "editor.formatOnSave": true,
+  <% } else if (scope.linter === 'eslint') { %>
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.codeActionsOnSave": [
+    "source.fixAll.eslint"
+  ],
+  "eslint.validate": ["javascript", "javascriptreact", "typescript", "vue"],
+  <% } %>
+  "search.exclude": {
+    "dist/": true,
+    ".quasar/": true,
+    "/quasar.config.js.temporary.*": true
+  }
+}

package/templates/app/vite-3/js/BASE/_jsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "./.quasar/tsconfig.json"
+}

package/templates/app/vite-3/js/BASE/_package.json

@@ -0,0 +1,62 @@
+{
+  "name": "<%= scope.name %>",
+  "version": "0.0.1",
+  "description": "A Quasar Project",
+  "productName": "<%= scope.product %>",
+  <% if (scope.author) { %>
+  "author": "<%= scope.author %>",
+  <% } %>
+  "type": "module",
+  "private": true,
+  "scripts": {
+    <% if (scope.linter === 'oxlint') { %>
+    "lint": "oxfmt && oxlint --fix",
+    "lint:check": "oxfmt --check && oxlint",
+    <% } else if (scope.linter === 'eslint') { %>
+    "lint": "prettier --write \"**/*.{js,vue,css<% if (scope.preset.sass) { %>,scss<% } %>,html,md,json}\" --ignore-path .gitignore && eslint --fix -c ./eslint.config.js \"./src*/**/*.{js,cjs,mjs,vue}\"",
+    "lint:check": "prettier \"**/*.{js,vue,css<% if (scope.preset.sass) { %>,scss<% } %>,html,md,json}\" --ignore-path .gitignore && eslint -c ./eslint.config.js \"./src*/**/*.{js,cjs,mjs,vue}\"",
+    <% } %>
+    "dev": "quasar dev",
+    "build": "quasar build",
+    "postinstall": "quasar prepare --silent"
+  },
+  "dependencies": {
+    <% if (scope.preset.i18n) { %>"vue-i18n": "^11.3.0",<% } %>
+    <% if (scope.preset.pinia) { %>"pinia": "^3.0.1",<% } %>
+    "@quasar/extras": "^2.0.0",
+    "quasar": "^2.16.0",
+    "vue": "^3.5.22",
+    "vue-router": "^5.0.6"
+  },
+  "devDependencies": {
+    <% if (scope.preset.i18n) { %>"@intlify/unplugin-vue-i18n": "^11.0.0",<% } %>
+    <% if (scope.linter === 'oxlint') { %>
+    "oxfmt": "^0.x",
+    "oxlint": "^1.x",
+    <% } else if (scope.linter === 'eslint') { %>
+    "@eslint/js": "^9.39.4",
+    "eslint": "^9.39.4",
+    "eslint-plugin-vue": "^10.8.0",
+    "globals": "^17.4.0",
+    "vite-plugin-checker": "^0.12.0",
+    "vue-eslint-parser": "^10.4.0",
+    "@vue/eslint-config-prettier": "^10.2.0",
+    "prettier": "^3.8.1",
+    <% } %>
+    "@quasar/app-vite": "^3.0.0-rc.1",
+    "autoprefixer": "^10.4.27",
+    "postcss": "^8.5.8"
+  },
+  "keywords": [
+    "quasar",
+    "quasar-app",
+    "quasar-cli",
+    "quasar-app-vite",
+    "vite",
+    "vue",
+    "vuejs"
+  ],
+  "engines": {
+    "node": ">= 26 || ^24 || ^22.12"
+  }
+}

package/templates/app/vite-3/js/BASE/_pnpm-workspace.yaml

@@ -0,0 +1,10 @@
+# https://pnpm.io/settings
+
+allowBuilds:
+  '@parcel/watcher': true
+  core-js: true
+  electron-winstaller: true
+  esbuild: true
+  lightningcss: true
+  rolldown: true
+  unrs-resolver: true

package/templates/app/{quasar-v2/js-webpack-4 → vite-3/js}/BASE/index.html

@@ -1,13 +1,19 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
-    <title><%= '<' + '%= productName %' + '>' %></title>
+    <title><%~ <%= productName %> ~%></title>
 
     <meta charset="utf-8">
-    <meta name="description" content="<%= '<' + '%= productDescription %' + '>' %>">
+    <meta name="description" content="<%~ <%= productDescription %> ~%>">
     <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 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<% } %> ~%>">
+<% if (scope.linter !== 'eslint') { %>
+    <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/png" sizes="128x128" href="icons/favicon-128x128.png">
     <link rel="icon" type="image/png" sizes="96x96" href="icons/favicon-96x96.png">

package/templates/{app-extension/ae-ts/BASE/playground/quasar-cli-vite/postcss.config.cjs → app/vite-3/js/BASE/postcss.config.js}

@@ -1,9 +1,12 @@
 // https://github.com/michael-ciniawsky/postcss-load-config
 
-module.exports = {
+import autoprefixer from 'autoprefixer'
+// import rtlcss from 'postcss-rtlcss'
+
+export default {
   plugins: [
     // https://github.com/postcss/autoprefixer
-    require('autoprefixer')({
+    autoprefixer({
       overrideBrowserslist: [
         'last 4 Chrome versions',
         'last 4 Firefox versions',
@@ -14,13 +17,13 @@ module.exports = {
         'last 4 FirefoxAndroid versions',
         'last 4 iOS versions'
       ]
-    })
+    }),
 
     // https://github.com/elchininet/postcss-rtlcss
     // If you want to support RTL css, then
-    // 1. yarn/npm install postcss-rtlcss
+    // 1. yarn/pnpm/bun/npm install postcss-rtlcss
     // 2. optionally set quasar.config.js > framework > lang to an RTL language
-    // 3. uncomment the following line:
-    // require('postcss-rtlcss')
+    // 3. uncomment the following line (and its import statement above):
+    // rtlcss()
   ]
 }