create-quasar 1.12.0 → 2.0.0

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

@@ -0,0 +1,241 @@
+<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>
+<% if (sfcStyle === 'composition-setup') { %>
+<script setup lang="ts">
+import { ref } from 'vue';
+import EssentialLink, { type EssentialLinkProps } from 'components/EssentialLink.vue';
+
+const linksList: EssentialLinkProps[] = [
+  {
+    title: 'Docs',
+    caption: 'quasar.dev',
+    icon: 'school',
+    link: 'https://quasar.dev'
+  },
+  {
+    title: 'Github',
+    caption: 'github.com/quasarframework',
+    icon: 'code',
+    link: 'https://github.com/quasarframework'
+  },
+  {
+    title: 'Discord Chat Channel',
+    caption: 'chat.quasar.dev',
+    icon: 'chat',
+    link: 'https://chat.quasar.dev'
+  },
+  {
+    title: 'Forum',
+    caption: 'forum.quasar.dev',
+    icon: 'record_voice_over',
+    link: 'https://forum.quasar.dev'
+  },
+  {
+    title: 'Twitter',
+    caption: '@quasarframework',
+    icon: 'rss_feed',
+    link: 'https://twitter.quasar.dev'
+  },
+  {
+    title: 'Facebook',
+    caption: '@QuasarFramework',
+    icon: 'public',
+    link: 'https://facebook.quasar.dev'
+  },
+  {
+    title: 'Quasar Awesome',
+    caption: 'Community Quasar projects',
+    icon: 'favorite',
+    link: 'https://awesome.quasar.dev'
+  }
+];
+
+const leftDrawerOpen = ref(false);
+
+function toggleLeftDrawer () {
+  leftDrawerOpen.value = !leftDrawerOpen.value;
+}
+</script><% } else if (sfcStyle === 'composition') { %>
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
+import EssentialLink, { type EssentialLinkProps } from 'components/EssentialLink.vue';
+
+const linksList: EssentialLinkProps[] = [
+  {
+    title: 'Docs',
+    caption: 'quasar.dev',
+    icon: 'school',
+    link: 'https://quasar.dev'
+  },
+  {
+    title: 'Github',
+    caption: 'github.com/quasarframework',
+    icon: 'code',
+    link: 'https://github.com/quasarframework'
+  },
+  {
+    title: 'Discord Chat Channel',
+    caption: 'chat.quasar.dev',
+    icon: 'chat',
+    link: 'https://chat.quasar.dev'
+  },
+  {
+    title: 'Forum',
+    caption: 'forum.quasar.dev',
+    icon: 'record_voice_over',
+    link: 'https://forum.quasar.dev'
+  },
+  {
+    title: 'Twitter',
+    caption: '@quasarframework',
+    icon: 'rss_feed',
+    link: 'https://twitter.quasar.dev'
+  },
+  {
+    title: 'Facebook',
+    caption: '@QuasarFramework',
+    icon: 'public',
+    link: 'https://facebook.quasar.dev'
+  },
+  {
+    title: 'Quasar Awesome',
+    caption: 'Community Quasar projects',
+    icon: 'favorite',
+    link: 'https://awesome.quasar.dev'
+  }
+];
+
+export default defineComponent({
+  name: 'MainLayout',
+
+  components: {
+    EssentialLink
+  },
+
+  setup () {
+    const leftDrawerOpen = ref(false);
+
+    return {
+      linksList,
+      leftDrawerOpen,
+      toggleLeftDrawer () {
+        leftDrawerOpen.value = !leftDrawerOpen.value;
+      }
+    };
+  }
+});
+</script><% } else if (sfcStyle === 'options') { %>
+<script lang="ts">
+import { defineComponent } from 'vue';
+import EssentialLink, { type EssentialLinkProps } from 'components/EssentialLink.vue';
+
+const linksList: EssentialLinkProps[] = [
+  {
+    title: 'Docs',
+    caption: 'quasar.dev',
+    icon: 'school',
+    link: 'https://quasar.dev'
+  },
+  {
+    title: 'Github',
+    caption: 'github.com/quasarframework',
+    icon: 'code',
+    link: 'https://github.com/quasarframework'
+  },
+  {
+    title: 'Discord Chat Channel',
+    caption: 'chat.quasar.dev',
+    icon: 'chat',
+    link: 'https://chat.quasar.dev'
+  },
+  {
+    title: 'Forum',
+    caption: 'forum.quasar.dev',
+    icon: 'record_voice_over',
+    link: 'https://forum.quasar.dev'
+  },
+  {
+    title: 'Twitter',
+    caption: '@quasarframework',
+    icon: 'rss_feed',
+    link: 'https://twitter.quasar.dev'
+  },
+  {
+    title: 'Facebook',
+    caption: '@QuasarFramework',
+    icon: 'public',
+    link: 'https://facebook.quasar.dev'
+  },
+  {
+    title: 'Quasar Awesome',
+    caption: 'Community Quasar projects',
+    icon: 'favorite',
+    link: 'https://awesome.quasar.dev'
+  }
+];
+
+export default defineComponent({
+  name: 'MainLayout',
+
+  components: {
+    EssentialLink
+  },
+
+  data () {
+    return {
+      linksList,
+      leftDrawerOpen: false
+    }
+  },
+
+  methods: {
+    toggleLeftDrawer () {
+      this.leftDrawerOpen = !this.leftDrawerOpen;
+    }
+  }
+});
+</script><% } %>

