Find an online sandbox Vuetify 3 template for creating a minimal reproducible example

Question

I ran into a problem while using Vuetify 3 that I wanted to ask on Stack Overflow, but in order to do that I needed to create a minimally reproducible example. Where can I find a template that I can refer to?

What I tried

• I tried creating my own example on codesandbox.io, but since I don't use the sandbox very often it took me a long time to get it to work.
• I tried googling to find an existing example but couldn't find one.
• I tried using the example provided in the Vuetify documentation, but I can't seem to save and share the modified state. [Update: This is incorrect, as the accepted answer explains. ]

Answer 1

Here is an official playground, which is probably the easiest way if you want to use SFCs. The content of the playground is encoded into the URL, so you can save it by saving the URL.

Or you can create a snippet using CDN Vue and Vuetify:

const { createApp, ref } = Vue
const { createVuetify } = Vuetify
const vuetify = createVuetify()
const app = {
  template: `
    <v-app>
      <v-main>
        
      </v-main>
    </v-app>
  `,
  setup(){
    return {
      
    }
  }
}
createApp(app).use(vuetify).mount('#app')

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.css" />
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
<div id="app"></div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.js"></script>