環境と経緯

Laravel 5.8
Vue.js 2.6
vuejs-paginate 2.1

Laravel + Vueのアプリケーションでページネーション機能が欲しかったので、vuejs-paginateを導入したが、公式通りに導入してもなぜかデザインが反映されない
。

症状と原因

本来なってほしいデザイン

See the Pen vuejs-paginate with bs3 by うぃむ@謳って⤴謳って⤴雲の上ぇぇええ☁🥰 (@wim_web) on CodePen.

おかしいデザイン

See the Pen vuejs-paginate with bs4 by うぃむ@謳って⤴謳って⤴雲の上ぇぇええ☁🥰 (@wim_web) on CodePen.

コードをみてもらえれば分かるのですが、どちらのコードも全く同じです。
ではなにが違うのかというとBootstrapのバージョンです。
デザインがきちんと反映されているほうが3系で、反映されていないほうが4系です。
ReadMeでBootstrapについて特に言及されていなかったので原因がわかるまで時間がかかりました。。。

改善コード

paginateコンポーネントにCSSのクラスの情報を追加してあげる。

<paginate 
  :pageCount="10"
  :containerClass="'pagination'"
  :page-class="'page-item'"
  :page-link-class="'page-link'"
  :prev-class="'page-item'"
  :prev-link-class="'page-link'"
  :next-class="'page-item'"
  :next-link-class="'page-link'"
  :clickHandler="clickCallback">
 </paginate>

codepenで試してみてね！