Reverting manual component registration after Vuetify v3 migration

Direct answer

Vuetify v3 does not use vuetify-loader. The loader was a Vuetify v2 build‑time tool. In v3 auto‑import is optional and provided by unplugin-vue-components with the Vuetify resolver. Manual registration is still supported and is the default behavior when the resolver is not used. <v-app> is still required in v3.

Confirmed facts

• Vuetify v3 ships with createVuetify() plugin API. Components are registered globally by the plugin.
• <v-app> remains the root layout component in v3 and must wrap the application.
• There is no official "manual mode" toggle for vuetify-loader because the loader is not part of v3.

Likely explanation for your failed mount

The migration tool removed explicit imports and likely added an auto‑import resolver. Legacy code that expects explicit imports and a guaranteed <v-app> wrapper now mounts without the wrapper or with components not resolved, causing a failed mount.

Steps to restore manual registration pattern

1. Remove auto‑import resolver

If you use Vite:

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue(),
    // remove or comment out Components() with Vuetify resolver
  ]
})

If you use Vue CLI/Webpack, remove the Components plugin from vue.config.js.

2. Create Vuetify instance manually

// plugins/vuetify.js
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import 'vuetify/styles'

export default createVuetify({
  components,
  directives,
  theme: {
    defaultTheme: 'light'
  }
})

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'

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

3. Reinstate <v-app> wrapper

Ensure App.vue contains the wrapper. No custom plugin is needed:

<template>
  <v-app>
    <router-view />
  </v-app>
</template>

If legacy code relied on a global wrapper injected by the migration, add it once at the root.

4. Preserve legacy theme overrides

Vuetify v3 uses CSS variables generated at runtime. Static CSS overrides can be preserved by loading them after Vuetify styles with higher specificity.

• Keep your legacy :root { --v-theme-primary: ... } overrides in a global CSS file imported after vuetify/styles.
• For component‑specific overrides, use a more specific selector or :where() to avoid being reset by the theme provider.
• Prefer moving static values into createVuetify({ theme: { themes: { light: { colors: {...} } } } }) for long‑term stability.

Note: !important can force legacy values but may break runtime theme switching.

Verification

• Check package.json for vuetify@^3 and no vuetify-loader dependency.
• Confirm no Vuetify resolver is active in your build config.
• Run the app and verify <v-app> renders and components work without auto‑import.

One missing diagnostic that changes the recommendation: which build tool and plugin setup you currently have — Vite with unplugin-vue-components, Vue CLI with vue-cli-plugin-vuetify, or a custom Webpack config. The exact removal steps differ.