PHP code example of josbeir / cakephp-vite

1. Go to this page and download the library: Download josbeir/cakephp-vite library. Choose the download type require.

2. Extract the ZIP file and open the index.php.

3. Add this code to the index.php. 
    
        
<?php
require_once('vendor/autoload.php');

/* Start to develop here. Best regards https://php-download.com/ */

josbeir / cakephp-vite example snippets


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

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


<!DOCTYPE html>
<html>
<head>
    <?= $this->Html->charset() 


return [
    'CakeVite' => [
        'devServer' => [
            'url' => 'http://localhost:3000',
            'entries' => [
                'script' => ['src/main.js'],
                'style' => ['src/style.css'],
            ],
        ],
    ],
];


> // Uses config default (src/main.js) in development
> $this->Vite->script();
>
> // Override for this specific call (works in dev and production)
> $this->Vite->script(['files' => ['src/admin.js']]);
> 


return [
    'CakeVite' => [
        'devServer' => [
            // Development server URL
            'url' => env('VITE_DEV_SERVER_URL', 'http://localhost:3000'),

            // Hostname hints for development mode detection
            'hostHints' => ['localhost', '127.0.0.1', '.test', '.local'],

            // Default entries for development mode
            'entries' => [
                'script' => ['src/main.js'],
                'style' => ['src/style.css'],
            ],
        ],

        'build' => [
            // Path to Vite's manifest.json
            'manifestPath' => WWW_ROOT . 'manifest.json',

            // Output directory (relative to webroot)
            'outDirectory' => false,  // or 'dist', 'build', etc.
        ],

        // Modulepreload support for faster loading (production only)
        // Options: 'none', 'link-tag'
        'preload' => env('VITE_PRELOAD_MODE', 'link-tag'),

        // Persistent caching (production performance optimization)
        'cache' => [
            'config' => env('VITE_CACHE_CONFIG', false),  // CakePHP cache config name
            'development' => false,
        ],

        // Force production mode (ignores environment detection)
        'forceProductionMode' => false,

        // Plugin name for loading plugin assets (null for app assets)
        'plugin' => null,

        // Cookie/query parameter name to force production mode
        'productionModeHint' => 'vprod',

        // View block names for script and CSS tags
        'viewBlocks' => [
            'script' => 'script',
            'css' => 'css',
        ],
    ],
];


'devServer' => [
    'url' => env('VITE_DEV_SERVER_URL', 'http://localhost:3000'),
],



return [
    'CakeVite' => [
        'devServer' => [
            'hostHints' => [env('DDEV_HOSTNAME', '')],
            'url' => env('DDEV_PRIMARY_URL') . ':5173',
        ],
    ],
];


// Single file - quick and easy
 $this->Vite->script('src/main.js'); 

// Single file with options
 $this->Vite->script(['files' => ['src/main.js']]); 

// In your template
 $this->Vite->script(['files' => ['src/main.js']]); 

// Same code in template
 $this->Vite->script(['files' => ['src/main.js']]); 

// Load from MyPlugin

$this->Vite->pluginScript('MyPlugin', true, ['files' => ['src/plugin.js']]);
$this->Vite->pluginCss('MyPlugin', true, ['files' => ['src/plugin.css']]);


'CakeVite' => [
    'plugin' => 'MyPlugin',
],



$this->Vite->script([
    'files' => [
        'src/main.js',
        'src/admin.js',
        'src/analytics.js',
    ]
]);



// Only load files matching 'admin'
$this->Vite->script([
    'filter' => 'admin'
]);



$this->Vite->script([
    'files' => ['src/main.js'],
    'attributes' => [
        'defer' => true,
        'data-turbo-track' => 'reload',
    ]
]);



// Append to 'custom_scripts' block instead of default 'script'
$this->Vite->script([
    'files' => ['src/main.js'],
    'block' => 'custom_scripts'
]);



// Output directly instead of buffering to view blocks
echo $this->Vite->script(['files' => ['src/main.js'], 'block' => false]);
echo $this->Vite->css(['files' => ['src/style.css'], 'block' => false]);


<!-- In an element file -->
<?= $this->Vite->css(['files' => ['src/component.css'], 'block' => false]) 

// Layout
 $this->Vite->script(['files' => ['src/app.js']]); 


// Only output scripts, skip dependent CSS injection
$this->Vite->script(['files' => ['src/main.js'], 'cssBlock' => false]);



// Preloading is enabled by default in production
$this->Vite->script(['files' => ['src/main.js']]);



// Disable preloading for a specific call
$this->Vite->script([
    'files' => ['src/main.js'],
    'preload' => 'none'
]);


// config/app_vite.php
return [
    'CakeVite' => [
        // Options: 'none', 'link-tag'
        'preload' => 'none',  // Disable preloading globally
    ],
];


// config/app_vite.php
return [
    'CakeVite' => [
        'cache' => [
            'config' => 'default',  // Use any CakePHP cache config
        ],
    ],
];


'cache' => [
    'config' => 'default',
    'development' => true,  // Enable caching in dev mode
],


// config/app_vite.php
return [
    'CakeVite' => [
        'devServer' => ['url' => 'http://localhost:3000'],
        'build' => ['manifestPath' => WWW_ROOT . 'manifest.json'],

        'configs' => [
            'admin' => [
                'devServer' => ['url' => 'http://localhost:3001'],
                'build' => [
                    'outDirectory' => 'admin',
                    'manifestPath' => WWW_ROOT . 'admin' . DS . 'manifest.json',
                ],
            ],
            'marketing' => [
                'devServer' => ['url' => 'http://localhost:3002'],
                'build' => ['outDirectory' => 'marketing'],
            ],
        ],
    ],
];


<!-- Use 'admin' config -->
 $this->Vite->script(['files' => ['src/admin.ts'], 'config' => 'admin']); 

 if ($this->Vite->isDev()): 
javascript
import { defineConfig } from 'vite';

export default defineConfig({
  root: 'webroot',
  base: '/',
  build: {
    manifest: true,
    outDir: 'webroot/build',
    rollupOptions: {
      input: {
        main: 'webroot/src/main.js'
      }
    }
  },
  server: {
    host: '0.0.0.0',
    port: 5173,
    strictPort: true,
    origin: `${process.env.DDEV_PRIMARY_URL.replace(/:\d+$/, "")}:5173`,
    cors: {
      origin: /https?:\/\/([A-Za-z0-9\-\.]+)?(\.ddev\.site)(?::\d+)?$/,
    },
  }
});