create-quasar 1.0.28 → 1.0.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-quasar",
-  "version": "1.0.28",
+  "version": "1.0.31",
   "description": "Scaffolds Quasar Apps, AppExtensions or UI kits",
   "author": {
     "name": "Razvan Stoenescu",

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

@@ -5,6 +5,7 @@ import messages from 'src/i18n'
 export default boot(({ app }) => {
   const i18n = createI18n({
     locale: 'en-US',
+    globalInjection: true,
     messages
   })
 

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

@@ -5,6 +5,7 @@ import messages from 'src/i18n'
 export default boot(({ app }) => {
   const i18n = createI18n({
     locale: 'en-US',
+    globalInjection: true,
     messages
   })
 

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

@@ -14,7 +14,7 @@
   "dependencies": {
     <% if (typescriptConfig === 'class') { %>"vue-class-component": "^8.0.0-rc.1",<% } %>
     <% if (preset.axios) { %>"axios": "^0.21.1",<% } %>
-    <% if (preset.i18n) { %>"vue-i18n": "^9.0.0",<% } %>
+    <% if (preset.i18n) { %>"vue-i18n": "^9.2.2",<% } %>
     <% if (preset.pinia) { %>"pinia": "^2.0.11",<% } %>
     <% if (preset.vuex) { %>"vuex": "^4.0.1",<% } %>
     "@quasar/extras": "^1.0.0",

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

@@ -2,16 +2,18 @@
   <router-view />
 </template>
 
-<script lang="ts">
-<% if (typescriptConfig === 'composition') { %>import { defineComponent } from 'vue';
+<% if (typescriptConfig === 'composition-setup') { %><script setup lang="ts">
+<% } else if (typescriptConfig === 'composition') { %><script lang="ts">
+import { defineComponent } from 'vue';
 
 export default defineComponent({
   name: 'App'
-});<% } else if (typescriptConfig === 'options') { %>import { defineComponent } from 'vue';
+});<% } else if (typescriptConfig === 'options') { %><script lang="ts">
+import { defineComponent } from 'vue';
 
 export default defineComponent({
   name: 'App'
-});<% } else if (typescriptConfig === 'class') { %>
+});<% } else if (typescriptConfig === 'class') { %><script lang="ts">
 import { Vue } from 'vue-class-component'
 
 export default class App extends Vue {}<% } %>

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

@@ -19,8 +19,19 @@
   </q-item>
 </template>
 
-<script lang="ts">
-<% if (typescriptConfig === 'composition') { %>import { defineComponent } from 'vue';
+<% if (typescriptConfig === 'composition-setup') { %><script setup lang="ts">
+export interface EssentialLinkProps {
+  title: string;
+  caption?: string;
+  link?: string;
+  icon?: string;
+}
+withDefaults(defineProps<EssentialLinkProps>(), {
+  caption: '',
+  link: '#',
+  icon: '',
+});<% } else if (typescriptConfig === 'composition') { %><script lang="ts">
+import { defineComponent } from 'vue';
 
 export default defineComponent({
   name: 'EssentialLink',
@@ -45,7 +56,8 @@ export default defineComponent({
       default: ''
     }
   }
-});<% } else if (typescriptConfig === 'options') { %>import { defineComponent } from 'vue';
+});<% } else if (typescriptConfig === 'options') { %><script lang="ts">
+import { defineComponent } from 'vue';
 
 export default defineComponent({
   name: 'EssentialLink',
@@ -70,7 +82,7 @@ export default defineComponent({
       default: ''
     }
   }
-});<% } else if (typescriptConfig === 'class') { %>
+});<% } else if (typescriptConfig === 'class') { %><script lang="ts">
 import { Vue, prop, Options } from 'vue-class-component';
 
 class Props {

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

@@ -12,8 +12,29 @@
   </div>
 </template>
 
-<script lang="ts">
-<% if (typescriptConfig === 'composition') { %>import {
+<% if (typescriptConfig === 'composition-setup') { %><script setup lang="ts">
+import { computed, ref } from 'vue';
+import { Todo, Meta } from './models';
+
+interface Props {
+  title: string;
+  todos?: Todo[];
+  meta: Meta;
+  active: boolean;
+}
+const props = withDefaults(defineProps<Props>(), {
+  todos: () => [],
+});
+
+const clickCount = ref(0);
+function increment() {
+  clickCount.value += 1;
+  return clickCount.value;
+}
+
+const todoCount = computed(() => props.todos.length);
+<% } else if (typescriptConfig === 'composition') { %><script lang="ts">
+import {
   defineComponent,
   PropType,
   computed,
@@ -60,7 +81,8 @@ export default defineComponent({
   setup (props) {
     return { ...useClickCount(), ...useDisplayTodo(toRef(props, 'todos')) };
   },
-});<% } else if (typescriptConfig === 'options') { %>import { defineComponent, PropType } from 'vue';
+});<% } else if (typescriptConfig === 'options') { %><script lang="ts">
+import { defineComponent, PropType } from 'vue';
 import { Todo, Meta } from './models';
 
 export default defineComponent({
@@ -97,7 +119,8 @@ export default defineComponent({
       return this.todos.length;
     }
   }
-});<% } else if (typescriptConfig === 'class') { %>import { Vue, prop } from 'vue-class-component';
+});<% } else if (typescriptConfig === 'class') { %><script lang="ts">
+import { Vue, prop } from 'vue-class-component';
 import { Todo, Meta } from './models';
 
 class Props {

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

@@ -45,8 +45,61 @@
   </q-layout>
 </template>
 
-<script lang="ts">
-<% if (typescriptConfig === 'composition') { %>import { defineComponent, ref } from 'vue';
+<% if (typescriptConfig === 'composition-setup') { %><script setup lang="ts">
+import { ref } from 'vue';
+import EssentialLink, { EssentialLinkProps } from 'components/EssentialLink.vue';
+
+const essentialLinks: 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
+}<% } else if (typescriptConfig === 'composition') { %><script lang="ts">
+import { defineComponent, ref } from 'vue';
 import EssentialLink from 'components/EssentialLink.vue';
 
 const linksList = [
@@ -112,7 +165,8 @@ export default defineComponent({
       }
     }
   }
-});<% } else if (typescriptConfig === 'options') { %>import { defineComponent } from 'vue';
+});<% } else if (typescriptConfig === 'options') { %><script lang="ts">
+import { defineComponent } from 'vue';
 import EssentialLink from 'components/EssentialLink.vue';
 
 const linksList = [
@@ -179,7 +233,7 @@ export default defineComponent({
       this.leftDrawerOpen = !this.leftDrawerOpen
     }
   }
-});<% } else if (typescriptConfig === 'class') { %>
+});<% } else if (typescriptConfig === 'class') { %><script lang="ts">
 import { Vue, Options } from 'vue-class-component';
 import EssentialLink from 'components/EssentialLink.vue';
 

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

@@ -22,16 +22,19 @@
   </div>
 </template>
 
-<script lang="ts">
-<% if (typescriptConfig === 'composition') { %>import { defineComponent } from 'vue';
+<% if (typescriptConfig === 'composition-setup') { %><script setup lang="ts">
+<% } else if (typescriptConfig === 'composition') { %><script lang="ts">
+import { defineComponent } from 'vue';
 
 export default defineComponent({
   name: 'ErrorNotFound'
-});<% } else if (typescriptConfig === 'options') { %>import { defineComponent } from 'vue';
+});<% } else if (typescriptConfig === 'options') { %><script lang="ts">
+import { defineComponent } from 'vue';
 
 export default defineComponent({
   name: 'ErrorNotFound'
-});<% } else if (typescriptConfig === 'class') { %>import { Vue } from 'vue-class-component';
+});<% } else if (typescriptConfig === 'class') { %><script lang="ts">
+import { Vue } from 'vue-class-component';
 
 export default class ErrorNotFound extends Vue {}<% } %>
 </script>

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

