PHPackages                             josbeir/cakephp-vite - 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. [Utility & Helpers](/categories/utility)
4. /
5. josbeir/cakephp-vite

ActiveCakephp-plugin[Utility & Helpers](/categories/utility)

josbeir/cakephp-vite
====================

Vite plugin CakePHP

0.1.3(3mo ago)24.0k↑506.7%MITPHPPHP >=8.2CI passing

Since Dec 20Pushed 3mo agoCompare

[ Source](https://github.com/josbeir/cakephp-vite)[ Packagist](https://packagist.org/packages/josbeir/cakephp-vite)[ RSS](/packages/josbeir-cakephp-vite/feed)WikiDiscussions main Synced today

READMEChangelog (4)Dependencies (12)Versions (6)Used By (0)

[![PHPStan Level 8](https://camo.githubusercontent.com/ff3c7f8c8667ce643f47e74532748f673482a5f95d7d4269f925f2eebbe5117e/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5048505374616e2d6c6576656c253230382d627269676874677265656e)](https://github.com/josbeir/cakephp-vite)[![Build Status](https://github.com/josbeir/cakephp-vite/actions/workflows/ci.yml/badge.svg)](https://github.com/josbeir/cakephp-vite/actions)[![codecov](https://camo.githubusercontent.com/10c6b2c8a59c8bc487b3fe87fde07791f0c0151ffc9ad75ce07fd0f2c30f3db8/68747470733a2f2f636f6465636f762e696f2f6769746875622f6a6f73626569722f63616b657068702d766974652f67726170682f62616467652e7376673f746f6b656e3d345647574a5154574835)](https://codecov.io/github/josbeir/cakephp-vite)[![License: MIT](https://camo.githubusercontent.com/fdf2982b9f5d7489dcf44570e714e3a15fce6253e0cc6b5aa61a075aac2ff71b/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c6963656e73652d4d49542d79656c6c6f772e737667)](https://opensource.org/licenses/MIT)[![PHP Version](https://camo.githubusercontent.com/744f8821cc27dec8b0013ade48179731a44eadf4f943e0b1d9ffcb93f80177de/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f7068702d382e322532422d626c75652e737667)](https://www.php.net/releases/8.2/en.php)[![CakePHP Version](https://camo.githubusercontent.com/e4555ed03e5c2dfca6a44248a236ee5d773386c599fe5a8df5c77a102163a9cb/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f43616b655048502d352e322532422d7265642e737667)](https://cakephp.org/)[![Packagist Downloads](https://camo.githubusercontent.com/3699d5260a3ada9d92ca0be2c7652b455571d6a5c1246d6e67d01cf5413559f2/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6a6f73626569722f63616b657068702d76697465)](https://packagist.org/packages/josbeir/cakephp-vite)

CakeVite: Vite Integration for CakePHP
======================================

[](#cakevite-vite-integration-for-cakephp)

A [Vite.js](https://vitejs.dev/) integration for CakePHP 5.0+ applications. Seamlessly switch between development and production modes with automatic asset tag generation.

Note

This project is a spiritual successor to [passchn/cakephp-vite](https://github.com/passchn/cakephp-vite), rewritten with modern PHP and a service-oriented architecture. There is no affiliation with the original project.

Table of Contents
-----------------

[](#table-of-contents)

- [Features](#features)
- [Installation](#installation)
    - [Requirements](#requirements)
    - [Installing the Plugin](#installing-the-plugin)
- [Quick Start](#quick-start)
    - [1. Configure Vite](#1-configure-vite)
    - [2. Load the Helper](#2-load-the-helper)
    - [3. Use in Templates](#3-use-in-templates)
- [Configuration](#configuration)
    - [Basic Configuration](#basic-configuration)
    - [Advanced Configuration](#advanced-configuration)
    - [Environment Variables](#environment-variables)
- [Usage](#usage)
    - [Development Mode](#development-mode)
    - [Production Mode](#production-mode)
    - [Plugin Assets](#plugin-assets)
    - [Multiple Entry Points](#multiple-entry-points)
    - [Custom Attributes](#custom-attributes)
    - [Inline Output](#inline-output)
    - [Preloading Assets](#preloading-assets)
    - [Caching](#caching)
    - [Multiple Configurations](#multiple-configurations)
    - [Check Current Mode](#check-current-mode)
- [How It Works](#how-it-works)
- [Testing](#testing)
- [Contributing](#contributing)
- [License](#license)

Features
--------

[](#features)

- 🚀 **Automatic Mode Detection**: Seamlessly switches between development and production based on your environment
- 🎯 **Zero Configuration**: Works out of the box with sensible defaults
- 📦 **Plugin Support**: Load assets from CakePHP plugins with ease
- 🔧 **Flexible Configuration**: Customize dev server URLs, manifest paths, and more
- 🎨 **CSS Extraction**: Automatically includes CSS dependencies from JavaScript entries in production
- ⚡ **HMR Support**: Full Hot Module Replacement support in development mode
- 🏎️ **Modulepreload Support**: Automatic preloading of dependencies for faster load times in code-split applications
- ✅ **Type-Safe**: 100% type coverage with PHPStan level 8
- 🧪 **Well Tested**: 95%+ code coverage with comprehensive unit and integration tests

Installation
------------

[](#installation)

### Requirements

[](#requirements)

- PHP 8.2 or higher
- CakePHP 5.0 or higher
- Vite 2.0 or higher (installed via npm/yarn/pnpm)

### Installing the Plugin

[](#installing-the-plugin)

Install via Composer:

```
composer require josbeir/cakephp-vite
```

Load the plugin:

```
bin/cake plugin load CakeVite
```

Quick Start
-----------

[](#quick-start)

### 1. Configure Vite

[](#1-configure-vite)

Create or update your `vite.config.js`:

```
import { defineConfig } from 'vite';

export default defineConfig({
  root: 'webroot',
  base: '/',
  build: {
    manifest: true,
    outDir: '../webroot',
    rollupOptions: {
      input: {
        main: 'webroot/src/main.js'
      }
    }
  },
  server: {
    origin: 'http://localhost:3000'
  }
});
```

### 2. Load the Helper

[](#2-load-the-helper)

In your `src/View/AppView.php`:

```
public function initialize(): void
{
    parent::initialize();

    $this->loadHelper('CakeVite.Vite');
}
```

### 3. Use in Templates

[](#3-use-in-templates)

In your layout file (e.g., `templates/layout/default.php`):

```
DOCTYPE html>