create-quasar 1.7.0 → 1.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-quasar",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "description": "Scaffolds Quasar Apps, AppExtensions or UI kits",
   "type": "module",
   "author": {

package/scripts/create-test-project.ts

@@ -29,7 +29,7 @@ export async function createProject({ scriptType, appEngine, packageManager }: C
     author: 'Quasar Team (info@quasar.dev)',
 
     // The defaults
-    typescriptConfig: 'composition',
+    sfcStyle: 'composition',
     css: 'scss',
     preset: ['lint'],
     lintConfig: 'prettier',

package/templates/app/quasar-v1/js/index.js

@@ -54,11 +54,11 @@ export async function script ({ scope, utils }) {
   ])
 
   utils.createTargetDir(scope)
-  utils.renderTemplate(utils.join(import.meta.url, 'BASE'), scope)
-  utils.renderTemplate(utils.join(import.meta.url, scope.css), scope)
+  utils.renderTemplate('BASE', scope)
+  utils.renderTemplate(scope.css, scope)
 
-  if (scope.preset.axios) utils.renderTemplate(utils.join(import.meta.url, 'axios'), scope)
-  if (scope.preset.i18n) utils.renderTemplate(utils.join(import.meta.url, 'i18n'), scope)
-  if (scope.preset.vuex) utils.renderTemplate(utils.join(import.meta.url, 'vuex'), scope)
-  if (scope.preset.lint) utils.renderTemplate(utils.join(import.meta.url, 'lint'), scope)
+  if (scope.preset.axios) utils.renderTemplate('axios', scope)
+  if (scope.preset.i18n) utils.renderTemplate('i18n', scope)
+  if (scope.preset.vuex) utils.renderTemplate('vuex', scope)
+  if (scope.preset.lint) utils.renderTemplate('lint', scope)
 }

package/templates/app/quasar-v1/ts/.eslintrc.cjs

