Support for Vue 3's <script setup>

The Vue 3 starter does not support the <script setup> block, and renders an error message:

Script missing

Example usage of <script setup>:

<script setup>
import { ref } from 'vue'

const msg = ref('Hello World!')
</script>

<template>
  <h1>{{ msg }}</h1>
  <input v-model="msg">
</template>

StackBlitz demo

For reference, here’s a working Vue SFC playground demo.

A workaround is to use a Node starter with Vite installed.

[Theiaz]

Any updates on this?

Bump. Had the same problem today. Blocker for me to use stackblitz more frequently.

Additionally the error message Script missing is not that meaningful.

[Bobakanoosh]

StackBlitz seems to be the only online code sandbox that supports multiple .vue files (JSFiddle doesn’t allow .vue, CodePen supports .vue but only lets you create one file on the free plan, repl.it is kind of a mess to configure for a simple Vue project).

It would be awesome if it could support <script setup>, since that seems to be the future of Vue, and imo the most concise and elegant way to define components. I’ve been looking for a place to host vue code to demonstrate issues I’m asking about online (e.g. on StackOverflow).

https://sfc.vuejs.org/

This does work, however it’s pretty simplistic. Definitely meets the “post on stackoverflow” necessity, but not the “use as an online project” necessity.