@@ -9,8 +9,37 @@
   </q-page>
 </template>
 
-<script lang="ts">
-<% if (typescriptConfig === 'composition') { %>import { Todo, Meta } from 'components/models';
+<% if (typescriptConfig === 'composition-setup') { %><script setup lang="ts">
+import { Todo, Meta } from 'components/models';
+import ExampleComponent from 'components/ExampleComponent.vue';
+import { ref } from '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
+});<% } else if (typescriptConfig === 'composition') { %><script lang="ts">
+import { Todo, Meta } from 'components/models';
 import ExampleComponent from 'components/ExampleComponent.vue';
 import { defineComponent, ref } from 'vue';
 
@@ -45,7 +74,8 @@ export default defineComponent({
     });
     return { todos, meta };
   }
-});<% } else if (typescriptConfig === 'options') { %>import { Todo, Meta } from 'components/models';
+});<% } else if (typescriptConfig === 'options') { %><script lang="ts">
+import { Todo, Meta } from 'components/models';
 import ExampleComponent from 'components/ExampleComponent.vue';
 import { defineComponent } from 'vue';
 
@@ -80,7 +110,7 @@ export default defineComponent({
     };
     return { todos, meta };
   }
-});<% } else if (typescriptConfig === 'class') { %>
+});<% } else if (typescriptConfig === 'class') { %><script lang="ts">
 import { Vue, Options } from 'vue-class-component'
 import { Todo, Meta } from 'components/models';
 import ExampleComponent from 'components/ExampleComponent.vue';

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

@@ -3,9 +3,28 @@ 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-interface */
+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-interface */
+
 export default boot(({ app }) => {
   const i18n = createI18n({
-    locale: 'en-US',
+    locale: 'en-US',<% if (typescriptConfig === 'composition' || typescriptConfig === 'composition-setup') { %>
+    legacy: false,<% } %>
     messages,
   });
 

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

@@ -8,6 +8,7 @@ module.exports = async function ({ scope, utils }) {
       initial: 0,
       choices: [
         { title: 'Composition API', value: 'composition', description: 'recommended' },
+        { title: 'Composition API with <script setup>', value: 'composition-setup', description: 'recommended' },
         { title: 'Options API', value: 'options' },
         { title: 'Class-based', value: 'class', description: 'DEPRECATED; see https://github.com/quasarframework/quasar/discussions/11204', disabled: true }
       ]

package/templates/app/quasar-v2/ts-vite/pinia/src/stores/index.ts

@@ -1,5 +1,17 @@
 import { store } from 'quasar/wrappers'
 import { createPinia } from 'pinia'
+import { Router } from 'vue-router';
+
+/*
+ * When adding new properties to stores, you should also
+ * extend the `PiniaCustomProperties` interface.
+ * @see https://pinia.vuejs.org/core-concepts/plugins.html#typing-new-store-properties
+ */
+declare module 'pinia' {
+  export interface PiniaCustomProperties {
+    readonly router: Router;
+  }
+}
 
 /*
  * If not building with SSR mode, you can

package/templates/app/quasar-v2/ts-vite/vuex/src/store/index.ts

@@ -1,5 +1,6 @@
 import { store } from 'quasar/wrappers'
 import { InjectionKey } from 'vue'
+import { Router } from 'vue-router'
 import {
   createStore,
   Store as VuexStore,
@@ -35,6 +36,13 @@ declare module '@vue/runtime-core' {
 // provide typings for `useStore` helper
 export const storeKey: InjectionKey<VuexStore<StateInterface>> = Symbol('vuex-key')
 
+// Provide typings for `this.$router` inside Vuex stores
+ declare module "vuex" {
+   export interface Store<S> {
+     readonly $router: Router;
+   }
+ }
+
 export default store(function (/* { ssrContext } */) {
   const Store = createStore<StateInterface>({
     modules: {

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

@@ -14,7 +14,7 @@
   "dependencies": {
     <% if (typescriptConfig === 'class') { %>"vue-class-component": "^8.0.0-rc.1",<% } %>
     <% if (preset.axios) { %>"axios": "^0.21.1",<% } %>
-    <% if (preset.i18n) { %>"vue-i18n": "^9.0.0",<% } %>
+    <% if (preset.i18n) { %>"vue-i18n": "^9.2.2",<% } %>
     <% if (preset.pinia) { %>"pinia": "^2.0.11",<% } %>
     <% if (preset.vuex) { %>"vuex": "^4.0.1",<% } %>
     "@quasar/extras": "^1.0.0",

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

@@ -2,16 +2,19 @@
   <router-view />
 </template>
 
-<script lang="ts">
-<% if (typescriptConfig === 'composition') { %>import { defineComponent } from 'vue';
+<% if (typescriptConfig === 'composition-setup') { %><script setup lang="ts">
+<% } else if (typescriptConfig === 'composition') { %><script lang="ts">
+import { defineComponent } from 'vue';
 
 export default defineComponent({
   name: 'App'
-})<% } else if (typescriptConfig === 'options') { %>import { defineComponent } from 'vue';
+})<% } else if (typescriptConfig === 'options') { %><script lang="ts">
+import { defineComponent } from 'vue';
 
 export default defineComponent({
   name: 'App'
-})<% } else if (typescriptConfig === 'class') { %>import { Vue } from 'vue-class-component';
+})<% } else if (typescriptConfig === 'class') { %><script lang="ts">
+import { Vue } from 'vue-class-component';
 
 export default class App extends Vue {}<% } %>
 </script>

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

@@ -19,8 +19,19 @@
   </q-item>
 </template>
 
-<script lang="ts">
-<% if (typescriptConfig === 'composition') { %>import { defineComponent } from 'vue';
+<% if (typescriptConfig === 'composition-setup') { %><script setup lang="ts">
+export interface EssentialLinkProps {
+  title: string;
+  caption?: string;
+  link?: string;
+  icon?: string;
+}
+withDefaults(defineProps<EssentialLinkProps>(), {
+  caption: '',
+  link: '#',
+  icon: '',
+});<% } else if (typescriptConfig === 'composition') { %><script lang="ts">
+import { defineComponent } from 'vue';
 
 export default defineComponent({
   name: 'EssentialLink',
@@ -45,7 +56,8 @@ export default defineComponent({
       default: ''
     }
   }
-});<% } else if (typescriptConfig === 'options') { %>import { defineComponent } from 'vue';
+});<% } else if (typescriptConfig === 'options') { %><script lang="ts">
+import { defineComponent } from 'vue';
 
 export default defineComponent({
   name: 'EssentialLink',
@@ -70,7 +82,7 @@ export default defineComponent({
       default: ''
     }
   }
-});<% } else if (typescriptConfig === 'class') { %>
+});<% } else if (typescriptConfig === 'class') { %><script lang="ts">
 import { Vue, prop, Options } from 'vue-class-component';
 
 class Props {

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

@@ -12,8 +12,29 @@
   </div>
 </template>
 
-<script lang="ts">
-<% if (typescriptConfig === 'composition') { %>import {
+<% if (typescriptConfig === 'composition-setup') { %><script setup lang="ts">
+import { computed, ref } from 'vue';
+import { Todo, Meta } from './models';
+
+interface Props {
+  title: string;
+  todos?: Todo[];
+  meta: Meta;
+  active: boolean;
+}
+const props = withDefaults(defineProps<Props>(), {
+  todos: () => [],
+});
+
+const clickCount = ref(0);
+function increment() {
+  clickCount.value += 1;
+  return clickCount.value;
+}
+
+const todoCount = computed(() => props.todos.length);
+<% } else if (typescriptConfig === 'composition') { %><script lang="ts">
+import {
   defineComponent,
   PropType,
   computed,
@@ -60,7 +81,8 @@ export default defineComponent({
   setup(props) {
     return { ...useClickCount(), ...useDisplayTodo(toRef(props, 'todos')) };
   },
-});<% } else if (typescriptConfig === 'options') { %>import { defineComponent, PropType } from 'vue';
+});<% } else if (typescriptConfig === 'options') { %><script lang="ts">
+import { defineComponent, PropType } from 'vue';
 import { Todo, Meta } from './models';
 
 export default defineComponent({
@@ -97,7 +119,8 @@ export default defineComponent({
       return this.todos.length;
     }
   }
-});<% } else if (typescriptConfig === 'class') { %>import { Vue, prop } from 'vue-class-component';
+});<% } else if (typescriptConfig === 'class') { %><script lang="ts">
+import { Vue, prop } from 'vue-class-component';
 import { Todo, Meta } from './models';
 
 class Props {

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

@@ -45,8 +45,61 @@
   </q-layout>
 </template>
 
-<script lang="ts">
-<% if (typescriptConfig === 'composition') { %>import { defineComponent, ref } from 'vue';
+<% if (typescriptConfig === 'composition-setup') { %><script setup lang="ts">
+import { ref } from 'vue';
+import EssentialLink from 'components/EssentialLink.vue';
+
+const essentialLinks = [
+  {
+    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
+}<% } else if (typescriptConfig === 'composition') { %><script lang="ts">
+import { defineComponent, ref } from 'vue';
 import EssentialLink from 'components/EssentialLink.vue';
 
 const linksList = [
@@ -112,7 +165,8 @@ export default defineComponent({
       }
     }
   }
-});<% } else if (typescriptConfig === 'options') { %>import { defineComponent } from 'vue';
+});<% } else if (typescriptConfig === 'options') { %><script lang="ts">
+import { defineComponent } from 'vue';
 import EssentialLink from 'components/EssentialLink.vue';
 
 const linksList = [
@@ -179,7 +233,7 @@ export default defineComponent({
       this.leftDrawerOpen = !this.leftDrawerOpen
     }
   }
-});<% } else if (typescriptConfig === 'class') { %>
+});<% } else if (typescriptConfig === 'class') { %><script lang="ts">
 import { Vue, Options } from 'vue-class-component';
 import EssentialLink from 'components/EssentialLink.vue';
 

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

@@ -22,16 +22,19 @@
   </div>
 </template>
 
-<script lang="ts">
-<% if (typescriptConfig === 'composition') { %>import { defineComponent } from 'vue';
+<% if (typescriptConfig === 'composition-setup') { %><script setup lang="ts">
+<% } else if (typescriptConfig === 'composition') { %><script lang="ts">
+import { defineComponent } from 'vue';
 
 export default defineComponent({
   name: 'ErrorNotFound'
-});<% } else if (typescriptConfig === 'options') { %>import { defineComponent } from 'vue';
+});<% } else if (typescriptConfig === 'options') { %><script lang="ts">
+import { defineComponent } from 'vue';
 
 export default defineComponent({
   name: 'ErrorNotFound'
-});<% } else if (typescriptConfig === 'class') { %>import { Vue } from 'vue-class-component';
+});<% } else if (typescriptConfig === 'class') { %><script lang="ts">
+import { Vue } from 'vue-class-component';
 
 export default class ErrorNotFound extends Vue {}<% } %>
 </script>

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

