Support customizing the Vite build directory

[truechernyshov]

Currently, the build directory for Vite is hardcoded in modules/system/classes/asset/Vite.php as /assets/dist. However, a theme may have multiple frontends or skins, making it necessary to compile assets into different directories, which Vite supports. Unfortunately, the current PHP code always attempts to find the manifest.json file in /assets/dist. To address this, there needs to be a way to configure the build directory dynamically.

[LukeTowers]

@truechernyshov can you provide a usage example?

[truechernyshov]

@LukeTowers

Compile theme like this

VITE_THEME_SKIN=tomato php artisan vite:compile theme-skins

Vite config example

import { defineConfig } from 'vite'
import laravel from 'laravel-vite-plugin'
import vue from '@vitejs/plugin-vue'

const skinKebabCase = (process.env.VITE_THEME_SKIN || 'black').toLowerCase()

export default defineConfig({
    build: {
        outDir: `assets/${skinKebabCase}`,
        assetsDir: '',
    },
    plugins: [
        laravel({
            publicDirectory: `assets/${skinKebabCase}`,
            input: [
                `src/assets/${skinKebabCase}/css/main.css`,
                'src/main.js',
            ],
            refresh: {
                paths: [
                    './**/*.htm',
                    './**/*.block',
                    'src/**/*.css',
                    'src/**/*.js',
                ]
            },
        }),
        vue(),
    ],
});

Twig

{{ vite(['css/main.css', 'js/main.js'], 'theme-skins', 'assets/' ~ skin) }}

[LukeTowers]

Thanks very much @truechernyshov!