尋找線上沙盒Vuetify 3模板，用於建立一個最小可複現的範例

Question

我在使用 Vuetify 3 的過程中遇到了一個問題，我想在 Stack Overflow 上詢問，但為了做到這一點，我需要創建一個最小可複現的範例。我可以在哪裡找到一個我可以參考的模板？

我嘗試過的方法

• 我嘗試在 codesandbox.io 上創建自己的範例，但由於我不經常使用沙盒，所以花了很長時間才使其工作。
• 我嘗試透過Google搜尋找到一個現有的範例，但沒有找到。
• 我嘗試使用 Vuetify 文件中提供的範例，但似乎無法儲存和共享修改後的狀態。 [更新：這是不正確的，正如接受的答案所解釋的那樣。 ]

Answer 1

這裡有一個官方的 playground，如果你想使用 SFCs，這可能是最簡單的方式。 playground 的內容被編碼到 URL 中，所以你可以透過儲存 URL 來保存它。

或是你可以使用 CDN Vue 和 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>