Why Laravel Vite Directive Not Working in My Project?

Asked 29/6, 2022 at 9:47 Answered 21/12, 2023 at 0:20

I installed and configured laravel breeze and blade according to the documentation given by laravel. By default it uses Vite but somehow @vite directive is not working in my project and I don't know what I miss.

tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme');

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Nunito', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    plugins: [require('@tailwindcss/forms')],
};

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel([
            'resources/css/app.css',
            'resources/js/app.js',
        ]),
    ]
});

The vite is compiling properly my js and css assets:

I then created a test blade template with @vite directive:

<!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="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">

<!-- Scripts -->
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
<div class="font-sans text-gray-900 antialiased">
    Hello World
</div>
</body>
</html>

My test route:

Route::get('/nice', function () {
    return view('test');
});

The output below shows that the @vite is not generating the appropriate script and link assets tag:

My development environment is homestead, and I have laravel mix alongside since I am slowly upgrading our front-end to vite. I hope somebody here will be able to help me fix the issues and thank you.

Craquelure answered 29/6, 2022 at 9:47 Comment(5)

Do other Blade functions work in that template, like {{ config('app.name', 'Laravel') }} in the title? – Lashing 29/6, 2022 at 10:30

@brombeer Yes the other functions are working. – Craquelure 29/6, 2022 at 21:48

This is interesting, can you also show the code inside package.json too? – Carmagnole 4/7, 2022 at 9:17

I seem to have the same issue, when running npm run dev everything works like a charm, but the generated assets after running npm run build are not being loaded in the browser. This results in pages being displayed without CSS or JS. My @vite directive is trying to fetch my files, but cannot map the correct locations as stated in the manifest.json. My setup is a fresh, out-of-the-box Laravel 9 installation, with the same setup as OP (with Breeze installed). – Pliny 11/7, 2022 at 11:37

Hey ho, is there any fix yet? Im having the same issue. – Independency 1/9, 2022 at 22:14

Laravel 8 documentation says to install the laravel breeze using the following command.

composer require laravel/breeze --dev

But this will install the latest version of breeze (^1.10) with Laravel 9 Vite support. As Laravel 8 doesn't support Vite, you will have to use an older version of laravel breeze. Version 1.9.4 works for me with Laravel 8.

So try the following command to install laravel breeze instead:

composer require laravel/breeze:1.9.4

Parahydrogen answered 4/7, 2022 at 9:8 Comment(3)

Don't forget php artisan breeze:install – Tineid 4/7, 2022 at 9:36

This is the correct answer for those using Laravel 8 – Fredra 9/9, 2022 at 0:10

how did you figure out it's Lv 8? Also this is kinda not helpful – Benton 7/2, 2023 at 15:34

You must clear view cache after upgrade framework version with command:

php artisan view:clear

Then this new blade directive must work properly.

Jeep answered 30/6, 2022 at 20:0 Comment(1)

I have done that as well and cleared all the cache, but no luck. – Craquelure 1/7, 2022 at 4:46

Trying to solve my own issue, I came up with a solution for your problem!

A fresh, out-of-the-box installation of Breeze makes use of a bunch of components. These can be found in the resources/views/components folder of your app. Per default, Breeze also comes with 2 layout components:

app/View/Components/AppLayout.php
app/View/Components/GuestLayout.php

The HTML structure of these layout components can be found in:

resources/views/layouts/app.blade.php
resources/views/layouts/guest.blade.php

These layouts are used to wrap the contents of called view based on a user being logged in or not.

In your case, you try to visit the URL /nice, which returns the test.blade.php view. The view is rendered without any <html>, <body> or any other 'wrapping' html tags because there is no reference to any layout.

For example, let's say your test.blade.php can only be viewed by logged in users. Try changing test.blade.php file to:

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Test') }}
        </h2>
    </x-slot>

    <div class="font-sans text-gray-900 antialiased">
        Hello World
    </div>
</x-app-layout>

By wrapping your content between the x-app-layout tags (for guest users the x-guest-layout tags), you basically say that Laravel should render the contents of your test.blade.php into the default slot of the resources/views/layouts/app.blade.php file.

The example code above also shows how you can populate slots of your resources/views/layouts/app.blade.php from inside your test.blade.php. The contents of the <x-slot name="header"> tag is placed where {{ $header }} is stated, much like how a Collection is passed down from a controller to a view.

In the documentation (found here) you can find how components work in Laravel.

Pliny answered 11/7, 2022 at 12:29 Comment(0)

It works for me after clearing the application cache

php artisan optimize:clear

