Use variables from Laravel blade in Javascript files

Question

I have variable const deleteUrl = "{{ url('ingredients') }}/"; in my index.blade.php file. I want to use it in index.js, but in console I have:

Uncaught (in promise) ReferenceError: deleteUrl is not defined at index-4b1b8432.js:77:27775

What can I do to fix it?

My code:

index.blade.php:

<x-app-layout>
{{-- another code --}}
</x-app-layout>
<x-slot name="jsFiles">
    const deleteUrl = "{{ url('ingredients') }}/";
    <script src="{{ asset("js/ingredients/index.js") }}"></script>
</x-slot>

index.js:

import $ from 'jquery';
$(function() {
    console.log(deleteUrl);
};

app.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">
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title>{{ config('app.name', 'Laravel') }}</title>

        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />

        <!-- Scripts -->
        @vite(['resources/css/app.css', 'resources/js/app.js', 'resources/js/ingredients/index.js'])
    </head>
    <body class="font-sans antialiased">
        <div class="min-h-screen bg-gray-100">
            @include('layouts.navigation')

            <!-- Page Heading -->
            @if (isset($header))
                <header class="bg-white shadow">
                    <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
                        {{ $header }}
                    </div>
                </header>
            @endif

            <!-- Page Content -->
            <main>
                {{ $slot }}
            </main>
        </div>
        <!-- JS Files -->
        {{ $jsFiles ?? '' }}
    </body>
</html>

Only answer from @miken23 helps.

<input type="hidden" id="deleteUrl" value="{{url('ingredients')}}/"/>

I saw, when I put

<script>
    const deleteUrl = "{{ url('ingredients') }}/";
</script>

In my app.blade.php before @vite it works to.

<!-- Scripts -->
    <script>
        const deleteUrl = "{{ url('ingredients') }}/";
    </script>
    @vite(['resources/css/app.css', 'resources/js/app.js', 'resources/js/ingredients/index.js'])

Better solution: Use Vue or Svelte as a front-end and connect this to Laravel via Inertia. — Hovercraft Full Of Eels, Aug 17 '23 at 14:38
Try `window.deleteUrl = ...` instead. Access using `window.` as well. At least this way the value will exist no matter what script you use it from. Implementing a proper API might be even more useful so the deleteUrl doesn't get cached. — Peter Krebs, Aug 17 '23 at 15:23
Does this answer your question? [Passing a PHP variable to JavaScript in a Blade template](https://stackoverflow.com/questions/30074107/passing-a-php-variable-to-javascript-in-a-blade-template) — miken32, Aug 17 '23 at 20:46
@miken32 I saw it. I try to use it, but it doesn't help (or I did something wrong) — janullo789, Aug 17 '23 at 21:14
`` and then in your script `let deleteUrl = $("#deleteUrl").val();` — miken32, Aug 17 '23 at 22:55
put `const deleteUrl = "{{ url('ingredients') }}/";` inside a script tag so that `js/ingredients/index.js` can detect `deleteUrl` — Mr. Kenneth, Aug 18 '23 at 01:51

score 1 · Answer 1 · answered Aug 17 '23 at 16:05

1

I think window global object would work in this case, i had a similar requirement in the past and i have solved it using the same. For e.g in your index.blade.php file assign php variable to window object like below

@php
    $foo = 'Hello, World!';
@endphp

<script>
    window.foo = "{{ $foo }}";
    
</script>

and then in your index.js file you can retrieve it from window global object like below

console.log(window.foo); // Hello, World!

PS: Dont forget to add defer attribute while including this script any where because defer loads the script asynchronously after the HTML content has been parsed so that you can access your variable in window object easily.

answered Aug 17 '23 at 16:05

Saddam

1,174
7
14

I did it and now when I use `console.log(window.foo);` in console I have `undefined` – janullo789 Aug 17 '23 at 17:36
Have you used defer attribute while including script> like this `` – Saddam Aug 17 '23 at 17:49
Yes I tried to use defer – janullo789 Aug 17 '23 at 18:24

score 0 · Answer 2 · answered Aug 18 '23 at 01:55

Change the code from

const deleteUrl = "{{ url('ingredients') }}/";
<script src="{{ asset("js/ingredients/index.js") }}"></script>

to

<script> const deleteUrl = "{{ url('ingredients') }}/"; </script>
<script src="{{ asset("js/ingredients/index.js") }}"></script>

What this does is assign variable deleteUrl inside JS and use that same variable to all JS files after declaration.

More explanation from other stack overflow answer

Use variables from Laravel blade in Javascript files

2 Answers2