Cari templat Vuetify 3 kotak pasir dalam talian untuk mencipta contoh minimum yang boleh dihasilkan semula

Question

Saya menghadapi masalah semasa menggunakan Vuetify 3 yang ingin saya tanyakan pada Stack Overflow, tetapi untuk melakukannya, saya perlu mencipta contoh yang boleh dihasilkan secara minimum. Di manakah saya boleh mencari templat yang boleh saya rujuk?

Apa yang saya cuba

• Saya cuba mencipta contoh saya sendiri pada codesandbox.io, tetapi memandangkan saya tidak menggunakan kotak pasir dengan kerap, saya mengambil masa yang lama untuk membuatnya berfungsi.
• Saya cuba googling untuk mencari contoh sedia ada tetapi tidak menemui satu.
• Saya cuba menggunakan contoh yang disediakan dalam dokumentasi Vuetify, tetapi saya nampaknya tidak dapat menyimpan dan berkongsi keadaan yang diubah suai. [Kemas kini: Ini tidak betul, seperti yang dijelaskan oleh jawapan yang diterima. ]

Answer 1

Ini adalah taman permainan rasmi, yang mungkin merupakan cara paling mudah jika anda ingin menggunakan SFC. Kandungan taman permainan dikodkan ke dalam URL, jadi anda boleh menyimpannya dengan menyimpan URL.

Atau anda boleh membuat coretan menggunakan CDN Vue dan 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>