Create pager with Vuje and Laravel

I have a table with a search and number of records to show and I'm creating a pager with Previous and Next arrows.

I from Laravel got this answer:

  

• current_page: 1 data: Array (5)

  

• first_page_url "link "

  

• from: 1

  

• last_page: 21

  

• last_page_url "link "

  

• next_page_url "link "

  

• path "link "

  

• per_page: "5"

  

• prev_page_url: null

  

• to: 5

  

• total: 101

  

This shows me:

  

Showing 1 - 5 of 101 records

Now I have 101 records and the last page is 21:

I would like an initial number of pages to be followed by ellipsis and the last page and that the current page be marked in another color. The same is not yet the arrows to turn the page. The example of what I want to do:

The code that I have in my component is:

<div class="row">
            <div class="col-md-6">
                Mostrando
                <strong>{{pagination.from}} - {{pagination.to}}</strong>
                de
                <strong>{{pagination.total}}</strong> registros

            </div>
            <div class="col-md-6">
                <ul class="pagination d-inline-flex pull-right">
                    <li class="page-item">
                        <a class="page-link " href="#" aria-label="Previous" v-if="pagination.prevPageUrl"
                           @click="$emit('prev');">
                            <span aria-hidden="true">&laquo;</span>
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="page-link " href="#" aria-label="Previous" :disabled="true" v-else>
                            <span aria-hidden="true">&laquo;</span>
                            <span class="sr-only">Previous</span>
                        </a>
                    </li>
                    <li class="page-item"><a class="page-link" href="#">1</a></li>
                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item">
                        <a class="page-link" href="#" aria-label="Next" v-if="pagination.nextPageUrl"
                           @click="$emit('next');">
                            <span aria-hidden="true">&raquo;</span>
                            <span class="sr-only">Next</span>
                        </a>
                        <a class="page-link" href="#" aria-label="Next" v-else :disabled="true">
                            <span aria-hidden="true">&raquo;</span>
                            <span class="sr-only">Next</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>