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.
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.
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:
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.
Learn more about Bootstrap and Vue through a practical example. We will examine some methods for adding Bootstrap 4 into our Vue.js application