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(/*...*/)
here's my code in main.js
import { createApp } from 'vue'
import vuetify from './plugins/vuetify'
import App from './App.vue'
const app = createApp(App)
app.use(vuetify)
app.mount('#app')
and here's my code in vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
Vue.use(Vuetify)
export default new Vuetify({
icons: {
iconfont: 'mdi'
}
})
here's the error message I received
You are using Vue 3 (Vue CLI version doesn't matter much) and Vuetify 2.x is not compatible with Vue 3 - see the docs
So you need to make a choice - if you want to use Vuetify 2.x, you need to switch to Vue 2. If you want to continue to work with Vue 3, you need to use Vuetify 3 which is currently in aplha stage
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.
it was working before in vue2 but now i don't know what's the problem!
main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
const app = createApp(App)
// Import Font Awesome Icons
import { library } from '#fortawesome/fontawesome-svg-core'
import { faUserSecret } from '#fortawesome/free-solid-svg-icons'
// import { } from '#fortawesome/free-brands-svg-icons'
// import { } from '#fortawesome/free-regular-svg-icons'
library.add(faUserSecret)
app.use(store).use(router).mount('#app')
// Use Components
app.component('font-awesome-icon', FontAwesomeIcon)
Vue
<font-awesome-icon icon="user-secret"></font-awesome-icon>
Make sure you got the right version of vue-fontawesome! I was having the same problem and installing version 3.x of the vue-fontawesome package solved it for me. It can be installed with NPM as follows:
$ npm i --save #fortawesome/vue-fontawesome#prerelease
Since Vue 3 is still in prerelease at the time of writing, this installation is bound to change in the future. Please check the official Github repo for up to date information.