@@ -12,7 +12,7 @@ module.exports = {
       'productName',
 
       // Quasar v1 - TS
-      'typescriptConfig',
+      'sfcStyle',
       'css',
       'importStrategy',
       'preset',

package/templates/app/quasar-v1/ts/BASE/_package.json

@@ -12,7 +12,7 @@
     "build": "quasar build"
   },
   "dependencies": {
-    <% if (typescriptConfig === 'class') { %>
+    <% if (sfcStyle === 'class') { %>
     "vue-class-component": "^7.2.2",
     "vue-property-decorator": "^8.3.0",
     <% } %>

package/templates/app/quasar-v1/ts/BASE/_tsconfig.json

@@ -1,7 +1,7 @@
 {
   "extends": "@quasar/app/tsconfig-preset",
   "compilerOptions": {
-    "baseUrl": "."<% if (typescriptConfig === 'class') { %>,
+    "baseUrl": "."<% if (sfcStyle === 'class') { %>,
     "experimentalDecorators": true<% } %><% if (preset.ie) { %>,
     "target": "es5"<% } %>
   }

package/templates/app/quasar-v1/ts/BASE/src/App.vue

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

package/templates/app/quasar-v1/ts/BASE/src/components/EssentialLink.vue

@@ -22,7 +22,7 @@
 </template>
 
 <script lang="ts">
-<% if (typescriptConfig === 'composition') { %>
+<% if (sfcStyle === 'composition') { %>
 import { defineComponent } from 'vue';
 
 export default defineComponent({
@@ -49,7 +49,7 @@ export default defineComponent({
     }
   }
 });
-<% } else if (typescriptConfig === 'class') { %>
+<% } else if (sfcStyle === 'class') { %>
 import { Vue, Component, Prop } from 'vue-property-decorator';
 
 @Component
@@ -59,7 +59,7 @@ export default class EssentialLink extends Vue {
   @Prop({ type: String, default: '#' }) readonly link!: string;
   @Prop({ type: String, default: ''}) readonly icon!: string;
 }
-<% } else if (typescriptConfig === 'options') { %>
+<% } else if (sfcStyle === 'options') { %>
 import Vue from 'vue';
 
 export default Vue.extend({

package/templates/app/quasar-v1/ts/BASE/src/components/ExampleComponent.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script lang="ts">
-<% if (typescriptConfig === 'composition') { %>
+<% if (sfcStyle === 'composition') { %>
 import {
   defineComponent, PropType, computed, ref, toRef, Ref,
 } from 'vue';
@@ -57,7 +57,7 @@ export default defineComponent({
     return { ...useClickCount(), ...useDisplayTodo(toRef(props, 'todos')) };
   },
 });
-<% } else if (typescriptConfig === 'class') { %>
+<% } else if (sfcStyle === 'class') { %>
 import { Vue, Component, Prop } from 'vue-property-decorator';
 import { Todo, Meta } from './models';
 
@@ -78,7 +78,7 @@ export default class ClassComponent extends Vue {
     return this.todos.length;
   }
 }
-<% } else if (typescriptConfig === 'options') { %>
+<% } else if (sfcStyle === 'options') { %>
 import Vue, { PropType } from 'vue';
 import { Todo, Meta } from './models';
 

package/templates/app/quasar-v1/ts/BASE/src/layouts/MainLayout.vue

@@ -47,7 +47,7 @@
 </template>
 
 <script lang="ts">
-<% if (typescriptConfig === 'composition') { %>
+<% if (sfcStyle === 'composition') { %>
 import { defineComponent, ref } from 'vue';
 import EssentialLink from 'components/EssentialLink.vue'
 
@@ -106,7 +106,7 @@ export default defineComponent({
     return {leftDrawerOpen, essentialLinks}
   }
 });
-<% } else if (typescriptConfig === 'class') { %>
+<% } else if (sfcStyle === 'class') { %>
 import { Vue, Component } from 'vue-property-decorator';
 import EssentialLink from 'components/EssentialLink.vue'
 
@@ -162,7 +162,7 @@ export default class MainLayout extends Vue {
   leftDrawerOpen = false;
   essentialLinks = linksData;
 }
-<% } else if (typescriptConfig === 'options') { %>
+<% } else if (sfcStyle === 'options') { %>
 import Vue from 'vue';
 import EssentialLink from 'components/EssentialLink.vue'
 

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

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

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

@@ -12,7 +12,7 @@
 <script lang="ts">
 import { Todo, Meta } from 'components/models';
 import ExampleComponent from 'components/ExampleComponent.vue';
-<% if (typescriptConfig === 'composition') { %>
+<% if (sfcStyle === 'composition') { %>
 import { defineComponent, ref } from 'vue';
 
 export default defineComponent({
@@ -47,7 +47,7 @@ export default defineComponent({
     return { todos, meta };
   }
 });
-<% } else if (typescriptConfig === 'class') { %>
+<% } else if (sfcStyle === 'class') { %>
 import { Vue, Component } from 'vue-property-decorator';
 
 @Component({
@@ -80,7 +80,7 @@ export default class PageIndex extends Vue {
     totalCount: 1200
   };
 };
-<% } else if (typescriptConfig === 'options') { %>
+<% } else if (sfcStyle === 'options') { %>
 import Vue from 'vue';
 
 export default Vue.extend({

package/templates/app/quasar-v1/ts/index.js

@@ -2,13 +2,13 @@ export async function script ({ scope, utils }) {
   await utils.prompts(scope, [
     {
       type: 'select',
-      name: 'typescriptConfig',
+      name: 'sfcStyle',
       message: 'Pick a Vue component style:',
       initial: 0,
       choices: [
         { title: 'Composition API (recommended) (https://github.com/vuejs/composition-api)', value: 'composition' },
-        { title: 'Class-based (recommended) (https://github.com/vuejs/vue-class-component & https://github.com/kaorun343/vue-property-decorator)', value: 'class' },
-        { title: 'Options API', value: 'options' }
+        { title: 'Options API', value: 'options' },
+        { title: 'Class-based (https://github.com/vuejs/vue-class-component & https://github.com/kaorun343/vue-property-decorator)', value: 'class' }
       ]
     },
     {
@@ -65,11 +65,11 @@ export async function script ({ scope, utils }) {
   ])
 
   utils.createTargetDir(scope)
-  utils.renderTemplate(utils.join(import.meta.url, 'BASE'), scope)
-  utils.renderTemplate(utils.join(import.meta.url, scope.css), scope)
+  utils.renderTemplate('BASE', scope)
+  utils.renderTemplate(scope.css, scope)
 
-  if (scope.preset.axios) utils.renderTemplate(utils.join(import.meta.url, 'axios'), scope)
-  if (scope.preset.i18n) utils.renderTemplate(utils.join(import.meta.url, 'i18n'), scope)
-  if (scope.preset.vuex) utils.renderTemplate(utils.join(import.meta.url, 'vuex'), scope)
-  if (scope.preset.lint) utils.renderTemplate(utils.join(import.meta.url, 'lint'), scope)
+  if (scope.preset.axios) utils.renderTemplate('axios', scope)
+  if (scope.preset.i18n) utils.renderTemplate('i18n', scope)
+  if (scope.preset.vuex) utils.renderTemplate('vuex', scope)
+  if (scope.preset.lint) utils.renderTemplate('lint', scope)
 }

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

@@ -6,10 +6,10 @@ export async function script ({ scope, utils }) {
       message: 'Pick Quasar App CLI variant:',
       initial: 0,
       choices: [
-        { title: 'Quasar App CLI with Vite 2 (stable | v1)', value: 'vite', description: 'recommended' },
-        { title: 'Quasar App CLI with Vite 5 (BETA | next major version - v2)', value: 'vite-beta' },
-        { title: 'Quasar App CLI with Webpack (stable | v3)', value: 'webpack' },
-        { title: 'Quasar App CLI with Webpack (BETA | next major version - v4)', value: 'webpack-beta' }
+        { title: 'Quasar App CLI with Vite 2 (stable | v1)', value: 'vite-1', description: 'recommended' },
+        { title: 'Quasar App CLI with Vite 5 (BETA | next major version - v2)', value: 'vite-2' },
+        { title: 'Quasar App CLI with Webpack (stable | v3)', value: 'webpack-3' },
+        { title: 'Quasar App CLI with Webpack (BETA | next major version - v4)', value: 'webpack-4' }
       ]
     },
     {
@@ -23,7 +23,31 @@ export async function script ({ scope, utils }) {
 
     utils.commonPrompts.productName,
     utils.commonPrompts.description,
-    utils.commonPrompts.author
+    utils.commonPrompts.author,
+
+    {
+      type: 'select',
+      name: 'sfcStyle',
+      message: 'Pick a Vue component style:',
+      initial: 0,
+      choices: [
+        { title: 'Composition API with <script setup>', value: 'composition-setup', description: 'recommended' },
+        { title: 'Composition API', value: 'composition', description: 'recommended' },
+        { title: 'Options API', value: 'options' }
+      ]
+    },
+
+    {
+      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' }
+      ]
+    }
   ])
 
   const { script } = await import(`./${ scope.scriptType }-${ scope.engine }/index.js`)

package/templates/app/quasar-v2/js-vite-1/BASE/src/App.vue

@@ -0,0 +1,16 @@
+<template>
+  <router-view />
+</template>
+<% if (sfcStyle === 'composition-setup') { %>
+<script setup>
+defineOptions({
+  name: 'App'
+});
+</script><% } else if (sfcStyle === 'composition' || sfcStyle === 'options') { %>
+<script>
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'App'
+});
+</script><% } %>

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

@@ -0,0 +1,76 @@
+<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>
+defineOptions({
+  name: 'EssentialLink'
+})
+
+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-v2/{ts-webpack-beta → js-vite-1}/BASE/src/layouts/MainLayout.vue

@@ -32,7 +32,7 @@
         </q-item-label>
 
         <EssentialLink
-          v-for="link in essentialLinks"
+          v-for="link in linksList"
           :key="link.title"
           v-bind="link"
         />
@@ -44,12 +44,16 @@
     </q-page-container>
   </q-layout>
 </template>
+<% if (sfcStyle === 'composition-setup') { %>
+<script setup>
+import { ref } from 'vue'
+import EssentialLink from 'components/EssentialLink.vue'
 
-<% if (typescriptConfig === 'composition-setup') { %><script setup lang="ts">
-import { ref } from 'vue';
-import EssentialLink from 'components/EssentialLink.vue';
+defineOptions({
+  name: 'MainLayout'
+})
 
-const essentialLinks = [
+const linksList = [
   {
     title: 'Docs',
     caption: 'quasar.dev',
@@ -92,15 +96,17 @@ const essentialLinks = [
     icon: 'favorite',
     link: 'https://awesome.quasar.dev'
   }
-];
+]
 
 const leftDrawerOpen = ref(false)
 
-function toggleLeftDrawer() {
+function toggleLeftDrawer () {
   leftDrawerOpen.value = !leftDrawerOpen.value
-}<% } else if (typescriptConfig === 'composition') { %><script lang="ts">
-import { defineComponent, ref } from 'vue';
-import EssentialLink from 'components/EssentialLink.vue';
+}
+</script><% } else if (sfcStyle === 'composition') { %>
+<script>
+import { defineComponent, ref } from 'vue'
+import EssentialLink from 'components/EssentialLink.vue'
 
 const linksList = [
   {
@@ -145,7 +151,7 @@ const linksList = [
     icon: 'favorite',
     link: 'https://awesome.quasar.dev'
   }
-];
+]
 
 export default defineComponent({
   name: 'MainLayout',
@@ -158,16 +164,18 @@ export default defineComponent({
     const leftDrawerOpen = ref(false)
 
     return {
-      essentialLinks: linksList,
+      linksList,
       leftDrawerOpen,
       toggleLeftDrawer () {
         leftDrawerOpen.value = !leftDrawerOpen.value
       }
     }
   }
-});<% } else if (typescriptConfig === 'options') { %><script lang="ts">
-import { defineComponent } from 'vue';
-import EssentialLink from 'components/EssentialLink.vue';
+})
+</script><% } else if (sfcStyle === 'options') { %>
+<script>
+import { defineComponent, ref } from 'vue'
+import EssentialLink from 'components/EssentialLink.vue'
 
 const linksList = [
   {
@@ -212,7 +220,7 @@ const linksList = [
     icon: 'favorite',
     link: 'https://awesome.quasar.dev'
   }
-];
+]
 
 export default defineComponent({
   name: 'MainLayout',
@@ -221,10 +229,10 @@ export default defineComponent({
     EssentialLink
   },
 
-  data() {
+  data () {
     return {
-      leftDrawerOpen: false,
-      essentialLinks: linksList
+      linksList,
+      leftDrawerOpen: false
     }
   },
 
@@ -233,63 +241,5 @@ export default defineComponent({
       this.leftDrawerOpen = !this.leftDrawerOpen
     }
   }
-});<% } else if (typescriptConfig === 'class') { %><script lang="ts">
-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>
+</script><% } %>

package/templates/app/quasar-v2/{js-webpack-beta → js-vite-1}/BASE/src/pages/ErrorNotFound.vue

@@ -21,11 +21,16 @@
     </div>
   </div>
 </template>
-
+<% if (sfcStyle === 'composition-setup') { %>
+<script setup>
+defineOptions({
+  name: 'ErrorNotFound'
+});
+</script><% } else if (sfcStyle === 'composition' || sfcStyle === 'options') { %>
 <script>
-import { defineComponent } from 'vue'
+import { defineComponent } from 'vue';
 
 export default defineComponent({
   name: 'ErrorNotFound'
-})
-</script>
+});
+</script><% } %>

package/templates/app/quasar-v2/{js-vite-beta → js-vite-1}/BASE/src/pages/IndexPage.vue

@@ -7,11 +7,16 @@
     >
   </q-page>
 </template>
-
+<% if (sfcStyle === 'composition-setup') { %>
+<script setup>
+defineOptions({
+  name: 'IndexPage'
+});
+</script><% } else if (sfcStyle === 'composition' || sfcStyle === 'options') { %>
 <script>
-import { defineComponent } from 'vue'
+import { defineComponent } from 'vue';
 
 export default defineComponent({
   name: 'IndexPage'
-})
-</script>
+});
+</script><% } %>

package/templates/app/quasar-v2/{js-vite-beta → js-vite-1}/index.js

@@ -1,16 +1,5 @@
 export async function script ({ scope, utils }) {
   await utils.prompts(scope, [
-    {
-      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',
@@ -49,13 +38,13 @@ export async function script ({ scope, utils }) {
   ])
 
   utils.createTargetDir(scope)
-  utils.renderTemplate(utils.join(import.meta.url, 'BASE'), scope)
-  utils.renderTemplate(utils.join(import.meta.url, scope.css), scope)
+  utils.renderTemplate('BASE', scope)
+  utils.renderTemplate(scope.css, scope)
 
-  if (scope.preset.axios) utils.renderTemplate(utils.join(import.meta.url, 'axios'), scope)
-  if (scope.preset.i18n) utils.renderTemplate(utils.join(import.meta.url, 'i18n'), scope)
-  if (scope.preset.lint) utils.renderTemplate(utils.join(import.meta.url, 'lint'), scope)
+  if (scope.preset.axios) utils.renderTemplate('axios', scope)
+  if (scope.preset.i18n) utils.renderTemplate('i18n', scope)
+  if (scope.preset.lint) utils.renderTemplate('lint', scope)
 
-  if (scope.preset.pinia) utils.renderTemplate(utils.join(import.meta.url, 'pinia'), scope)
-  else if (scope.preset.vuex) utils.renderTemplate(utils.join(import.meta.url, 'vuex'), scope)
+  if (scope.preset.pinia) utils.renderTemplate('pinia', scope)
+  else if (scope.preset.vuex) utils.renderTemplate('vuex', scope)
 }

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

@@ -0,0 +1,16 @@
+<template>
+  <router-view />
+</template>
+<% if (sfcStyle === 'composition-setup') { %>
+<script setup>
+defineOptions({
+  name: 'App'
+});
+</script><% } else if (sfcStyle === 'composition' || sfcStyle === 'options') { %>
+<script>
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'App'
+});
+</script><% } %>