vueuse
diff --git a/‎app.vue renamed to ‎app/app.vue
Copy file name to clipboard b/‎app.vue renamed to ‎app/app.vue
Copy file name to clipboard
diff --git a/‎app/layouts/default.vue
Copy file name to clipboardExpand all lines: app/layouts/default.vue
+11-1Lines changed: 11 additions & 1 deletion b/‎app/layouts/default.vue
Copy file name to clipboardExpand all lines: app/layouts/default.vue
+11-1Lines changed: 11 additions & 1 deletion
diff --git a/‎app/pages/index.vue
Copy file name to clipboardExpand all lines: app/pages/index.vue
+19-14Lines changed: 19 additions & 14 deletions b/‎app/pages/index.vue
Copy file name to clipboardExpand all lines: app/pages/index.vue
+19-14Lines changed: 19 additions & 14 deletions
diff --git a/‎app/utils/transformer.ts
Copy file name to clipboard
+10Lines changed: 10 additions & 0 deletions b/‎app/utils/transformer.ts
Copy file name to clipboard
+10Lines changed: 10 additions & 0 deletions
@@ -46,6 +46,14 @@ const colorMode = useColorMode()
 function toggleColorMode() {
   colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
 }
+
+const ssr = useRouteQuery<string, boolean>('ssr', 'false', {
+  transform: stringToBooleanTransformer,
+})
+
+const prod = useRouteQuery<string, boolean>('prod', 'false', {
+  transform: stringToBooleanTransformer,
+})
 </script>
 
 <template>
@@ -56,6 +64,8 @@ function toggleColorMode() {
       </div>
 
       <div class="flex gap-2 items-center">
+        <USwitch v-model="ssr" label="SSR" />
+        <USwitch v-model="prod" label="Prod" />
         <USelectMenu v-model="vueUseVersion" :items="vueUseVersionsSorted" class="w-32" icon="i-logos-vueuse" :loading="loadingVersions" />
         <USelectMenu v-model="vueVersion" :items="vueVersionsSorted" class="w-32" icon="i-logos-vue" :loading="loadingVersions" />
         <UButton icon="i-lucide-refresh-ccw" size="md" color="primary" variant="soft" @click="fetchVersions" />
@@ -66,7 +76,7 @@ function toggleColorMode() {
           @click="toggleColorMode"
         />
 
-        <UTooltip text="Open on GitHub" :kbds="['meta', 'G']">
+        <UTooltip text="Open on GitHub">
           <UButton
             color="neutral"
             variant="ghost"
 
@@ -4,19 +4,20 @@ import type { ShallowRef } from 'vue'
 import { mergeImportMap, Repl, useStore, useVueImportMap } from '@vue/repl'
 import MonacoEditor from '@vue/repl/monaco-editor'
 
-const showOutput = useRouteQuery<string, boolean>('showOutput', 'false', { transform: {
-  get(value) {
-    if (value === 'false' || value === '0')
-      return false
-    else return Boolean(value)
-  },
-  set(value) {
-    return String(value)
-  },
-} })
+const showOutput = useRouteQuery<string, boolean>('showOutput', 'false', {
+  transform: stringToBooleanTransformer,
+})
 
 const outputMode = useRouteQuery<OutputModes, OutputModes>('outputMode', 'preview')
 
+const ssr = useRouteQuery<string, boolean>('ssr', 'false', {
+  transform: stringToBooleanTransformer,
+})
+
+const prod = useRouteQuery<string, boolean>('prod', 'false', {
+  transform: stringToBooleanTransformer,
+})
+
 const hash = useRouteHash(undefined, { mode: 'replace' })
 
 const {
@@ -73,13 +74,14 @@ injectedVueVersion.value = vueVersion.value ?? 'latest'
 // persist state to URL hash
 watchEffect(() => hash.value = store.serialize())
 
-// production mode is enabled
-productionMode.value = true
-
 watch(() => injectedVueVersion.value, (newVersion) => {
   vueVersion.value = newVersion
 })
 
+watch(() => prod.value, (newProd) => {
+  productionMode.value = newProd
+}, { immediate: true })
+
 const colorMode = useColorMode()
 
 const theme = computed(() => {
@@ -105,6 +107,9 @@ const previewOptions = {
 
 <template>
   <client-only>
-    <Repl :store="store" :editor="MonacoEditor" :show-compile-output="true" :theme="theme" :preview-theme="true" :preview-options="previewOptions" />
+    <Repl
+      :store="store" :editor="MonacoEditor" :show-compile-output="true" :theme="theme" :preview-theme="true"
+      :preview-options="previewOptions" :ssr="ssr"
+    />
   </client-only>
 </template>
@@ -0,0 +1,10 @@
+export const stringToBooleanTransformer = {
+  get(value) {
+    if (value === 'false' || value === '0')
+      return false
+    else return Boolean(value)
+  },
+  set(value) {
+    return String(value)
+  },
+}