Pass Data From Laravel config file to Vite

how do i pass data from themes.php in laravel config folder to vite.config.js? i want to pass the vite buld_directory to the vite.config.js so it knows which directory to use during build process based on selected theme. the error i'm getting is: No loader is configured for ".php" files: config/themes.php when i run npm run assets

// a section of the package.json file
"scripts": {
    "dev": "vite",
    "build": "vite build",
    "assets": "vite build --watch"
},

<?php
// themes.php config file
return [
    'theme' => 'shop', // selected theme

    'themes' => [
        'shop' => [
            'name'        => 'Default Shop Theme',
            'assets_path' => 'themes/shop/assets',
            'views_path'  => 'resources/views/shop',

            'vite'        => [
                'hot_file'                 => 'shop-vite.hot',
                'build_directory'          => 'themes/shop/build',
                'package_assets_directory' => 'resources/shop',
            ],
        ],
        'mart' => [
            'name'        => 'Mart Shop Theme',
            'assets_path' => 'themes/mart/assets',
            'views_path'  => 'resources/views/mart',

            'vite'        => [
                'hot_file'                 => 'mart-vite.hot',
                'build_directory'          => 'themes/mart/build',
                'package_assets_directory' => 'resources/mart',
            ],
        ],
    ],
];

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import { resolve } from 'path';
import { default as tailwindcss } from 'tailwindcss';
import { default as autoprefixer } from 'autoprefixer';

// Load theme configuration
const themeConfig = require('./config/themes.php');
const themeName = themeConfig.theme || 'shop'; // Use the default theme if not specified
const theme = themeConfig.themes[themeName] || {};

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
    css: {
        postcss: {
            plugins: [
                tailwindcss(resolve('tailwind.config.js')),
                autoprefixer,
            ],
        },
    },
    build: {
        outDir: theme.vite && theme.vite.build_directory ? `public/${theme.vite.build_directory}` : 'public/build',
        rollupOptions: {
            output: {
                assetFileNames: (assetInfo) => {
                    var info = assetInfo.name.split(".");
                    var extType = info[info.length - 1];

                    if (/png|jpe?g|svg|gif|tiff|bmp|ico/i.test(extType)) {
                        extType = "imgs";
                    } else if (/woff|woff2/.test(extType)) {
                        extType = "css/fonts";
                    }

                    return `assets/${extType}/[name]-[hash][extname]`;
                },
                chunkFileNames: 'assets/js/[name]-[hash].js',
                entryFileNames: 'assets/js/[name]-[hash].js',
            },
        },
    },
});

alden8

2 years ago

Level 1

Vite is a JavaScript tools. You can't directly import PHP files. You need to create a bridge between Laravel configuration and Vite.

-- variant with standalone config file

export default {
    theme: 'shop', // default theme
    themes: {
        // ... your theme 
    },
};

-- variant with import this file in both Laravel and Vite

Laravel: config('vite.theme')
Vite: require('./config/vite.config.js')

-- helper method (app/helpers/...)

function vite_config() {
    return json_encode(config('themes'));
}

-- access it in Vite using a script tag

const themeConfig = JSON.parse(document.getElementById('vite-config').textContent);

-- run this script before Vite build (package.json)

"scripts": {
    "build": "node scripts/export-vite-config.js && vite build",
    "assets": "node scripts/export-vite-config.js && vite build --watch"
}

croftCoder

2 years ago

Level 1

@alden8 i'm confused with the variant with standalone config file and the variant with import this file in both laravel and vite. can you be a bit more simpler and give file names so i know what goes where? thanks

alden8

2 years ago

Level 1

@croftcoder

in the standalone config file option, the file can be called vite.config.js
in the import this file in both Laravel and Vite option, the example is as follows

-- config/vite.config.js file

export default {
   theme: 'shop', // default theme
   themes: {
     'shop': {
       'name': 'Default Shop Theme',
       'assets_path': 'themes/shop/assets',
       'views_path': 'resources/views/shop',

       'vite': {
         'hot_file': 'shop-vite.hot',
         'build_directory': 'themes/shop/build',
         'package_assets_directory': 'resources/shop',
       },
     },
     'mart': {
       'name': 'Mart Shop Theme',
       'assets_path': 'themes/mart/assets',
       'views_path': 'resources/views/mart',

       'vite': {
         'hot_file': 'mart-vite.hot',
         'build_directory': 'themes/mart/build',
         'package_assets_directory': 'resources/mart',
       },
     },
   },
};

-- fmport config/vite.config.js to Laravel (app.php)

use Illuminate\Support\Facades\Config;

// ...

Config::set('vite.config', require('./config/vite.config.js'));

-- import config/vite.config.js into vite.config.js

import { defineConfig } from 'vite';

// ...

import viteConfig from './config/vite.config.js';

export default defineConfig(viteConfig);

-- the config data in this example can be accessed like this:

const theme = viteConfig.theme;

Please or to participate in this conversation.