create-quasar 2.2.3 → 4.0.0

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

@@ -1,11 +1,9 @@
 import js from '@eslint/js'
 import globals from 'globals'
 import pluginVue from 'eslint-plugin-vue'
-import pluginQuasar from '@quasar/app-webpack/eslint'
+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(
   {
@@ -37,8 +35,7 @@ export default defineConfigWithVueTs(
    */
   pluginVue.configs[ 'flat/essential' ],
 
-  // this rule needs to be above the vueTsEslintConfig to avoid error: 'You have used a rule which requires type information, but don't have parserOptions set to generate type information for this file.'
- {
+  {
     files: ['**/*.ts', '**/*.vue'],
     rules: {
       '@typescript-eslint/consistent-type-imports': [
@@ -70,6 +67,9 @@ export default defineConfigWithVueTs(
     // add your custom rules here
     rules: {
       'prefer-promise-reject-errors': 'off',
+      <% if (scope.preset.fbr) { %>
+      'vue/multi-word-component-names': 'off',
+      <% } %>
 
       // allow debugger during development only
       'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
@@ -77,16 +77,13 @@ export default defineConfigWithVueTs(
   },
 
   {
-    files: [ 'src-pwa/custom-service-worker.ts' ],
+    files: [ 'src-pwa/sw/**/*.ts' ],
     languageOptions: {
       globals: {
         ...globals.serviceworker
       }
     }
-  }<% if (scope.prettier) { %>,<% } %>
-
-<% if (scope.prettier) { %>
+  },
 
   prettierSkipFormatting
-<% } %>
 )

package/templates/app/vite-3/ts/filenameBasedRouting/src/pages/[...path].vue

@@ -0,0 +1,21 @@
+<template>
+  <div
+    class="fullscreen bg-blue text-white text-center q-pa-md flex flex-center"
+  >
+    <div>
+      <div style="font-size: 30vh"> 404 </div>
+
+      <div class="text-h2" style="opacity: 0.4"> Oops. Nothing here... </div>
+
+      <q-btn
+        class="q-mt-xl"
+        color="white"
+        text-color="blue"
+        unelevated
+        to="/"
+        label="Go Home"
+        no-caps
+      />
+    </div>
+  </div>
+</template>

package/templates/app/vite-3/ts/filenameBasedRouting/src/pages/index/(index).vue

@@ -0,0 +1,23 @@
+<template>
+  <q-page class="flex flex-center">
+    <div class="column items-center">
+      <img
+        alt="Quasar logo"
+        src="~@/assets/quasar-logo-vertical.svg"
+        style="width: 200px; height: 200px"
+      />
+
+      <q-btn
+        class="q-mt-md"
+        color="primary"
+        to="/second"
+        label="Go to Second Page"
+        no-caps
+      />
+    </div>
+  </q-page>
+</template>
+
+<script setup lang="ts">
+//
+</script>

package/templates/app/vite-3/ts/filenameBasedRouting/src/pages/index/second.vue

@@ -0,0 +1,9 @@
+<template>
+  <q-page class="flex flex-center">
+    <q-btn color="secondary" to="/" label="Go to Index Page" no-caps />
+  </q-page>
+</template>
+
+<script setup lang="ts">
+//
+</script>

package/templates/app/vite-3/ts/filenameBasedRouting/src/pages/index.vue

@@ -0,0 +1,94 @@
+<template>
+  <q-layout view="lHh Lpr lFf">
+    <q-header elevated>
+      <q-toolbar>
+        <q-btn
+          flat
+          dense
+          round
+          icon="menu"
+          aria-label="Menu"
+          @click="toggleLeftDrawer"
+        />
+
+        <q-toolbar-title> Quasar App </q-toolbar-title>
+
+        <div>Quasar v{{ $q.version }}</div>
+      </q-toolbar>
+    </q-header>
+
+    <q-drawer v-model="leftDrawerOpen" show-if-above bordered>
+      <q-list>
+        <q-item-label header> Essential Links </q-item-label>
+
+        <EssentialLink
+          v-for="link in linksList"
+          :key="link.label"
+          v-bind="link"
+        />
+      </q-list>
+    </q-drawer>
+
+    <q-page-container>
+      <router-view />
+    </q-page-container>
+  </q-layout>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import EssentialLink, {
+  type EssentialLinkProps
+} from "@/components/EssentialLink.vue";
+
+const linksList: EssentialLinkProps[] = [
+  {
+    label: "Docs",
+    caption: "quasar.dev",
+    icon: "school",
+    link: "https://quasar.dev"
+  },
+  {
+    label: "Github",
+    caption: "github.com/quasarframework",
+    icon: "code",
+    link: "https://github.com/quasarframework"
+  },
+  {
+    label: "Discord Chat Channel",
+    caption: "chat.quasar.dev",
+    icon: "chat",
+    link: "https://chat.quasar.dev"
+  },
+  {
+    label: "Forum",
+    caption: "forum.quasar.dev",
+    icon: "record_voice_over",
+    link: "https://forum.quasar.dev"
+  },
+  {
+    label: "Twitter",
+    caption: "@quasarframework",
+    icon: "rss_feed",
+    link: "https://twitter.quasar.dev"
+  },
+  {
+    label: "Facebook",
+    caption: "@QuasarFramework",
+    icon: "public",
+    link: "https://facebook.quasar.dev"
+  },
+  {
+    label: "Quasar Awesome",
+    caption: "Community Quasar projects",
+    icon: "favorite",
+    link: "https://awesome.quasar.dev"
+  }
+];
+
+const leftDrawerOpen = ref(false);
+
+function toggleLeftDrawer() {
+  leftDrawerOpen.value = !leftDrawerOpen.value;
+}
+</script>

package/templates/app/vite-3/ts/filenameBasedRouting/src/router/_typed-router.d.ts

@@ -0,0 +1,116 @@
+/* eslint-disable */
+/* prettier-ignore */
+// oxfmt-ignore
+// @ts-nocheck
+// noinspection ES6UnusedImports
+// Generated by vue-router. !! DO NOT MODIFY THIS FILE !!
+// It's recommended to commit this file.
+// Make sure to add this file to your tsconfig.json file as an "includes" or "files" entry.
+
+import type {
+  RouteRecordInfo,
+  ParamValue,
+  ParamValueOneOrMore,
+  ParamValueZeroOrMore,
+  ParamValueZeroOrOne,
+} from 'vue-router'
+import type {
+  _ExtractParamParserType,
+} from 'vue-router/experimental'
+
+declare module 'vue-router' {
+  interface TypesConfig {
+    ParamParsers:
+      | never
+    RouteNamedMap: import('vue-router/auto-routes').RouteNamedMap
+  }
+}
+
+declare module 'vue-router/auto-routes' {
+  /**
+   * Route name map generated by vue-router
+   */
+  export interface RouteNamedMap {
+    '/': RouteRecordInfo<
+      '/',
+      '/',
+      Record<never, never>,
+      Record<never, never>,
+      | '//(index)'
+      | '//second'
+    >,
+    '//(index)': RouteRecordInfo<
+      '//(index)',
+      '/',
+      Record<never, never>,
+      Record<never, never>,
+      | never
+    >,
+    '//second': RouteRecordInfo<
+      '//second',
+      '/second',
+      Record<never, never>,
+      Record<never, never>,
+      | never
+    >,
+    '/[...path]': RouteRecordInfo<
+      '/[...path]',
+      '/:path(.*)',
+      { path: ParamValue<true> },
+      { path: ParamValue<false> },
+      | never
+    >,
+  }
+
+  /**
+   * Route file to route info map by vue-router.
+   * Used by the \`sfc-typed-router\` Volar plugin to automatically type \`useRoute()\`.
+   *
+   * Each key is a file path relative to the project root with 2 properties:
+   * - routes: union of route names of the possible routes when in this page (passed to useRoute<...>())
+   * - views: names of nested views (can be passed to <RouterView name="...">)
+   *
+   * @internal
+   */
+  export interface _RouteFileInfoMap {
+    'src/pages/index.vue': {
+      routes:
+        | '/'
+        | '//(index)'
+        | '//second'
+      views:
+        | 'default'
+    }
+    'src/pages/index/(index).vue': {
+      routes:
+        | '//(index)'
+      views:
+        | never
+    }
+    'src/pages/index/second.vue': {
+      routes:
+        | '//second'
+      views:
+        | never
+    }
+    'src/pages/[...path].vue': {
+      routes:
+        | '/[...path]'
+      views:
+        | never
+    }
+  }
+
+  /**
+   * Get a union of possible route names in a certain route component file.
+   * Used by the \`sfc-typed-router\` Volar plugin to automatically type \`useRoute()\`.
+   *
+   * @internal
+   */
+  export type _RouteNamesForFilePath<FilePath extends string> =
+    _RouteFileInfoMap extends Record<FilePath, infer Info>
+      ? Info['routes']
+      : keyof RouteNamedMap
+}
+
+export {}

package/templates/app/vite-3/ts/filenameBasedRouting/src/router/index.ts

@@ -0,0 +1,40 @@
+import { defineRouter } from '#q-app';
+import { routes, handleHotUpdate } from 'vue-router/auto-routes';
+import {
+  createMemoryHistory,
+  createRouter,
+  createWebHashHistory,
+  createWebHistory,
+} from 'vue-router';
+
+/*
+ * 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((/* { store, ssrContext } */) => {
+  const createHistory = import.meta.env.QUASAR_SERVER
+    ? createMemoryHistory
+    : (import.meta.env.QUASAR_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(import.meta.env.QUASAR_VUE_ROUTER_BASE)
+  });
+
+  // enable HMR for it
+  if (import.meta.hot) {
+    handleHotUpdate(Router);
+  }
+
+  return Router;
+});

package/templates/app/{quasar-v2/ts-webpack-4 → vite-3/ts}/i18n/src/boot/i18n.ts

@@ -1,11 +1,11 @@
-import { defineBoot } from '#q-app/wrappers';
+import { defineBoot } from '#q-app';
 import { createI18n } from 'vue-i18n';
 
-import messages from 'src/i18n';
+import messages from '@/i18n';
 
 export type MessageLanguages = keyof typeof messages;
 // Type-define 'en-US' as the master schema for the resource
-export type MessageSchema = typeof messages["en-US"];
+export type MessageSchema = typeof messages['en-US'];
 
 // See https://vue-i18n.intlify.dev/guide/advanced/typescript.html#global-resource-schema-type-definition
 /* eslint-disable @typescript-eslint/no-empty-object-type */

package/templates/app/{quasar-v2/ts-webpack-4/BASE → vite-3/ts/manualRouting}/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>
@@ -47,47 +47,47 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import EssentialLink, { type EssentialLinkProps } from 'components/EssentialLink.vue';
+import EssentialLink, { type EssentialLinkProps } from '@/components/EssentialLink.vue';
 
 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/vite-3/ts/manualRouting/src/pages/IndexPage.vue

@@ -0,0 +1,23 @@
+<template>
+  <q-page class="flex flex-center">
+    <div class="column items-center">
+      <img
+        alt="Quasar logo"
+        src="~@/assets/quasar-logo-vertical.svg"
+        style="width: 200px; height: 200px"
+      />
+
+      <q-btn
+        class="q-mt-md"
+        color="primary"
+        to="/second"
+        label="Go to Second Page"
+        no-caps
+      />
+    </div>
+  </q-page>
+</template>
+
+<script setup lang="ts">
+//
+</script>

package/templates/app/vite-3/ts/manualRouting/src/pages/SecondPage.vue

@@ -0,0 +1,9 @@
+<template>
+  <q-page class="flex flex-center">
+    <q-btn color="secondary" to="/" label="Go to Index Page" no-caps />
+  </q-page>
+</template>
+
+<script setup lang="ts">
+//
+</script>

package/templates/{app-extension/ae-ts/BASE/playground/quasar-cli-vite → app/vite-3/ts/manualRouting}/src/router/index.ts

@@ -1,4 +1,4 @@
-import { defineRouter } from '#q-app/wrappers';
+import { defineRouter } from '#q-app';
 import {
   createMemoryHistory,
   createRouter,
@@ -18,11 +18,9 @@ import routes from './routes';
  */
 
 export default defineRouter((/* { store, ssrContext } */) => {
-  const createHistory = process.env['SERVER']
+  const createHistory = import.meta.env.QUASAR_SERVER
     ? createMemoryHistory
-    : process.env.VUE_ROUTER_MODE === 'history'
-      ? createWebHistory
-      : createWebHashHistory;
+    : (import.meta.env.QUASAR_VUE_ROUTER_MODE === 'history' ? createWebHistory : createWebHashHistory);
 
   const Router = createRouter({
     scrollBehavior: () => ({ left: 0, top: 0 }),
@@ -31,7 +29,7 @@ export default defineRouter((/* { store, ssrContext } */) => {
     // 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),
+    history: createHistory(import.meta.env.QUASAR_VUE_ROUTER_BASE)
   });
 
   return Router;

package/templates/app/vite-3/ts/manualRouting/src/router/routes.ts

@@ -0,0 +1,21 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/',
+    component: () => import('@/layouts/MainLayout.vue'),
+    children: [
+      { path: '', component: () => import('@/pages/IndexPage.vue') },
+      { path: 'second', component: () => import('@/pages/SecondPage.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/vite-3/ts/oxlint/_oxfmt.config.ts

@@ -0,0 +1,27 @@
+import { defineConfig } from 'oxfmt'
+
+export default defineConfig({
+  $schema: './node_modules/oxfmt/configuration_schema.json',
+
+  ignorePatterns: [
+    '**/node_modules/',
+    'dist/',
+    'quasar.config.*.temporary.compiled*',
+    '.quasar/',
+    'src-cordova/',
+    'src-capacitor/',
+    'src/router/typed-router.d.ts'
+  ],
+
+  printWidth: 80,
+  arrowParens: 'avoid',
+  bracketSpacing: true,
+  bracketSameLine: false,
+  htmlWhitespaceSensitivity: 'strict',
+  semi: true,
+  singleQuote: false,
+  quoteProps: 'as-needed',
+  trailingComma: 'none',
+  useTabs: false,
+  vueIndentScriptAndStyle: false
+})

package/templates/app/vite-3/ts/oxlint/_oxlint.config.ts

@@ -0,0 +1,38 @@
+import { defineConfig } from 'oxlint'
+
+export default defineConfig({
+  $schema: './node_modules/oxlint/configuration_schema.json',
+
+  ignorePatterns: [
+    '**/node_modules/',
+    'dist/',
+    'quasar.config.*.temporary.compiled*',
+    '.quasar/',
+    'src-cordova/',
+    'src-capacitor/',
+    'src/router/typed-router.d.ts'
+  ],
+
+  options: {
+    typeAware: true,
+    typeCheck: true,
+    maxWarnings: 10
+  },
+
+  plugins: ['typescript', 'vue', 'import', 'eslint', 'promise', 'unicorn'],
+
+  categories: {
+    correctness: 'error'
+    // style: 'error',
+    // pedantic: 'warn',
+    // suspicious: 'error',
+    // perf: 'error',
+    // restriction: 'error'
+  },
+
+  rules: {},
+
+  env: {
+    builtin: true
+  }
+})

package/templates/app/{quasar-v2/ts-webpack-4 → vite-3/ts}/pinia/src/stores/example-store.ts

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

package/templates/app/{quasar-v2/ts-webpack-4 → vite-3/ts}/pinia/src/stores/index.ts

@@ -1,4 +1,4 @@
-import { defineStore } from '#q-app/wrappers'
+import { defineStore } from '#q-app'
 import { createPinia } from 'pinia'
 
 /*

package/templates/app/vite-3/ts/sass/src/css/app.scss

@@ -0,0 +1 @@
+// app global css

package/assets/logo.art

@@ -1,10 +0,0 @@
-
- .d88888b.
-d88P" "Y88b
-888     888
-888     888 888  888  8888b.  .d8888b   8888b.  888d888
-888     888 888  888     "88b 88K          "88b 888P"
-888 Y8b 888 888  888 .d888888 "Y8888b. .d888888 888
-Y88b.Y8b88P Y88b 888 888  888      X88 888  888 888
- "Y888888"   "Y88888 "Y888888  88888P' "Y888888 888
-       Y8b