How to inject any js file inside head tag in Laravel v9.19 in development server?

Question

I'm using Laravel v9.19 and Vite v4.0.0. When I'm adding config.js file using @vite directive, it is always executing after all the html content is loaded. But, I'm trying to execute config.js file before all the html content is loaded. The purpose is, I'm trying to access the configuration values immediately after body tag is loaded. Is there any way I can include config.js file inside head tag?

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import VitePluginEntryInject from 'vite-plugin-entry-inject';

export default defineConfig({
    plugins: [
        VitePluginEntryInject({
            // head-prepend/head/body-prepend/body
            injectTo: 'head'
        }),
        laravel({
            input: [
                'resources/scss/theme.scss', 
                'resources/scss/user.scss', 
                'resources/js/config.js',
            ],
            refresh: true,
        }),
    ],
});

welcome.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>
       
        @vite('resources/js/config.js')

    </head>
    <body>
      <script>
        console.log(window.config);
      </script>
    </body>
</html>

config.js

const config = {
  mode: 'dark'
}

window.config = config;

I want to load config.js file inside head tag that I can access config values inside html marukup.

score 0 · Answer 1 · answered Mar 14 '23 at 07:01

You can modify a vite.config.js adding the build section like that:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import VitePluginEntryInject from 'vite-plugin-entry-inject';

export default defineConfig({
    plugins: [
        VitePluginEntryInject({
            // head-prepend/head/body-prepend/body
            injectTo: 'head'
        }),
        laravel({
            input: [
                'resources/scss/theme.scss', 
                'resources/scss/user.scss', 
            ],
            refresh: true,
        }),
    ],
    build: {
        rollupOptions: {
            input: {
                main: './resources/js/main.js',
                config: './resources/js/config.js'
            },
        },
    },
});

And as a result in your blade file, you can do like that

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <script type="module" src="{{ mix('assets/js/config.js') }}"></script>
    </head>
    <body>
      <script>
        console.log(window.config);
      </script>
    </body>
</html>

After adding this config.js not found in dev server. Is there anything I can do here? `````` — Muazzem Ovi, Mar 14 '23 at 08:02

score 0 · Answer 2 · answered Mar 15 '23 at 07:00

Try this: vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import VitePluginEntryInject from 'vite-plugin-entry-inject';

export default defineConfig({
    plugins: [
        VitePluginEntryInject({
            // head-prepend/head/body-prepend/body
            injectTo: 'head'
        }),
        laravel({
            input: [
                'resources/scss/theme.scss', 
                'resources/scss/user.scss', 
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

Add this to your app.js:

import './config.js'

How to inject any js file inside head tag in Laravel v9.19 in development server?

2 Answers2