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.
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())
I am trying to add Element UI into my Vue3 Project:
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
App.use(ElementUI)
createApp(App).use(store).use(router).mount('#app')
So I am following this documentation https://element.eleme.io/#/en-US/component/quickstart but it gives me this error: types.js?a742:39 Uncaught TypeError: Cannot read properties of undefined (reading 'prototype')
I dont know what I am doing wrong in this regard.
You should use element-plus which is compatible with vue 3:
Installation :
npm install element-plus --save
Usage :
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')
How can I use multiple plugins within vuejs 3?
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
createApp(App).use(router, axios, Antd).mount('#app')
Within Main.js, this seems to import router and axios, but not Antd. If I take off router, and axios then I can see antd components.
How do I bring in everything?
Each plugin must be in its own app.use() call:
createApp(App).use(pluginA).use(pluginB).use(pluginC).mount('#app')
However, axios is not a Vue plugin, so don't install that with app.use().
Your code should look similar to this:
createApp(App).use(router).use(Antd).mount('#app')
I created a Vuejs project using vue create command provided after installing npm i #vue/cli. Now in my project I want to use this component. In it's installation guide it says:
"Then, import and register the component:"
import Vue from 'vue'
import vSelect from 'vue-select'
Vue.component('v-select', vSelect)
But where? None of my main.js files does not even include Vue from 'vue'
In vuejs3, you can use like this in main.js
import { createApp } from "vue";
import App from "./App.vue";
createApp(App).component('v-select', vSelect).mount("#app");
doc: https://v3.vuejs.org/guide/component-registration.html
I am a beginner with VueJs and this is my first App:
import { BootstrapVue } from 'bootstrap-vue'
import { createApp } from 'vue'
import App from './App.vue'
const myApp = createApp(App)
myApp.use(BootstrapVue)
myApp.mount('#app')
And when I save, nothing appears in my browser and it show this message in the Command:
warning in ./src/main.js
"export 'default' (imported as 'Vue') was not found in 'vue'
Bootstrap-Vue does not yet support Vue 3.
So if you want to use Bootstrap-Vue you will have to stick with Vue 2 for now.
In general, most of the libraries don't support Vue 3 yet, so I would suggest waiting a bit longer before using it until the ecosystem has caught up.
Explanation
The reason this is happening is because in Vue 2, Vue provides a default export export default vue, which allows BootstrapVue to use import Vue from 'vue'.
However, in Vue 3 this has changed, and Vue does no longer provide a default export, and instead uses named exports. So when BootstrapVue uses the following line import Vue from 'vue', the error occurs.
import * as Vue from 'vue'
this works for me
I was getting the warning
"export 'default' (imported as 'Vue') was not found in 'vue'
I'm using Vue 3 but the code I'm studying is Vue 2.
My code Vue 2 in main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue ({
render: h => h(App),
}).$mount('#app')
So I needed to create a Vue instance with the following code Vue 2:
export const eventBus = new Vue ()
Then I received the error code, which I resolved by correcting the code that looked like this:
import { createApp } from 'vue'
import App from './App.vue'
export const eventBus = createApp(App)
createApp(App).mount('#app')
hi i am using laravel 9 mix and vue 3 here is my code app.js
// app.js
require('./bootstrap');
import { createApp } from 'vue'
import test from './components/Test.vue';
createApp({
components: { test }
}).mount('#app')
webpack.mix.js
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js').vue();
in my case, I use webpack and vue2.
I use vue-loader to handle .vue file . I found I installed vue-loader v17 which requires vue3, so I uninstall it and npm i vue-loader#15
On Vue 3 applications you have to use the following connection Vuex store
store.js
import { createStore } from "vuex";
import axios from "axios";
export default createStore({
state: {
},
mutations: {
},
actions: {
}
})
main.js
import store from '#/store';
...
app.use(store);
In my case, this looks like it was caused by some sort of corrupt node module somewhere. I solved the problem by running
rm -rf node_modules/
In my project root directory. This deletes your node_modules folder. Then I reran
yarn install
or
npm install
and the problem was fixed. Hope this helps someone else. Also, many have noted the differences between vue 3 and vue 2 dependencies, I'm not sure those are still relevant in 2022.
In my case it was the wrong resolve.alias directive in webpack.config.js, which set 'vue' to 'vue/dist/vue.js' instead of 'vue/dist/vue.esm.js';
If you're using Vuex, running:
npm remove vuex
npm i vuex#3
should fix this problem.
None of the current responses fixed the issue for me though mine was a little different; I control the component that was failing and I know it was made with Vue3.
In case someone hits this issue but with a component they control, it COULD be that you removed the setup attribute from your components <script> tag.
So changing
<script lang="ts">
to
<script setup lang="ts">
fixed it for me
const Vue = require('vue')
const AppImport = Vue.createApp("dev-axios");
import axios from 'axios';
import VueAxios from 'vue-axios';
AppImport.use(VueAxios,axios);
If you're just after the styles you can simply put
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
into your app.js file and it will work without errors.