Including Bootstrap CSS and JS in a Vue.js Project - Lesson-5

Bootstrap is a popular CSS framework that provides pre-designed components and styles to help you quickly build responsive and mobile-first websites. Including Bootstrap in your Vue.js project can significantly speed up the development process, especially for projects that require a consistent and professional look. Here’s how you can include Bootstrap CSS and JS in your Vue.js project.

Method 1: Using npm (Recommended for Vue CLI Projects)

If you’re using Vue CLI to create your project, the easiest way to include Bootstrap is by installing it via npm.

Install Bootstrap: Open your terminal, navigate to your project directory, and run the following command to install Bootstrap:

1
npm install bootstrap

Import Bootstrap CSS and JS: After installing, you need to import Bootstrap’s CSS and JS into your project. You can do this in your main.js file or in any specific component where you need Bootstrap.

1
2
3
// main.js
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap";

This method ensures that Bootstrap’s CSS and JS are available globally across your Vue.js application.

Method 2: Using CDN

If you prefer not to use npm or if you’re working on a simple project without Vue CLI, you can include Bootstrap using a Content Delivery Network (CDN).

Include Bootstrap CSS: Add the Bootstrap CSS link to the <head> section of your index.html file.

1
2
3
4
5
6
7
8
<!-- index.html -->
<head>
  <!-- Other head elements -->
  <link
    rel="stylesheet"
    href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
  />
</head>

Include Bootstrap JS: Similarly, add the Bootstrap JS script before the closing </body> tag in your index.html file.

1
2
3
4
5
<!-- index.html -->
<body>
  <!-- Other body elements -->
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>

Method 3: Using Vue Bootstrap

For a more Vue-centric approach, you can use vue-bootstrap, a library that integrates Bootstrap components with Vue.js.

Install vue-bootstrap: Run the following command in your project directory.

1
npm install vue-bootstrap bootstrap

Import and Use Bootstrap Components: Import the components you need and register them globally or locally in your Vue components.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
// main.js
// main.js
import { createApp } from "vue";
import { BootstrapVue, IconsPlugin } from "bootstrap-vue";

// Import Bootstrap and BootstrapVue CSS
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";

// Create a Vue app
const app = createApp(App);

// Make BootstrapVue available throughout your project
app.use(BootstrapVue);
// Optionally install the BootstrapVue icon components plugin
app.use(IconsPlugin);

// Mount the app
app.mount("#app");

Choosing the Best Method

Method 1 (npm) is recommended for most Vue.js projects, especially those created with Vue CLI, as it integrates well with the build process and allows for tree shaking to reduce the final bundle size.
Method 2 (CDN) is suitable for quick prototyping or when you’re not using Vue CLI. It’s easy to implement but offers less control over the version of Bootstrap you’re using.
Method 3 (vue-bootstrap) is ideal for developers who prefer a more Vue-centric approach and want to use Bootstrap components as Vue components.

By following these methods, you can easily include Bootstrap CSS and JS in your Vue.js project, enhancing your application’s design and functionality.