Reconfigure Vuetify to be installed as Vuetify doc states

As of today, the vutetify doc states how to install it in the nuxt.
So following the guide I did it.
Now the website layout does not "jump" with offsets on load.

nuxt.config.ts

@@ -1,10 +1,19 @@
 import { defineNuxtConfig } from "nuxt/config";
+import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify';
+
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   pages: true,
   build: {
     transpile: ["vuetify"],
   },
+  modules: [
+    (_options, nuxt) => {
+      nuxt.hooks.hook('vite:extendConfig', (config) => {
+        config.plugins?.push(vuetify({ autoImport: true }));
+      });
+    },
+  ],
   css: [
     "vuetify/lib/styles/main.sass",
     "@mdi/font/css/materialdesignicons.min.css",
@@ -18,7 +27,11 @@ export default defineNuxtConfig({
     },
   },
   vite: {
-    // devBundler: "legacy"
+    vue: {
+      template: {
+        transformAssetUrls,
+      },
+    },
   },
   imports: {
     autoImport: false,

plugins/vuetify.ts

@@ -6,8 +6,6 @@ import { defineNuxtPlugin } from '#app';
 export default defineNuxtPlugin((nuxtApp) => {
   const vuetify = createVuetify({
     ssr: true,
-    components,
-    directives,
     theme: {
     },
   });