package/templates/app/{quasar-v1/ts/BASE/src/pages/Error404.vue → quasar-v2/ts-vite-2/BASE/src/pages/ErrorNotFound.vue}

@@ -21,24 +21,14 @@
     </div>
   </div>
 </template>
-
+<% if (sfcStyle === 'composition-setup') { %>
+<script setup lang="ts">
+//
+</script><% } else if (sfcStyle === 'composition' || sfcStyle === 'options') { %>
 <script lang="ts">
-<% if (sfcStyle === 'composition') { %>
 import { defineComponent } from 'vue';
 
 export default defineComponent({
-  name: 'ErrorNotFound',
-});
-<% } else if (sfcStyle === 'class') { %>
-import { Vue, Component } from 'vue-property-decorator';
-
-@Component
-export default class ErrorNotFound extends Vue {}
-<% } else if (sfcStyle === 'options') { %>
-import Vue from 'vue';
-
-export default Vue.extend({
   name: 'ErrorNotFound'
 });
-<% } %>
-</script>
+</script><% } %>

package/templates/app/{quasar-v1/ts/BASE/src/pages/Index.vue → quasar-v2/ts-vite-2/BASE/src/pages/IndexPage.vue}

@@ -8,17 +8,52 @@
     ></example-component>
   </q-page>
 </template>
