create-quasar 1.12.0 → 2.0.0

package/templates/app/quasar-v2/js-webpack-4/BASE/src/pages/IndexPage.vue

@@ -0,0 +1,20 @@
+<template>
+  <q-page class="flex flex-center">
+    <img
+      alt="Quasar logo"
+      src="~assets/quasar-logo-vertical.svg"
+      style="width: 200px; height: 200px"
+    >
+  </q-page>
+</template>
+<% if (sfcStyle === 'composition-setup') { %>
+<script setup>
+//
+</script><% } else if (sfcStyle === 'composition' || sfcStyle === 'options') { %>
+<script>
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'IndexPage'
+});
+</script><% } %>

package/templates/app/quasar-v2/js-webpack-4/BASE/src/router/index.js

@@ -0,0 +1,30 @@
+import { defineRouter } from '#q-app/wrappers'
+import { createRouter, createMemoryHistory, createWebHistory, createWebHashHistory } from 'vue-router'
+import routes from './routes.js'
+
+/*
+ * If not building with SSR mode, you can
+ * directly export the Router instantiation;
+ *
+ * The function below can be async too; either use
+ * async/await or return a Promise which resolves
+ * with the Router instance.
+ */
+
+export default defineRouter(function (/* { store, ssrContext } */) {
+  const createHistory = process.env.SERVER
+    ? createMemoryHistory
+    : (process.env.VUE_ROUTER_MODE === 'history' ? createWebHistory : createWebHashHistory)
+
+  const Router = createRouter({
+    scrollBehavior: () => ({ left: 0, top: 0 }),
+    routes,
+
+    // Leave this as is and make changes in quasar.conf.js instead!
+    // quasar.conf.js -> build -> vueRouterMode
+    // quasar.conf.js -> build -> publicPath
+    history: createHistory(process.env.VUE_ROUTER_BASE)
+  })
+
+  return Router
+})

package/templates/app/quasar-v2/js-webpack-4/BASE/src/router/routes.js

@@ -0,0 +1,18 @@
+const routes = [
+  {
+    path: '/',
+    component: () => import('layouts/MainLayout.vue'),
+    children: [
+      { path: '', component: () => import('pages/IndexPage.vue') }
+    ]
+  },
+
+  // Always leave this as last one,
+  // but you can also remove it
+  {
+    path: '/:catchAll(.*)*',
+    component: () => import('pages/ErrorNotFound.vue')
+  }
+]
+
+export default routes

package/templates/app/quasar-v2/js-webpack-4/axios/src/boot/axios.js

@@ -0,0 +1,24 @@
+import { defineBoot } from '#q-app/wrappers'
+import axios from 'axios'
+
+// Be careful when using SSR for cross-request state pollution
+// due to creating a Singleton instance here;
+// If any client changes this (global) instance, it might be a
+// good idea to move this instance creation inside of the
+// "export default () => {}" function below (which runs individually
+// for each client)
+const api = axios.create({ baseURL: 'https://api.example.com' })
+
+export default defineBoot(({ app }) => {
+  // for use inside Vue files (Options API) through this.$axios and this.$api
+
+  app.config.globalProperties.$axios = axios
+  // ^ ^ ^ this will allow you to use this.$axios (for Vue Options API form)
+  //       so you won't necessarily have to import axios in each vue file
+
+  app.config.globalProperties.$api = api
+  // ^ ^ ^ this will allow you to use this.$api (for Vue Options API form)
+  //       so you can easily perform requests against your app's API
+})
+
+export { api }

package/templates/app/quasar-v2/js-webpack-4/eslint/_eslint.config.js

