Error: [Vuetify] Could not find defaults instance

I'm trying to create a Laravel/Inertia/Vue3/Vite project and I'm having the following error when trying to load any components from the Vuetify library:

Error: [Vuetify] Could not find defaults instance

I'm also getting the following warning in the console:

[Vue warn]: injection "Symbol(vuetify:defaults)" not found.

app.js

import './bootstrap';
import Alpine from 'alpinejs';
import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/vue3';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';

// Vuetify
import 'vuetify/styles';
import { createVuetify } from 'vuetify';
import * as components from 'vuetify/components';
import * as directives from 'vuetify/directives';

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

createInertiaApp({
resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
setup({ el, App, props, plugin }) {
    return createApp({ render: () => h(App, props) })
    .use(plugin, vuetify)
    .mount(el)
},
});

window.Alpine = Alpine
Alpine.start()

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vuetify from 'vite-plugin-vuetify';
import vue from '@vitejs/plugin-vue';
import path from 'path';

export default defineConfig({
    plugins: [
        laravel({
            input: ["resources/css/app.css", "resources/js/app.js"],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
        vuetify({ autoImport: true }),
    ],
});

package.json

{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "@mdi/font": "^7.1.96",
        "@tailwindcss/forms": "^0.5.3",
        "autoprefixer": "^10.4.13",
        "axios": "^0.25",
        "laravel-mix": "^6.0.12",
        "laravel-vite-plugin": "^0.7.2",
        "lodash": "^4.17.13",
        "postcss": "^8.4.21",
        "resolve-url-loader": "^3.1.0",
        "sass": "^1.15.2",
        "sass-loader": "^8.0.0",
        "tailwindcss": "^3.2.7",
        "vite": "^4.0.0",
        "vue-template-compiler": "^2.6.11"
    },
    "dependencies": {
        "@inertiajs/progress": "^0.2.7",
        "@inertiajs/vue3": "^1.0.0",
        "@vitejs/plugin-vue": "^4.0.0",
        "alpinejs": "^3.10.3",
        "laravel-mix-tailwind": "^0.1.2",
        "vite-plugin-vuetify": "^1.0.2",
        "vue": "^3.2.36",
        "vuetify": "^3.1.6"
    }
}

web.php

Route::get('login', function () {
    return Inertia::render('Auth/Login');
});

Login.vue

<template>
    <v-card>
        <v-layout>
        <v-navigation-drawer
            class="bg-deep-purple"
            theme="dark"
            permanent
        >
            <v-list color="transparent">
            <v-list-item prepend-icon="mdi-view-dashboard" title="Dashboard"></v-list-item>
            <v-list-item prepend-icon="mdi-account-box" title="Account"></v-list-item>
            <v-list-item prepend-icon="mdi-gavel" title="Admin"></v-list-item>
            </v-list>

            <template v-slot:append>
            <div class="pa-2">
                <v-btn block>
                Logout
                </v-btn>
            </div>
            </template>
        </v-navigation-drawer>
        <v-main style="height: 400px"></v-main>
        </v-layout>
    </v-card>
</template>

<script>
    export default {
        components: {},
        props: {},
    }
</script>

The page renders fine if add a simple "Hello World" in there, but any Vuetify component throws that error.

Any help appreciated, thanks in advance.