title: Why Laravel Vite Directive Not Working in My Project?
body: <p>I installed and configured laravel breeze and blade according to the <a href="https://laravel.com/docs/9.x/starter-kits#breeze-and-blade" rel="noreferrer">documentation</a> 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.</p>
  <p><strong>tailwind.config.js</strong></p>
  <pre><code>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')],
  };
  </code></pre>
  <p><strong>vite.config.js</strong></p>
  <pre><code>import { defineConfig } from 'vite';
  import laravel from 'laravel-vite-plugin';
  
  export default defineConfig({
      plugins: [
          laravel([
              'resources/css/app.css',
              'resources/js/app.js',
          ]),
      ]
  });
  </code></pre>
  <p>The vite is compiling properly my js and css assets:
  <a href="https://i.stack.imgur.com/70E9x.png" rel="noreferrer"><img src="https://i.stack.imgur.com/70E9x.png" alt="enter image description here" /></a></p>
  <p>I then created a test blade template with <code>@vite</code> directive:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;{{ str_replace('_', '-', app()-&gt;getLocale()) }}&quot;&gt;
      &lt;head&gt;
          &lt;meta charset=&quot;utf-8&quot;&gt;
          &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
          &lt;meta name=&quot;csrf-token&quot; content=&quot;{{ csrf_token() }}&quot;&gt;
  
          &lt;title&gt;{{ config('app.name', 'Laravel') }}&lt;/title&gt;
  
  &lt;!-- Fonts --&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&amp;display=swap&quot;&gt;
  
  &lt;!-- Scripts --&gt;
  @vite(['resources/css/app.css', 'resources/js/app.js'])
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class=&quot;font-sans text-gray-900 antialiased&quot;&gt;
      Hello World
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>My test route:</p>
  <pre><code>Route::get('/nice', function () {
      return view('test');
  });
  </code></pre>
  <p>The output below shows that the <code>@vite</code> is not generating the appropriate script and link assets tag:</p>
  <p><a href="https://i.stack.imgur.com/WpI6z.png" rel="noreferrer"><img src="https://i.stack.imgur.com/WpI6z.png" alt="enter image description here" /></a></p>
  <p>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.</p>