diff --git a/sandpack-react/src/templates/index.tsx b/sandpack-react/src/templates/index.tsx index 526de8c34..e8bd8e119 100644 --- a/sandpack-react/src/templates/index.tsx +++ b/sandpack-react/src/templates/index.tsx @@ -8,6 +8,7 @@ import { VANILLA_TEMPLATE } from "./vanilla"; import { VANILLA_TYPESCRIPT_TEMPLATE } from "./vanilla-typescript"; import { VUE_TEMPLATE } from "./vue"; import { VUE_TEMPLATE_3 } from "./vue3"; +import { VUE_TS_TEMPLATE_3 } from "./vue3-ts"; export { ANGULAR_TEMPLATE } from "./angular"; export { REACT_TEMPLATE } from "./react"; export { REACT_TYPESCRIPT_TEMPLATE } from "./react-typescript"; @@ -18,6 +19,7 @@ export { VANILLA_TEMPLATE } from "./vanilla"; export { VANILLA_TYPESCRIPT_TEMPLATE } from "./vanilla-typescript"; export { VUE_TEMPLATE } from "./vue"; export { VUE_TEMPLATE_3 } from "./vue3"; +export { VUE_TS_TEMPLATE_3 } from "./vue3-ts"; /** * @hidden @@ -29,6 +31,7 @@ export const SANDBOX_TEMPLATES = { 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/sandpack-react/src/templates/vue.ts b/sandpack-react/src/templates/vue.ts index 3cd0052f5..009f85be7 100644 --- a/sandpack-react/src/templates/vue.ts +++ b/sandpack-react/src/templates/vue.ts @@ -5,33 +5,27 @@ export const VUE_TEMPLATE = { files: { "/src/App.vue": { code: ` +import Vue from 'vue'; - -`, +export default Vue.extend({ + name: "App", + data() { + return { + msg: "World", + }; + }, +}); +`, }, "/src/main.js": { code: `import Vue from "vue"; import App from "./App.vue"; - Vue.config.productionTip = false; new Vue({ @@ -64,11 +58,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/sandpack-react/src/templates/vue3-ts.ts b/sandpack-react/src/templates/vue3-ts.ts new file mode 100644 index 000000000..df083ee9d --- /dev/null +++ b/sandpack-react/src/templates/vue3-ts.ts @@ -0,0 +1,108 @@ +/** + * @hidden + */ +export const VUE_TS_TEMPLATE_3 = { + files: { + "/src/App.vue": { + code: ` + +`, + }, + "/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: ` + + + + + + codesandbox + + + +
+ + + +`, + }, + "/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/sandpack-react/src/templates/vue3.ts b/sandpack-react/src/templates/vue3.ts index 26bf46cbf..ec5ed5a0b 100644 --- a/sandpack-react/src/templates/vue3.ts +++ b/sandpack-react/src/templates/vue3.ts @@ -4,40 +4,20 @@ export const VUE_TEMPLATE_3 = { files: { "/src/App.vue": { - code: ` - -