diff --git a/package.json b/package.json
index 256d71d..b9abb63 100644
--- a/package.json
+++ b/package.json
@@ -72,7 +72,7 @@
     "@codemirror/state": "~0.19.9",
     "@codemirror/stream-parser": "~0.19.9",
     "@codemirror/view": "~0.19.48",
-    "@codesandbox/sandpack-client": "^1.12.1",
+    "@codesandbox/sandpack-client": "^1.17.1",
     "@codesandbox/sandpack-themes": "^1.17.0",
     "@stitches/core": "^1.2.8",
     "clean-set": "^1.1.2",
@@ -81,12 +81,12 @@
     "lz-string": "^1.4.4"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.2",
+    "@babel/core": "^7.20.5",
     "@babel/plugin-transform-runtime": "^7.19.6",
     "@babel/plugin-transform-typescript": "^7.20.2",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-typescript": "^7.18.6",
-    "@commitlint/cli": "^17.2.0",
+    "@commitlint/cli": "^17.3.0",
     "@commitlint/config-conventional": "^17.3.0",
     "@storybook/addon-actions": "~6.4.22",
     "@storybook/addon-docs": "~6.4.22",
@@ -94,18 +94,18 @@
     "@storybook/addon-links": "~6.4.22",
     "@storybook/builder-vite": "0.1.37",
     "@storybook/vue3": "~6.4.22",
-    "@swc/core": "^1.3.19",
+    "@swc/core": "^1.3.21",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/user-event": "^14.4.3",
     "@testing-library/vue": "^6.6.1",
     "@types/lodash.isequal": "^4.5.6",
     "@types/lz-string": "^1.3.34",
-    "@types/node": "^18.11.9",
-    "@typescript-eslint/eslint-plugin": "^5.44.0",
-    "@typescript-eslint/parser": "^5.44.0",
+    "@types/node": "^18.11.10",
+    "@typescript-eslint/eslint-plugin": "^5.45.0",
+    "@typescript-eslint/parser": "^5.45.0",
     "@vitejs/plugin-vue": "^3.2.0",
     "@vitejs/plugin-vue-jsx": "^2.1.1",
-    "@vitest/ui": "^0.25.2",
+    "@vitest/ui": "^0.25.3",
     "@vue/babel-plugin-jsx": "^1.1.1",
     "@vue/eslint-config-typescript": "^11.0.2",
     "autoprefixer": "^10.4.13",
@@ -121,14 +121,14 @@
     "eslint-config-airbnb-typescript": "^17.0.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jsx-a11y": "^6.6.1",
-    "eslint-plugin-vue": "^9.7.0",
+    "eslint-plugin-vue": "^9.8.0",
     "husky": "^8.0.2",
     "jsdom": "^20.0.3",
-    "lint-staged": "^13.0.3",
-    "npm": "^9.1.2",
+    "lint-staged": "^13.0.4",
+    "npm": "^9.1.3",
     "postcss": "^8.4.19",
-    "postcss-cli": "^10.0.0",
-    "postcss-loader": "^7.0.1",
+    "postcss-cli": "^10.1.0",
+    "postcss-loader": "^7.0.2",
     "postcss-nested": "^6.0.0",
     "rimraf": "^3.0.2",
     "shelljs": "^0.8.5",
@@ -142,8 +142,8 @@
     "vite": "^3.2.4",
     "vite-plugin-dts": "^1.7.1",
     "vite-plugin-windicss": "^1.8.8",
-    "vitest": "^0.25.2",
-    "vue-tsc": "^1.0.9"
+    "vitest": "^0.25.3",
+    "vue-tsc": "^1.0.10"
   },
   "peerDependencies": {
     "vue": "^3.2.0"
diff --git a/playground/package.json b/playground/package.json
index a293bbf..71c6571 100644
--- a/playground/package.json
+++ b/playground/package.json
@@ -14,10 +14,10 @@
     "vue-router": "^4.1.6"
   },
   "devDependencies": {
-    "@iconify-json/carbon": "^1.1.10",
-    "@unocss/reset": "^0.46.5",
+    "@iconify-json/carbon": "^1.1.11",
+    "@unocss/reset": "^0.47.4",
     "cross-env": "^7.0.3",
-    "unocss": "^0.46.5",
+    "unocss": "^0.47.4",
     "vite-plugin-pages": "^0.27.1",
     "vue-loader": "^17.0.1"
   }
