feat: change main vuetify plugins logic (#184)

Author: userquin

playground/middleware/1.vuetify.global.ts

@@ -0,0 +1,4 @@
+export default defineNuxtRouteMiddleware((to) => {
+  // eslint-disable-next-line no-console
+  console.log('global middleware', to.path, useNuxtApp().$vuetify)
+})

playground/middleware/vuetify.ts

@@ -0,0 +1,4 @@
+export default defineNuxtRouteMiddleware((to) => {
+  // eslint-disable-next-line no-console
+  console.log('middleware', to.path, useNuxtApp().$vuetify)
+})

playground/pages/index.vue

@@ -3,6 +3,10 @@
 import { ssrClientHintsConfiguration } from 'virtual:vuetify-ssr-client-hints-configuration'
 import prependAvatar from '~/assets/logo.svg'
 
+definePageMeta({
+  middleware: 'vuetify',
+})
+
 const value = reactive<{
   name1?: string
   name2?: string

src/runtime/plugins/vuetify-sync.ts

@@ -1,17 +1,19 @@
 import type { createVuetify } from 'vuetify'
 import { configureVuetify } from './config'
-import { defineNuxtPlugin, useNuxtApp } from '#imports'
+import { defineNuxtPlugin } from '#imports'
 import type { Plugin } from '#app'
 
 const plugin: Plugin<{
   vuetify: ReturnType<typeof createVuetify>
 }> = defineNuxtPlugin({
   name: 'vuetify:configuration:plugin',
   enforce: 'post',
-  // i18n runtime plugin is async
+  // @ts-expect-error i18n plugin missing on build time
+  dependsOn: ['i18n:plugin'],
+  // i18n runtime plugin can be async
   parallel: false,
-  setup() {
-    useNuxtApp().hook('app:created', configureVuetify)
+  async setup() {
+    await configureVuetify()
   },
 })
 

src/runtime/plugins/vuetify.ts

@@ -1,15 +1,15 @@
 import type { createVuetify } from 'vuetify'
 import { configureVuetify } from './config'
-import { defineNuxtPlugin, useNuxtApp } from '#imports'
+import { defineNuxtPlugin } from '#imports'
 import type { Plugin } from '#app'
 
 const plugin: Plugin<{
   vuetify: ReturnType<typeof createVuetify>
 }> = defineNuxtPlugin({
   name: 'vuetify:configuration:plugin',
   enforce: 'post',
-  setup() {
-    useNuxtApp().hook('app:created', configureVuetify)
+  async setup() {
+    await configureVuetify()
   },
 })