Can't access instance of createApp exported in vue 3

Question

I have a instance of createApp and use this in vuetify plugin. main file

import { createApp } from 'vue'
import App from './App.vue'
export const app = createApp(App)
import '@/plugins/vuetify.ts'

vuetify plugin

import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import {app} from '@/main.ts'
app.use(createVuetify())

error: "Uncaught ReferenceError: Cannot access 'app' before initialization at vuetify.ts:7:1"

Thank you in advance.

Answer 1

import statements are hoisted, putting other code above them gives false impression that it will be evaluated first.

main.ts and vuetify.ts contain circular dependency that cannot be resolved. In order to avoid this, app instance should be created in a separate module, app.ts, then it can be imported in both.

Nothing in vuetify.ts requires to execute use() inside this module. A common way is to install components where app is defined, i.e. in main entry point:

vuetify.ts

import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'
export { createVuetify } from 'vuetify'

main.ts

import { createApp } from 'vue'
import App from './App.vue'
import { createVuetify } '@/plugins/vuetify.ts'

export const app = createApp(App).use(createVuetify())