JSFiddle - React, Tailwind, and code Playground

by Taha Shashtari

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://rawgit.com/TahaSh/vue-paginate/master/dist/vue-paginate.js"></script>
<div id="app">
  <h1>Vue-Paginate v3.4</h1>
  <paginate name="items" :list="items" class="paginate-list">
    <li v-for="item in paginated('items')">
      {{ item }}
    </li>
  </paginate>
  <paginate-links for="items" :show-step-links="true"></paginate-links>
  <paginate-links for="items" :limit="2" :show-step-links="true"></paginate-links>
  <paginate-links for="items" :simple="{
        next: 'Next »',
        prev: '« Back'
      }"></paginate-links>
</div>

SCSS

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 20px;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

h1,
h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

.paginate-list {
  width: 159px;
  margin: 0 auto;
  text-align: left;
  li {
    display: block;
    &:before {
      content: '⚬ ';
      font-weight: bold;
      color: slategray;
    }
  }
}

.paginate-links.items {
  user-select: none;
  a {
    cursor: pointer;
  }
  li.active a {
    font-weight: bold;
  }
  li.next:before {
    content: ' | ';
    margin-right: 13px;
    color: #ddd;
  }
  li.disabled a {
    color: #ccc;
    cursor: no-drop;
  }
}

a {
  color: #42b983;
}

JavaScript

new Vue({
  el: '#app',
  data: {
    items: ['Item One', 'Item Two', 'Item Three', 'Item Four', 'Item Five', 'Item Six', 'Item Seven', 'Item Eight', 'Item Nine', 'Item Ten', 'Item Eleven', 'Item Twelve', 'Item Thirteen'],
    paginate: ['items']
  }
})