What problem does this feature solve?

I tried to report several issues to different libraries fro Vue 3, but every Git repository require some Link to minimal reproduction. And that is the problem. I am not so experienced developer. I can develop applications, I can understand when some lib has problem, but "Minimal reproduction creation" is a real headache.

Recommended SFC Playground is using JS, and doesn't allow create files other than vue components. And no info how to add npm packages and etc. It is good for very simple cases, but error and bugs usually need more.

I studied many Codesandbox sandboxes and find nothing that use Vue 3, TypeScript, Composition API and Script setup. Some of them using JS, some TSX, almost all of them use DefineComponent but not Script setup.

Maximum I could get - https://codesandbox.io/s/rolling-vue3-ts-script-setup-33sll. I forked it from someone else. It is more or less what I want to have. But there are problems even in the small sandbox.

1. Module '"/sandbox/src/components/HelloWorld.vue"' has no default export.Vetur(1192) I couldn't find were this Vetur come from. There is no Vetur in package.json. Why Vetur if we need Volar. And I don't know how to change it.
2. Parsing error: Unexpected token: const props = defineProps<{

And how I can show complex TS problems when even simple app is not working properly.

When you create new Sandbox it is possible to select template. There is Vue 3 template but it is for JS, and not using Script Setup. And stackblitz.com Vue3 template has identical problem.

Having professionally made Sandbox for this new stack (Vue3, Script setup SFC, Composition API, TypeScript) will be very helpfull for simple developers. Because trying to report an issue now is a big pain.

And it will be helpful not only to report bug and issues for VueJS itself, but also for a big number of relevant libraries. Just now I have some issues to report in Vite, Vuelidate, vue-i18n-next, but I cant create this minimal reproduction.

I think it would be fair to create Minimum reproduction playground before asking for Minimum reproduction.

What does the proposed API look like?

Not every feature request has proposed API, why is this field mandatory?

You don't necessarily need to use Codesandbox or Stackblitz to create a reproduction. You can scaffold a new Vue 3 project with TypeScript and <script setup>, using either of the following commands. Then, edit the project to recreate the problem, upload to GitHub, and share a link here.

npm init vue my-project

Example run:

$ npm init vue my-project
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Cypress for testing? … No / Yes

Scaffolding project in /Users/tony/src/tmp/my-project...

Done. Now run:

  cd my-project
  npm install
  npm run dev

npm init vite my-project -- --template vue-ts

Example run:

$ npm init vite my-project -- --template vue-ts

Scaffolding project in /Users/tony/src/tmp/my-project...

Done. Now run:

  cd my-project
  npm install
  npm run dev

Thanks. Will do this way.

Yeah why does this not exist. Sharing via github is a bit tedious. I can't figure out the idiosyncracies of codesandbox either...