In this tutorial, you will learn how easy to add a bootstrap framework and font awesome into your Vue.js application. We will use CLI in this tutorial example.

Open your Node.js command prompt or if you use Visual Studio code, you can use the built-in integrated terminal which it will work the same way.

Let's install the bootstrap framework first by running the following command.

npm i bootstrap-vue

The syntax i in here represents the wording install. So alternative, you can as well run the following command.

npm i bootstrap-vue

Once the bootstrap has already been install, we then install Fontawesome by running the following command.

npm i vue-awesome

Once both of the packages have been installed, you now need to register the both packages into your main application script. Open the main.js under the root folder of your application.

import Vue from 'vue'
import App from './App.vue'

//Bootstrap framework
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue);
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

//Font awesome
import 'vue-awesome/icons'
import Icon from 'vue-awesome/components/Icon'
Vue.component('icon', Icon)

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

For more details of the above package, please visit the following link on how to use the vue directive for the packages.

https://bootstrap-vue.js.org/docs/
https://github.com/FortAwesome/vue-fontawesome

To see if it works, open one of your file.vue files and copy paste the following code to see how the directives work.

<template>
  <div>
    <b-alert show>Default Alert</b-alert>
    <icon name="beer"></icon>
  </div>
</template>

<script>
export default {
  
}
</script>

Feel free to post your comment if you have any question.