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?

Answer 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" />