### Install ViteHelper Plugin

Source: https://github.com/brandcom/cakephp-vite/blob/cake5/README.md

Install the ViteHelper plugin using composer. This is the recommended installation method.

```shell
composer require passchn/cakephp-vite
```

--------------------------------

### Override ViteHelper Configuration Example

Source: https://github.com/brandcom/cakephp-vite/blob/cake5/README.md

Example of overriding ViteHelper configuration settings in your application's app.php or app_local.php file.

```php
return [
    'ViteHelper' => [
        'forceProductionMode' => 1,
        'development' => [
            'hostNeedles' => ['.dev'], // if you don't use one of the defaults
            'url' => 'https://192.168.0.88:3000',
        ],
    ],
];
```

--------------------------------

### Add Vite Legacy Plugin

Source: https://github.com/brandcom/cakephp-vite/blob/cake5/README.md

Install the Vite legacy plugin as a development dependency using Yarn. This plugin is recommended for broader browser compatibility.

```shell
yarn add -D @vitejs/plugin-legacy
```

--------------------------------

### Import Single CSS Entrypoint

Source: https://github.com/brandcom/cakephp-vite/blob/cake5/README.md

Use this shortcut to import a single CSS entrypoint by providing its path relative to the project root.

```php
<?php $this->ViteScripts->css('webroot_src/style.css') ?>
```

--------------------------------

### Import Single JavaScript Entrypoint

Source: https://github.com/brandcom/cakephp-vite/blob/cake5/README.md

Use this shortcut to import a single JavaScript entrypoint by providing its path relative to the project root.

```php
<?php $this->ViteScripts->script('webroot_src/main.ts') ?>
```

--------------------------------

### Create Vite Project with Yarn

Source: https://github.com/brandcom/cakephp-vite/blob/cake5/README.md

Initialize a new Vite project using Yarn. This command sets up the basic Vite project structure.

```shell
yarn create vite
```

--------------------------------

### Load ViteHelper in AppView.php

Source: https://github.com/brandcom/cakephp-vite/blob/cake5/README.md

Load the ViteHelper Helper in your AppView.php file to make its methods available in your views.

```php
$this->loadHelper('ViteHelper.ViteScripts');
```

--------------------------------

### Include Scripts and CSS with Vite

Source: https://github.com/brandcom/cakephp-vite/blob/cake5/README.md

Use the ViteScripts helper to include JavaScript and CSS files. Configure entry points, development entries, and production filters for asset management.

```php
$this->ViteScripts->script([

    // this would append both the scripts and the css to a block named 'myCustomBlock'
    // don't forget to use the block through $this->fetch('myCustomBlock')
    'block' => 'myCustomBlock',
    'cssBlock' => 'myCustomBlock', // for ::script() only – if you use css imports inside js.

    // files that are entry files during development and that should be served during production
    'files' => [
        'webroot_src/main.ts',
    ],

    // "devEntries" is like "files". If you set "files", it will override both "devEntries" and "prodFilters"
    'devEntries' => ['webroot_src/main.ts']

    // "prodFilter" filters the entry files. Useful for code-splitting if you don't use dynamic imports
    'prodFilter' => 'webroot_src/main.ts' // as string if there's only one option
    'prodFilter' => 'main.ts' // also works - only looks for parts of the string
    'prodFilter' => ['main.ts'] // as array - same as above with multiple files
    'prodFilter' => function (ManifestRecord $record) { /* do something with the record and return true or false */ }
]);
```

--------------------------------

### Import CSS Files with ViteHelper

Source: https://github.com/brandcom/cakephp-vite/blob/cake5/README.md

Import CSS files in your PHP template using the ViteScripts helper. You can pass options for more control.

```php
<?php $this->ViteScripts->css($options) ?>
```

--------------------------------

### Import JavaScript Files with ViteHelper

Source: https://github.com/brandcom/cakephp-vite/blob/cake5/README.md

Import JavaScript files in your PHP template or layout using the ViteScripts helper. You can pass options for more control.

```php
<?php $this->ViteScripts->script($options) ?>
```

--------------------------------

### Default ViteHelper Configuration

