Morioh
Login
Alfie Kemp

Alfie Kemp

4 years ago

7 Vue Bootstrap Integrated Together in Vue App

Bootstrap is a free front-end framework that makes the web development process faster and easier.

Bootstrap includes designs based on HTML and CSS such as typography, forms, buttons, tables, navigation, modals, image carousels … as well as optional JavaScript plugins.

Integrating bootstrap with Vue.js also carries the same components. Here are 7 typical Vue Bootstrap combinations.

1. laravel-vue-datatable

A Vue.js datatable component for Laravel that works with Bootstrap.

This package makes use of an optional default component, the Laravel Vue Pagination component created by gilbitron. If you need a pagination component for other areas of your website and you are using a Laravel API & Bootstrap, i highly suggest using this flexible component.

laravel-vue-datatable

Demo: https://jamesdordoy.github.io/laravel-vue-datatable/

Download: https://github.com/jamesdordoy/laravel-vue-datatable/archive/master.zip

2. vue-bootstrap-select

A dropdown select component, that allows for single and multiple selection as well as filtering.

vue-bootstrap-select

Demo: https://codesandbox.io/s/ovq821j566

Download: https://github.com/Sandalf/vue-bootstrap-select/archive/master.zip

3. vue-bootstrap4-table

Advanced table based on Vue 2 and Bootstrap 4.

Features

  • Multi column filtering (Optimized filtering)
    • Simple filter
    • Select filter (Single & Multiple)
  • Global search
  • Single & Multi column sorting
  • Pagination (True! It works out of the box intelligently)
  • Pagination Information
  • Checkbox selection for rows
  • Client & Server mode
  • Highly customizable

vue-bootstrap4-table

Demo: https://codepen.io/rubanraj54/full/zyZdzN

Download: https://github.com/rubanraj54/vue-bootstrap4-table/archive/master.zip

4. vue-tmx

Vue json based table with bootstrap3

  • very easy to use, ready out of the box
  • filters
  • checkbox
  • aggregations like sum, avg, min, max
  • pagination
  • group by

vue-tmx

Demo: https://marcodpt.github.io/vue-tmx/

Download: https://github.com/marcodpt/vue-tmx/archive/master.zip

5. vue-bootstrap-typeahead

A simple list-group based typeahead/autocomplete using Bootstrap 4 and Vue 2

vue-bootstrap-typeahead

Demo: https://alexurquhart.github.io/vue-bootstrap-typeahead/

Download: https://github.com/alexurquhart/vue-bootstrap-typeahead/archive/master.zip

6. vue-strap

Bootstrap components built with Vue.js.

This repository contains a set of native Vue.js components based on Bootstrap’s markup and CSS. As a result no dependency on jQuery or Bootstrap’s JavaScript is required. The only required dependencies are:

Vue.js (required ^v2.x.x, test with v2.0.3).
Bootstrap CSS (required 3.x.x, test with 3.3.6). VueStrap doesn’t depend on a very precise version of Bootstrap.

trap

Demo: https://wffranco.github.io/vue-strap/

Download: https://github.com/vue-strap/vue-strap/archive/master.zip

7. VueBoot

Vuejs components and directives written using Bootstrap v4, leveraging the official Bootstrap JS.

This project is focused on providing useful/convenient VueJS wrappers around existing Bootstrap components. It does not wrap all of them (because that seems unnecessary), and really only wraps the ones I find the need for. I’m open to adding new components, but see the Contributing section for what I’ll accept.

vueboot

Demo: http://morgul.github.io/vueboot/

Download: https://github.com/Morgul/vueboot/archive/master.zip

#vuejs #javascript #vue-js #programming

7 Vue Bootstrap Integrated Together in Vue App
30.25 GEEK