create-quasar 0.0.1 → 1.0.0

package/templates/app/quasar-v2/ts-webpack/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 essentialLinks"
+          :key="link.title"
+          v-bind="link"
+        />
+      </q-list>
+    </q-drawer>
+
+    <q-page-container>
+      <router-view />
+    </q-page-container>
+  </q-layout>
+</template>
+
+<script lang="ts">
+<% if (typescriptConfig === 'composition') { %>import { defineComponent, ref } from 'vue';
+import EssentialLink from 'components/EssentialLink.vue';
+
+const linksList = [
+  {
+    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 {
+      essentialLinks: linksList,
+      leftDrawerOpen,
+      toggleLeftDrawer () {
+        leftDrawerOpen.value = !leftDrawerOpen.value
+      }
+    }
+  }
+});<% } else if (typescriptConfig === 'options') { %>import { defineComponent } from 'vue';
+import EssentialLink from 'components/EssentialLink.vue';
+
+const linksList = [
+  {
+    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 {
+      leftDrawerOpen: false,
+      essentialLinks: linksList
+    }
+  },
+
+  methods: {
+    toggleLeftDrawer () {
+      this.leftDrawerOpen = !this.leftDrawerOpen
+    }
+  }
+});<% } else if (typescriptConfig === 'class') { %>
+import { Vue, Options } from 'vue-class-component';
+import EssentialLink from 'components/EssentialLink.vue';
+
+const linksList = [
+  {
+    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'
+  }
+];
+
+@Options({
+  components: { EssentialLink }
+})
+export default class MainLayout extends Vue {
+  leftDrawerOpen = false;
+  essentialLinks = linksList;
+  toggleLeftDrawer () {
+    this.leftDrawerOpen = !this.leftDrawerOpen
+  }
+}<% } %>
+</script>

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

@@ -0,0 +1,37 @@
+<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>
+
+<script lang="ts">
+<% if (typescriptConfig === 'composition') { %>import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'ErrorNotFound'
+});<% } else if (typescriptConfig === 'options') { %>import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'ErrorNotFound'
+});<% } else if (typescriptConfig === 'class') { %>import { Vue } from 'vue-class-component';
+
+export default class ErrorNotFound extends Vue {}<% } %>
+</script>

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

@@ -0,0 +1,118 @@
+<template>
+  <q-page class="row items-center justify-evenly">
+    <example-component
+      title="Example component"
+      active
+      :todos="todos"
+      :meta="meta"
+    ></example-component>
+  </q-page>
+</template>
+
+<script lang="ts">
+<% if (typescriptConfig === 'composition') { %>import { Todo, Meta } from 'components/models';
+import ExampleComponent from 'components/ExampleComponent.vue';
+import { defineComponent, ref } from 'vue';
+
+export default defineComponent({
+  name: 'PageIndex',
+  components: { ExampleComponent },
+  setup() {
+    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
+    });
+    return { todos, meta };
+  }
+});<% } else if (typescriptConfig === 'options') { %>import { Todo, Meta } from 'components/models';
+import ExampleComponent from 'components/ExampleComponent.vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'PageIndex',
+  components: { ExampleComponent },
+  data() {
+    const todos: Todo[] = [
+      {
+        id: 1,
+        content: 'ct1'
+      },
+      {
+        id: 2,
+        content: 'ct2'
+      },
+      {
+        id: 3,
+        content: 'ct3'
+      },
+      {
+        id: 4,
+        content: 'ct4'
+      },
+      {
+        id: 5,
+        content: 'ct5'
+      }
+    ];
+    const meta: Meta = {
+      totalCount: 1200
+    };
+    return { todos, meta };
+  }
+});<% } else if (typescriptConfig === 'class') { %>
+import { Vue, Options } from 'vue-class-component'
+import { Todo, Meta } from 'components/models';
+import ExampleComponent from 'components/ExampleComponent.vue';
+
+@Options({
+  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
+  };
+};<% } %>
+</script>

package/templates/app/quasar-v2/ts-webpack/BASE/src/quasar.d.ts

@@ -0,0 +1,9 @@
+/* eslint-disable */
+
+// Forces TS to apply `@quasar/app-webpack` augmentations of `quasar` package
+// Removing this would break `quasar/wrappers` imports as those typings are declared
+//  into `@quasar/app-webpack`
+// As a side effect, since `@quasar/app-webpack` reference `quasar` to augment it,
+//  this declaration also apply `quasar` own
+//  augmentations (eg. adds `$q` into Vue component context)
+/// <reference types="@quasar/app-webpack" />

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

@@ -0,0 +1,38 @@
+import { route } from 'quasar/wrappers';
+import {
+  createMemoryHistory,
+  createRouter,
+  createWebHashHistory,
+  createWebHistory,
+} from 'vue-router';
+<% if (preset.vuex) { %>import { StateInterface } from '../store';
+<% } %>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 route<% if (preset.vuex) { %><StateInterface><% } %>(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.MODE === 'ssr' ? void 0 : process.env.VUE_ROUTER_BASE
+    ),
+  });
+
+  return Router;
+});

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

@@ -0,0 +1,18 @@
+import { RouteRecordRaw } from 'vue-router';
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/',
+    component: () => import('layouts/MainLayout.vue'),
+    children: [{ path: '', component: () => import('pages/Index.vue') }],
+  },
+
+  // Always leave this as last one,
+  // but you can also remove it
+  {
+    path: '/:catchAll(.*)*',
+    component: () => import('pages/Error404.vue'),
+  },
+];
+
+export default routes;

