How to use Vuetify in Vue SFC Playground?

Question

I am trying to use both Vue Router and Vuetify in Vue SFC Playground. I began with the Vue Playground example of Vue Router (taken from Getting Started). This had Vue Router already imported, so I only needed to import Vuetify. Firstly, I imported Vuetify in Import Map:

{
  "imports": {
    /* ... */
    "vuetify": "https://unpkg.com/[email protected]/dist/vuetify.esm.js"
  },
  "scopes": {}
}

Then, I imported Vuetify in main.js:

import { createApp } from 'vue'
import { createVuetify } from 'vuetify'
import router from './router'
import App from './app.vue'

const vuetify = createVuetify()

createApp(App)
  .use(vuetify)
  .use(router)
  .mount('#app')

Finally, I placed a Vuetify component in app.vue:

<template>
  <v-app>
    <v-main>
      <v-app-bar>
        <h1>Hello App!</h1>
      </v-app-bar>
    </v-main>
  </v-app>
  <!-- ... -->
</template>

However, I noticed that CSS is missing since it wasn't imported. In Vuetify Playground, there is a section named "Links" for importing CSS:

{
  "css": ["https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify-labs.css"]
}

But I didn't find it in Vue Playground. So, what is the correct way to import CSS?

---

I also tried Vuetify Playground at the very beginning, which had Vuetify already imported, so I only needed to import Vue Router. However, it seems that there is no way to call .use(router) because the createApp(App) part is not editable. If someone finds out a way to import Vue Router in Vuetify Playground, that also counts as a solution.

Answer 1

Vuetify playground is a fork of Vue playground, so their functionality doesn't match.

Since the playground doesn't use fully functional bundler like Vite, it may be impossible to load CSS files the same way this would be done in regular Vue project, import 'vuetify/styles'.

E.g. this works in SFC but can cause problems with hot reload (demo):

<style>
@import 'https://unpkg.com/[email protected]/dist/vuetify.min.css'
</style>

Not relying on playground internals will cause less problems (demo):

...
import { createVuetify } from 'vuetify'

const link = document.createElement('link');
link.href = 'https://unpkg.com/[email protected]/dist/vuetify.min.css';
link.rel = 'stylesheet';
document.head.appendChild(link);

createApp(App)
  .use(router)
  .use(createVuetify())
  .mount('#app')

vuetify needs to be specified in import maps:

"vuetify": "https://unpkg.com/[email protected]/dist/vuetify.esm.js"