diff --git a/src/Repl.vue b/src/Repl.vue
index 9f6c6386..10cbce0a 100644
--- a/src/Repl.vue
+++ b/src/Repl.vue
@@ -75,8 +75,8 @@ sfcOptions.script.fs = {
store.init()
-const editorSlotName = computed(() => props.layoutReverse ? 'right' : 'left')
-const outputSlotName = computed(() => props.layoutReverse ? 'left' : 'right')
+const editorSlotName = computed(() => (props.layoutReverse ? 'right' : 'left'))
+const outputSlotName = computed(() => (props.layoutReverse ? 'left' : 'right'))
provide('store', store)
provide('autoresize', props.autoResize)
diff --git a/src/store.ts b/src/store.ts
index d9b8d143..2b03b5e7 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -9,25 +9,14 @@ import {
} from 'vue/compiler-sfc'
import { OutputModes } from './output/types'
import type { editor } from 'monaco-editor-core'
+import welcomeCode from './template/welcome.vue?raw'
+import newFileCode from './template/new-file.vue?raw'
const defaultMainFile = 'src/App.vue'
export const importMapFile = 'import-map.json'
export const tsconfigFile = 'tsconfig.json'
-const welcomeCode = `
-
-
-
- {{ msg }}
-
-
-`.trim()
-
const tsconfig = {
compilerOptions: {
allowJs: true,
@@ -254,7 +243,7 @@ export class ReplStore implements Store {
addFile(fileOrFilename: string | File): void {
const file =
typeof fileOrFilename === 'string'
- ? new File(fileOrFilename)
+ ? new File(fileOrFilename, newFileCode)
: fileOrFilename
this.state.files[file.filename] = file
if (!file.hidden) this.setActive(file.filename)
diff --git a/src/template/new-file.vue b/src/template/new-file.vue
new file mode 100644
index 00000000..8bc6805e
--- /dev/null
+++ b/src/template/new-file.vue
@@ -0,0 +1,7 @@
+
+
+
+
+
+
+
diff --git a/src/template/welcome.vue b/src/template/welcome.vue
new file mode 100644
index 00000000..5b15d82c
--- /dev/null
+++ b/src/template/welcome.vue
@@ -0,0 +1,10 @@
+
+
+
+ {{ msg }}
+
+