diff --git a/app-vite/lib/cmd/new.js b/app-vite/lib/cmd/new.js
index eec99f3ed49..9d43fa822d4 100755
--- a/app-vite/lib/cmd/new.js
+++ b/app-vite/lib/cmd/new.js
@@ -1,6 +1,6 @@
 import parseArgs from 'minimist'
 
-import path from 'node:path'
+import { relative, dirname, join } from 'node:path'
 import fs from 'node:fs'
 import fse from 'fs-extra'
 
@@ -21,12 +21,12 @@ function showHelp (returnCode) {
     Quickly scaffold files.
 
   Usage
-    $ quasar new <p|page> [-f <option>] <page_file_name>
-    $ quasar new <l|layout> [-f <option>] <layout_file_name>
-    $ quasar new <c|component> [-f <option>] <component_file_name>
-    $ quasar new <b|boot> [-f ts] <boot_name>
-    $ quasar new <s|store> [-f ts] <store_module_name>
-    $ quasar new ssrmiddleware [-f ts] <middleware_name>
+    $ quasar new <p|page> [-f <js|ts>] <page_file_name>
+    $ quasar new <l|layout> [-f <js|ts>] <layout_file_name>
+    $ quasar new <c|component> [-f <js|ts>] <component_file_name>
+    $ quasar new <b|boot> [-f <js|ts>] <boot_name>
+    $ quasar new <s|store> [-f <js|ts>] <store_module_name>
+    $ quasar new ssrmiddleware [-f <js|ts>] <middleware_name>
 
   Examples
     # Create src/pages/MyNewPage.vue:
@@ -47,21 +47,18 @@ function showHelp (returnCode) {
   Options
     --help, -h            Displays this message
 
-    --format -f <option>  (optional) Use a supported format for the template
-                          Possible values:
-                             * default - Default JS template
-                             * ts-composition - TS composition API (default if using TS)
-                             * ts-composition-setup - TS composition API with <script setup>
-                             * ts-options - TS options API
-                             * ts-class - [DEPRECATED] TS class style syntax
-                             * ts - Plain TS template (for boot, store, and ssrmiddleware files)
+    --format -f <option>  (optional) Use a supported format for the template.
+                          This gets inferred automatically for your project.
+                          Possible overriding values:
+                             * js - JS template
+                             * ts - TS template
   `)
   process.exit(returnCode)
 }
 
-function showError (message, param) {
+function showError (message) {
   console.log()
-  warn(`${ message }: ${ param }`)
+  warn(message)
   showHelp(1)
 }
 
@@ -79,19 +76,18 @@ if (argv._.length < 2) {
 }
 
 import { getCtx } from '../utils/get-ctx.js'
-const { appPaths, cacheProxy } = getCtx()
 
-const storeProvider = await cacheProxy.getModule('storeProvider')
+const { appPaths, cacheProxy } = getCtx()
 const hasTypescript = await cacheProxy.getModule('hasTypescript')
 
 if (!argv.format) {
-  argv.format = argv.f = hasTypescript ? 'ts-composition' : 'default'
+  argv.format = argv.f = hasTypescript ? 'ts' : 'default'
 }
 
 /** @type {string[]} */
 const [ rawType, ...names ] = argv._
 /** @type {{ format: 'default'|'ts'|'ts-options'|'ts-class'|'ts-composition'|'ts-composition-setup'}} */
-let { format } = argv
+const { format } = argv
 
 const typeAliasMap = {
   p: 'page',
@@ -101,134 +97,141 @@ const typeAliasMap = {
   b: 'boot'
 }
 
-if (![ ...Object.entries(typeAliasMap).flat(), 'ssrmiddleware' ].includes(rawType)) {
-  showError('Invalid asset type', rawType)
+const validAssetTypes = [ ...Object.entries(typeAliasMap).flat(), 'ssrmiddleware' ]
+if (validAssetTypes.includes(rawType) === false) {
+  showError(`Invalid asset type: ${ rawType } (valid values: ${ validAssetTypes.join('|') })`)
 }
 
 /** @type {'page'|'layout'|'component'|'store'|'boot'|'ssrmiddleware'} */
 const type = typeAliasMap[ rawType ] || rawType
 
-if (![ 'default', 'ts-options', 'ts-class', 'ts-composition', 'ts-composition-setup', 'ts' ].includes(format)) {
-  showError('Invalid asset format', format)
-}
-
-const isTypeScript = format === 'ts' || format.startsWith('ts-')
-
-// If using a TS sub-format(e.g. ts-options) and the type is a plain file (e.g. boot) then
-// set format to just TS as sub-formats(e.g. Composition API) doesn't matter for plain files.
-if (isTypeScript && (type === 'boot' || type === 'store' || type === 'ssrmiddleware')) {
-  format = 'ts'
+if ([ 'js', 'ts' ].includes(format) === false) {
+  showError(`Invalid asset format: ${ format } (valid values: js|ts)`)
 }
 
-function createFile (asset, file) {
-  const relativePath = path.relative(appPaths.appDir, file)
+function createFile ({ targetFile, ext, reference }) {
+  const assetRelativePath = relative(appPaths.appDir, targetFile)
 
-  if (fs.existsSync(file)) {
-    warn(`${ relativePath } already exists.`, 'SKIPPED')
+  if (fs.existsSync(targetFile)) {
+    warn(`${ assetRelativePath } already exists.`, 'SKIPPED')
     console.log()
     return
   }
 
-  fse.ensureDir(path.dirname(file))
-  let templatePath = path.join('templates/app', format)
-
-  templatePath = type === 'store'
-    ? path.join(templatePath, 'store', storeProvider.name + (asset.ext || ''))
-    : path.join(templatePath, type + (asset.ext || ''))
+  fse.ensureDir(dirname(targetFile))
+  const templatePath = join('templates/app', format, `${ type }.${ ext }`)
 
   fse.copy(
     appPaths.resolve.cli(templatePath),
-    file,
+    targetFile,
     err => {
       if (err) {
         console.warn(err)
-        warn(`Could not generate ${ relativePath }.`, 'FAIL')
+        warn(`Could not generate ${ assetRelativePath }.`, 'FAIL')
         return
       }
 
-      log(`Generated ${ type }: ${ relativePath }`)
-      if (asset.reference) {
-        log(`Make sure to reference it in ${ asset.reference }`)
+      log(`Generated ${ type }: ${ assetRelativePath }`)
+      if (reference) {
+        log(`Make sure to reference it in ${ reference }`)
       }
       log()
     }
   )
 }
 
-const resolveWithExtension = path =>
-  path + (fs.existsSync(appPaths.resolve.app(path + '.ts')) ? '.ts' : '.js')
-
-const pathList = {
-  router: resolveWithExtension('src/router/routes'),
-  store: resolveWithExtension(`src/${ storeProvider.pathKey }/index`)
-}
+async function getAsset (type) {
+  if (type === 'page') {
+    return {
+      relativePath: 'src/pages',
+      ext: 'vue',
+      reference: `src/router/routes.${ format }`
+    }
+  }
 
-const mapping = {
-  page: {
-    folder: 'src/pages',
-    ext: '.vue',
-    reference: pathList.router
-  },
-  layout: {
-    folder: 'src/layouts',
-    ext: '.vue',
-    reference: pathList.router
-  },
-  component: {
-    folder: 'src/components',
-    ext: '.vue'
-  },
-  store: {
-    folder: `src/${ storeProvider.pathKey }`,
-    install: true,
-    ext: isTypeScript ? '.ts' : '.js'
-  },
-  boot: {
-    folder: 'src/boot',
-    ext: isTypeScript ? '.ts' : '.js',
-    reference: 'quasar.config file > boot'
-  },
-  ssrmiddleware: {
-    folder: 'src-ssr/middlewares',
-    ext: isTypeScript ? '.ts' : '.js',
-    reference: 'quasar.config file > ssr > middlewares'
+  if (type === 'component') {
+    return {
+      relativePath: 'src/components',
+      ext: 'vue'
+    }
   }
-}
 
-const asset = mapping[ type ]
+  if (type === 'boot') {
+    return {
+      relativePath: 'src/boot',
+      ext: format,
+      reference: 'quasar.config file > boot'
+    }
+  }
 
-if (asset.install) {
-  const folder = appPaths.resolve.app(asset.folder)
+  if (type === 'ssrmiddleware') {
+    return {
+      relativePath: 'src-ssr/middlewares',
+      ext: format,
+      reference: 'quasar.config file > ssr > middlewares'
+    }
+  }
 
-  if (!storeProvider.isInstalled) {
-    await storeProvider.install()
+  if (type === 'layout') {
+    return {
+      relativePath: 'src/layouts',
+      ext: 'vue',
+      reference: `src/router/routes.${ format }`
+    }
   }
 
-  if (!fs.existsSync(folder)) {
-    fse.ensureDir(folder)
-    fse.copy(
-      appPaths.resolve.cli(`templates/store/${ storeProvider.name }/${ format }`),
-      folder,
-      err => {
-        if (err) {
-          console.warn(err)
-          warn(`Could not generate ${ asset.folder }.`, 'FAIL')
-          return
+  if (type === 'store') {
+    const storeProvider = await cacheProxy.getModule('storeProvider')
+
+    const relativePath = `src/${ storeProvider.pathKey }`
+    const targetFolder = appPaths.resolve.app(relativePath)
+
+    if (!storeProvider.isInstalled) {
+      await storeProvider.install()
+    }
+
+    if (fs.existsSync(targetFolder) === false) {
+      fse.ensureDir(targetFolder)
+      fse.copy(
+        appPaths.resolve.cli(`templates/store/${ storeProvider.name }/${ format }`),
+        targetFolder,
+        err => {
+          if (err) {
+            console.warn(err)
+            warn(`Could not generate ${ relativePath }.`, 'FAIL')
+            return
+          }
+
+          log(`Generated ${ relativePath }`)
+          log()
         }
+      )
+    }
 
-        log(`Generated ${ asset.folder }`)
-        log()
-      }
-    )
+    return {
+      relativePath,
+      ext: format
+    }
   }
 }
 
-names.forEach(name => {
-  const hasExtension = !asset.ext || (asset.ext && name.endsWith(asset.ext))
-  const ext = hasExtension ? '' : asset.ext
+async function generate () {
+  const { relativePath, ext, reference } = await getAsset(type)
+  const fullExt = `.${ ext }`
 
-  // TODO: add template rendering for flexibility
-  const file = appPaths.resolve.app(path.join(asset.folder, name + ext))
+  names.forEach(name => {
+    const file = join(
+      relativePath,
+      name + (name.endsWith(fullExt) ? '' : fullExt)
+    )
+    const targetFile = appPaths.resolve.app(file)
+
+    createFile({
+      targetFile,
+      ext,
+      reference
+    })
+  })
+}
 
-  createFile(asset, file)
-})
+generate()
diff --git a/app-vite/templates/app/default/babelrc b/app-vite/templates/app/default/babelrc
deleted file mode 100644
index ce118affe6d..00000000000
--- a/app-vite/templates/app/default/babelrc
+++ /dev/null
@@ -1,28 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env", {
-        "modules": false,
-        "loose": false,
-        "useBuiltIns": "usage"
-      }
-    ],
-    [
-      "@babel/preset-stage-2", {
-        "modules": false,
-        "loose": false,
-        "useBuiltIns": true,
-        "decoratorsLegacy": true
-      }
-    ]
-  ],
-  "plugins": [
-    [
-      "@babel/transform-runtime", {
-        "polyfill": false,
-        "regenerator": false
-      }
-    ]
-  ],
-  "comments": false
-}
diff --git a/app-vite/templates/app/default/store/pinia.js b/app-vite/templates/app/default/store/pinia.js
deleted file mode 100644
index 35586c392e9..00000000000
--- a/app-vite/templates/app/default/store/pinia.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { defineStore, acceptHMRUpdate } from 'pinia'
-
-export const useCounterStore = defineStore('counter', {
-  state: () => ({
-    counter: 0
-  }),
-
-  getters: {
-    doubleCount: (state) => state.counter * 2
-  },
-
-  actions: {
-    increment () {
-      this.counter++
-    }
-  }
-})
-
-if (import.meta.hot) {
-  import.meta.hot.accept(acceptHMRUpdate(useCounterStore, import.meta.hot))
-}
diff --git a/app-vite/templates/app/default/boot.js b/app-vite/templates/app/js/boot.js
similarity index 100%
rename from app-vite/templates/app/default/boot.js
rename to app-vite/templates/app/js/boot.js
diff --git a/app-vite/templates/app/default/component.vue b/app-vite/templates/app/js/component.vue
similarity index 100%
rename from app-vite/templates/app/default/component.vue
rename to app-vite/templates/app/js/component.vue
diff --git a/app-vite/templates/app/default/layout.vue b/app-vite/templates/app/js/layout.vue
similarity index 100%
rename from app-vite/templates/app/default/layout.vue
rename to app-vite/templates/app/js/layout.vue
diff --git a/app-vite/templates/app/default/page.vue b/app-vite/templates/app/js/page.vue
similarity index 100%
rename from app-vite/templates/app/default/page.vue
rename to app-vite/templates/app/js/page.vue
diff --git a/app-vite/templates/app/default/ssrmiddleware.js b/app-vite/templates/app/js/ssrmiddleware.js
similarity index 100%
rename from app-vite/templates/app/default/ssrmiddleware.js
rename to app-vite/templates/app/js/ssrmiddleware.js
diff --git a/app-vite/templates/app/js/store.js b/app-vite/templates/app/js/store.js
new file mode 100644
index 00000000000..95fec82d3bd
--- /dev/null
+++ b/app-vite/templates/app/js/store.js
@@ -0,0 +1,11 @@
+import { defineStore, acceptHMRUpdate } from 'pinia'
+
+export const useMyStore = defineStore('myStore', {
+  state: () => ({}),
+  getters: {},
+  actions: {}
+})
+
+if (import.meta.hot) {
+  import.meta.hot.accept(acceptHMRUpdate(useMyStore, import.meta.hot))
+}
diff --git a/app-vite/templates/app/ts-class/component.vue b/app-vite/templates/app/ts-class/component.vue
deleted file mode 100644
index c69441be19b..00000000000
--- a/app-vite/templates/app/ts-class/component.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<template>
-  <div>My component</div>
-</template>
-
-<script lang="ts">
-import { Vue, Component } from 'vue-property-decorator'
-@Component
-export default class ComponentName extends Vue {
-}
-</script>
diff --git a/app-vite/templates/app/ts-class/layout.vue b/app-vite/templates/app/ts-class/layout.vue
deleted file mode 100644
index 4cc20f28bb8..00000000000
--- a/app-vite/templates/app/ts-class/layout.vue
+++ /dev/null
@@ -1,93 +0,0 @@
-<template>
-  <q-layout view="hHh Lpr fFf"> <!-- Be sure to play with the Layout demo on docs -->
-
-    <!-- (Optional) The Header -->
-    <q-header elevated>
-      <q-toolbar>
-        <q-btn
-          flat
-          round
-          dense
-          icon="menu"
-          @click="leftDrawer = !leftDrawer"
-        />
-        <q-toolbar-title>
-          Header
-        </q-toolbar-title>
-      </q-toolbar>
-
-      <q-tabs>
-        <q-route-tab
-          icon="map"
-          to="/your/route"
-          replace
-          label="One Tab"
-        />
-        <q-route-tab
-          icon="assignment"
-          to="/some/other/route"
-          replace
-          label="Other Tab"
-        />
-      </q-tabs>
-    </q-header>
-
-    <!-- (Optional) The Footer -->
-    <q-footer>
-      <q-tabs switch-indicator>
-        <q-route-tab
-          icon="map"
-          to="/your/route"
-          replace
-          label="One Tab"
-        />
-        <q-route-tab
-          icon="assignment"
-          to="/some/other/route"
-          replace
-          label="Other Tab"
-        />
-      </q-tabs>
-
-      <q-toolbar>
-        <q-btn
-          flat
-          round
-          dense
-          icon="menu"
-          @click="leftDrawer = !leftDrawer"
-        />
-        <q-toolbar-title>
-          Footer
-        </q-toolbar-title>
-      </q-toolbar>
-    </q-footer>
-
-    <!-- (Optional) A Drawer; you can add one more with side="right" or change this one's side -->
-    <q-drawer
-      v-model="leftDrawer"
-      side="left"
-      bordered
-      content-class="bg-grey-2"
-    >
-      <!-- QScrollArea is optional -->
-      <q-scroll-area class="fit q-pa-sm">
-        <!-- Content here -->
-      </q-scroll-area>
-    </q-drawer>
-
-    <q-page-container>
-      <!-- This is where pages get injected -->
-      <router-view />
-    </q-page-container>
-
-  </q-layout>
-</template>
-
-<script lang="ts">
-import { Vue, Component } from 'vue-property-decorator'
-@Component
-export default class LayoutName extends Vue {
-  leftDrawer = false
-}
-</script>
diff --git a/app-vite/templates/app/ts-class/page.vue b/app-vite/templates/app/ts-class/page.vue
deleted file mode 100644
index c393a449e16..00000000000
--- a/app-vite/templates/app/ts-class/page.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-  <q-page padding>
-    <!-- content -->
-  </q-page>
-</template>
-
-<script lang="ts">
-import { Vue, Component } from 'vue-property-decorator'
-@Component
-export default class PageName extends Vue {
-}
-</script>
diff --git a/app-vite/templates/app/ts-composition/component.vue b/app-vite/templates/app/ts-composition/component.vue
deleted file mode 100644
index b877d9d6b1d..00000000000
--- a/app-vite/templates/app/ts-composition/component.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<template>
-  <div>My component</div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue'
-export default defineComponent({
-  // name: 'ComponentName'
-})
-</script>
diff --git a/app-vite/templates/app/ts-composition/layout.vue b/app-vite/templates/app/ts-composition/layout.vue
deleted file mode 100644
index d7602cb7df5..00000000000
--- a/app-vite/templates/app/ts-composition/layout.vue
+++ /dev/null
@@ -1,97 +0,0 @@
-<template>
-  <q-layout view="hHh Lpr fFf"> <!-- Be sure to play with the Layout demo on docs -->
-
-    <!-- (Optional) The Header -->
-    <q-header elevated>
-      <q-toolbar>
-        <q-btn
-          flat
-          round
-          dense
-          icon="menu"
-          @click="leftDrawer = !leftDrawer"
-        />
-        <q-toolbar-title>
-          Header
-        </q-toolbar-title>
-      </q-toolbar>
-
-      <q-tabs>
-        <q-route-tab
-          icon="map"
-          to="/your/route"
-          replace
-          label="One Tab"
-        />
-        <q-route-tab
-          icon="assignment"
-          to="/some/other/route"
-          replace
-          label="Other Tab"
-        />
-      </q-tabs>
-    </q-header>
-
-    <!-- (Optional) The Footer -->
-    <q-footer>
-      <q-tabs switch-indicator>
-        <q-route-tab
-          icon="map"
-          to="/your/route"
-          replace
-          label="One Tab"
-        />
-        <q-route-tab
-          icon="assignment"
-          to="/some/other/route"
-          replace
-          label="Other Tab"
-        />
-      </q-tabs>
-
-      <q-toolbar>
-        <q-btn
-          flat
-          round
-          dense
-          icon="menu"
-          @click="leftDrawer = !leftDrawer"
-        />
-        <q-toolbar-title>
-          Footer
-        </q-toolbar-title>
-      </q-toolbar>
-    </q-footer>
-
-    <!-- (Optional) A Drawer; you can add one more with side="right" or change this one's side -->
-    <q-drawer
-      v-model="leftDrawer"
-      side="left"
-      bordered
-      content-class="bg-grey-2"
-    >
-      <!-- QScrollArea is optional -->
-      <q-scroll-area class="fit q-pa-sm">
-        <!-- Content here -->
-      </q-scroll-area>
-    </q-drawer>
-
-    <q-page-container>
-      <!-- This is where pages get injected -->
-      <router-view />
-    </q-page-container>
-
-  </q-layout>
-</template>
-
-<script lang="ts">
-import { defineComponent, ref } from 'vue'
-export default defineComponent({
-  // name: 'LayoutName',
-
-  setup() {
-    const leftDrawer = ref(false)
-    return { leftDrawer }
-  }
-})
-</script>
diff --git a/app-vite/templates/app/ts-composition/page.vue b/app-vite/templates/app/ts-composition/page.vue
deleted file mode 100644
index d8fde11b6d6..00000000000
--- a/app-vite/templates/app/ts-composition/page.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-  <q-page padding>
-    <!-- content -->
-  </q-page>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue'
-export default defineComponent({
-  // name: 'PageName'
-})
-</script>
diff --git a/app-vite/templates/app/ts-options/component.vue b/app-vite/templates/app/ts-options/component.vue
deleted file mode 100644
index b877d9d6b1d..00000000000
--- a/app-vite/templates/app/ts-options/component.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<template>
-  <div>My component</div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue'
-export default defineComponent({
-  // name: 'ComponentName'
-})
-</script>
diff --git a/app-vite/templates/app/ts-options/layout.vue b/app-vite/templates/app/ts-options/layout.vue
deleted file mode 100644
index 5c1c178d330..00000000000
--- a/app-vite/templates/app/ts-options/layout.vue
+++ /dev/null
@@ -1,98 +0,0 @@
-<template>
-  <q-layout view="hHh Lpr fFf"> <!-- Be sure to play with the Layout demo on docs -->
-
-    <!-- (Optional) The Header -->
-    <q-header elevated>
-      <q-toolbar>
-        <q-btn
-          flat
-          round
-          dense
-          icon="menu"
-          @click="leftDrawer = !leftDrawer"
-        />
-        <q-toolbar-title>
-          Header
-        </q-toolbar-title>
-      </q-toolbar>
-
-      <q-tabs>
-        <q-route-tab
-          icon="map"
-          to="/your/route"
-          replace
-          label="One Tab"
-        />
-        <q-route-tab
-          icon="assignment"
-          to="/some/other/route"
-          replace
-          label="Other Tab"
-        />
-      </q-tabs>
-    </q-header>
-
-    <!-- (Optional) The Footer -->
-    <q-footer>
-      <q-tabs switch-indicator>
-        <q-route-tab
-          icon="map"
-          to="/your/route"
-          replace
-          label="One Tab"
-        />
-        <q-route-tab
-          icon="assignment"
-          to="/some/other/route"
-          replace
-          label="Other Tab"
-        />
-      </q-tabs>
-
-      <q-toolbar>
-        <q-btn
-          flat
-          round
-          dense
-          icon="menu"
-          @click="leftDrawer = !leftDrawer"
-        />
-        <q-toolbar-title>
-          Footer
-        </q-toolbar-title>
-      </q-toolbar>
-    </q-footer>
-
-    <!-- (Optional) A Drawer; you can add one more with side="right" or change this one's side -->
-    <q-drawer
-      v-model="leftDrawer"
-      side="left"
-      bordered
-      content-class="bg-grey-2"
-    >
-      <!-- QScrollArea is optional -->
-      <q-scroll-area class="fit q-pa-sm">
-        <!-- Content here -->
-      </q-scroll-area>
-    </q-drawer>
-
-    <q-page-container>
-      <!-- This is where pages get injected -->
-      <router-view />
-    </q-page-container>
-
-  </q-layout>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue'
-export default defineComponent({
-  // name: 'LayoutName',
-
-  data (): { leftDrawer: boolean } {
-    return {
-      leftDrawer: false
-    }
-  }
-})
-</script>
diff --git a/app-vite/templates/app/ts-options/page.vue b/app-vite/templates/app/ts-options/page.vue
deleted file mode 100644
index d8fde11b6d6..00000000000
--- a/app-vite/templates/app/ts-options/page.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-  <q-page padding>
-    <!-- content -->
-  </q-page>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue'
-export default defineComponent({
-  // name: 'PageName'
-})
-</script>
diff --git a/app-vite/templates/app/ts-composition-setup/component.vue b/app-vite/templates/app/ts/component.vue
similarity index 100%
rename from app-vite/templates/app/ts-composition-setup/component.vue
rename to app-vite/templates/app/ts/component.vue
diff --git a/app-vite/templates/app/ts-composition-setup/layout.vue b/app-vite/templates/app/ts/layout.vue
similarity index 100%
rename from app-vite/templates/app/ts-composition-setup/layout.vue
rename to app-vite/templates/app/ts/layout.vue
diff --git a/app-vite/templates/app/ts-composition-setup/page.vue b/app-vite/templates/app/ts/page.vue
similarity index 100%
rename from app-vite/templates/app/ts-composition-setup/page.vue
rename to app-vite/templates/app/ts/page.vue
diff --git a/app-vite/templates/app/ts/store.ts b/app-vite/templates/app/ts/store.ts
new file mode 100644
index 00000000000..62ef5623617
--- /dev/null
+++ b/app-vite/templates/app/ts/store.ts
@@ -0,0 +1,11 @@
+import { defineStore, acceptHMRUpdate } from 'pinia';
+
+export const useMyStore = defineStore('myStore', {
+  state: () => ({}),
+  getters: {},
+  actions: {}
+});
+
+if (import.meta.hot) {
+  import.meta.hot.accept(acceptHMRUpdate(useMyStore, import.meta.hot));
+}
diff --git a/app-vite/templates/app/ts/store/pinia.ts b/app-vite/templates/app/ts/store/pinia.ts
deleted file mode 100644
index 0e99e1bcc87..00000000000
--- a/app-vite/templates/app/ts/store/pinia.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { defineStore, acceptHMRUpdate } from 'pinia';
-
-export const useCounterStore = defineStore('counter', {
-  state: () => ({
-    counter: 0,
-  }),
-
-  getters: {
-    doubleCount (state) {
-      return state.counter * 2;
-    },
-  },
-
-  actions: {
-    increment () {
-      this.counter++;
-    },
-  },
-});
-
-if (import.meta.hot) {
-  import.meta.hot.accept(acceptHMRUpdate(useCounterStore, import.meta.hot));
-}