create-quasar 2.1.1 → 2.2.0

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

@@ -18,7 +18,7 @@
     </q-item-section>
   </q-item>
 </template>
-<% if (sfcStyle === 'composition-setup') { %>
+
 <script setup lang="ts">
 export interface EssentialLinkProps {
   title: string;
@@ -32,39 +32,4 @@ withDefaults(defineProps<EssentialLinkProps>(), {
   link: '#',
   icon: '',
 });
-</script><% } else if (sfcStyle === 'composition' || sfcStyle === 'options') { %>
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export interface EssentialLinkProps {
-  title: string;
-  caption?: string;
-  link?: string;
-  icon?: string;
-};
-
-export default defineComponent({
-  name: 'EssentialLink',
-  props: {
-    title: {
-      type: String,
-      required: true
-    },
-
-    caption: {
-      type: String,
-      default: ''
-    },
-
-    link: {
-      type: String,
-      default: '#'
-    },
-
-    icon: {
-      type: String,
-      default: ''
-    }
-  }
-});
-</script><% } %>
+</script>

package/templates/app/quasar-v2/ts-vite-2/BASE/src/components/ExampleComponent.vue

@@ -11,7 +11,7 @@
     <p>Clicks on todos: {{ clickCount }}</p>
   </div>
 </template>
-<% if (sfcStyle === 'composition-setup') { %>
+
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 import type { Todo, Meta } from './models';
@@ -34,100 +34,4 @@ function increment() {
 }
 
 const todoCount = computed(() => props.todos.length);
-</script><% } else if (sfcStyle === 'composition') { %>
-<script lang="ts">
-import {
-  defineComponent,
-  computed,
-  ref,
-  toRef,
-  type PropType,
-  type Ref,
-} from 'vue';
-import type { Todo, Meta } from './models';
-
-function useClickCount() {
-  const clickCount = ref(0);
-  function increment() {
-    clickCount.value += 1
-    return clickCount.value;
-  }
-
-  return { clickCount, increment };
-}
-
-function useDisplayTodo(todos: Ref<Todo[]>) {
-  const todoCount = computed(() => todos.value.length);
-  return { todoCount };
-}
-
-export default defineComponent({
-  name: 'ExampleComponent',
-
-  props: {
-    title: {
-      type: String,
-      required: true
-    },
-    todos: {
-      type: Array as PropType<Todo[]>,
-      default: () => []
-    },
-    meta: {
-      type: Object as PropType<Meta>,
-      required: true
-    },
-    active: {
-      type: Boolean
-    }
-  },
-
-  setup (props) {
-    return { ...useClickCount(), ...useDisplayTodo(toRef(props, 'todos')) };
-  }
-});
-</script><% } else if (sfcStyle === 'options') { %>
-<script lang="ts">
-import { defineComponent, type PropType } from 'vue';
-import type { Todo, Meta } from './models';
-
-export default defineComponent({
-  name: 'ExampleComponent',
-
-  props: {
-    title: {
-      type: String,
-      required: true
-    },
-    todos: {
-      type: Array as PropType<Todo[]>,
-      default: () => [] as Todo[]
-    },
-    meta: {
-      type: Object as PropType<Meta>,
-      required: true
-    },
-    active: {
-      type: Boolean
-    }
-  },
-
-  data(): { clickCount: number } {
-    return {
-      clickCount: 0
-    };
-  },
-
-  methods: {
-    increment (): void {
-      this.clickCount += 1;
-    }
-  },
-
-  computed: {
-    todoCount (): number {
-      return this.todos.length;
-    }
-  }
-});
-</script><% } %>
+</script>

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

@@ -44,7 +44,7 @@
     </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';
@@ -99,143 +99,4 @@ 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><% } %>
+</script>

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

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

package/templates/app/quasar-v2/ts-vite-2/BASE/src/pages/IndexPage.vue

@@ -8,7 +8,7 @@
     ></example-component>
   </q-page>
 </template>