Smokeless answered 13/7, 2022 at 16:0 Comment(0)

Laravel version must be ^9.19 to use Vite.

// composer.json

"require": {
    "laravel/framework": "^9.19",
},

Thirtythree answered 30/6, 2022 at 1:52 Comment(3)

I tried upgrading from 9.0 to 9.19, still not working :( – Craquelure 30/6, 2022 at 5:53

I'm trying to start a new L8... and vite and its directives are in there... not working. of course – Eudemon 17/7, 2022 at 0:0

composer update works to me (laravel/framework updated to 9.45), but after that you need to clear cache with php artisan cache:clear or/and php artisan view:clear – Fredricfredrick 22/12, 2022 at 20:34

In your docker-composer.yml file update the HMR ports to '${HMR_PORT:-5173}:5173' or whatever port your vite dev server is serving your assets.

    laravel.test:
    build:
        context: ./docker/8.1
        dockerfile: Dockerfile
        args:
            WWWGROUP: '${WWWGROUP}'
    image: sail-8.1/app
    extra_hosts:
        - 'host.docker.internal:host-gateway'
    ports:
        - '${APP_PORT:-80}:80'
        - '${HMR_PORT:-5173}:5173'
    environment:
        WWWUSER: '${WWWUSER}'
        LARAVEL_SAIL: 1
        XDEBUG_MODE: '${SAIL_XDEBUG_MODE:-off}'
        XDEBUG_CONFIG: '${SAIL_XDEBUG_CONFIG:-client_host=host.docker.internal}'
    volumes:
        - '.:/var/www/html'
    networks:
        - sail
    depends_on:
        - mysql
        - redis
        - meilisearch
        - selenium

Herzl answered 2/7, 2022 at 4:33 Comment(3)

Hi thank your for responding. I am sorry I am not using docker yet my environment is currently homestead. – Craquelure 2/7, 2022 at 5:6

How can I see the port? – Fredricfredrick 22/12, 2022 at 19:52

i have same issue, can you explain better? My docker is set to work in https, i tried to set -5173:443 but it show me always 404 – Shumpert 29/1, 2023 at 16:43

I used this Referecnce to get my project working with vite.

TLDR; In order to create a new Directive, you need to add your script to the Helper function to the composer.json file and add the it to files array. See example below

open composer.json which should be located in the root of your Laravel project find the section below:

 "autoload": {
    "files": [
      "app/Helpers/functions.php" // this is where you can load your code
    ],
    "psr-4": {
     ...
    }
  },

Then in in the same root composer installed so you can run the following in your terminal

composer autodump --optimize-autoloader to initialise for use in the script

Panties answered 7/8, 2022 at 1:37 Comment(0)

Just go to config/app.php and:

 'url' => env('APP_URL', 'http://localhost'),
 // 'asset_url' => env('ASSET_URL', '/'),
 'asset_url' => env('APP_URL', '/'),

After, run

 php artisan config:clear

.env file may do not content ASSET_URL parameter. Just set ASSET_URL same to APP_URL

All 404 NOT FOUND errors can be tracked to an URL misconfiguration

Stichomythia answered 17/2, 2023 at 5:30 Comment(1)

This question is not about URL errors. It's about @vite directive not functioning. – Duston 16/6, 2023 at 15:20

yesterday I was also facing same error and after googling too much I could not find any doable solution. In my case I was using Laravel 8.83 and Breeze 1.10.2 for user registration and Auth with PHP 7.4. php artisan install:breeze command was failing again and again.

In my case I fixed it my using a lower version of breeze i.e. 1.9.4 after using this version of breeze php artisan install:breeze run successfully without any error and all other site functionality is working fine.

Bert answered 5/9, 2022 at 11:7 Comment(0)

I had this problem and it drove me crazy for a few days.

But I came across a solution.

According to the guide below I needed to rename the "vite.config.js file" to "vite.config.mjs" then as per instructions I went to the package.json file and added this line:

//Add this line in the very top/first object.

> "type": "module"

It should look like this on package.json with the new property 'type' and value 'module':

{ "name": "myapp", "version": "1.0.0", "type": "module" }

The solution came from the URL below: https://vitejs.dev/guide/troubleshooting.html#this-package-is-esm-only

Apospory answered 21/12, 2023 at 0:20 Comment(0)

-2

@vite is for Laravel version 9.*

you install Laravel 8 but you installed UI or other package maybe related to Laravel version 9.
so Please check your package version for Laravel 8 .
then install specific Version.

Absenteeism answered 1/8, 2022 at 12:3 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags