How to use Bootstrap with Vue 3 and install via npm

Bootstrap is a popular front-end framework for building responsive and mobile-first websites. Vue is a progressive JavaScript framework for building user interfaces. In this tutorial, we’ll learn how to use Bootstrap with Vue 3 and install it via npm.

Step 1: Create a new Vue project

If you don’t already have a Vue project set up, you can create a new one using the Vue CLI. Simply run the following commands in your terminal:


npm install -g @vue/cli
vue create my-vue-app
cd my-vue-app


Step 2: Install Bootstrap via npm

Now that we have a Vue project set up, we can install Bootstrap via npm. Run the following command in your terminal:


npm install bootstrap


Step 3: Import Bootstrap in your Vue components

Next, we need to import Bootstrap in our Vue components. Open the main.js file in your src directory and add the following lines:


import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap'


Now Bootstrap is ready to be used in your Vue components.

Step 4: Use Bootstrap classes and components in your Vue templates

You can now use Bootstrap classes and components in your Vue templates. For example, you can create a button with the following code:


Click me


Or you can use Bootstrap’s grid system to create a responsive layout:

There are many more Bootstrap classes and components that you can use in your Vue templates. Be sure to check out the Bootstrap documentation for more details.

Conclusion

In this article, we learned how to use Bootstrap with Vue 3 and install it via npm. By following these steps, you can easily incorporate the power of Bootstrap into your Vue projects and create beautiful and responsive websites.