Question 15498 in Laravel Question posted in
The official Laravel Documentation can be found here.

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

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.

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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'
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search