Vue/Bootstrap Template

index.html

<div id="app">
<nav class="navbar navbar-light fixed-top">
  <div class="navbar-text ml-auto d-flex">
   <button class="btn btn-sm btn-outline-success"
     @click="sliderStatus = !sliderStatus">
    <i class="fas fa-dollar-sign"></i></button>
   <div class="ml-2">
    <button class="btn btn-success btn-sm dropdown-toggle"
       id="cartDropdown" data-toggle="dropdown"
       aria-haspopup="true" aria-expanded="false">
    <b>cart:</b> 
     <span class="badge badge-pill badge-success">{{cart.length}}</span> 
    </button>
    <div class="dropdown-menu dropdown-menu-right"
      aria-labelledby="cartDropdown">
     <div v-for="(item, index) in cart" :key="index">
      <div class="dropdown-item-text text-nowrap text-right">
       <span class="badge badge-pill badge-warning align-text-top mr-1">{{item.qty}}</span>
       {{item.name}}
       <b>{{item.price | currency}}</b>
      </div>
     </div>
    </div>

   
   </div>
  </div>
</nav>
 
 <h1>My Shop</h1>
 <transition name="fade">
  <div v-if="sliderStatus">
   <div class="align-items-center" :class="sliderState">
    <label :class="labelArr" for="formMax">max</label>
     <input type="text" id="formMax" class="form-control mx-2"
            :style="{'width': inputWidth + 'px', textAlign:'center'}" v-model="maximum">  
     <input type="range" class="custom-range" min="0" max="200" v-model="maximum">
   </div>
  </div>
 </transition> 

 
<transition-group name="fade" tag="div"
   @beforeEnter="beforeEnter"
   @enter="enter"
   @leave="leave">
  <div class="row d-none mb-3 align-items-center" 
       v-for="(item, index) in products" :key="item.id"
       v-if="item.price<=Number(maximum)"
       :data-index="index">
   <div class="col-1 m-auto">
    <button class="btn btn-info"
            v-on:click="addItem(item)">+</button>
   </div>
   <div class="col-4">
    <img class="img-fluid d-block" :src="item.image" :alt="item.name">
   </div>
   <div class="col">
     <h3 class="text-info">{{ item.name }}</h3>
     <p class="mb-0">{{ item.description }}</p>
     <div class="h5 float-right">{{ item.price | currency }}</div>     
    </div>
  </div>
</transition-group> 

</div>

script.js

var app = new Vue({
 el: '#app',
 data: {
  inputWidth: 60,
  sliderStatus: false,
  labelArr: ['font-weight-bold', 'mr-2'],
  maximum: 99,
  products: null,
  cart: []
 },
 filters: {
  currency: function(value) {
   return '$' + Number.parseFloat(value).toFixed(2);
  }
 },
 computed: {
  sliderState: function() {
   return this.sliderStatus ? 'd-flex': 'd-none'
  }
 },
 methods: {
  beforeEnter: function(el) {
   el.className='d-none'
  },
  enter: function(el) {
   var delay=el.dataset.index * 100;
   setTimeout(function() {
    el.className='row d-flex mb-3 align-items-center animated fadeInRight'
   }, delay);
  },
  leave: function(el) {
   var delay=el.dataset.index * 100;
   setTimeout(function() {
    el.className='row d-flex mb-3 align-items-center animated fadeOutRight'
   }, delay);
  },  
  addItem: function(product) {
   this.cart.push(product);
  }
 },
 mounted: function() {
  fetch('https://hplussport.com/api/products/order/price')
  .then(response => response.json())
  .then(data => {
    this.products = data;
  })
 }
});

scripts

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

style.postcss

.fade-enter, .fade-leave-to {
 opacity: 0;
}

.fade-enter-active, .fade-leave-active {
 transition: all 1s ease-in-out;
}

styles

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" rel="stylesheet" />

vue-bootstrap-template.markdown

Vue/Bootstrap Template

This is a template for working with Vue.js with the Bootstrap framework pre-installed.

A Pen by Ray Villalobos on CodePen.

License.