diff --git a/README.md b/README.md
index 15b45410..be041995 100644
--- a/README.md
+++ b/README.md
@@ -22,10 +22,19 @@ import '@vue/repl/style.css'
import { watchEffect } from 'vue'
import { Repl, ReplStore } from '@vue/repl'
+// retrieve some configuration options from the URL
+const query = new URLSearchParams(location.search)
+
const store = new ReplStore({
// initialize repl with previously serialized state
serializedState: location.hash.slice(1),
+ // starts on the output pane (mobile only) if the URL has a showOutput query
+ showOutput: query.has('showOutput'),
+ // starts on a different tab on the output pane if the URL has a outputMode query
+ // and default to the "preview" tab
+ outputMode: (query.get('outputMode') || 'preview')
+
// specify the default URL to import Vue runtime from in the sandbox
// default is the CDN link from unpkg.com with version matching Vue's version
// from peerDependency
diff --git a/src/SplitPane.vue b/src/SplitPane.vue
index d8bfbfe9..274445ff 100644
--- a/src/SplitPane.vue
+++ b/src/SplitPane.vue
@@ -1,5 +1,6 @@
diff --git a/src/output/types.ts b/src/output/types.ts
new file mode 100644
index 00000000..b0cfaaf0
--- /dev/null
+++ b/src/output/types.ts
@@ -0,0 +1 @@
+export type OutputModes = 'preview' | 'js' | 'css' | 'ssr'
diff --git a/src/store.ts b/src/store.ts
index 5869aa70..9e1e6874 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -7,6 +7,7 @@ import {
SFCAsyncStyleCompileOptions,
SFCTemplateCompileOptions
} from 'vue/compiler-sfc'
+import { OutputModes } from './output/types'
const defaultMainFile = 'App.vue'
@@ -66,15 +67,22 @@ export class ReplStore implements Store {
state: StoreState
compiler = defaultCompiler
options?: SFCOptions
+ initialShowOutput: boolean
+ initialOutputMode: OutputModes | string
private defaultVueRuntimeURL: string
private pendingCompiler: Promise | null = null
constructor({
serializedState = '',
- defaultVueRuntimeURL = `https://unpkg.com/@vue/runtime-dom@${version}/dist/runtime-dom.esm-browser.js`
+ defaultVueRuntimeURL = `https://unpkg.com/@vue/runtime-dom@${version}/dist/runtime-dom.esm-browser.js`,
+ showOutput = false,
+ outputMode = 'preview'
}: {
serializedState?: string
+ showOutput?: boolean
+ // loose type to allow getting from the URL without inducing a typing error
+ outputMode?: OutputModes | string
defaultVueRuntimeURL?: string
} = {}) {
let files: StoreState['files'] = {}
@@ -91,6 +99,8 @@ export class ReplStore implements Store {
}
this.defaultVueRuntimeURL = defaultVueRuntimeURL
+ this.initialShowOutput = showOutput
+ this.initialOutputMode = outputMode
let mainFile = defaultMainFile
if (!files[mainFile]) {
diff --git a/test/main.ts b/test/main.ts
index 107b0762..a97cc1e8 100644
--- a/test/main.ts
+++ b/test/main.ts
@@ -5,8 +5,11 @@ import { Repl, ReplStore } from '../src'
const App = {
setup() {
+ const query = new URLSearchParams(location.search)
const store = new ReplStore({
serializedState: location.hash.slice(1),
+ showOutput: query.has('so'),
+ outputMode: query.get('om') || 'preview',
defaultVueRuntimeURL: import.meta.env.PROD
? undefined
: `${location.origin}/src/vue-dev-proxy`