@@ -0,0 +1,73 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import pluginVue from 'eslint-plugin-vue'
+import pluginQuasar from '@quasar/app-webpack/eslint'<% if (prettier) { %>
+import prettierSkipFormatting from '@vue/eslint-config-prettier/skip-formatting'<% } %>
+
+export default [
+  {
+    /**
+     * Ignore the following files.
+     * Please note that pluginQuasar.configs.recommended() already ignores
+     * the "node_modules" folder for you (and all other Quasar project
+     * relevant folders and files).
+     *
+     * ESLint requires "ignores" key to be the only one in this object
+     */
+    // ignores: []
+  },
+
+  ...pluginQuasar.configs.recommended(),
+  js.configs.recommended,
+
+  /**
+   * https://eslint.vuejs.org
+   *
+   * pluginVue.configs.base
+   *   -> Settings and rules to enable correct ESLint parsing.
+   * pluginVue.configs[ 'flat/essential']
+   *   -> base, plus rules to prevent errors or unintended behavior.
+   * pluginVue.configs["flat/strongly-recommended"]
+   *   -> Above, plus rules to considerably improve code readability and/or dev experience.
+   * pluginVue.configs["flat/recommended"]
+   *   -> Above, plus rules to enforce subjective community defaults to ensure consistency.
+   */
+  ...pluginVue.configs[ 'flat/essential' ],
+
+  {
+    languageOptions: {
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+
+      globals: {
+        ...globals.browser,
+        ...globals.node, // SSR, Electron, config files
+        process: 'readonly', // process.env.*
+        ga: 'readonly', // Google Analytics
+        cordova: 'readonly',
+        Capacitor: 'readonly',
+        chrome: 'readonly', // BEX related
+        browser: 'readonly' // BEX related
+      }
+    },
+
+    // add your custom rules here
+    rules: {
+      'prefer-promise-reject-errors': 'off',
+
+      // allow debugger during development only
+      'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+    }
+  },
+
+  {
+    files: [ 'src-pwa/custom-service-worker.js' ],
+    languageOptions: {
+      globals: {
+        ...globals.serviceworker
+      }
+    }
+  }<% if (prettier) { %>,
+
+  prettierSkipFormatting<% } %>
+]

package/templates/app/quasar-v2/js-webpack-4/i18n/src/boot/i18n.js

@@ -0,0 +1,14 @@
+import { defineBoot } from '#q-app/wrappers'
+import { createI18n } from 'vue-i18n'
+import messages from 'src/i18n'
+
+export default defineBoot(({ app }) => {
+  const i18n = createI18n({
+    locale: 'en-US',
+    globalInjection: true,
+    messages
+  })
+
+  // Set i18n instance on app
+  app.use(i18n)
+})

package/templates/app/quasar-v2/js-webpack-4/i18n/src/i18n/en-US/index.js

@@ -0,0 +1,7 @@
+// This is just an example,
+// so you can safely delete all default props below
+
+export default {
+  failed: 'Action failed',
+  success: 'Action was successful'
+}

package/templates/app/quasar-v2/js-webpack-4/i18n/src/i18n/index.js

@@ -0,0 +1,5 @@
+import enUS from './en-US/index.js'
+
+export default {
+  'en-US': enUS
+}

package/templates/app/quasar-v2/js-webpack-4/index.js

@@ -0,0 +1,36 @@
+export async function script ({ scope, utils }) {
+  await utils.prompts(scope, [
+    {
+      type: 'multiselect',
+      name: 'preset',
+      message: 'Check the features needed for your project:',
+      choices: [
+        { title: 'Linting (ESLint)', value: 'eslint', description: 'recommended', selected: true },
+        { title: 'State Management (Pinia)', value: 'pinia', description: 'https://pinia.vuejs.org' },
+        { title: 'axios', value: 'axios' },
+        { title: 'vue-i18n', value: 'i18n' }
+      ],
+      format: utils.convertArrayToObject
+    },
+    {
+      type: (_, { preset }) => (preset.eslint ? 'confirm' : null),
+      name: 'prettier',
+      initial: true,
+      message: 'Add Prettier for code formatting?'
+    }
+  ])
+
+  // ensure it's defined since if not selecting ESLint,
+  // user won't be asked about it hence it won't be defined
+  scope.prettier = scope.prettier || false
+
+  utils.createTargetDir(scope)
+  utils.renderTemplate('BASE', scope)
+  utils.renderTemplate(scope.css, scope)
+
+  if (scope.preset.axios) utils.renderTemplate('axios', scope)
+  if (scope.preset.i18n) utils.renderTemplate('i18n', scope)
+  if (scope.preset.eslint) utils.renderTemplate('eslint', scope)
+  if (scope.prettier) utils.renderTemplate('prettier', scope)
+  if (scope.preset.pinia) utils.renderTemplate('pinia', scope)
+}

package/templates/app/quasar-v2/js-webpack-4/pinia/src/stores/example-store.js

@@ -0,0 +1,15 @@
+import { defineStore } from 'pinia';
+
+export const useCounterStore = defineStore('counter', {
+  state: () => ({
+    counter: 0,
+  }),
+  getters: {
+    doubleCount: (state) => state.counter * 2,
+  },
+  actions: {
+    increment() {
+      this.counter++;
+    },
+  },
+});

package/templates/app/quasar-v2/js-webpack-4/pinia/src/stores/index.js

@@ -0,0 +1,20 @@
+import { defineStore } from '#q-app/wrappers'
+import { createPinia } from 'pinia'
+
+/*
+ * If not building with SSR mode, you can
+ * directly export the Store instantiation;
+ *
+ * The function below can be async too; either use
+ * async/await or return a Promise which resolves
+ * with the Store instance.
+ */
+
+export default defineStore((/* { ssrContext } */) => {
+  const pinia = createPinia()
+
+  // You can add Pinia plugins here
+  // pinia.use(SomePiniaPlugin)
+
+  return pinia
+})

package/templates/app/quasar-v2/js-webpack-4/pinia/src/stores/store-flag.d.ts

@@ -0,0 +1,13 @@
+/*
+  WARNING: DO NOT MODIFY OR DELETE
+  This file is auto-generated by Quasar CLI
+  It's recommended to NOT .gitignore it
+  You don't have to use TypeScript in your project, don't worry
+*/
+import "quasar/dist/types/feature-flag.d.ts";
+
+declare module "quasar/dist/types/feature-flag.d.ts" {
+  interface QuasarFeatureFlags {
+    store: true;
+  }
+}

package/templates/app/quasar-v2/js-webpack-4/prettier/_.prettierrc.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 100
+}

