1 year ago

Back in February this year I was writing https://dev.to/geowrgetudor/setting-up-laravel-with-inertiajs-vuejs-tailwind-css-21pc guide on how to setup Inertia.js + Vue.js + Tailwind CSS on a brand new Laravel 8 project. That guide also worked for the early releases of Laravel 9, but a few months later Laravel took a strange turn switching from Webpack to Vite in a minor release.

Before we start, let's remove all the Laravel Mix/Webpack related stuff installed in the previous guide.

Now let's create a blank new vite.config.js file and add the default scaffolding: 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, }), ], }); Next we have to import the Vue plugin for Vite and include it into the plugins section.

So our final version of the config will look like this: import { defineConfig } from 'vite'; import laravel from 'laravel-vite-plugin'; import vue from '@vitejs/plugin-vue'; export default defineConfig({ plugins: [ laravel({ input: ['resources/js/app.js'], refresh: true, }), vue({ template: { transformAssetUrls: { base: null, includeAbsolute: false, }, }, }), ], resolve: { alias: { 'ziggy': '/vendor/tightenco/ziggy/src/js', 'ziggy-vue': '/vendor/tightenco/ziggy/src/js/vue' }, }, }); #adding-assets-to-our-main-template Adding assets to our main template