diff --git a/src/templates/index.ts b/src/templates/index.ts
index 814bb55..8f9cee6 100644
--- a/src/templates/index.ts
+++ b/src/templates/index.ts
@@ -7,7 +7,9 @@ import { TEST_TYPESCRIPT_TEMPLATE } from './tests-ts';
 import { VANILLA_TEMPLATE } from './vanilla';
 import { VANILLA_TYPESCRIPT_TEMPLATE } from './vanilla-typescript';
 import { VUE_TEMPLATE } from './vue';
+import { VUE_TS_TEMPLATE } from './vue-ts';
 import { VUE_TEMPLATE_3 } from './vue3';
+import { VUE_TS_TEMPLATE_3 } from './vue3-ts';
 
 export { ANGULAR_TEMPLATE } from './angular';
 export { REACT_TEMPLATE } from './react';
@@ -18,7 +20,9 @@ export { TEST_TYPESCRIPT_TEMPLATE } from './tests-ts';
 export { VANILLA_TEMPLATE } from './vanilla';
 export { VANILLA_TYPESCRIPT_TEMPLATE } from './vanilla-typescript';
 export { VUE_TEMPLATE } from './vue';
+export { VUE_TS_TEMPLATE } from './vue-ts';
 export { VUE_TEMPLATE_3 } from './vue3';
