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')
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')
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.
I want to use this package https://www.npmjs.com/package/vue-json-viewer in my vue3 project.
*Main.vue
<json-viewer :value="Data"></json-viewer>
<script>
import JsonViewer from 'vue-json-viewer'
import vue from 'Vue'
...
components:{JsonViewer}