create-quasar 1.12.0 → 2.0.1

package/templates/app/quasar-v2/js-vite-2/BASE/src/components/EssentialLink.vue

@@ -0,0 +1,72 @@
+<template>
+  <q-item
+    clickable
+    tag="a"
+    target="_blank"
+    :href="<% if (sfcStyle === 'composition-setup') { %>props.<% } %>link"
+  >
+    <q-item-section
+      v-if="<% if (sfcStyle === 'composition-setup') { %>props.<% } %>icon"
+      avatar
+    >
+      <q-icon :name="<% if (sfcStyle === 'composition-setup') { %>props.<% } %>icon" />
+    </q-item-section>
+
+    <q-item-section>
+      <q-item-label>{{ <% if (sfcStyle === 'composition-setup') { %>props.<% } %>title }}</q-item-label>
+      <q-item-label caption>{{ <% if (sfcStyle === 'composition-setup') { %>props.<% } %>caption }}</q-item-label>
+    </q-item-section>
+  </q-item>
+</template>
+<% if (sfcStyle === 'composition-setup') { %>
+<script setup>
+const props = defineProps({
+  title: {
+    type: String,
+    required: true
+  },
+
+  caption: {
+    type: String,
+    default: ''
+  },
+
+  link: {
+    type: String,
+    default: '#'
+  },
+
+  icon: {
+    type: String,
+    default: ''
+  }
+})
+</script><% } else if (sfcStyle === 'composition' || sfcStyle === 'options') { %>
+<script>
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'EssentialLink',
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+
+    caption: {
+      type: String,
+      default: ''
+    },
+
+    link: {
+      type: String,
+      default: '#'
+    },
+
+    icon: {
+      type: String,
+      default: ''
+    }
+  }
+})
+</script><% } %>

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

@@ -8,7 +8,7 @@
           round
           icon="menu"
           aria-label="Menu"
-          @click="leftDrawerOpen = !leftDrawerOpen"
+          @click="toggleLeftDrawer"
         />
 
         <q-toolbar-title>
@@ -23,17 +23,16 @@
       v-model="leftDrawerOpen"
       show-if-above
       bordered
-      content-class="bg-grey-1"
     >
       <q-list>
         <q-item-label
           header
-          class="text-grey-8"
         >
           Essential Links
         </q-item-label>
+
         <EssentialLink
-          v-for="link in essentialLinks"
+          v-for="link in linksList"
           :key="link.title"
           v-bind="link"
         />
@@ -45,13 +44,12 @@
     </q-page-container>
   </q-layout>
 </template>
