create-quasar 1.9.3 → 1.10.1

package/templates/app/quasar-v2/ts-vite-2/BASE/src/pages/ErrorNotFound.vue

@@ -23,9 +23,7 @@
 </template>
 <% if (sfcStyle === 'composition-setup') { %>
 <script setup lang="ts">
-defineOptions({
-  name: 'ErrorNotFound'
-});
+//
 </script><% } else if (sfcStyle === 'composition' || sfcStyle === 'options') { %>
 <script lang="ts">
 import { defineComponent } from 'vue';

package/templates/app/quasar-v2/ts-vite-2/BASE/src/pages/IndexPage.vue

@@ -11,13 +11,9 @@
 <% if (sfcStyle === 'composition-setup') { %>
 <script setup lang="ts">
 import { ref } from 'vue';
-import { Todo, Meta } from 'components/models';
+import type { Todo, Meta } from 'components/models';
 import ExampleComponent from 'components/ExampleComponent.vue';
 
-defineOptions({
-  name: 'IndexPage'
-});
-
 const todos = ref<Todo[]>([
   {
     id: 1,
@@ -47,7 +43,7 @@ const meta = ref<Meta>({
 </script><% } else if (sfcStyle === 'composition') { %>
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
-import { Todo, Meta } from 'components/models';
+import type { Todo, Meta } from 'components/models';
 import ExampleComponent from 'components/ExampleComponent.vue';
 
 export default defineComponent({
@@ -91,7 +87,7 @@ export default defineComponent({
 </script><% } else if (sfcStyle === 'options') { %>
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { Todo, Meta } from 'components/models';
+import type { Todo, Meta } from 'components/models';
 import ExampleComponent from 'components/ExampleComponent.vue';
 
 export default defineComponent({

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

@@ -1,4 +1,4 @@
-import { route } from 'quasar/wrappers';
+import { defineRouter } from '#q-app/wrappers';
 import {
   createMemoryHistory,
   createRouter,
@@ -16,7 +16,7 @@ import routes from './routes';
  * with the Router instance.
  */
 
-export default route(function (/* { store, ssrContext } */) {
+export default defineRouter(function (/* { store, ssrContext } */) {
   const createHistory = process.env.SERVER
     ? createMemoryHistory
     : (process.env.VUE_ROUTER_MODE === 'history' ? createWebHistory : createWebHashHistory);

package/templates/app/quasar-v2/ts-vite-2/BASE/src/router/routes.ts

@@ -1,4 +1,4 @@
-import { RouteRecordRaw } from 'vue-router';
+import type { RouteRecordRaw } from 'vue-router';
 
 const routes: RouteRecordRaw[] = [
   {

package/templates/app/quasar-v2/ts-vite-2/axios/src/boot/axios.ts

@@ -1,5 +1,5 @@
-import { boot } from 'quasar/wrappers';
-import axios, { AxiosInstance } from 'axios';
+import { defineBoot } from '#q-app/wrappers';
+import axios, { type AxiosInstance } from 'axios';
 
 declare module 'vue' {
   interface ComponentCustomProperties {
@@ -16,7 +16,7 @@ declare module 'vue' {
 // for each client)
 const api = axios.create({ baseURL: 'https://api.example.com' });
 
-export default boot(({ app }) => {
+export default defineBoot(({ app }) => {
   // for use inside Vue files (Options API) through this.$axios and this.$api
 
   app.config.globalProperties.$axios = axios;

package/templates/app/quasar-v2/ts-vite-2/i18n/src/boot/i18n.ts

@@ -1,4 +1,4 @@
-import { boot } from 'quasar/wrappers';
+import { defineBoot } from '#q-app/wrappers';
 import { createI18n } from 'vue-i18n';
 
 import messages from 'src/i18n';
@@ -21,7 +21,7 @@ declare module 'vue-i18n' {
 }
 /* eslint-enable @typescript-eslint/no-empty-interface */
 
-export default boot(({ app }) => {
+export default defineBoot(({ app }) => {
   const i18n = createI18n({
     locale: 'en-US',<% if (sfcStyle === 'composition' || sfcStyle === 'composition-setup') { %>
     legacy: false,<% } %>

package/templates/app/quasar-v2/ts-vite-2/lint/_.eslintrc.cjs

@@ -23,7 +23,7 @@ module.exports = {
     // Base ESLint recommended rules
     // 'eslint:recommended',
 
-    // https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin#usage
+    // https://typescript-eslint.io/getting-started/legacy-eslint-setup
     // ESLint typescript rules
     'plugin:@typescript-eslint/recommended',
 
@@ -120,6 +120,11 @@ module.exports = {
     // in plain CommonJS modules, you can't use `import foo = require('foo')` to pass this rule, so it has to be disabled
     '@typescript-eslint/no-var-requires': 'off',
 
+    '@typescript-eslint/consistent-type-imports': [
+      'error',
+      { prefer: 'type-imports' },
+    ],
+
     // The core 'no-unused-vars' rules (in the eslint:recommended ruleset)
     // does not work with type definitions
     'no-unused-vars': 'off',

package/templates/app/quasar-v2/ts-vite-2/pinia/src/stores/index.ts

@@ -1,6 +1,6 @@
-import { store } from 'quasar/wrappers'
+import { defineStore } from '#q-app/wrappers'
 import { createPinia } from 'pinia'
-import { Router } from 'vue-router';
+import type { Router } from 'vue-router';
 
 /*
  * When adding new properties to stores, you should also
@@ -22,7 +22,7 @@ declare module 'pinia' {
  * with the Store instance.
  */
 
-export default store((/* { ssrContext } */) => {
+export default defineStore((/* { ssrContext } */) => {
   const pinia = createPinia()
 
   // You can add Pinia plugins here

package/templates/app/quasar-v2/ts-webpack-4/BASE/_package.json

@@ -11,7 +11,8 @@
     <% } %>
     "test": "echo \"No test specified\" && exit 0",
     "dev": "quasar dev",
-    "build": "quasar build"
+    "build": "quasar build",
+    "postinstall": "quasar prepare"
   },
   "dependencies": {
     <% if (preset.axios) { %>"axios": "^1.2.1",<% } %>
@@ -43,7 +44,7 @@
     "prettier": "^3.0.3",
     <% } } %>
     "@types/node": "^20.5.9",
-    "@quasar/app-webpack": "^4.0.0-beta.13",
+    "@quasar/app-webpack": "^4.0.0-rc.1",
     "ts-loader": "^9.4.2",
     "typescript": "^5.2.2"
   },

package/templates/app/quasar-v2/ts-webpack-4/BASE/_tsconfig.json

@@ -1,14 +1,3 @@
 {
-  "extends": "@quasar/app-webpack/tsconfig-preset",
-  "compilerOptions": {
-    "baseUrl": "."
-  },
-  "exclude": [
-    "./dist",
-    "./.quasar",
-    "./node_modules",
-    "./src-capacitor",
-    "./src-cordova",
-    "./quasar.config.*.temporary.compiled*"
-  ]
+  "extends": "./.quasar/tsconfig.json"
 }

package/templates/app/quasar-v2/ts-webpack-4/BASE/quasar.config.ts

@@ -10,9 +10,9 @@
 /* eslint global-require: 0 */
 <% } %>
 <% } %>
-import { configure } from 'quasar/wrappers';
+import { defineConfig } from '#q-app/wrappers';
 
-export default configure((/* ctx */) => {
+export default defineConfig((/* ctx */) => {
   return {
     <% if (preset.lint) { %>eslint: {
       // fix: true,
@@ -71,6 +71,12 @@ export default configure((/* ctx */) => {
         node: 'node20'
       },
 
+      typescript: {
+        strict: true,
+        vueShim: true
+        // extendTsConfig (tsConfig) {}
+      },
+
       // rtl: true, // https://quasar.dev/options/rtl-support
       // preloadChunks: true,
       // showProgress: false,

package/templates/app/quasar-v2/ts-webpack-4/BASE/src/App.vue

@@ -3,9 +3,7 @@
 </template>
 <% if (sfcStyle === 'composition-setup') { %>
 <script setup lang="ts">
-defineOptions({
-  name: 'App'
-});
+//
 </script><% } else if (sfcStyle === 'composition' || sfcStyle === 'options') { %>
 <script lang="ts">
 import { defineComponent } from 'vue';

package/templates/app/quasar-v2/ts-webpack-4/BASE/src/components/EssentialLink.vue

@@ -20,10 +20,6 @@
 </template>
 <% if (sfcStyle === 'composition-setup') { %>
 <script setup lang="ts">
-defineOptions({
-  name: 'EssentialLink'
-});
-
 export interface EssentialLinkProps {
   title: string;
   caption?: string;

package/templates/app/quasar-v2/ts-webpack-4/BASE/src/components/ExampleComponent.vue

@@ -14,7 +14,7 @@
 <% if (sfcStyle === 'composition-setup') { %>
 <script setup lang="ts">
 import { computed, ref } from 'vue';
-import { Todo, Meta } from './models';
+import type { Todo, Meta } from './models';
 
 interface Props {
   title: string;
@@ -38,13 +38,13 @@ const todoCount = computed(() => props.todos.length);
 <script lang="ts">
 import {
   defineComponent,
-  PropType,
   computed,
   ref,
   toRef,
-  Ref,
+  type PropType,
+  type Ref,
 } from 'vue';
-import { Todo, Meta } from './models';
+import type { Todo, Meta } from './models';
 
 function useClickCount() {
   const clickCount = ref(0);
@@ -88,8 +88,8 @@ export default defineComponent({
 });
 </script><% } else if (sfcStyle === 'options') { %>
 <script lang="ts">
-import { defineComponent, PropType } from 'vue';
-import { Todo, Meta } from './models';
+import { defineComponent, type PropType } from 'vue';
+import type { Todo, Meta } from './models';
 
 export default defineComponent({
   name: 'ExampleComponent',

package/templates/app/quasar-v2/ts-webpack-4/BASE/src/layouts/MainLayout.vue

@@ -47,11 +47,7 @@
 <% if (sfcStyle === 'composition-setup') { %>
 <script setup lang="ts">
 import { ref } from 'vue';
-import EssentialLink, { EssentialLinkProps } from 'components/EssentialLink.vue';
-
-defineOptions({
-  name: 'MainLayout'
-});
+import EssentialLink, { type EssentialLinkProps } from 'components/EssentialLink.vue';
 
 const linksList: EssentialLinkProps[] = [
   {
@@ -106,7 +102,7 @@ function toggleLeftDrawer () {
 </script><% } else if (sfcStyle === 'composition') { %>
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
-import EssentialLink, { EssentialLinkProps } from 'components/EssentialLink.vue';
+import EssentialLink, { type EssentialLinkProps } from 'components/EssentialLink.vue';
 
 const linksList: EssentialLinkProps[] = [
   {
@@ -175,7 +171,7 @@ export default defineComponent({
 </script><% } else if (sfcStyle === 'options') { %>
 <script lang="ts">
 import { defineComponent } from 'vue';
-import EssentialLink, { EssentialLinkProps } from 'components/EssentialLink.vue';
+import EssentialLink, { type EssentialLinkProps } from 'components/EssentialLink.vue';
 
 const linksList: EssentialLinkProps[] = [
   {

package/templates/app/quasar-v2/ts-webpack-4/BASE/src/pages/ErrorNotFound.vue

@@ -23,9 +23,7 @@
 </template>
 <% if (sfcStyle === 'composition-setup') { %>
 <script setup lang="ts">
-defineOptions({
-  name: 'ErrorNotFound'
-});
+//
 </script><% } else if (sfcStyle === 'composition' || sfcStyle === 'options') { %>
 <script lang="ts">
 import { defineComponent } from 'vue';

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

@@ -11,13 +11,9 @@
 <% if (sfcStyle === 'composition-setup') { %>
 <script setup lang="ts">
 import { ref } from 'vue';
-import { Todo, Meta } from 'components/models';
+import type { Todo, Meta } from 'components/models';
 import ExampleComponent from 'components/ExampleComponent.vue';
 
-defineOptions({
-  name: 'IndexPage'
-});
-
 const todos = ref<Todo[]>([
   {
     id: 1,
@@ -47,7 +43,7 @@ const meta = ref<Meta>({
 </script><% } else if (sfcStyle === 'composition') { %>
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
-import { Todo, Meta } from 'components/models';
+import type { Todo, Meta } from 'components/models';
 import ExampleComponent from 'components/ExampleComponent.vue';
 
 export default defineComponent({
@@ -91,7 +87,7 @@ export default defineComponent({
 </script><% } else if (sfcStyle === 'options') { %>
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { Todo, Meta } from 'components/models';
+import type { Todo, Meta } from 'components/models';
 import ExampleComponent from 'components/ExampleComponent.vue';
 
 export default defineComponent({

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

@@ -1,4 +1,4 @@
-import { route } from 'quasar/wrappers';
+import { defineRouter } from '#q-app/wrappers';
 import {
   createMemoryHistory,
   createRouter,
@@ -16,7 +16,7 @@ import routes from './routes';
  * with the Router instance.
  */
 
-export default route(function (/* { store, ssrContext } */) {
+export default defineRouter(function (/* { store, ssrContext } */) {
   const createHistory = process.env.SERVER
     ? createMemoryHistory
     : (process.env.VUE_ROUTER_MODE === 'history' ? createWebHistory : createWebHashHistory);

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

@@ -1,4 +1,4 @@
-import { RouteRecordRaw } from 'vue-router';
+import type { RouteRecordRaw } from 'vue-router';
 
 const routes: RouteRecordRaw[] = [
   {

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

@@ -1,5 +1,5 @@
-import { boot } from 'quasar/wrappers';
-import axios, { AxiosInstance } from 'axios';
+import { defineBoot } from '#q-app/wrappers';
+import axios, { type AxiosInstance } from 'axios';
 
 declare module 'vue' {
   interface ComponentCustomProperties {
@@ -16,7 +16,7 @@ declare module 'vue' {
 // for each client)
 const api = axios.create({ baseURL: 'https://api.example.com' });
 
-export default boot(({ app }) => {
+export default defineBoot(({ app }) => {
   // for use inside Vue files (Options API) through this.$axios and this.$api
 
   app.config.globalProperties.$axios = axios;

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

@@ -1,4 +1,4 @@
-import { boot } from 'quasar/wrappers';
+import { defineBoot } from '#q-app/wrappers';
 import { createI18n } from 'vue-i18n';
 
 import messages from 'src/i18n';
@@ -21,7 +21,7 @@ declare module "vue-i18n" {
 }
 /* eslint-enable @typescript-eslint/no-empty-interface */
 
-export default boot(({ app }) => {
+export default defineBoot(({ app }) => {
   const i18n = createI18n<{ message: MessageSchema }, MessageLanguages>({
     locale: 'en-US',<% if (sfcStyle === 'composition' || sfcStyle === 'composition-setup') { %>
     legacy: false,<% } %>

package/templates/app/quasar-v2/ts-webpack-4/lint/_.eslintrc.cjs

@@ -24,7 +24,7 @@ module.exports = {
     // Base ESLint recommended rules
     // 'eslint:recommended',
 
-    // https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin#usage
+    // https://typescript-eslint.io/getting-started/legacy-eslint-setup
     // ESLint typescript rules
     'plugin:@typescript-eslint/recommended',
 
@@ -124,6 +124,11 @@ module.exports = {
     // in plain CommonJS modules, you can't use `import foo = require('foo')` to pass this rule, so it has to be disabled
     '@typescript-eslint/no-var-requires': 'off',
 
+    '@typescript-eslint/consistent-type-imports': [
+      'error',
+      { prefer: 'type-imports' },
+    ],
+
     // The core 'no-unused-vars' rules (in the eslint:recommended ruleset)
     // does not work with type definitions
     'no-unused-vars': 'off',

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

@@ -1,6 +1,6 @@
-import { store } from 'quasar/wrappers'
+import { defineStore } from '#q-app/wrappers'
 import { createPinia } from 'pinia'
-import { Router } from 'vue-router';
+import type { Router } from 'vue-router';
 
 /*
  * When adding new properties to stores, you should also
@@ -22,7 +22,7 @@ declare module 'pinia' {
  * with the Store instance.
  */
 
-export default store((/* { ssrContext } */) => {
+export default defineStore((/* { ssrContext } */) => {
   const pinia = createPinia()
 
   // You can add Pinia plugins here

package/templates/app-extension/ae-ts/.eslintrc.cjs

@@ -0,0 +1,21 @@
+module.exports = {
+  settings: {
+    'lodash-template/globals': [
+      // Base
+      'name',
+      'description',
+      'author',
+
+      'preset',
+      'orgName',
+      'pkgName',
+      'license',
+      'repositoryType',
+      'repositoryURL',
+      'homepage',
+      'bugs',
+
+      'packageManagerField',
+    ]
+  },
+}

package/templates/app-extension/ae-ts/BASE/README.md

@@ -0,0 +1,35 @@
+<img src="https://img.shields.io/npm/v/<%= pkgName %>.svg?label=<%= pkgName %>">
+
+Compatible with:
+
+- Quasar UI v2 and Vue 3
+- Quasar CLI with Vite v1.5+ and v2
+- Quasar CLI with Webpack v3.10+ and v4
+
+# Structure
+
+- [/app-extension](app-extension) - App Extension for Quasar CLI
+- [/playground](playground) - collection of playground apps to test the UI and App Extension
+
+# Development
+
+```bash
+$ <%= packageManager?.name ?? 'pnpm' %> i # install the dependencies
+
+$ <%= packageManager?.name ?? 'pnpm' %> build # build the app-extension. Run this after making any change in ./app-extension
+
+$ <%= packageManager?.name ?? 'pnpm' %> dev:vite # start the app-vite playground
+$ <%= packageManager?.name ?? 'pnpm' %> dev:webpack # start the app-webpack playground
+```
+
+For more development-related explanation, see:
+- [`app-extension/src/runtime/README.md`](app-extension/src/runtime/README.md)
+<% if (preset.install) { %>- [`app-extension/src/templates/README.md`](app-extension/src/templates/README.md)<% } %>
+
+# Donate
+
+If you appreciate the work that went into this project, please consider [donating to Quasar](https://donate.quasar.dev).
+
+# License
+
+<%= license %> (c) <%= author %>

package/templates/app-extension/ae-ts/BASE/_.gitignore

@@ -0,0 +1,8 @@
+.DS_Store
+.thumbs.db
+dist
+node_modules
+
+# package manager log files
+*-debug.log*
+*-error.log*

package/templates/app-extension/ae-ts/BASE/_.vscode/extensions.json

@@ -0,0 +1,9 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "editorconfig.editorconfig",
+    "vue.volar",
+    "wayou.vscode-todo-highlight"
+  ]
+}

package/templates/app-extension/ae-ts/BASE/_.vscode/settings.json

@@ -0,0 +1,12 @@
+{
+  "editor.bracketPairColorization.enabled": true,
+  "editor.guides.bracketPairs": true,
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  },
+  "eslint.validate": ["javascript", "javascriptreact", "typescript", "vue"],
+  "eslint.workingDirectories": ["./app-extension", "./ui", "./playground/*"],
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

package/templates/app-extension/ae-ts/BASE/_eslint.config.js

@@ -0,0 +1,107 @@
+import eslint from '@eslint/js';
+import tseslint from 'typescript-eslint';
+import pluginVue from 'eslint-plugin-vue';
+import configPrettier from 'eslint-config-prettier';
+import globals from 'globals';
+import { version as vueVersion } from 'vue';
+
+export default tseslint.config(
+  {
+    name: 'eslint/recommended',
+    ...eslint.configs.recommended,
+  },
+
+  // Recommended rules
+  ...tseslint.configs.recommendedTypeChecked,
+  // Strict rules (recommended if have good TS knowledge)
+  // ...tseslint.configs.strictTypeChecked, // disable recommended above if you enable this
+  ...tseslint.configs.stylisticTypeChecked,
+
+  ...pluginVue.configs['flat/recommended'],
+
+  {
+    name: 'eslint-config-prettier',
+    ...configPrettier,
+  },
+
+  {
+    name: 'ignored',
+
+    ignores: [
+      "**/dist",
+
+      "playground/*/.quasar",
+      "playground/*/quasar.config.*.temporary.compiled*",
+      "playground/*/src-cordova",
+      "playground/*/src-capacitor",
+      "playground/*/src-ssr",
+      "playground/*/postcss.config.cjs",
+
+      "playground/quasar-cli-webpack/src-bex/www",
+      "playground/quasar-cli-webpack/babel.config.cjs",
+    ],
+  },
+
+  {
+    name: 'general',
+
+    languageOptions: {
+      parserOptions: {
+        parser: tseslint.parser,
+        extraFileExtensions: ['.vue'],
+        projectService: true,
+      },
+
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+        ...globals.es2021,
+
+        chrome: 'readonly',
+        cordova: 'readonly',
+        Capacitor: 'readonly',
+      },
+    },
+
+    rules: {
+      '@typescript-eslint/no-misused-promises': [
+        'error',
+        { checksVoidReturn: false },
+      ],
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        { argsIgnorePattern: '^_' },
+      ],
+
+      'vue/no-unsupported-features': [
+        'error',
+        {
+          version: vueVersion,
+        },
+      ],
+      'vue/padding-line-between-blocks': 'warn',
+      'vue/no-empty-component-block': 'warn',
+      'vue/eqeqeq': 'error',
+      'vue/custom-event-name-casing': 'warn',
+      'vue/no-unused-properties': ['warn', { groups: ['props', 'setup'] }],
+      'vue/v-for-delimiter-style': 'warn',
+      'vue/require-macro-variable-name': 'warn',
+      'vue/prefer-separate-static-class': 'warn',
+
+      curly: 'error',
+      'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    },
+  },
+
+  {
+    // Layout/page components are not used as components in templates, so they don't need to be multi-word
+    name: 'playground/vue-layout-and-page',
+    files: [
+      'playground/*/src/layouts/**/*.vue',
+      'playground/*/src/pages/**/*.vue',
+    ],
+    rules: {
+      'vue/multi-word-component-names': 'off',
+    },
+  },
+);