Source: https://github.com/brandcom/cakephp-vite/blob/cake5/README.md

This is the default configuration structure for the ViteHelper plugin. It can be overridden in your application's configuration files.

```php
'ViteHelper' => [
    'build' => [
        'outDirectory' => false, // output directory of build assets. string (e.g. 'dist') or false.
        'manifest' => WWW_ROOT . 'manifest.json', // absolute path to manifest
    ],
    'development' => [
        'scriptEntries' => ['someFolder/myScriptEntry.ts'], // relative to project root
        'styleEntries' =>  ['someFolder/myStyleEntry.scss'], // relative to project root. Unnecessary when using css-in-js.
        'hostNeedles' => ['.test', '.local'], // to check if the app is running locally
        'url' => 'http://localhost:3000', // url of the vite dev server
    ],
    'forceProductionMode' => false, // or true to always serve build assets
    'plugin' => false, // or string 'MyPlugin' to serve plugin build assets
    'productionHint' => 'vprod', // can be a true-ish cookie or url-param to serve build assets without changing the forceProductionMode config
    'viewBlocks' => [
        'css' => 'css', // name of the css view block
        'script' => 'script', // name of the script view block
    ],
]
```

--------------------------------

### Vite 2.9.0+ Configuration

Source: https://github.com/brandcom/cakephp-vite/wiki/example-vite-config

Configuration for Vite version 2.9.0 or higher. Includes Vue plugin, legacy browser support, build output directory, manifest generation, and server settings.

```typescript
import {
    defineConfig
} from 'vite';
import vue from '@vitejs/plugin-vue';
import legacy from '@vitejs/plugin-legacy';

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        legacy({
            targets: ['defaults', 'not IE 11']
        })
    ],
    build: {
        emptyOutDir: false,
        outDir: './webroot',
        manifest: true,
        rollupOptions: {
            input: './webroot_src/main.ts',
        },
    },
    server: {
        port: 3000,
        strictPort: true,
        hmr: {
            protocol: 'ws',
            host: 'localhost',
        },
    },
});

```

--------------------------------

### Vite Below 2.9.0 Configuration

Source: https://github.com/brandcom/cakephp-vite/wiki/example-vite-config

Configuration for Vite versions below 2.9.0. Note the placement of the HMR port setting under `server.port` in newer versions.

```typescript
import {
    defineConfig
} from 'vite';
import vue from '@vitejs/plugin-vue';
import legacy from '@vitejs/plugin-legacy';

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        legacy({
            targets: ['defaults', 'not IE 11']
        })
    ],
    build: {
        emptyOutDir: false,
        outDir: './webroot/',
        assetsDir: 'build',
        manifest: true,
        rollupOptions: {
            input: './webroot_src/main.ts',
        },
    },
    server: {
        hmr: {
            protocol: 'ws',
            host: 'localhost',
            port: 3000,
        },
    },
});

```

--------------------------------

### Load ViteHelper Plugin in Application.php

Source: https://github.com/brandcom/cakephp-vite/blob/cake5/README.md

Load the ViteHelper plugin in your CakePHP application's Application.php file.

```shell
bin/cake plugin load ViteHelper
```

--------------------------------

### Load Plugin Scripts with Vite

Source: https://github.com/brandcom/cakephp-vite/blob/cake5/README.md

Load scripts for a specific CakePHP plugin using the pluginScript helper. Configure development mode and a custom CakePHP config key for the Vite helper.

```php
<?php $this->ViteScripts->pluginScript('MyPlugin', devMode: true, config: 'MyPlugin.ViteConfig'); ?>
```

--------------------------------

### Include Script View Block in Layout

Source: https://github.com/brandcom/cakephp-vite/blob/cake5/README.md

Include the script view block just before the closing </body> tag in your PHP layout file. This is a default CakePHP view block.

```php
<?= $this->fetch('script') ?>
```

--------------------------------

### Include CSS View Block in Layout

Source: https://github.com/brandcom/cakephp-vite/blob/cake5/README.md

Include the CSS view block in your HTML head within your PHP layout file. This is a default CakePHP view block.

```php
<?= $this->fetch('css') ?>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.