-<% if (sfcStyle === 'composition-setup') { %>
+
 <script setup lang="ts">
 import { ref } from 'vue';
 import type { Todo, Meta } from 'components/models';
@@ -40,92 +40,4 @@ const todos = ref<Todo[]>([
 const meta = ref<Meta>({
   totalCount: 1200
 });
-</script><% } else if (sfcStyle === 'composition') { %>
-<script lang="ts">
-import { defineComponent, ref } from 'vue';
-import type { Todo, Meta } from 'components/models';
-import ExampleComponent from 'components/ExampleComponent.vue';
-
-export default defineComponent({
-  name: 'IndexPage',
-
-  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 };
-  }
-});
-</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';
-
-export default defineComponent({
-  name: 'IndexPage',
-
-  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 };
-  }
-});
-</script><% } %>
+</script>

package/templates/app/quasar-v2/ts-vite-2/__.eslintrc.cjs

@@ -12,7 +12,6 @@ module.exports = {
       'productName',
 
       // Quasar v2 - TS
-      'sfcStyle',
       'css',
       'preset',
       'prettier'

package/templates/app/quasar-v2/ts-vite-2/create-quasar-script.js

@@ -5,6 +5,11 @@ export async function createQuasarScript({ scope, utils }) {
       name: 'preset',
       message: 'Check the features needed for your project:',
       choices: [
+        {
+          title: 'Sass CSS preprocessor',
+          value: 'sass',
+          selected: true
+        },
         {
           title: 'Linting (vite-plugin-checker + ESLint + vue-tsc)',
           value: 'eslint',
@@ -16,8 +21,10 @@ export async function createQuasarScript({ scope, utils }) {
           value: 'pinia',
           description: 'https://pinia.vuejs.org'
         },
-        { title: 'axios', value: 'axios' },
-        { title: 'vue-i18n', value: 'i18n' }
+        {
+          title: 'Internationalization (vue-i18n)',
+          value: 'i18n'
+        }
       ],
       format: utils.convertArrayToObject
     },
@@ -35,9 +42,10 @@ export async function createQuasarScript({ scope, utils }) {
 
   utils.createTargetDir(scope)
   utils.renderTemplate('BASE', scope)
-  utils.renderTemplate(scope.css, scope)
 
-  if (scope.preset.axios) utils.renderTemplate('axios', scope)
+  const css = scope.preset.sass ? 'sass' : 'css'
+  utils.renderTemplate(css, scope)
+
   if (scope.preset.i18n) utils.renderTemplate('i18n', scope)
   if (scope.preset.eslint) utils.renderTemplate('eslint', scope)
   if (scope.prettier) utils.renderTemplate('prettier', scope)

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

@@ -2,8 +2,8 @@ import js from '@eslint/js'
 import globals from 'globals'
 import pluginVue from 'eslint-plugin-vue'
 import pluginQuasar from '@quasar/app-vite/eslint'
-import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'<% if (prettier) { %>
-import prettierSkipFormatting from '@vue/eslint-config-prettier/skip-formatting'<% } %>
+import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
+<% if (scope.prettier) { %>import prettierSkipFormatting from '@vue/eslint-config-prettier/skip-formatting'<% } %>
 
 export default defineConfigWithVueTs(
   {
@@ -80,7 +80,7 @@ export default defineConfigWithVueTs(
         ...globals.serviceworker
       }
     }
-  }<% if (prettier) { %>,
+  }<% if (scope.prettier) { %>,
 
   prettierSkipFormatting<% } %>
 )

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

@@ -23,8 +23,8 @@ declare module 'vue-i18n' {
 
 export default defineBoot(({ app }) => {
   const i18n = createI18n<{ message: MessageSchema }, MessageLanguages>({
-    locale: 'en-US',<% if (sfcStyle === 'composition' || sfcStyle === 'composition-setup') { %>
-    legacy: false,<% } %>
+    locale: 'en-US',
+    legacy: false,
     messages,
   });
 

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

@@ -1,6 +1,6 @@
-# <%= productName %> (<%= name %>)
+# <%= scope.productName %> (<%= scope.name %>)
 
-<%= description %>
+<%= scope.description %>
 
 ## Install the dependencies
 ```bash
@@ -13,7 +13,7 @@ npm install
 ```bash
 quasar dev
 ```
-<% if (preset.eslint) { %>
+<% if (scope.preset.eslint) { %>
 
 ### Lint the files
 ```bash
@@ -21,7 +21,7 @@ yarn lint
 # or
 npm run lint
 ```
-<% if (prettier) { %>
+<% if (scope.prettier) { %>
 
 ### Format the files
 ```bash

package/templates/app/quasar-v2/ts-webpack-4/BASE/_.vscode/extensions.json

@@ -1,7 +1,7 @@
 {
   "recommendations": [
-    <% if (preset.eslint) { %>"dbaeumer.vscode-eslint",<% } %>
-    <% if (prettier) { %>"esbenp.prettier-vscode",<% } %>
+    <% if (scope.preset.eslint) { %>"dbaeumer.vscode-eslint",<% } %>
+    <% if (scope.prettier) { %>"esbenp.prettier-vscode",<% } %>
     "editorconfig.editorconfig",
     "vue.volar",
     "wayou.vscode-todo-highlight"

package/templates/app/quasar-v2/ts-webpack-4/BASE/_.vscode/settings.json

@@ -1,8 +1,8 @@
 {
   "editor.bracketPairColorization.enabled": true,
-  "editor.guides.bracketPairs": true,<% if (preset.eslint) { %>
+  "editor.guides.bracketPairs": true,<% if (scope.preset.eslint) { %>
   "editor.formatOnSave": true,
-  "editor.defaultFormatter": <% if (prettier) { %>"esbenp.prettier-vscode"<% } else { %>"dbaeumer.vscode-eslint"<% } %>,
+  "editor.defaultFormatter": <% if (scope.prettier) { %>"esbenp.prettier-vscode"<% } else { %>"dbaeumer.vscode-eslint"<% } %>,
   "editor.codeActionsOnSave": [
     "source.fixAll.eslint"
   ],

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

@@ -1,23 +1,22 @@
 {
-  "name": "<%= name %>",
+  "name": "<%= scope.name %>",
   "version": "0.0.1",
-  "description": "<%= description %>",
-  "productName": "<%= productName %>",
-  "author": "<%= author %>",
+  "description": "<%= scope.description %>",
+  "productName": "<%= scope.productName %>",
+  "author": "<%= scope.author %>",
   "private": true,
   "type": "module",
   "scripts": {
-    <% if (preset.eslint) { %>"lint": "eslint -c ./eslint.config.js \"./src*/**/*.{ts,js,cjs,mjs,vue}\"",<% } %>
-    <% if (prettier) { %>"format": "prettier --write \"**/*.{js,ts,vue,<% if (css !== 'sass') { %><%= css %><% } %>,html,md,json}\" --ignore-path .gitignore",<% } %>
+    <% if (scope.preset.eslint) { %>"lint": "eslint -c ./eslint.config.js \"./src*/**/*.{ts,js,cjs,mjs,vue}\"",<% } %>
+    <% if (scope.prettier) { %>"format": "prettier --write \"**/*.{js,ts,vue,css<% if (scope.preset.sass) { %>,scss<% } %>,html,md,json}\" --ignore-path .gitignore",<% } %>
     "test": "echo \"No test specified\" && exit 0",
     "dev": "quasar dev",
     "build": "quasar build",
     "postinstall": "quasar prepare"
   },
   "dependencies": {
-    <% if (preset.axios) { %>"axios": "^1.13.6",<% } %>
-    <% if (preset.i18n) { %>"vue-i18n": "^11.3.0",<% } %>
-    <% if (preset.pinia) { %>"pinia": "^3.0.1",<% } %>
+    <% if (scope.preset.i18n) { %>"vue-i18n": "^11.3.0",<% } %>
+    <% if (scope.preset.pinia) { %>"pinia": "^3.0.1",<% } %>
     "@quasar/extras": "^1.16.4",
     "core-js": "^3.6.5",
     "quasar": "^2.16.0",
@@ -25,7 +24,7 @@
     "vue-router": "^5.0.3"
   },
   "devDependencies": {
-    <% if (preset.eslint) { %>
+    <% if (scope.preset.eslint) { %>
     "@eslint/js": "^9.14.0",
     "eslint": "^9.14.0",
     "eslint-plugin-vue": "^10.8.0",
@@ -34,7 +33,7 @@
     "globals": "^17.4.0",
     "vue-eslint-parser": "^10.4.0",
     <% } %>
-    <% if (prettier) { %>
+    <% if (scope.prettier) { %>
     "@vue/eslint-config-prettier": "^10.2.0",
     "prettier": "^3.8.1",
     <% } %>

package/templates/app/quasar-v2/ts-webpack-4/BASE/index.html

@@ -1,13 +1,13 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title><%= '\<%= productName %\>' %></title>
+    <title><%= '<' + '%= productName %' + '>' %></title>
 
     <meta charset="utf-8">
-    <meta name="description" content="<%= '\<%= productDescription %\>' %>">
+    <meta name="description" content="<%= '<' + '%= productDescription %' + '>' %>">
     <meta name="format-detection" content="telephone=no">
     <meta name="msapplication-tap-highlight" content="no">
-    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<%= '\<% if (ctx.mode.cordova || ctx.mode.capacitor) { %\>, viewport-fit=cover\<% } %\>' %>">
+    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<%= '<' + '% if (ctx.mode.cordova || ctx.mode.capacitor) { %' + '>, viewport-fit=cover<' + '% } %' + '>' %>">
 
     <link rel="icon" type="image/png" sizes="128x128" href="icons/favicon-128x128.png">
     <link rel="icon" type="image/png" sizes="96x96" href="icons/favicon-96x96.png">

package/templates/app/quasar-v2/ts-webpack-4/BASE/quasar.config.ts

@@ -1,14 +1,14 @@
 // Configuration for your app
 // https://v2.quasar.dev/quasar-cli-webpack/quasar-config-file
 
-<% if (preset.eslint) { %>
+<% if (scope.preset.eslint) { %>
 /* eslint-disable @typescript-eslint/no-var-requires */
 <% } %>
 import { defineConfig } from '#q-app/wrappers';
 
 export default defineConfig((/* ctx */) => {
   return {
-    <% if (preset.eslint) { %>eslint: {
+    <% if (scope.preset.eslint) { %>eslint: {
       // fix: true,
       // include: [],
       // exclude: [],
@@ -25,13 +25,12 @@ export default defineConfig((/* ctx */) => {
     // --> boot files are part of "main.js"
     // https://v2.quasar.dev/quasar-cli-webpack/boot-files
     boot: [
-      <% if (preset.i18n) { %>'i18n',<% } %>
-      <% if (preset.axios) { %>'axios',<% } %>
+      <% if (scope.preset.i18n) { %>'i18n'<% } %>
     ],
 
     // https://v2.quasar.dev/quasar-cli-webpack/quasar-config-file#css
     css: [
-      'app.<%= css %>'
+      'app.<%= scope.preset.sass ? 'sass' : 'css' %>'
     ],
 
     // https://github.com/quasarframework/quasar/tree/dev/extras
@@ -207,7 +206,7 @@ export default defineConfig((/* ctx */) => {
       builder: {
         // https://www.electron.build/configuration
 
-        appId: '<%= name %>'
+        appId: '<%= scope.name %>'
       }
     },
 

package/templates/app/quasar-v2/ts-webpack-4/BASE/src/App.vue

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