Выводим товары на сайте

composer require fakerphp/faker --dev

<?php

use App\Models\Category;
use App\Models\Product;
use Phinx\Seed\AbstractSeed;
use Vesp\Services\Eloquent;

class Products extends AbstractSeed
{
    // Количество генерируемых категорий
    protected $categories = 100;
    // И товаров
    protected $products = 1000;

    public function run(): void
    {
        // Если вдруг Faker не установлен - то просто ничего не делаем
        if (!class_exists('Faker\Factory')) {
            return;
        }

        // Временно отключаем проверку в БД по foreign key
        (new Eloquent())->getConnection()->getSchemaBuilder()
            ->disableForeignKeyConstraints();
        // Чтобы можно было полностью очистить таблицы
        Category::query()->truncate();
        Product::query()->truncate();

        $faker = Faker\Factory::create();

        // Создаём 100 категорий
        for ($i = 0; $i < $this->categories; $i++) {
            Category::query()->create([
                'title' => 'Категория ' . ($i + 1),
                // Случайный lorem ipsum
                'description' => $faker->text,
                // Категория активна с вероятностью 90%
                'active' => random_int(0, 9) > 0,
            ]);
        }

        // Теперь 1000 товаров
        for ($i = 0; $i < $this->products; $i++) {
            Product::query()->create([
                'title' => 'Товар ' . ($i + 1),
                'description' => $faker->text,
                // Указываем 1 из 100 категорий случайным образом
                'category_id' => random_int(1, $this->categories),
                // Артикулом назначаем уникальное 9ти-значное число
                'sku' => $faker->unique()->randomNumber(9, true),
                // Цена тоже случайная, от 100.00 до 10000.99
                'price' => $faker->randomFloat(2, 100, 10000),
                // 10% товаров неактивны
                'active' => random_int(0, 9) > 0,
            ]);
        }
    }
}

composer db:seed-one Products

Web контроллеры

src/Controllers/Web/Categories.php

<?php

namespace App\Controllers\Web;

use App\Models\Category;
use Illuminate\Database\Eloquent\Builder;
use Vesp\Controllers\ModelController;

class Categories extends ModelController
{
    protected $model = Category::class;
    // При выводе 1 модели обязательно проверяем её статус
    protected function beforeGet(Builder $c): Builder
    {
        $c->where('active', true);

        return $c;
    }

    // При выводе списка моделей делаем то же самое
    protected function beforeCount(Builder $c): Builder
    {
        // Пока условия одинаковые - можно не дублировать код
        return $this->beforeGet($c);
    }
}

src/Controllers/Web/Products.php

<?php

namespace App\Controllers\Web;

use App\Models\Product;
use Illuminate\Database\Eloquent\Builder;
use Vesp\Controllers\ModelController;

class Products extends ModelController
{
    protected $model = Product::class;

    protected function beforeGet(Builder $c): Builder
    {
        // Не только товар должен быть включен
        $c->where('active', true);
        // Но и его категория!
        $c->whereHas('category', static function (Builder $c) {
            $c->where('active', true);
        });

        return $c;
    }

    protected function beforeCount(Builder $c): Builder
    {
        return $this->beforeGet($c);
    }

    protected function afterCount(Builder $c): Builder
    {
        // Не забываем выбрать категорию товара, пригодится
        $c->with('category:id,title');

        return $c;
    }
}

$group->group(
    '/web',
    static function (RouteCollectorProxy $group) {
        $group->any('/categories[/{id}]', App\Controllers\Web\Categories::class);
        $group->any('/products[/{id}]', App\Controllers\Web\Products::class);
    }
);

Вывод товаров на сайте

Config.modules = ['bootstrap-vue/nuxt', '@nuxtjs/axios', '@nuxtjs/pwa']

src/site/components/list-products.vue

<template>
  <div class="products-list">
    <div v-for="product in products" :key="product.id" class="product">
      {{ product.id }}. {{ product.title }} &mdash; {{ product.price }} руб.
    </div>
  </div>
</template>

<script>
export default {
  // Название компонента используется для импорта
  name: 'ListProducts',
  // Список принимаемых параметров
  props: {
    // Параметр для работы v-model
    value: {
      type: [String, Number],
      default: 1,
    },
    // Количество выводимых товаров на странице
    limit: {
      type: [String, Number],
      default: 20,
    },
    // Сортировка
    sort: {
      type: String,
      default: 'id',
    },
    // Направление сортировки
    dir: {
      type: String,
      default: 'asc',
    },
  },
  // Внутренние данные компонента
  data() {
    return {
      // Количество загруженных товаров
      total: 0,
      // Пустой массив для товаров
      products: [],
    }
  },
  // Функция загрузки для компонентов NuxtJs
  async fetch() {
    try {
      // Определяем параметры запроса для контроллера
      const params = {limit: this.limit, page: this.page, sort: this.sort, dir: this.dir}
      // Делаем асинхронный запрос
      const {data} = await this.$axios.get('web/products', {params})
      // Сохраняем ответ
      this.products = data.rows
      this.total = data.total
      // Генерируем событие об успешной загрузке с передачей полученных данных
      // Это могут слушать родительские компоненты, чем мы позже и воспользуемся
      this.$emit('load', data)
    } catch (e) {
      // Если есть ошибка - выводим в консоле
      console.error(e)
    }
  },
  // Дальше идут вычисляемые значения
  computed: {
    // Текущая страница вывода товаров
    page: {
      get() {
        return this.value
      },
      set(newValue) {
        // Уведомление родительского компонента об изменении 
        this.$emit('input', newValue)
      },
    },
  },
  // Следим за некоторыми параметрами
  watch: {
    // Новый запрос на сервер при изменении страницы
    page() {
      this.$fetch()
    },
  },
}
</script>

<template>
  <div>
    <!-- вывод подключенного компонента вообще без параметров -->
    <list-products />
  </div>
</template>

<script>
// Импорт нашего компонента
import ListProducts from '../components/list-products'

export default {
  // И подключение для работы
  components: {ListProducts},
}
</script>

Config.bootstrapVue.componentPlugins = ['LayoutPlugin', /*...*/ 'PaginationPlugin']

@import '~bootstrap/scss/pagination';

<template>
  <div class="mt-5">
    <!--добавляем новые параметры вместе с событием на загрузку данных -->
    <list-products v-model="page" :limit="limit" @load="onLoad" />
    <!-- пагинация использьзует те же параметры -->
    <b-pagination v-model="page" :total-rows="total" :per-page="limit" class="mt-3" />
  </div>
</template>

<script>
import ListProducts from '../components/list-products'

export default {
  components: {ListProducts},
  // Добавились параметры по умолчанию
  data() {
    return {
      page: 1,
      limit: 20,
      total: 0,
    }
  },
  methods: {
    // Это действие срабатывает при вызове $emit('load') в list-products,
    // и передаёт нам загруженное, а мы из него сохраняем количество результатов
    onLoad(data) {
      this.total = data.total
    },
  },
}
</script>

• загружается первая страница в list-products
• b-pagination получает количество результатов и отрисовывает кнопки
• при нажатии на кнопки меняется v-model
• происходит новая загрузка list-products

Заключение