-
-<script lang="ts">
-<% if (sfcStyle === 'composition') { %>
-import { defineComponent, ref } from 'vue';
+<% if (sfcStyle === 'composition-setup') { %>
+<script setup>
+import { ref } from 'vue'
 import EssentialLink from 'components/EssentialLink.vue'
 
-const linksData = [
+const linksList = [
   {
     title: 'Docs',
     caption: 'quasar.dev',
@@ -94,23 +92,19 @@ const linksData = [
     icon: 'favorite',
     link: 'https://awesome.quasar.dev'
   }
-];
+]
 
-export default defineComponent({
-  name: 'MainLayout',
-  components: { EssentialLink },
-  setup() {
-    const leftDrawerOpen = ref(false);
-    const essentialLinks = ref(linksData);
+const leftDrawerOpen = ref(false)
 
-    return {leftDrawerOpen, essentialLinks}
-  }
-});
-<% } else if (sfcStyle === 'class') { %>
-import { Vue, Component } from 'vue-property-decorator';
+function toggleLeftDrawer () {
+  leftDrawerOpen.value = !leftDrawerOpen.value
+}
+</script><% } else if (sfcStyle === 'composition') { %>
+<script>
+import { defineComponent, ref } from 'vue'
 import EssentialLink from 'components/EssentialLink.vue'
 
-const linksData = [
+const linksList = [
   {
     title: 'Docs',
     caption: 'quasar.dev',
@@ -153,20 +147,33 @@ const linksData = [
     icon: 'favorite',
     link: 'https://awesome.quasar.dev'
   }
-];
+]
+
+export default defineComponent({
+  name: 'MainLayout',
+
+  components: {
+    EssentialLink
+  },
+
+  setup () {
+    const leftDrawerOpen = ref(false)
 
-@Component({
-  components: { EssentialLink }
+    return {
+      linksList,
+      leftDrawerOpen,
+      toggleLeftDrawer () {
+        leftDrawerOpen.value = !leftDrawerOpen.value
+      }
+    }
+  }
 })
-export default class MainLayout extends Vue {
-  leftDrawerOpen = false;
-  essentialLinks = linksData;
-}
-<% } else if (sfcStyle === 'options') { %>
-import Vue from 'vue';
+</script><% } else if (sfcStyle === 'options') { %>
+<script>
+import { defineComponent, ref } from 'vue'
 import EssentialLink from 'components/EssentialLink.vue'
 
-const linksData = [
+const linksList = [
   {
     title: 'Docs',
     caption: 'quasar.dev',
@@ -209,17 +216,26 @@ const linksData = [
     icon: 'favorite',
     link: 'https://awesome.quasar.dev'
   }
-];
+]
 
-export default Vue.extend({
+export default defineComponent({
   name: 'MainLayout',
-  components: { EssentialLink },
-  data() {
+
+  components: {
+    EssentialLink
+  },
+
+  data () {
     return {
-      leftDrawerOpen: false,
-      essentialLinks: linksData
+      linksList,
+      leftDrawerOpen: false
+    }
+  },
+
+  methods: {
+    toggleLeftDrawer () {
+      this.leftDrawerOpen = !this.leftDrawerOpen
     }
   }
-});
-<% } %>
-</script>
+})
+</script><% } %>

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

@@ -0,0 +1,34 @@
+<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:.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>
+<% if (sfcStyle === 'composition-setup') { %>
+<script setup>
+//
+</script><% } else if (sfcStyle === 'composition' || sfcStyle === 'options') { %>
+<script>
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'ErrorNotFound'
+});
+</script><% } %>

package/templates/app/quasar-v2/js-vite-2/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-vite-2/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'
+
+/*
+ * 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-v1/js → quasar-v2/js-vite-2}/BASE/src/router/routes.js

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

package/templates/app/quasar-v2/js-vite-2/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-vite-2/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-vite/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-vite-2/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-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)', 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-vite-2/pinia/src/stores/example-store.js

@@ -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))
+}

package/templates/app/quasar-v2/js-vite-2/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-vite-2/prettier/_.prettierrc.json

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

package/templates/app/quasar-v2/js-webpack-4/.eslintrc.cjs

@@ -0,0 +1,24 @@
+module.exports = {
+  parserOptions: {
+    sourceType: 'module'
+  },
+
+  settings: {
+    'lodash-template/globals': [
+      // Base
+      'name',
+      'description',
+      'author',
+
+      // Quasar v2
+      'quasarVersion',
+      'scriptType',
+      'productName',
+
+      // Quasar v2 - JS
+      'css',
+      'preset',
+      'prettier'
+    ]
+  }
+}

package/templates/app/quasar-v2/js-webpack-4/BASE/README.md

@@ -0,0 +1,40 @@
+# <%= productName %> (<%= name %>)
+
+<%= description %>
+
+## Install the dependencies
+```bash
+yarn
+# or
+npm install
+```
+
+### Start the app in development mode (hot-code reloading, error reporting, etc.)
+```bash
+quasar dev
+```
+<% 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
+quasar build
+```
+
+### Customize the configuration
+See [Configuring quasar.config.js](https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js).

package/templates/{ui-kit/quasar-v1/BASE/ui/dev → app/quasar-v2/js-webpack-4/BASE}/_.editorconfig

@@ -1,9 +1,7 @@
-root = true
-
-[*]
+[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue}]
 charset = utf-8
-indent_style = space
 indent_size = 2
+indent_style = space
 end_of_line = lf
 insert_final_newline = true
 trim_trailing_whitespace = true

package/templates/app/{quasar-v1/js → quasar-v2/js-webpack-4}/BASE/_.gitignore

@@ -5,6 +5,7 @@ node_modules
 # Quasar core related directories
 .quasar
 /dist
+/quasar.config.*.temporary.compiled*
 
 # Cordova related directories and files
 /src-cordova/node_modules
@@ -16,10 +17,6 @@ node_modules
 /src-capacitor/www
 /src-capacitor/node_modules
 
-# BEX related directories and files
-/src-bex/www
-/src-bex/js/core
-
 # Log files
 npm-debug.log*
 yarn-debug.log*
@@ -31,3 +28,6 @@ yarn-error.log*
 *.ntvs*
 *.njsproj
 *.sln
+
+# local .env files
+.env.local*

package/templates/app/quasar-v2/js-webpack-4/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/js-webpack-4/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/js-webpack-4/BASE/_.vscode/settings.json

@@ -0,0 +1,10 @@
+{
+  "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"]<% } %>
+}

package/templates/app/quasar-v2/js-webpack-4/BASE/_jsconfig.json

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