create-quasar 2.2.3 → 4.0.1

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

@@ -1,36 +1,23 @@
 // Configuration for your app
-// https://v2.quasar.dev/quasar-cli-webpack/quasar-config-file
+// https://v2.quasar.dev/quasar-cli-vite/quasar-config-file
 
-import { defineConfig } from '#q-app/wrappers'
+import { defineConfig } from '#q-app'
 
-export default defineConfig((ctx) => {
+export default defineConfig((<% if (scope.preset.i18n) { %>ctx<% } else { %>/* ctx */<% } %>) => {
   return {
-<% if (scope.preset.eslint) { %>
-    eslint: {
-      // fix: true,
-      // include: [],
-      // exclude: [],
-      // cache: false,
-      // rawEsbuildEslintOptions: {},
-      // rawWebpackEslintPluginOptions: {},
-      warnings: true,
-      errors: true
-    },
-
-<% } %>
-    // https://v2.quasar.dev/quasar-cli-webpack/prefetch-feature
+    // https://v2.quasar.dev/quasar-cli-vite/prefetch-feature
     // preFetch: true,
 
     // app boot file (/src/boot)
     // --> boot files are part of "main.js"
-    // https://v2.quasar.dev/quasar-cli-webpack/boot-files
+    // https://v2.quasar.dev/quasar-cli-vite/boot-files
     boot: [
 <% if (scope.preset.i18n) { %>
       'i18n'
 <% } %>
     ],
 
-    // https://v2.quasar.dev/quasar-cli-webpack/quasar-config-file#css
+    // https://v2.quasar.dev/quasar-cli-vite/quasar-config-file#css
     css: [
       'app.<%= scope.preset.sass ? 'scss' : 'css' %>'
     ],
@@ -39,7 +26,7 @@ export default defineConfig((ctx) => {
     extras: [
       // 'ionicons-v4',
       // 'mdi-v7',
-      // 'fontawesome-v6',
+      // 'fontawesome-v7',
       // 'eva-icons',
       // 'themify',
       // 'line-awesome',
@@ -49,45 +36,71 @@ export default defineConfig((ctx) => {
       'material-icons', // optional, you are not bound to it
     ],
 
-    // Full list of options: https://v2.quasar.dev/quasar-cli-webpack/quasar-config-file#build
+    // https://v2.quasar.dev/quasar-cli-vite/quasar-config-file#build
     build: {
-      // publicPath: '/',
+      target: {
+        // browser: 'baseline-widely-available',
+        // node: 'node22'
+      },
+
+      // https://v2.quasar.dev/quasar-cli-vite/page-routing-with-vue-router#filename-based-routing
+      <% if (!scope.preset.fbr) { %>// <% } %>filenameBasedRouting: true,
+
       vueRouterMode: 'hash', // available values: 'hash', 'history'
+      // vueRouterBase,
+      // vueDevtools,
 
-      // webpackTranspile: false,
+      // publicPath: '/',
+      // define: {},
+      // defineEnv: {}
+      // ignorePublicFolder: true,
+      // minify: false,
+      // distDir
 
-      // Add dependencies for transpiling with Babel (Array of string/regex)
-      // (from node_modules, which are by default not transpiled).
-      // Applies only if "webpackTranspile" is set to true.
-      // webpackTranspileDependencies: [],
+      // extendViteConf (viteConf) {},
+      // viteVuePluginOptions: {},
 
-      esbuildTarget: {
-        browser: [ 'es2022', 'firefox115', 'chrome115', 'safari14' ],
-        node: 'node20'
-      },
+<% if (scope.preset.i18n || scope.linter === 'eslint') { %>
+      vitePlugins: [
+<% if (scope.preset.i18n) { %>
+        ['@intlify/unplugin-vue-i18n/vite', {
+          // if you want to use Vue I18n Legacy API, you need to set `compositionOnly: false`
+          // compositionOnly: false,
+
+          // if you want to use named tokens in your Vue I18n messages, such as 'Hello {name}',
+          // you need to set `runtimeOnly: false`
+          // runtimeOnly: false,
 
-      // rtl: true, // https://quasar.dev/options/rtl-support
-      // showProgress: false,
-      // gzip: true,
-      // analyze: true,
+          ssr: ctx.modeName === 'ssr',
 
-      // Options below are automatically set depending on the env, set them if you want to override
-      // extractCSS: false,
+          // you need to set i18n resource including paths !
+          include: [ ctx.appPaths.resolve.app('src/i18n') ]
+        }]<% if (scope.linter === 'eslint') { %>,<% } %>
 
-      // https://v2.quasar.dev/quasar-cli-webpack/handling-webpack
-      // "chain" is a webpack-chain object https://github.com/sorrycc/webpack-chain
-      // chainWebpack (/* chain, { isClient, isServer } */) {}
+<% } %>
+<% if (scope.linter === 'eslint') { %>
+        ['vite-plugin-checker', {
+          eslint: {
+            lintCommand: 'eslint -c ./eslint.config.js "./src*/**/*.{js,mjs,cjs,vue}"',
+            useFlatConfig: true
+          }
+        }, { server: false }]
+<% } %>
+      ]
+<% } else { %>
+      // vitePlugins: [
+      //   [ 'package-name', { ..pluginOptions.. }, { server: true, client: true } ]
+      // ]
+<% } %>
     },
 
-    // Full list of options: https://v2.quasar.dev/quasar-cli-webpack/quasar-config-file#devserver
+    // https://v2.quasar.dev/quasar-cli-vite/quasar-config-file#devserver
     devServer: {
-      server: {
-        type: 'http'
-      },
+      // https: true,
       open: true // opens browser window automatically
     },
 
-    // https://v2.quasar.dev/quasar-cli-webpack/quasar-config-file#framework
+    // https://v2.quasar.dev/quasar-cli-vite/quasar-config-file#framework
     framework: {
       config: {},
 
@@ -106,24 +119,23 @@ export default defineConfig((ctx) => {
     },
 
     // animations: 'all', // --- includes all animations
-    // https://quasar.dev/options/animations
+    // https://v2.quasar.dev/options/animations
     animations: [],
 
-    // https://v2.quasar.dev/quasar-cli-webpack/quasar-config-file#sourcefiles
+    // https://v2.quasar.dev/quasar-cli-vite/quasar-config-file#sourcefiles
     // sourceFiles: {
     //   rootComponent: 'src/App.vue',
     //   router: 'src/router/index',
     //   store: 'src/store/index',
-    //   indexHtmlTemplate: 'index.html',
-    //   pwaRegisterServiceWorker: 'src-pwa/register-service-worker',
-    //   pwaServiceWorker: 'src-pwa/custom-service-worker',
+    //   pwaRegisterServiceWorker: 'src-pwa/register-sw',
+    //   pwaServiceWorker: 'src-pwa/sw/custom-sw',
     //   pwaManifestFile: 'src-pwa/manifest.json',
     //   electronMain: 'src-electron/electron-main',
     //   electronPreload: 'src-electron/electron-preload'
     //   bexManifestFile: 'src-bex/manifest.json
     // },
 
-    // https://v2.quasar.dev/quasar-cli-webpack/developing-ssr/configuring-ssr
+    // https://v2.quasar.dev/quasar-cli-vite/developing-ssr/configuring-ssr
     ssr: {
       prodPort: 3000, // The default port that the production server should use
                       // (gets superseded if process.env.PORT is specified at runtime)
@@ -132,8 +144,8 @@ export default defineConfig((ctx) => {
         'render' // keep this as last one
       ],
 
-      // extendPackageJson (json) {},
-      // extendSSRWebserverConf (esbuildConf) {},
+      // extendSSRPackageJson (pkgJson) {},
+      // extendSSRWebserverConf (rolldownConf) {},
 
       // manualStoreSerialization: true,
       // manualStoreSsrContextInjection: true,
@@ -143,39 +155,37 @@ export default defineConfig((ctx) => {
       pwa: false
       // pwaOfflineHtmlFilename: 'offline.html', // do NOT use index.html as name!
 
-      // pwaExtendGenerateSWOptions (cfg) {},
-      // pwaExtendInjectManifestOptions (cfg) {}
+      // extendSSRGenerateSWOptions (cfg) {},
+      // extendSSRInjectManifestOptions (cfg) {}
     },
 
-    // https://v2.quasar.dev/quasar-cli-webpack/developing-pwa/configuring-pwa
+    // https://v2.quasar.dev/quasar-cli-vite/developing-pwa/configuring-pwa
     pwa: {
       workboxMode: 'GenerateSW' // 'GenerateSW' or 'InjectManifest'
       // swFilename: 'sw.js',
       // manifestFilename: 'manifest.json',
-      // extendManifestJson (json) {},
+      // extendPWAManifestJson (json) {},
       // useCredentialsForManifestTag: true,
-      // injectPwaMetaTags: false,
-      // extendPWACustomSWConf (esbuildConf) {},
-      // extendGenerateSWOptions (cfg) {},
-      // extendInjectManifestOptions (cfg) {}
+      // injectPWAMetaTags: false,
+      // extendPWACustomSWConf (rolldownConf) {},
+      // extendPWAGenerateSWOptions (cfg) {},
+      // extendPWAInjectManifestOptions (cfg) {},
+      // extendPWASwTsConfig (tsConfig) {}
     },
 
-    // Full list of options: https://v2.quasar.dev/quasar-cli-webpack/developing-cordova-apps/configuring-cordova
-    cordova: {
-      // noIosLegacyBuildFlag: true, // uncomment only if you know what you are doing
-    },
+    // https://v2.quasar.dev/quasar-cli-vite/developing-cordova-apps/configuring-cordova
+    cordova: {},
 
-    // Full list of options: https://v2.quasar.dev/quasar-cli-webpack/developing-capacitor-apps/configuring-capacitor
+    // https://v2.quasar.dev/quasar-cli-vite/developing-capacitor-apps/configuring-capacitor
     capacitor: {
       hideSplashscreen: true
     },
 
-    // Full list of options: https://v2.quasar.dev/quasar-cli-webpack/developing-electron-apps/configuring-electron
+    // https://v2.quasar.dev/quasar-cli-vite/developing-electron-apps/configuring-electron
     electron: {
-      // extendElectronMainConf (esbuildConf) {},
-      // extendElectronPreloadConf (esbuildConf) {},
-
-      // extendPackageJson (json) {},
+      // extendElectronMainConf (rolldownConf) {},
+      // extendElectronPreloadConf (rolldownConf) {},
+      // extendElectronPackageJson (pkgJson) {},
 
       // Electron preload scripts (if any) from /src-electron, WITHOUT file extension
       preloadScripts: [ 'electron-preload' ],
@@ -205,9 +215,9 @@ export default defineConfig((ctx) => {
       }
     },
 
-    // Full list of options: https://v2.quasar.dev/quasar-cli-webpack/developing-browser-extensions/configuring-bex
+    // https://v2.quasar.dev/quasar-cli-vite/developing-browser-extensions/configuring-bex
     bex: {
-      // extendBexScriptsConf (esbuildConf) {},
+      // extendBexScriptsConf (rolldownConf) {},
       // extendBexManifestJson (json) {},
 
       /**

package/templates/app/{quasar-v2/js-webpack-4 → vite-3/js}/BASE/src/components/EssentialLink.vue

@@ -21,7 +21,7 @@
 
 <script setup>
 const props = defineProps({
-  title: {
+  label: {
     type: String,
     required: true
   },

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

@@ -1,10 +1,8 @@
 import js from '@eslint/js'
 import globals from 'globals'
 import pluginVue from 'eslint-plugin-vue'
-import pluginQuasar from '@quasar/app-webpack/eslint'
-<% if (scope.prettier) { %>
+import pluginQuasar from '@quasar/app-vite/eslint'
 import prettierSkipFormatting from '@vue/eslint-config-prettier/skip-formatting'
-<% } %>
 
 export default [
   {
@@ -56,6 +54,9 @@ export default [
     // 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'
@@ -63,16 +64,13 @@ export default [
   },
 
   {
-    files: [ 'src-pwa/custom-service-worker.js' ],
+    files: [ 'src-pwa/sw/**/*.js' ],
     languageOptions: {
       globals: {
         ...globals.serviceworker
       }
     }
-  }<% if (scope.prettier) { %>,<% } %>
-
-<% if (scope.prettier) { %>
+  },
 
   prettierSkipFormatting
-<% } %>
 ]

package/templates/app/vite-3/js/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/js/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>
+//
+</script>

package/templates/app/vite-3/js/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>
+//
+</script>

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

@@ -0,0 +1,92 @@
+<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.title"
+          v-bind="link"
+        />
+      </q-list>
+    </q-drawer>
+
+    <q-page-container>
+      <router-view />
+    </q-page-container>
+  </q-layout>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import EssentialLink from '@/components/EssentialLink.vue'
+
+const linksList = [
+  {
+    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/js/filenameBasedRouting/src/router/index.js

@@ -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/js-webpack-4 → vite-3/js}/i18n/src/boot/i18n.js

@@ -1,6 +1,6 @@
-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 default defineBoot(({ app }) => {
   const i18n = createI18n({

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

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

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

@@ -47,47 +47,47 @@
 
 <script setup>
 import { ref } from 'vue'
-import EssentialLink from 'components/EssentialLink.vue'
+import EssentialLink from '@/components/EssentialLink.vue'
 
 const linksList = [
   {
-    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/js/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>
+//
+</script>

package/templates/app/vite-3/js/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>
+//
+</script>

package/templates/app/{quasar-v2/ts-webpack-4/BASE/src/router/index.ts → vite-3/js/manualRouting/src/router/index.js}

@@ -1,11 +1,12 @@
-import { defineRouter } from '#q-app/wrappers';
+import { defineRouter } from '#q-app'
 import {
   createMemoryHistory,
   createRouter,
   createWebHashHistory,
   createWebHistory,
-} from 'vue-router';
-import routes from './routes';
+} from 'vue-router'
+
+import routes from './routes.js'
 
 /*
  * If not building with SSR mode, you can
@@ -17,9 +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 }),
@@ -28,8 +29,8 @@ 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;
-});
+  return Router
+})

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

@@ -0,0 +1,19 @@
+const routes = [
+  {
+    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