Can't access instance of createApp exported in vue 3

m kh 0
Viewed 25

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.

vuetifyjs3 vuetify.js vuejs3 vue.js
1 Answers

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())
Estus Flask0
Related