New to Vue, but trying to get v-select working. I'm getting vue is not defined when importing. Then when I import vue I'm getting a different error as listed below:
main.js
import { createApp } from 'vue'
import App from './App.vue'
import vSelect from 'vue-select'
Vue.component('v-select', vSelect)
import 'vue-select/dist/vue-select.css';
createApp(App).mount('#app')
Error
-- 'Vue' is not defined
When adding import Vue from 'vue'
Cannot read properties of undefined (reading 'component')
Assuming you've installed the right version of v-select that's compatible with vue 3 you should use app.component(...) to register it not Vue.component(...) :
import { createApp } from 'vue'
import App from './App.vue'
import vSelect from 'vue-select'
import 'vue-select/dist/vue-select.css';
const app=createApp(App)
app.component('v-select', vSelect)
app.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
How can I fix it? as the page not loading(showing a white page without anything else.)
WAIT Compiling...
98% after emitting CopyPlugin
WARNING Compiled with 4 warnings
warning in ./src/main.js
"export 'createApp' was not found in 'vue'
warning in ./src/router/index.js
"export 'createRouter' was not found in 'vue-router'
warning in ./src/store/index.js
"export 'createStore' was not found in 'vuex'
warning in ./src/router/index.js
"export 'createWebHistory' was not found in 'vue-router'
I just fixed another issue and now I got this. How can fix it please?
Those errors imply that you're trying to use the Vue 3 API (i.e., createApp), but you have vue#2.x installed (the vuejs2 tag is also a clue to that). Similarly, you're using Vue Router 4's API (i.e., createRouter), but you have vue-router#3.x installed.
Solution
You can either install the newest versions of the dependencies:
npm i -S vue#3 vue-router#4
Or you can use the older APIs. That is, switch from Vue 3 / Vue Router 4 code:
// main.js
import { createApp } from 'vue'
import router from './router'
createApp(App).use(router).mount('#app')
// router.js
import { createRouter } from 'vue-router'
export default createRouter(/*...*/)
...to Vue 2 / Vue Router 3 code:
// main.js
import Vue from 'vue'
import router from './router'
new Vue({
router,
render: h => h(App),
}).$mount('#app')
// router.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
export default new VueRouter(/*...*/)
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.
I am new for vuejs. I tried to create a calendar app with vue and vuetify, but got tons of error on console as blow photo:
I think they are from the same issue which I missed some config for vuetify. However, I tried to use the method I search from Google, like add "import "vuetify/dist/vuetify.min.css";" and "Vue.use(Vuetify);". They are not working well.
This is vuetify.js
import Vue from "vue";
import Vuetify from "vuetify/lib";
import "vuetify/dist/vuetify.min.css";
Vue.use(Vuetify);
export default new Vuetify({
icons: {
iconfont: "mdi",
},
});
main.js
import Vue from "vue";
import vuetify from "./plugins/vuetify";
import App from "./App.vue";
Vue.config.productionTip = false;
new Vue({
vuetify,
render: (h) => h(App),
}).$mount("#app");
The Vuetify docs explain how to set this up with webpack, which is what it looks like you're using.
src/plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify)
const opts = {}
export default new Vuetify(opts)
Your main.js is fine.
Alternatively, if you have the Vue CLI installed, then you can simply run:
vue add vuetify