PHPackages                             mtresk/laravel-starter-kit - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Framework](/categories/framework)
4. /
5. mtresk/laravel-starter-kit

ActiveProject[Framework](/categories/framework)

mtresk/laravel-starter-kit
==========================

Tresk Laravel Starter Kit

03TypeScript

Since Nov 5Pushed 8mo agoCompare

[ Source](https://github.com/mTresk/laravel-starter-kit)[ Packagist](https://packagist.org/packages/mtresk/laravel-starter-kit)[ RSS](/packages/mtresk-laravel-starter-kit/feed)WikiDiscussions main Synced today

READMEChangelogDependenciesVersions (1)Used By (0)

Laravel Starter Kit
===================

[](#laravel-starter-kit)

Современный стартовый набор для создания веб-приложений на Laravel. Включает в себя все необходимые инструменты для разработки, сборки и деплоя.

> **Laravel Starter Kit** - готовый к использованию шаблон проекта с предустановленными компонентами, стилями и утилитами для быстрого старта разработки.

🚀 Особенности
-------------

[](#-особенности)

- **Laravel 12** - современный PHP фреймворк
- **Blade компоненты** - переиспользуемые UI компоненты
- **Vue 3** - реактивные компоненты (опционально)
- **SCSS** - препроцессор для стилей с BEM методологией
- **Vite** - быстрый сборщик для фронтенда
- **PHPStan** - статический анализ PHP кода
- **Laravel Pint** - форматирование PHP кода

📋 Требования
------------

[](#-требования)

- PHP: `^8.3`
- Composer
- Node.js: `^20.19.0 || >=22.12.0` (для фронтенда)
- npm или yarn

🛠 Установка
-----------

[](#-установка)

### Быстрая установка через Laravel Installer

[](#быстрая-установка-через-laravel-installer)

1. Установите Laravel Installer (если еще не установлен):

```
composer global require laravel/installer
```

2. Создайте новый проект с помощью starter kit:

```
laravel new my-project --using=mTresk/laravel-starter-kit
cd my-project
```

3. Запустите проект в режиме разработки:

```
composer run dev
```

Проект будет доступен по адресу `http://localhost:8000`

📜 Доступные команды
-------------------

[](#-доступные-команды)

### Разработка

[](#разработка)

- `php artisan serve` - запуск Laravel сервера
- `composer run dev` - запуск полного стека разработки (Laravel + Vite + Queue + Logs)
- `npm run dev` - запуск Vite dev сервера для фронтенда

### Сборка

[](#сборка)

- `npm run build` - сборка фронтенда (включает оптимизацию и линтинг)
- `npm run build:vite` - только сборка Vite

### Анализ кода

[](#анализ-кода)

- `composer run analyse` - статический анализ PHP (PHPStan + Pint)
- `npm run lint` - проверка фронтенда (ESLint + Stylelint)
- `npm run lint:fix` - автоматическое исправление фронтенда

### Утилиты

[](#утилиты)

- `npm run fonts` - генерация woff2 шрифтов из исходников
- `npm run px-to-rem` - конвертация px в rem
- `npm run fix-all` - полная оптимизация (px-to-rem + линтинг)

📁 Структура проекта
-------------------

[](#-структура-проекта)

```
├── app/                # Laravel приложение
│   ├── Http/           # HTTP контроллеры
│   ├── Models/         # Eloquent модели
│   └── Providers/      # Сервис провайдеры
├── database/           # База данных
│   ├── migrations/     # Миграции
│   ├── factories/      # Фабрики для тестов
│   └── seeders/        # Сидеры
├── public/             # Публичные файлы
│   ├── build/          # Собранные ресурсы (Vite)
│   ├── images/         # Статические изображения
│   └── index.php       # Точка входа Laravel
├── resources/          # Ресурсы для компиляции
│   └── views/          # Blade шаблоны
│       ├── components/ # Blade компоненты
│       │   ├── form/   # Формы и инпуты
│       │   ├── layout/ # Компоненты макета
│       │   ├── ui/     # UI компоненты
│       │   └── ...     # Остальные компоненты
│       └── *.blade.php # Страницы
├── routes/             # Маршруты
│   └── web.php         # Web маршруты
├── src/                # Фронтенд ресурсы
│   ├── app.ts          # Инициализация JavaScript приложения
│   ├── vue.ts          # Инициализация Vue компонентов
│   ├── assets/         # Ресурсы для обработки
│   │   ├── fonts/      # Оптимизированные шрифты (woff2)
│   │   ├── fonts-raw/  # Исходные шрифты (ttf/otf)
│   │   ├── icons/      # SVG иконки
│   │   └── images/     # Изображения для разработки
│   ├── styles/         # SCSS стили
│   │   ├── helpers/    # Переменные, миксины
│   │   ├── libs/       # Стили библиотек
│   │   └── index.ts    # Точка входа стилей
│   └── utils/          # JavaScript утилиты
│       ├── base/       # Базовые скрипты
│       ├── forms/      # Работа с формами
│       ├── libs/       # JavaScript библиотеки
│       └── tasks/      # Задачи сборки
├── storage/            # Файлы приложения
├── tests/              # Тесты (Pest)
└── vendor/             # Composer зависимости

```

### Разница между папками

[](#разница-между-папками)

- **`public/`** - статические файлы, доступные напрямую через веб-сервер
- **`resources/`** - Blade шаблоны и ресурсы для компиляции
- **`src/`** - фронтенд ресурсы (CSS, JS), обрабатываемые Vite

🎨 Стилизация
------------

[](#-стилизация)

Проект использует **SCSS** с BEM методологией для стилизации.

### Основные файлы стилей:

[](#основные-файлы-стилей)

- `src/styles/helpers/variables.scss` - SCSS переменные
- `src/styles/helpers/mixins.scss` - SCSS миксины
- `src/styles/colors.scss` - цветовая палитра
- `src/styles/fonts.scss` - стили шрифтов (генерируются через `npm run fonts`)
- `src/styles/globals.scss` - глобальные стили
- `src/styles/null.scss` - сброс стилей

🧩 Компоненты
------------

[](#-компоненты)

### Blade компоненты:

[](#blade-компоненты)

#### Layout компоненты:

[](#layout-компоненты)

- **main** - основной макет страницы с мета-тегами и структурой
- **header** - шапка сайта
- **footer** - подвал сайта
- **breadcrumb** - хлебные крошки
- **content** - контентная секция

#### UI компоненты:

[](#ui-компоненты)

- **icon** - SVG иконки из спрайта
- **button** - кнопки различных типов
- **menu-button** - кнопка меню

#### Form компоненты:

[](#form-компоненты)

- **form-field** - поля форм
- **checkbox** - чекбоксы
- **radio** - радиокнопки
- **select** - селекты
- **quantity** - счетчики количества
- **range** - слайдеры диапазонов

#### Интерактивные компоненты:

[](#интерактивные-компоненты)

- **accordion** - аккордеоны с анимацией
- **popup** - модальные окна
- **map** - интеграция с картами

### Использование:

[](#использование)

#### Icon

[](#icon)

Для использования иконок:

1. Добавьте SVG символы в файл `public/images/icons.svg`
2. Используйте Blade компонент Icon:

```

```

**Props:**

- `name` - ID символа в icons.svg
- `size` - размер иконки в пикселях (приоритет над width/height)
- `width` - ширина иконки
- `height` - высота иконки

**Структура icons.svg:**

```

```

#### Accordion

[](#accordion)

Компонент аккордеона с плавной анимацией открытия/закрытия. Поддерживает различные режимы работы и настройки анимации.

**Структура компонентов:**

- `accordion-root` - корневой контейнер для группы аккордеонов
- `accordion` - отдельный элемент аккордеона

**Базовое использование:**

```

            Заголовок 1

            Содержимое первого аккордеона

            Заголовок 2

            Содержимое второго аккордеона

```

**AccordionRoot Props:**

- `is-single` - режим "только один открытый" (по умолчанию false)
- `is-close-outside` - закрытие по клику вне области (по умолчанию false)
- `duration` - длительность анимации в миллисекундах (по умолчанию 300)

**Особенности:**

- ✅ Плавная анимация с использованием `max-height`
- ✅ Поддержка множественных аккордеонов на странице
- ✅ Автоматическая инициализация через JavaScript класс
- ✅ Синхронизация CSS и JavaScript анимации
- ✅ Доступность (semantic HTML с `` и ``)

🧩 Vue компоненты (опционально)
------------------------------

[](#-vue-компоненты-опционально)

Проект поддерживает использование Vue 3 компонентов в Blade шаблонах для создания интерактивных элементов.

### Подключение Vue

[](#подключение-vue)

1. Vue настроен в `src/vue.ts` и подключается через Vite
2. Создайте Vue компонент в папке `src/components/`
3. Зарегистрируйте компонент в `src/vue.ts`
4. Используйте компонент в Blade шаблоне

### Пример использования

[](#пример-использования)

**Создание Vue компонента:**

```

  Пример Vue компонента в Laravel

```

**Регистрация в vue.ts:**

```
// src/vue.ts
import { createApp } from 'vue'
import VueExample from '@/components/VueExample.vue'

const VueExampleInstance = createApp({
  components: {
    'component-example': VueExample,
  },
})

if (document.querySelector('#example-component')) {
  VueExampleInstance.mount('#example-component')
}
```

**Использование в Blade:**

```

```

🔤 Работа со шрифтами
--------------------

[](#-работа-со-шрифтами)

### Подготовка шрифтов

[](#подготовка-шрифтов)

1. Поместите исходные шрифты в папку `src/assets/fonts-raw/` в формате TTF или OTF
2. Запустите генерацию оптимизированных шрифтов: ```
    npm run fonts
    ```
3. Оптимизированные шрифты (WOFF2) будут созданы в папке `src/assets/fonts/`

### Использование шрифтов

[](#использование-шрифтов)

После генерации шрифты автоматически подключаются в проекте. Используйте их в CSS:

```
// В styles/fonts.scss
@font-face {
  font-family: 'Inter';
  src: url('@/assets/fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('@/assets/fonts/Inter-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
```

🔧 Утилиты
---------

[](#-утилиты)

### JavaScript библиотеки (в src/utils/libs/):

[](#javascript-библиотеки-в-srcutilslibs)

- **Accordion** - нативные аккордеоны с анимацией
- **Gallery** - lightbox галерея изображений
- **Map** - инициализация Yandex Карт
- **Menu** - логика бургер-меню
- **Parallax** - параллакс эффекты
- **Popup** - управление модальными окнами
- **Quantity** - счетчики количества
- **ResponsiveAdapter** - изменения порядка элементов на определенной ширине
- **Scroll** - навигация и направление скрола
- **ScrollWatcher** - отслеживание скрола
- **ShowMore** - показать еще
- **Spoilers** - JS аккордеоны
- **Tabs** - табы

### Формы (в src/utils/forms/):

[](#формы-в-srcutilsforms)

- **DatePicker** - выбор даты
- **InputMask** - маски ввода
- **Range** - диапазоны
- **Select** - JavaScript селект

### Базовые утилиты (в src/utils/base/):

[](#базовые-утилиты-в-srcutilsbase)

- **helpers** - вспомогательные функции
- **scrollbar** - кастомные скроллбары
- **sliders** - слайдеры
- **tippy** - тултипы

📖 **Документация по использованию:** [snippets.maximtresk.ru](https://snippets.maximtresk.ru/)

### Активация утилит

[](#активация-утилит)

Для активации утилит раскомментируйте соответствующие строки в `src/app.ts`:

```
// src/app.ts
function initializeApp() {
  new Accordion() // уже активен
  // new Gallery()
  // new Map()
  // new Menu()
  // new Parallax({})
  // new Popup()
  // new ResponsiveAdapter('max')
  // new ScrollWatcher({})
  // new ShowMore()
  // new Spoilers()
  // new Tabs()
  // new Quantity()
  // const scroll = new Scroll()
}
```

⚙️ Конфигурация
---------------

[](#️-конфигурация)

### Vite (vite.config.js)

[](#vite-viteconfigjs)

- Поддержка Vue 3 компонентов
- Автоматическая оптимизация изображений
- SCSS препроцессор с глобальными переменными
- Алиасы путей (@ для src/)

### ESLint & Stylelint

[](#eslint--stylelint)

- Конфигурация @antfu/eslint-config
- SCSS линтинг
- Автоформатирование

🎯 SEO
-----

[](#-seo)

### Laravel SEO

[](#laravel-seo)

- **Blade директивы** - управление мета-тегами
- **Open Graph** - поддержка социальных сетей

### Использование в Blade

[](#использование-в-blade)

```

```

📚 Дополнительные ресурсы
------------------------

[](#-дополнительные-ресурсы)

- [Laravel Documentation](https://laravel.com/docs)
- [Laravel Starter Kits](https://laravel.com/docs/starter-kits)
- [Vue 3 Documentation](https://vuejs.org/)
- [Vite Documentation](https://vitejs.dev/)
- [BEM Methodology](https://getbem.com/)
- [SCSS Documentation](https://sass-lang.com/)

📄 Лицензия
----------

[](#-лицензия)

MIT License

---

**Создано с ❤️ для современной веб-разработки на Laravel**

###  Health Score

16

—

LowBetter than 4% of packages

Maintenance43

Moderate activity, may be stable

Popularity3

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity13

Early-stage or recently created project

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/33250247?v=4)[Maxim Tresk](/maintainers/mTresk)[@mTresk](https://github.com/mTresk)

---

Top Contributors

[![mTresk](https://avatars.githubusercontent.com/u/33250247?v=4)](https://github.com/mTresk "mTresk (7 commits)")

### Embed Badge

![Health badge](/badges/mtresk-laravel-starter-kit/health.svg)

```
[![Health](https://phpackages.com/badges/mtresk-laravel-starter-kit/health.svg)](https://phpackages.com/packages/mtresk-laravel-starter-kit)
```

###  Alternatives

[laravel/dusk

Laravel Dusk provides simple end-to-end testing and browser automation.

1.9k39.6M299](/packages/laravel-dusk)[nineinchnick/edatatables

Grid widget for the Yii Framework, wrapper for the DataTables jQuery plugin

173.2k](/packages/nineinchnick-edatatables)[link-cloud/fast-hyperf

LinkCloud Fast Hyperf

241.2k1](/packages/link-cloud-fast-hyperf)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)