Inertia Js

Links.vue

  <template>
      <div>    
     <ul class="flex pl-0 list-none rounded my-2">
        <li 
           class="relative block py-2 px-3 leading-tight bg-white border border-gray-300 text-blue-700 border-r-0 ml-0 rounded-l hover:bg-gray-200"
           v-if="previousPageUrl"
           >
           <InertiaLink 
              :href="previousPageUrl" 
              class="page-link"
              >
              Prev
           </InertiaLink>
        </li>
        <li 
           class="relative block py-2 px-3 leading-tight bg-white border border-gray-300 text-blue-700 border-r-0 hover:bg-gray-200"
           v-for="eachUrlArray in urlsArray" 
           :key="eachUrlArray.indexKey"
           >
           <span v-if="eachUrlArray.type === 'URLS'">
              <InertiaLink 
                 :href="eachUrlArray.url" 
                  class="page-link" 
                  :class="{ 'bg-blue-500 text-blue-700': eachUrlArray.isCurrentPage === true }"
                 >
                 {{eachUrlArray.pageNumber}}
              </InertiaLink>
           </span>
           <span v-else-if="eachUrlArray.type === 'ELIPSIS'">
           {{eachUrlArray.url}}
           </span>
        </li>
        <li 
           class="relative block py-2 px-3 leading-tight bg-white border border-gray-300 text-blue-700 rounded-r hover:bg-gray-200"
           v-if="nextPageUrl"
           >
           <InertiaLink 
              :href="nextPageUrl" 
              class="page-link"
              >
              Next
           </InertiaLink>
        </li>
     </ul>
  </div>
  </template>

  <script>
  export default {
      props : {
         urlsArray : {
            type: Array,
            default : [],
         },
         previousPageUrl: {
            type : String,
            default : null,
         },
         nextPageUrl : {
            type : String,
           default : null,
         }
      }
  }
  </script>

Paginator.php

    <?php

    namespace App\Services;
    use Illuminate\Contracts\Pagination\LengthAwarePaginator;
    use Illuminate\Pagination\UrlWindow;

    class PaginatedLinks
    {
         /**
         * The Elipsis Character.
         *
         * @var string
         */

        public $elipsisCharacter = '....';

        /**
         * The PaginatorInstance.
         *
         * @var \Illuminate\Contracts\Pagination\LengthAwarePaginator
         */
        public $lengthAwarePaginator;


        /**
         * Get the value of elipsisCharacter
         */ 
        public function getElipsisCharacter()
        {
            return $this->elipsisCharacter;
        }

        /**
         * Set the value of elipsisCharacter
         *
         * @return  self
         */ 
        public function setElipsisCharacter($elipsisCharacter)
        {
            $this->elipsisCharacter = $elipsisCharacter;

            return $this;
        }

        /**
         * Get the PaginatorInstance.
         *
         * @return  LengthAwarePaginator
         */ 
        public function getPaginatorInstance()
        {
            return $this->lengthAwarePaginator;
        }

        /**
         * Set the PaginatorInstance.
         *
         * @param  LengthAwarePaginator  $lengthAwarePaginator.
         *
         * @return  self
         */ 
        public function setPaginatorInstance(LengthAwarePaginator $lengthAwarePaginator)
        {
            $this->lengthAwarePaginator = $lengthAwarePaginator;

            return $this;
        }

        /**
         * Convert the Paginator Insnatance to formatted array
         *
         *
         * @return array|null
         **/
        public function get()
        {

            $window = UrlWindow::make($this->getPaginatorInstance());

            $array =  array_filter([
                $window['first'],
                is_array($window['slider']) ? '...' : null,
                $window['slider'],
                is_array($window['last']) ? '...' : null,
                $window['last'],
            ]);
                $i = 1;
            foreach($array as $index => $urlsArray):

                if(is_array($urlsArray)):
                    foreach($urlsArray as $pageNumber => $link):
                        $currentPage = $this->getPaginatorInstance()->currentPage();
                        $n[] = [
                            'pageNumber' => $pageNumber,
                            'url' => $link,
                            'indexKey' => $i,
                            'type' => 'URLS',
                            'isCurrentPage' => $currentPage === $pageNumber,
                        ];
                        $i++;
                    endforeach;
                    elseif(is_string($urlsArray)):
                        $n[] = [
                            'url' => $urlsArray,
                            'indexKey' => $i,
                            'type' => 'ELIPSIS',
                        ];
                        $i++;
                endif;

            endforeach;

            return count($n) === 1 ? null : $n;
        }
    }