@@ -9,8 +9,37 @@
   </q-page>
 </template>
 
-<script lang="ts">
-<% if (typescriptConfig === 'composition') { %>import { Todo, Meta } from 'components/models';
+<% if (typescriptConfig === 'composition-setup') { %><script setup lang="ts">
+import { Todo, Meta } from 'components/models';
+import ExampleComponent from 'components/ExampleComponent.vue';
+import { ref } from '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
+});<% } else if (typescriptConfig === 'composition') { %><script lang="ts">
+import { Todo, Meta } from 'components/models';
 import ExampleComponent from 'components/ExampleComponent.vue';
 import { defineComponent, ref } from 'vue';
 
@@ -45,7 +74,8 @@ export default defineComponent({
     });
     return { todos, meta };
   }
-});<% } else if (typescriptConfig === 'options') { %>import { Todo, Meta } from 'components/models';
+});<% } else if (typescriptConfig === 'options') { %><script lang="ts">
+import { Todo, Meta } from 'components/models';
 import ExampleComponent from 'components/ExampleComponent.vue';
 import { defineComponent } from 'vue';
 
@@ -80,7 +110,7 @@ export default defineComponent({
     };
     return { todos, meta };
   }
-});<% } else if (typescriptConfig === 'class') { %>
+});<% } else if (typescriptConfig === 'class') { %><script lang="ts">
 import { Vue, Options } from 'vue-class-component'
 import { Todo, Meta } from 'components/models';
 import ExampleComponent from 'components/ExampleComponent.vue';

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

@@ -3,9 +3,28 @@ 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-interface */
+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-interface */
+
 export default boot(({ app }) => {
-  const i18n = createI18n({
-    locale: 'en-US',
+  const i18n = createI18n<{ message: MessageSchema }, MessageLanguages>({
+    locale: 'en-US',<% if (typescriptConfig === 'composition' || typescriptConfig === 'composition-setup') { %>
+    legacy: false,<% } %>
     messages,
   });
 

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

@@ -8,6 +8,7 @@ module.exports = async function ({ scope, utils }) {
       initial: 0,
       choices: [
         { title: 'Composition API', value: 'composition', description: 'recommended' },
+        { title: 'Composition API with <script setup>', value: 'composition-setup', description: 'recommended' },
         { title: 'Options API', value: 'options' },
         { title: 'Class-based (DEPRECATED; see https://github.com/quasarframework/quasar/discussions/11204)', value: 'class', disabled: true }
       ]

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

@@ -1,5 +1,17 @@
 import { store } from 'quasar/wrappers'
 import { createPinia } from 'pinia'
+import { Router } from 'vue-router';
+
+/*
+ * When adding new properties to stores, you should also
+ * extend the `PiniaCustomProperties` interface.
+ * @see https://pinia.vuejs.org/core-concepts/plugins.html#typing-new-store-properties
+ */
+declare module 'pinia' {
+  export interface PiniaCustomProperties {
+    readonly router: Router;
+  }
+}
 
 /*
  * If not building with SSR mode, you can

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

@@ -1,5 +1,6 @@
 import { store } from 'quasar/wrappers'
 import { InjectionKey } from 'vue'
+import { Router } from 'vue-router'
 import {
   createStore,
   Store as VuexStore,
@@ -35,6 +36,13 @@ declare module '@vue/runtime-core' {
 // provide typings for `useStore` helper
 export const storeKey: InjectionKey<VuexStore<StateInterface>> = Symbol('vuex-key')
 
+// Provide typings for `this.$router` inside Vuex store
+ declare module "vuex" {
+   export interface Store<S> {
+     readonly $router: Router;
+   }
+ }
+
 export default store(function (/* { ssrContext } */) {
   const Store = createStore<StateInterface>({
     modules: {

package/utils/index.js

@@ -59,8 +59,8 @@ module.exports.renderTemplate = function (templateDir, scope) {
     const targetRelativePath = rawPath.split('/').map(name => {
       // dotfiles are ignored when published to npm, therefore in templates
       // we need to prefix them with an underscore (e.g. "_.gitignore")
-      // Also, some tools like ESLint excepts valid config files, therefore
-      // we also prefix files like "package.json" too. (e.g. "_.package.json")
+      // Also, some tools like ESLint expect valid config files, therefore
+      // we also prefix files like "package.json" too. (e.g. "_package.json")
       return name.startsWith('_')
         ? name.slice(1)
         : name