package/templates/app/{quasar-v1/ts → quasar-v2/ts-vite-2}/.eslintrc.cjs

@@ -6,17 +6,16 @@ module.exports = {
       'description',
       'author',
 
-      // Quasar v1
+      // Quasar v2
       'quasarVersion',
       'scriptType',
       'productName',
 
-      // Quasar v1 - TS
+      // Quasar v2 - TS
       'sfcStyle',
       'css',
-      'importStrategy',
       'preset',
-      'lintConfig'
+      'prettier'
     ]
   }
 }

package/templates/app/{quasar-v1/js → quasar-v2/ts-vite-2}/BASE/README.md

@@ -13,14 +13,23 @@ npm install
 ```bash
 quasar dev
 ```
-<% if (preset.lint) { %>
+<% if (preset.eslint) { %>
 
 ### Lint the files
 ```bash
 yarn lint
 # or
 npm run lint
-```<% } %>
+```
+<% if (prettier) { %>
+
+### Format the files
+```bash
+yarn format
+# or
+npm run format
+```
+<% } } %>
 
 ### Build the app for production
 ```bash
@@ -28,4 +37,4 @@ quasar build
 ```
 
 ### Customize the configuration
-See [Configuring quasar.conf.js](https://v1.quasar.dev/quasar-cli/quasar-conf-js).
+See [Configuring quasar.config.js](https://v2.quasar.dev/quasar-cli-vite/quasar-config-js).

package/templates/app/quasar-v2/ts-vite-2/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/ts-vite-2/BASE/_.gitignore

@@ -0,0 +1,33 @@
+.DS_Store
+.thumbs.db
+node_modules
+
+# Quasar core related directories
+.quasar
+/dist
+/quasar.config.*.temporary.compiled*
+
+# Cordova related directories and files
+/src-cordova/node_modules
+/src-cordova/platforms
+/src-cordova/plugins
+/src-cordova/www
+
+# Capacitor related directories and files
+/src-capacitor/www
+/src-capacitor/node_modules
+
+# Log files
+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/quasar-v2/ts-vite-2/BASE/_.npmrc

@@ -0,0 +1,5 @@
+# pnpm-related options
+shamefully-hoist=true
+strict-peer-dependencies=false
+# to get the latest compatible packages when creating the project https://github.com/pnpm/pnpm/issues/6463
+resolution-mode=highest

package/templates/app/quasar-v2/ts-vite-2/BASE/_.vscode/extensions.json

@@ -0,0 +1,15 @@
+{
+  "recommendations": [
+    <% if (preset.eslint) { %>"dbaeumer.vscode-eslint",<% } %>
+    <% if (prettier) { %>"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/quasar-v2/ts-vite-2/BASE/_.vscode/settings.json

@@ -0,0 +1,11 @@
+{
+  "editor.bracketPairColorization.enabled": true,
+  "editor.guides.bracketPairs": true,<% if (preset.eslint) { %>
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": <% if (prettier) { %>"esbenp.prettier-vscode"<% } else { %>"dbaeumer.vscode-eslint"<% } %>,
+  "editor.codeActionsOnSave": [
+    "source.fixAll.eslint"
+  ],
+  "eslint.validate": ["javascript", "javascriptreact", "typescript", "vue"],<% } %>
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

package/templates/app/quasar-v2/ts-vite-2/BASE/_package.json

@@ -0,0 +1,51 @@
+{
+  "name": "<%= name %>",
+  "version": "0.0.1",
+  "description": "<%= description %>",
+  "productName": "<%= productName %>",
+  "author": "<%= author %>",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    <% if (preset.eslint) { %>"lint": "eslint -c ./eslint.config.js \"./src*/**/*.{ts,js,cjs,mjs,vue}\"",<% } %>
+    <% if (prettier) { %>"format": "prettier --write \"**/*.{js,ts,vue,<% if (css !== 'sass') { %><%= css %><% } %>,html,md,json}\" --ignore-path .gitignore",<% } %>
+    "test": "echo \"No test specified\" && exit 0",
+    "dev": "quasar dev",
+    "build": "quasar build",
+    "postinstall": "quasar prepare"
+  },
+  "dependencies": {
+    <% if (preset.axios) { %>"axios": "^1.2.1",<% } %>
+    <% if (preset.i18n) { %>"vue-i18n": "^9.2.2",<% } %>
+    <% if (preset.pinia) { %>"pinia": "^3.0.1",<% } %>
+    "@quasar/extras": "^1.16.4",
+    "quasar": "^2.16.0",
+    "vue": "^3.4.18",
+    "vue-router": "^4.0.12"
+  },
+  "devDependencies": {
+    <% if (preset.eslint) { %>
+    "@eslint/js": "^9.14.0",
+    "eslint": "^9.14.0",
+    "eslint-plugin-vue": "^9.30.0",
+    "globals": "^15.12.0",
+    "vue-tsc": "^2.0.29",
+    "@vue/eslint-config-typescript": "^14.1.3",
+    "vite-plugin-checker": "^0.8.0",
+    <% } %>
+    <% if (prettier) { %>
+    "@vue/eslint-config-prettier": "^10.1.0",
+    "prettier": "^3.3.3",
+    <% } %>
+    "@types/node": "^20.5.9",
+    <% if (preset.i18n) { %>"@intlify/unplugin-vue-i18n": "^2.0.0",<% } %>
+    "@quasar/app-vite": "^2.1.0",
+    "autoprefixer": "^10.4.2",
+    "typescript": "~5.5.3"
+  },
+  "engines": {
+    "node": "^28 || ^26 || ^24 || ^22 || ^20 || ^18",
+    "npm": ">= 6.13.4",
+    "yarn": ">= 1.21.1"
+  }
+}

package/templates/app/quasar-v2/ts-vite-2/BASE/_tsconfig.json

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

package/templates/app/quasar-v2/ts-vite-2/BASE/index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title><%= '\<%= productName %\>' %></title>
+
+    <meta charset="utf-8">
+    <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\<% } %\>' %>">
+
+    <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">
+    <link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
+    <link rel="icon" type="image/ico" href="favicon.ico">
+  </head>
+  <body>
+    <!-- quasar:entry-point -->
+  </body>
+</html>

package/templates/app/quasar-v2/ts-vite-2/BASE/postcss.config.js

@@ -0,0 +1,29 @@
+// https://github.com/michael-ciniawsky/postcss-load-config
+
+import autoprefixer from 'autoprefixer'
+// import rtlcss from 'postcss-rtlcss'
+
+export default {
+  plugins: [
+    // https://github.com/postcss/autoprefixer
+    autoprefixer({
+      overrideBrowserslist: [
+        'last 4 Chrome versions',
+        'last 4 Firefox versions',
+        'last 4 Edge versions',
+        'last 4 Safari versions',
+        'last 4 Android versions',
+        'last 4 ChromeAndroid versions',
+        'last 4 FirefoxAndroid versions',
+        'last 4 iOS versions'
+      ]
+    }),
+
+    // https://github.com/elchininet/postcss-rtlcss
+    // If you want to support RTL css, then
+    // 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 (and its import statement above):
+    // rtlcss()
+  ]
+}