diff --git a/packages/sfc-playground/src/output/Output.vue b/packages/sfc-playground/src/output/Output.vue
index 66ee51bb0..fe6afe029 100644
--- a/packages/sfc-playground/src/output/Output.vue
+++ b/packages/sfc-playground/src/output/Output.vue
@@ -20,9 +20,9 @@ import CodeMirror from '../codemirror/CodeMirror.vue'
 import { store } from '../store'
 import { ref } from 'vue'
 
-type Modes = 'preview' | 'js' | 'css' | 'ssr'
+const modes = ['preview', 'js', 'css', 'ssr'] as const
 
-const modes: Modes[] = ['preview', 'js', 'css', 'ssr']
+type Modes = typeof modes[number]
 const mode = ref<Modes>('preview')
 </script>