How can I install Bootstrap into this Vue.js project using vue-router?

Question

I have a Vue project I'm building on, following a tutorial. This project uses Vue Router and I am trying to use Bootstrap. This is the current layout:

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

index.js

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import MovieDetail from '../views/MovieDetail.vue'


const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/movie/:id',
    name: 'Movie Detail',
    component: MovieDetail
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

I've tried changing the following in Main.js to initialise Bootstrap:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { BootstrapVue} from 'bootstrap-vue'

createApp(App).use(router, BootstrapVue).mount('#app')

I am getting the warning: ""export 'default' (reexported as 'Vue') was not found in 'vue'". What do I need to do in order to get BootStrap working?

Does this answer your question? "export 'default' (imported as 'Vue') was not found in 'vue' — Hiws
– Hiws, Commented May 10, 2021 at 10:37
@Hiws Potentially, I saw this but figured it's now compatible with Vue 3? Is there a way to downgrade Vue version, as Bootstrap would be a massive help for my project? — Mr_Happy
– Mr_Happy, Commented May 10, 2021 at 10:43
BootstrapVue is not compatible with Vue 3 yet, you can track the progress here. If you want to use BootstrapVue you'll have to downgrade to Vue 2, whether that's possible in an existing project I don't know. But if it's a relatively new project, you could simply create a new one and copy your code over. If you want to stick with Vue 3 you'll have to use base Bootstrap, which might require some additional work. — Hiws
– Hiws, Commented May 10, 2021 at 11:03

Prerana · Accepted Answer · 2021-05-10 10:50:06Z

1

You can use bootstrap by linking bootstrap css in head blocks in 'index.html' which file is located on the root directory of your project.

And make sure that 'bootstrap.min.css' file is located on the static folder

<link rel="stylesheet" href="/static/bootstrap.min.css" />

answered May 10, 2021 at 10:50

Prerana

8407 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can I install Bootstrap into this Vue.js project using vue-router?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related