+export { VUE_TS_TEMPLATE_3 } from './vue3-ts';
 
 /**
  * @hidden
@@ -27,9 +31,11 @@ export const SANDBOX_TEMPLATES = {
   react: REACT_TEMPLATE,
   'react-ts': REACT_TYPESCRIPT_TEMPLATE,
   vue: VUE_TEMPLATE,
+  'vue-ts': VUE_TS_TEMPLATE,
   vanilla: VANILLA_TEMPLATE,
   'vanilla-ts': VANILLA_TYPESCRIPT_TEMPLATE,
   vue3: VUE_TEMPLATE_3,
+  'vue3-ts': VUE_TS_TEMPLATE_3,
   angular: ANGULAR_TEMPLATE,
   svelte: SVELTE_TEMPLATE,
   solid: SOLID_TEMPLATE,
diff --git a/src/templates/vue-ts.ts b/src/templates/vue-ts.ts
new file mode 100644
index 0000000..d471e58
--- /dev/null
+++ b/src/templates/vue-ts.ts
@@ -0,0 +1,141 @@
+/**
+ * @hidden
+ */
+export const VUE_TS_TEMPLATE = {
+  files: {
+    '/src/App.vue': {
+      code: `<template>
+  <div id="app">
+    <h1>Hello {{ msg }}</h1>
+    <button @click="add">add</button>
+    <p>count: {{ count }}</p>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+
+export default Vue.extend({
+  name: "App",
+  data() {
+    return {
+      msg: "",
+      count: 1,
+    };
+  },
+  methods: {
+    add() {
+      this.count += 1;
+    },
+  },
+  mounted() {
+    this.msg = "world";
+  },
+});
+</script>`,
+    },
+    '/src/main.ts': {
+      code: `import Vue from "vue";
+import App from "./App.vue";
+Vue.config.productionTip = false;
+new Vue({
+  render: h => h(App)
+}).$mount("#app");
+`,
+    },
+    '/public/index.html': {
+      code: `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
+    <title>codesandbox</title>
+  </head>
+  <body>
+    <noscript>
+      <strong
+        >We're sorry but codesandbox doesn't work properly without JavaScript
+        enabled. Please enable it to continue.</strong
+      >
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
+`,
+    },
+    '/src/shims-vue.d.ts': `declare module '*.vue' {
+  import Vue from 'vue'
+  export default Vue
+}`,
+    '/package.json': {
+      code: JSON.stringify({
+        name: 'vue-ts',
+        version: '0.1.0',
+        private: true,
+        main: '/src/main.ts',
+        scripts: {
+          serve: 'vue-cli-service serve',
+          build: 'vue-cli-service build',
+        },
+        dependencies: {
+          'core-js': '^3.26.1',
+          vue: '^2.7.14',
+        },
+        devDependencies: {
+          '@vue/cli-plugin-babel': '^5.0.8',
+          '@vue/cli-plugin-typescript': '^5.0.8',
+          '@vue/cli-service': '^5.0.8',
+          typescript: '^4.9.3',
+          'vue-template-compiler': '^2.7.14',
+        },
+      }),
+    },
+    '/tsconfig.json': {
+      code: JSON.stringify({
+        compilerOptions: {
+          target: 'esnext',
+          module: 'esnext',
+          strict: true,
+          jsx: 'preserve',
+          moduleResolution: 'node',
+          skipLibCheck: true,
+          esModuleInterop: true,
+          allowSyntheticDefaultImports: true,
+          forceConsistentCasingInFileNames: true,
+          useDefineForClassFields: true,
+          sourceMap: true,
+          baseUrl: '.',
+          types: [
+            'webpack-env',
+          ],
+          paths: {
+            '@/*': [
+              'src/*',
+            ],
+          },
+          lib: [
+            'esnext',
+            'dom',
+            'dom.iterable',
+            'scripthost',
+          ],
+        },
+        include: [
+          'src/**/*.ts',
+          'src/**/*.tsx',
+          'src/**/*.vue',
+          'tests/**/*.ts',
+          'tests/**/*.tsx',
+        ],
+        exclude: [
+          'node_modules',
+        ],
+      }, null, 2),
+    },
+  },
+  main: '/src/App.vue',
+  environment: 'vue-cli',
+};
diff --git a/src/templates/vue.ts b/src/templates/vue.ts
index aa7d7af..1a6e2a3 100644
--- a/src/templates/vue.ts
+++ b/src/templates/vue.ts
@@ -5,26 +5,34 @@ export const VUE_TEMPLATE = {
   files: {
     '/src/App.vue': {
       code: `<template>
-  <main id="app">
-    <h1>Hello World</h1>
-  </main>
+  <div id="app">
+    <h1>Hello {{ msg }}</h1>
+    <button @click="add">add</button>
+    <p>count: {{ count }}</p>
+  </div>
 </template>
+
 <script>
-export default {
+import Vue from 'vue';
+
+export default Vue.extend({
   name: "App",
-};
-</script>
-<style>
-#app {
-  font-family: "Avenir", Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
-</style>
-`,
+  data() {
+    return {
+      msg: "",
+      count: 1,
+    };
+  },
+  methods: {
+    add() {
+      this.count += 1;
+    },
+  },
+  mounted() {
+    this.msg = "world";
+  },
+});
+</script>`,
     },
     '/src/main.js': {
       code: `import Vue from "vue";
@@ -60,11 +68,23 @@ new Vue({
     },
     '/package.json': {
       code: JSON.stringify({
+        name: 'vue',
+        version: '0.1.0',
+        private: true,
+        main: '/src/main.js',
+        scripts: {
+          serve: 'vue-cli-service serve',
+          build: 'vue-cli-service build',
+        },
         dependencies: {
-          vue: '^2.6.11',
-          '@vue/cli-plugin-babel': '4.1.1',
+          'core-js': '^3.26.1',
+          vue: '^2.7.14',
+        },
+        devDependencies: {
+          '@vue/cli-plugin-babel': '^5.0.8',
+          '@vue/cli-service': '^5.0.8',
+          'vue-template-compiler': '^2.7.14',
         },
-        main: '/src/main.js',
       }),
     },
   },
diff --git a/src/templates/vue3-ts.ts b/src/templates/vue3-ts.ts
new file mode 100644
index 0000000..bd80029
--- /dev/null
+++ b/src/templates/vue3-ts.ts
@@ -0,0 +1,127 @@
+/**
+ * @hidden
+ */
+export const VUE_TS_TEMPLATE_3 = {
+  files: {
+    '/src/App.vue': {
+      code: `<script setup lang="ts">
+import { ref } from 'vue';
+
+const msg = ref<string>('world');
+const count = ref<number>(1);
+
+const add = (): void => {
+  count.value += 1;
+};
+</script>
+
+<template>
+  <h1>Hello {{ msg }}</h1>
+  <button @click="add">add</button>
+  <p>count: {{ count }}</p>
+</template>`,
+    },
+    '/src/main.ts': {
+      code: `import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')
+`,
+    },
+    '/src/shims-vue.d.ts': `/* eslint-disable */
+declare module "*.vue" {
+  import type { DefineComponent } from "vue";
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}`,
+    '/public/index.html': {
+      code: `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <title>codesandbox</title>
+  </head>
+  <body>
+    <noscript>
+      <strong
+        >We're sorry but codesandbox doesn't work properly without JavaScript
+        enabled. Please enable it to continue.</strong
+      >
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
+`,
+    },
+    '/package.json': {
+      code: JSON.stringify({
+        name: 'vue3-ts',
+        version: '0.1.0',
+        private: true,
+        main: '/src/main.ts',
+        scripts: {
+          serve: 'vue-cli-service serve',
+          build: 'vue-cli-service build',
+        },
+        dependencies: {
+          'core-js': '^3.26.1',
+          vue: '^3.2.45',
+        },
+        devDependencies: {
+          '@vue/cli-plugin-babel': '^5.0.8',
+          '@vue/cli-plugin-typescript': '^5.0.8',
+          '@vue/cli-service': '^5.0.8',
+          typescript: '^4.9.3',
+        },
+      }),
+    },
+    '/tsconfig.json': {
+      code: JSON.stringify({
+        compilerOptions: {
+          target: 'esnext',
+          module: 'esnext',
+          strict: true,
+          jsx: 'preserve',
+          moduleResolution: 'node',
+          experimentalDecorators: true,
+          skipLibCheck: true,
+          esModuleInterop: true,
+          allowSyntheticDefaultImports: true,
+          forceConsistentCasingInFileNames: true,
+          useDefineForClassFields: true,
+          sourceMap: false,
+          baseUrl: '.',
+          types: [
+            'webpack-env',
+          ],
+          paths: {
+            '@/*': [
+              'src/*',
+            ],
+          },
+          lib: [
+            'esnext',
+            'dom',
+            'dom.iterable',
+            'scripthost',
+          ],
+        },
+        include: [
+          'src/**/*.ts',
+          'src/**/*.tsx',
+          'src/**/*.vue',
+          'tests/**/*.ts',
+          'tests/**/*.tsx',
+        ],
+        exclude: [
+          'node_modules',
+        ],
+      }),
+    },
+  },
+  main: '/src/App.vue',
+  environment: 'vue-cli',
+};
diff --git a/src/templates/vue3.ts b/src/templates/vue3.ts
index b0f268d..0ba0ce8 100644
--- a/src/templates/vue3.ts
+++ b/src/templates/vue3.ts
@@ -4,34 +4,22 @@
 export const VUE_TEMPLATE_3 = {
   files: {
     '/src/App.vue': {
-      code: `<template>
-  <main id="app">
-    <h1>{{ helloWorld }}</h1>
-  </main>
-</template>
+      code: `<script setup>
+import { ref } from 'vue';
 
-<script>
-import { ref } from "vue";
-export default {
-   name: "App",
-   setup() {
-      const helloWorld = ref("Hello World");
-      return { helloWorld };
-   }
+const msg = ref('world');
+const count = ref(1);
+
+const add = () => {
+  count.value += 1;
 };
 </script>
 
-<style>
-#app {
-font-family: Avenir, Helvetica, Arial, sans-serif;
--webkit-font-smoothing: antialiased;
--moz-osx-font-smoothing: grayscale;
-text-align: center;
-color: #2c3e50;
-margin-top: 60px;
-}
-</style>
-`,
+<template>
+  <h1>Hello {{ msg }}</h1>
+  <button @click="add">add</button>
+  <p>count: {{ count }}</p>
+</template>`,
     },
     '/src/main.js': {
       code: `import { createApp } from 'vue'
@@ -64,12 +52,22 @@ createApp(App).mount('#app')
     },
     '/package.json': {
       code: JSON.stringify({
+        name: 'vue3',
+        version: '0.1.0',
+        private: true,
+        main: '/src/main.js',
+        scripts: {
+          serve: 'vue-cli-service serve',
+          build: 'vue-cli-service build',
+        },
         dependencies: {
-          'core-js': '^3.6.5',
-          vue: '^3.0.0-0',
-          '@vue/cli-plugin-babel': '4.5.0',
+          'core-js': '^3.26.1',
+          vue: '^3.2.45',
+        },
+        devDependencies: {
+          '@vue/cli-plugin-babel': '^5.0.8',
+          '@vue/cli-service': '^5.0.8',
         },
-        main: '/src/main.js',
       }),
     },
   },