package/templates/app/quasar-v2/ts-webpack/BASE/src/shims-vue.d.ts

@@ -0,0 +1,8 @@
+/* eslint-disable */
+
+// Mocks all files ending in `.vue` showing them as plain Vue instances
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}

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

@@ -0,0 +1,8 @@
+{
+  "extends": "@quasar/app-webpack/tsconfig-preset",
+  "compilerOptions": {
+    "baseUrl": "."<% if (typescriptConfig === 'class') { %>,
+    "experimentalDecorators": true,
+    "useDefineForClassFields": true<% } %>
+  }
+}

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

@@ -0,0 +1,30 @@
+import { boot } from 'quasar/wrappers';
+import axios, { AxiosInstance } from 'axios';
+
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProperties {
+    $axios: 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 boot(({ 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-webpack/css/src/css/app.css

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

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

@@ -0,0 +1,14 @@
+import { boot } from 'quasar/wrappers';
+import { createI18n } from 'vue-i18n';
+
+import messages from 'src/i18n';
+
+export default boot(({ app }) => {
+  const i18n = createI18n({
+    locale: 'en-US',
+    messages,
+  });
+
+  // Set i18n instance on app
+  app.use(i18n);
+});

package/templates/app/quasar-v2/ts-webpack/i18n/src/i18n/en-US/index.ts

@@ -0,0 +1,7 @@
+// This is just an example,
+// so you can safely delete all default props below
+
+export default {
+  failed: 'Action failed',
+  success: 'Action was successful'
+};

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

@@ -0,0 +1,5 @@
+import enUS from './en-US';
+
+export default {
+  'en-US': enUS
+};

package/templates/app/quasar-v2/ts-webpack/index.js

@@ -0,0 +1,78 @@
+
+module.exports = async function ({ scope, utils }) {
+  await utils.prompts(scope, [
+    {
+      type: 'select',
+      name: 'typescriptConfig',
+      message: 'Pick a Vue component style:',
+      initial: 0,
+      choices: [
+        { title: 'Composition API', value: 'composition', description: 'recommended' },
+        { title: 'Options API', value: 'options' },
+        { title: 'Class-based (DEPRECATED; see https://github.com/quasarframework/quasar/discussions/11204)', value: 'class', disabled: true }
+      ]
+    },
+    {
+      type: 'select',
+      name: 'css',
+      message: 'Pick your CSS preprocessor:',
+      initial: 0,
+      choices: [
+        { title: 'Sass with SCSS syntax', value: 'scss' },
+        { title: 'Sass with indented syntax', value: 'sass' },
+        { title: 'None (the others will still be available)', value: 'css' }
+      ]
+    },
+    {
+      type: 'multiselect',
+      name: 'preset',
+      message: 'Check the features needed for your project:',
+      choices: [
+        { title: 'ESLint', value: 'lint', description: 'recommended', selected: true },
+        { title: 'State Management (Pinia)', value: 'pinia', description: 'https://pinia.vuejs.org' },
+        { title: 'State Management (Vuex) [DEPRECATED by Vue Team]', value: 'vuex', description: 'See https://vuejs.org/guide/scaling-up/state-management.html#pinia' },
+        { title: 'Axios', value: 'axios' },
+        { title: 'Vue-i18n', value: 'i18n' }
+      ],
+      format: values => {
+        let result = values
+
+        if (values.includes('vuex') && values.includes('pinia')) {
+          console.log()
+          utils.logger.warn('Only one state management package can be used. Picking the recommended Pinia and dropping Vuex.')
+          console.log()
+
+          result = values.filter(entry => entry !== 'vuex')
+        }
+
+        return utils.convertArrayToObject(result)
+      }
+    },
+    {
+      type: (_, { preset }) => preset.lint ? 'select' : null,
+      name: 'lintConfig',
+      message: 'Pick an ESLint preset:',
+      choices: [
+        { title: 'Prettier', value: 'prettier', description: 'https://github.com/prettier/prettier' },
+        { title: 'Standard', value: 'standard', description: 'https://github.com/standard/standard' },
+        { title: 'Airbnb', value: 'airbnb', description: 'https://github.com/airbnb/javascript' }
+      ]
+    }
+  ])
+
+  utils.createTargetDir(scope)
+  utils.renderTemplate(utils.join(__dirname, 'BASE'), scope)
+  utils.renderTemplate(utils.join(__dirname, scope.css), scope)
+
+  if (scope.preset.axios) utils.renderTemplate(utils.join(__dirname, 'axios'), scope)
+  if (scope.preset.i18n) utils.renderTemplate(utils.join(__dirname, 'i18n'), scope)
+  if (scope.preset.lint) {
+    utils.renderTemplate(utils.join(__dirname, 'lint'), scope)
+    if (scope.lintConfig === 'prettier') {
+      utils.renderTemplate(utils.join(__dirname, 'prettier'), scope)
+    }
+  }
+
+  if (scope.preset.pinia) utils.renderTemplate(utils.join(__dirname, 'pinia'), scope)
+  else if (scope.preset.vuex) utils.renderTemplate(utils.join(__dirname, 'vuex'), scope)
+}

package/templates/app/quasar-v2/ts-webpack/lint/_eslintignore

@@ -0,0 +1,9 @@
+/dist
+/src-bex/www
+/src-capacitor
+/src-cordova
+/.quasar
+/node_modules
+.eslintrc.js
+babel.config.js
+/src-ssr