create-quasar 1.0.28 → 1.0.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-quasar",
-  "version": "1.0.28",
+  "version": "1.0.29",
   "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/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

@@ -6,6 +6,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/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-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

@@ -6,6 +6,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-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 }
       ]