Vuetify not working on development server

[punkshiraishi]

I installed Vuetify and set it up in src/options/main.ts to use Vuetifiy with Options.vue.

npm i -D vuetify@^3.2.1

// Vuetify
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import { createApp } from 'vue'
import '../styles'

import App from './Options.vue'

const vuetify = createVuetify({
  components,
  directives,
})

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

<script setup lang="ts">
import { storageDemo } from '~/logic/storage'
</script>

<template>
  <main class="px-4 py-10 text-center text-gray-700 dark:text-gray-200">
    <img src="/assets/icon.svg" class="icon-btn mx-2 text-2xl" alt="extension icon">
    <div>Options</div>
    <p class="mt-2 opacity-50">
      This is the options page
    </p>

    <input v-model="storageDemo" class="border border-gray-400 rounded px-2 py-1 mt-2">

    <div class="mt-4">
      Powered by Vite <pixelarticons-zap class="align-middle inline-block" />
    </div>
    
    <v-btn>vuetify demo</v-btn>
  </main>
</template>

When I run npm run dev and open the Options page, all I get is Vite server did not start and an error saying some CSS was not found.

When I run npm run build and open the Options page, it works fine and I can use the Vuetify component.

Is there any configuration required when using a component library like Vuetify? Or is it due to a bug?

[punkshiraishi]

I was using the refactor/mv3 branch.
Switching to the latest main resolved this issue.

So I'm closing this discussion.