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'
As stated in this jsFiddle: http://jsfiddle.net/posva/wtpuevc6/ , you have no obligation to use webpack or .vue files.
The code below is not from me and all credit goes to this jsFiddle creator:
Create an index.html file:
<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<script src="https://npmcdn.com/vue-router/dist/vue-router.js"></script>
<script src="/js/Home.js"></script>
<script src="/js/Foo.js"></script>
<script src="/js/router.js"></script>
<script src="/js/index.js"></script>
<div id="app">
<router-link to="/">/home</router-link>
<router-link to="/foo">/foo</router-link>
<router-view></router-view>
</div>
Home.js
const Home = { template: '<div>Home</div>' }
Foo.js
const Foo = { template: '<div>Foo</div>' }
router.js
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '/', component: Home },
{ path: '/foo', component: Foo }
]
})
index.js
new Vue({
router,
el: '#app',
data: {
msg: 'Hello World'
}
})
Appreciate the framework...
Just a sidenote: .vue files are really awesome, you should definitely try them if not using them is not a requirement
I have resolved it, I just updated the dependency of angular material to 7 and angular version to 7.3.2 and it worked.
I’ve managed to solve this with only vue.config.js with the below. Note: powerful little thing vue.config.js is:
├── src
│ ├── assets
│ │ └── logo.png
│ ├── components
│ │ └── HelloWorld.vue
│ └── pages
│ ├── home
│ │ ├── App.vue
│ │ ├── cache.js
│ │ └── main.js
│ ├── legal
│ │ ├── App.vue
│ │ └── main.js
│ ├── org
│ │ ├── digitalocean
│ │ │ ├── App.vue
│ │ │ └── main.js
│ │ └── intercom
│ └── submit
│ ├── App.vue
│ └── main.js
└── vue.config.js
And vue.config.js:
module.exports = {
pages: {
index: {
entry: "./src/pages/home/main.js",
template: "public/index.html",
filename: "index.html",
title: "Home",
chunks: ["chunk-vendors", "chunk-common", "index"],
},
legal: {
entry: "./src/pages/legal/main.js",
template: "public/index.html",
filename: "legal.html",
title: "Legal",
chunks: ["chunk-vendors", "chunk-common", "legal"],
},
submit: {
entry: "./src/pages/submit/main.js",
template: "public/index.html",
filename: "submit.html",
title: "Submit",
chunks: ["chunk-vendors", "chunk-common", "submit"],
},
"org/digitalocean": {
entry: "./src/pages/org/digitalocean/main.js",
template: "public/index.html",
filename: "org/digitalocean.html",
title: "Digital Ocean",
chunks: ["chunk-vendors", "chunk-common", "org/digitalocean"],
},
},
};
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 useimport 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.