Bootstrap for Custom SCSS with Vue JS, in 5 mins

My Reasons

So you guys will be thinking really we have to put up with yet another idiot who thinks internet needs an another article on setting up bootstrap with Vue Js.

Believe me this is not something I was looking forward to accomplish, This tutorial exist of one and only reason most of the materials on this topic sucks, there is a better chance you are gonna end up confused and  uninformed, I remember I was frustrated is it too much to ask for clear and concise content, So without wasting anymore of your precious time

Lets Code

I assume at this point you have vue cli on your development machine, we will first start with scaffolding a vue project

Create Vue Project

vue create bootstrap-vue

Now manually select features

Choose Css Preprocessors and select Saas/SCSS

Complete rest of the process based on your preferences

Install bootstrap and its dependencies

npm install jquery --save
npm install popper.js --save
npm install bootstrap --save

So primary reason we stick with saas is to use customized theme options For Reference please checkout
https://getbootstrap.com/docs/4.0/getting-started/theming/

Setup custom.scss  

Within assets create styles and custom.scss

// Override / set color variables
$blue: #3399ff;
$orange: #f26c22;


$primary: $blue;
$secondary: $orange;

Import Custom styles and bootstrap scss in App.vue

<style lang="scss">
@import './assets/styles/custom.scss';
@import '../node_modules/bootstrap/scss/bootstrap.scss';
</style>

Replace contents of Hello world with below to confirm everything

<template>
  <div class="hello">
    <div class="jumbotron">
      <h1 class="display-4">Hello, world!</h1>
      <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
      <hr class="my-4">
      <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
      <p class="lead">
        <button type="button" class="btn btn-primary">Primary</button>
        <button type="button" class="ml-2 btn btn-secondary">Secondary</button>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

Viola, Run built in development server to confirm

npm run serve

Happy Coding ....