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>