NUXT_FRONTEND/components/Pagination.vue

<template>
  <v-pagination
    :style="cssVars"
    :value="value"
    :length="length"
    :total-visible="visible"
    next-icon="Вперед"
    prev-icon="Назад"
    next-aria-label="next-text"
    previous-aria-label="prev-text"
    page-aria-label="page-text"
    current-page-aria-label="current-page"
    @input="$emit('input', $event)"
  >
  </v-pagination>
</template>

<script>
export default {
  props: {
    value: {
      type: [String, Number],
      default: 1,
    },
    length: {
      type: [String, Number],
      default: 10,
    },
    visible: {
      type: [String, Number],
      default: 20,
    },
    dark: {
      type: Boolean,
      default: false,
    },
    align: {
      type: String,
      default: "center",
    },
  },

  computed: {
    cssVars() {
      return {
        "--bg-color": this.dark ? "#1E1E1E" : "rgba(59, 85, 115, .08)",
        "--color": this.dark ? "#FFFFFF" : "#3B5573",
        "--align": this.align
      };
    },
  },
};
</script>

<style lang="less" scoped>
::v-deep button {
  width: 41px !important;
  height: 41px !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 11px !important;
  color: var(--color) !important;
  user-select: none !important;

  i {
    font: 14px/1 "Golos Text" !important;
    color: var(--color) !important;
  }
}

::v-deep button[aria-label="prev-text"],
::v-deep button[aria-label="next-text"] {
  width: 100px !important;
  background-color: var(--bg-color) !important;
  color: #3b5573 !important;
}

::v-deep button[aria-label="current-page"] {
  background-color: var(--bg-color) !important;
}

::v-deep button[aria-label="page-text"] {
  background-color: transparent !important;
}

::v-deep .v-pagination {
  justify-content: var(--align);

  &__more {
    color: var(--color) !important;
    user-select: none;
  }
}
</style>