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.
CodePudding user response:
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())