CODEWITHSUNDEEP
laravellaravel-bladevite
Ariel Magbanua
Ariel Magbanua

Reputation: 3123

Why Laravel Vite Directive Not Working in My Project?

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: enter image description here

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:

enter image description here

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.

Upvotes: 24

Views: 61638

Answers (11)

Balaji Dharma
Balaji Dharma

Reputation: 1425

It works for me after clearing the application cache

php artisan optimize:clear

Upvotes: 2

Call me Andy
Call me Andy

Reputation: 41

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

Upvotes: 0

user5100174
user5100174

Reputation:

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

Upvotes: 1

Hasan Baig
Hasan Baig

Reputation: 511

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.

Upvotes: 0

undefined
undefined

Reputation: 2491

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

Upvotes: 1

IslamYearul
IslamYearul

Reputation: 328

@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.

Upvotes: -2

Tomjesch
Tomjesch

Reputation: 510

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.

Upvotes: 2

Harshil Dave
Harshil Dave

Reputation: 490

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

Upvotes: 30

aannecchiarico
aannecchiarico

Reputation: 197

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

Upvotes: 1

Виталий Шутов
Виталий Шутов

Reputation: 119

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

php artisan view:clear

Then this new blade directive must work properly.

Upvotes: 11

Mert Aşan
Mert Aşan

Reputation: 436

Laravel version must be ^9.19 to use Vite.

// composer.json

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

Upvotes: 1

Related Questions