+<% if (sfcStyle === 'composition-setup') { %>
+<script setup lang="ts">
+import { ref } from 'vue';
+import type { Todo, Meta } from 'components/models';
+import ExampleComponent from 'components/ExampleComponent.vue';
+
+const todos = ref<Todo[]>([
+  {
+    id: 1,
+    content: 'ct1'
+  },
+  {
+    id: 2,
+    content: 'ct2'
+  },
+  {
+    id: 3,
+    content: 'ct3'
+  },
+  {
+    id: 4,
+    content: 'ct4'
+  },
+  {
+    id: 5,
+    content: 'ct5'
+  }
+]);
 
+const meta = ref<Meta>({
+  totalCount: 1200
+});
+</script><% } else if (sfcStyle === 'composition') { %>
 <script lang="ts">
-import { Todo, Meta } from 'components/models';
-import ExampleComponent from 'components/ExampleComponent.vue';
-<% if (sfcStyle === 'composition') { %>
 import { defineComponent, ref } from 'vue';
+import type { Todo, Meta } from 'components/models';
+import ExampleComponent from 'components/ExampleComponent.vue';
 
 export default defineComponent({
-  name: 'PageIndex',
-  components: { ExampleComponent },
-  setup() {
+  name: 'IndexPage',
+
+  components: {
+    ExampleComponent
+  },
+
+  setup () {
     const todos = ref<Todo[]>([
       {
         id: 1,
@@ -41,52 +76,28 @@ export default defineComponent({
         content: 'ct5'
       }
     ]);
+
     const meta = ref<Meta>({
       totalCount: 1200
     });
+
     return { todos, meta };
   }
 });
-<% } else if (sfcStyle === 'class') { %>
-import { Vue, Component } from 'vue-property-decorator';
+</script><% } else if (sfcStyle === 'options') { %>
+<script lang="ts">
+import { defineComponent } from 'vue';
+import type { Todo, Meta } from 'components/models';
+import ExampleComponent from 'components/ExampleComponent.vue';
 
-@Component({
-  components: { ExampleComponent }
-})
-export default class PageIndex extends Vue {
-  todos: Todo[] = [
-    {
-      id: 1,
-      content: 'ct1'
-    },
-    {
-      id: 2,
-      content: 'ct2'
-    },
-    {
-      id: 3,
-      content: 'ct3'
-    },
-    {
-      id: 4,
-      content: 'ct4'
-    },
-    {
-      id: 5,
-      content: 'ct5'
-    }
-  ];
-  meta: Meta = {
-    totalCount: 1200
-  };
-};
-<% } else if (sfcStyle === 'options') { %>
-import Vue from 'vue';
+export default defineComponent({
+  name: 'IndexPage',
+
+  components: {
+    ExampleComponent
+  },
 
-export default Vue.extend({
-  name: 'PageIndex',
-  components: { ExampleComponent },
-  data() {
+  data () {
     const todos: Todo[] = [
       {
         id: 1,
@@ -109,11 +120,12 @@ export default Vue.extend({
         content: 'ct5'
       }
     ];
+
     const meta: Meta = {
       totalCount: 1200
     };
+
     return { todos, meta };
   }
 });
-<% } %>
-</script>
+</script><% } %>

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

@@ -0,0 +1,35 @@
+import { defineRouter } from '#q-app/wrappers';
+import {
+  createMemoryHistory,
+  createRouter,
+  createWebHashHistory,
+  createWebHistory,
+} from 'vue-router';
+import routes from './routes';
+
+/*
+ * 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/ts-vite-2/BASE/src/router/routes.ts

@@ -0,0 +1,18 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+const routes: RouteRecordRaw[] = [
+  {
+    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/ts-vite-2/axios/src/boot/axios.ts

@@ -0,0 +1,31 @@
+import { defineBoot } from '#q-app/wrappers';
+import axios, { type AxiosInstance } from 'axios';
+
+declare module 'vue' {
+  interface ComponentCustomProperties {
+    $axios: AxiosInstance;
+    $api: AxiosInstance;
+  }
+}
+
+// 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/ts-vite-2/css/src/css/app.css

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

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

@@ -0,0 +1,99 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import pluginVue from 'eslint-plugin-vue'
+import pluginQuasar from '@quasar/app-vite/eslint'
+import vueTsEslintConfig from '@vue/eslint-config-typescript'<% 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' ],
+
+  {
+    files: ['**/*.ts', '**/*.vue'],
+    rules: {
+      '@typescript-eslint/consistent-type-imports': [
+        'error',
+        { prefer: 'type-imports' }
+      ],
+    }
+  },
+  // https://github.com/vuejs/eslint-config-typescript
+  ...vueTsEslintConfig({
+    // Optional: extend additional configurations from typescript-eslint'.
+    // Supports all the configurations in
+    // https://typescript-eslint.io/users/configs#recommended-configurations
+    extends: [
+      // By default, only the 'recommendedTypeChecked' rules are enabled.
+      'recommendedTypeChecked'
+      // You can also manually enable the stylistic rules.
+      // "stylistic",
+
+      // Other utility configurations, such as 'eslintRecommended', (note that it's in camelCase)
+      // are also extendable here. But we don't recommend using them directly.
+    ]
+  }),
+
+  {
+    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.ts' ],
+    languageOptions: {
+      globals: {
+        ...globals.serviceworker
+      }
+    }
+  }<% if (prettier) { %>,
+
+  prettierSkipFormatting<% } %>
+]

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

@@ -0,0 +1,33 @@
+import { defineBoot } from '#q-app/wrappers';
+import { createI18n } from 'vue-i18n';
+
+import messages from 'src/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'];
+
+// See https://vue-i18n.intlify.dev/guide/advanced/typescript.html#global-resource-schema-type-definition
+/* eslint-disable @typescript-eslint/no-empty-object-type */
+declare module 'vue-i18n' {
+  // define the locale messages schema
+  export interface DefineLocaleMessage extends MessageSchema {}
+
+  // define the datetime format schema
+  export interface DefineDateTimeFormat {}
+
+  // define the number format schema
+  export interface DefineNumberFormat {}
+}
+/* eslint-enable @typescript-eslint/no-empty-object-type */
+
+export default defineBoot(({ app }) => {
+  const i18n = createI18n<{ message: MessageSchema }, MessageLanguages>({
+    locale: 'en-US',<% if (sfcStyle === 'composition' || sfcStyle === 'composition-setup') { %>
+    legacy: false,<% } %>
+    messages,
+  });
+
+  // Set i18n instance on app
+  app.use(i18n);
+});

package/templates/app/quasar-v2/ts-vite-2/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 (vite-plugin-checker + ESLint + vue-tsc)', 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/ts-vite-2/pinia/src/stores/example-store.ts

@@ -0,0 +1,21 @@
+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));
+}