This post documents project initialization steps for adding Bootstrap5 to a Vue.js and Vite project. The reason for the post is that other references for this process either didn’t work or were relatively complicated and didn’t need to be. 

• Create a Vite + Vue.js Project
• Add Bootstrap to the project
• Configure Vite to add Bootstrap
• Import Bootstrap

Create a Vite + Vue.js Project

Using NPM create the Vite project with Vue.js framework

npm create vite@latest

    Project Name => myproject

    Framework => Vue

    Variant => Typescript

cd myproject

npm install

 

Add Bootstrap to the project

Using NPM add Bootstrap5 to the project.

npm i –save bootstrap @popperjs/core

npm i –save-dev sass

 

Configure Vite to add Bootstrap

    npm i –save vite-plugin-dynamic-import

Edit vite.config.ts to add the dynamic import plugin and Bootstrap

Add the import

    import dynamicImport from ‘vite-plugin-dynamic-import’

Add the plugin and bootstrap   

Import Bootstrap

Add file ./src/scss/bootstrapstyles.scss

    @import ‘~bootstrap/scss/bootstrap’

Import bootstrapstyles.scss in main.ts

    import ‘./sccs/bootstrapstyles.scss’