yodeput / laravel-vite Goto Github PK

https://laravel-vite-uwusu.ondigitalocean.app/

This is a project template showing off how to use Vite 2 (super-fast ESM-based development environment, and production bundler) with Laravel, TailwindCSS and InertiaJS.

This is a v2 of the template. Here are the changes compared to the last version:

• Upgraded all the dependencies
• Added Tailwind support with the latest JIT compiler
• Added Inertia support with lazy-loaded pages and routes
• Added examples with <script setup> syntax
• Added tsconfig.json to support Vetur / Volar plugins for VS Code.
• Added component autoloading
• Added auto reloading for Laravel files

Using Valet

composer install
npm install
npm run dev

npm run build

To test the production build, change the .env file as follows and refresh the page.

APP_ENV=production

Vite's manifest generation is not compatible with Laravel Mix manifest, so by default, it does not work with mix() helper.

To overcome this, this demo project relies on custom manifest parsing. Alternatively, one can use the Vite plugin to support Laravel manifest file https://github.com/ohseesoftware/laravel-vite-manifest.

To support <script setup> syntax for Inertia's persistent layouts, the component has to export two script sections. Note that we use layoutName instead of layout since Vite's hot module reloading would conflict with Inertia's API.

<script setup>
// Component code here
</script>

<script>
export default { layoutName: "Narrow" };
</script>