Learn more about Bootstrap and Vue through a practical example

The Vue.js CLI comes with a whole lot of features ranging from the installation of packages to the configuration of our Vue.js application. In this article, we will examine some methods for adding Bootstrap 4 into our Vue.js application; learning more about Vue Bootstrap in the process.

Prerequisites:

• Familiarity with HTML, CSS, and JavaScript (ES6+)
• VS code (or any code editor installed on your development machine)
• Basic knowledge of Vue

Before we go further, we would like to make mention of WrapPixel’s Vue templates. These are designed to help you create your Vue-based applications more quickly. There are also some free Vue.js templates available to download on the site.

Setting up our Vuejs Application

We will start by setting up a new Vue.js application using the Vue.js CLI. Ensure that you have Vue.js CLI installed on your local machine by running following on your terminal:

vue --version

If you get the version of Vue.js then you have Vue.js installed. If you do not have this installed then run this on your terminal to install it globally on your local machine:

npm install -g @vue/cli

We will set up a new Vue project by using the vue create command followed by the name of the project:

vue create bootstrap4

This will prompt you to either use the default preset or to manually configure our preset. Choose the default preset to continue. Choosing this will create a new Vue.js Application. After the installation is completed, type cd bootstrap4 to move into the project’s working directory.

#bootstrap #javascript #vue #web-development #programming