[SOLVED] Why do I get an undefined constant error in Laravel?

Why do I get an undefined constant error in Laravel?

I'm trying to get my very first Vue code working in Laravel but Vue doesn't seem to be working for me and I'm really not sure why.

The Vue Mastery courses are free this weekend - they normally cost more than I can afford - so I want to take advantage of this opportunity to learn Vue properly. Unfortunately, my very first lesson in the Vue Basics course won't work.

Here's my code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Shopping List App</title>
    <link rel="stylesheet" href="/css/app.css">
</head>
<body>
    <div id="shopping-list">
        <h1>{{ header }}</h1>
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script>
        new Vue({
            el: '#shopping-list',
            data: {
                header: 'Vue is ready to party!'
            }
        });
    </script>
</body>
</html>

I can't see ANY difference between this and the code shown in the course except that I have a different CSS file in a different location. (That file exists and I've specified the location correctly because Laravel is not failing to find it.)

Here's the error message:

Facade\Ignition\Exceptions\ViewException
Use of undefined constant header - assumed 'header' (this will throw an Error in a future version of PHP) (View: C:\Laravel\Somers02\resources\views\VueBasics\lesson01.blade.php)
http://localhost:8002/VueBasics/lesson01

The error references line 10 of the code:

 <h1>{{ header }}</h1>

I thought perhaps "header" was a reserved word so I tried changing it to something that almost certainly isn't a reserved word - hdrx - in both places but that didn't work any better. The course is assuming that the students is NOT using Laravel, just plain old HTML/CSS/JavaScript, so I'm guessing I need to do something in Laravel to make this work.

Solution

I assume you have this in a blade file where the {{ }} syntax is also blade syntax

https://laravel.com/docs/7.x/blade

The 'header' is executed as PHP and not in VUE or javascript therefore the 'header' is handled as a constant as it is not a variable , function or anything else.