Level 102
When you change things, do you see the vite server do anything. Check the terminal while changing the file
Dec 23, 2022
12
Level 1
Laravel Blade Hot Refresh With Vite not working
I have a fresh Laravel 9 installed. I have run npm install, included @vite(['resources/css/app.css', 'resources/js/app.js']) in the head tag, and started the vite server but when I change something in the welcome.blade.php the page doesn't refresh and I'm not getting any errors. I've checked out the documentation but I haven't noticed missing anything.
Vite config file
import { defineConfig } from 'vite'; import laravel from 'laravel-vite-plugin';
export default defineConfig({ plugins: [ laravel({ input: ['resources/css/app.css', 'resources/js/app.js'], refresh: true, }), ], });
Level 24
when you run npm run dev , you need in browser refresh the page (once only), then in the browser dev tools, you should see something like this
[vite] connecting...
[vite] connected.
in local dev, i also temp add this to my main layout , after the project finished, just delete this line
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
Level 102
@newbie360 Does use the tailwind cdn. Use vite instead to build it. The cdn is for testing stuff, not production :)
Level 24
@Sinnbeck no , the cdn is used for local dev only, because i don't know have you got the same problem
after npm run dev, all the new Tailwind css make up is no effect, until npm run build
so i don't want to keep repeat to npm run build, just added the CDN, when the probject almost finished, then remove the CDN
Level 102
@newbie360 Using tailwindcss with vite and and dev, shouldnt be that hard :) No need for the cdn.
Just run npm run dev while developing the site
Level 24
@Sinnbeck without the CDN, you can try npm run dev, and add this for example,
add some css is never used before, because bg-zinc-400 isn't in the builded asset
<div class="mt-96 bg-zinc-400">
test
</div>
this is no effect on the browser
Level 102
@newbie360 I just make a brand new project. Then I installed tailwind using this guide
https://tailwindcss.com/docs/guides/laravel
Then I replaced the style tag in welcome.blade.php with @vite(['resources/css/app.css'])
I now installed started npm run dev and tried changing the background color.. it worked without refreshing.
Level 24
@Sinnbeck weird, after npm run dev , can you try use bg-zinc-400
Level 102
@newbie360 Sure.
Level 102
There you go. https://github.com/sinnbeck/demo-app
git clone [email protected]:sinnbeck/demo-app.git
cd demo-app
composer install
npm install
cp .env.example .env
php artisan key:generate
php artisan serve
//new terminal
npm run dev
Level 24
@Sinnbeck this weird, may be the problem is i'm using Homestead, i go to solve it later, thankyou for your time
Level 1
@newbie360 I have the exact same issue with tailwind in both Herd or ddev. Did you ever figure out the issue?
Please or to participate in this conversation.