Published under Laravel.
In this guide, we'll replace Laravel Mix with Vite in a Laravel Jetstream (Inertia/Vue) application.
NOTE: This is my first time using Vite. I do not have a full understanding of Vite at the time of writing this post. If you see anything incorrect with this setup, please let me know on Twitter, @owenconti.
If you want to get up and running right away, consider using the Laravel Vite package created by Enzo Innocenzi which is an opinionated setup that handles everything for you.
Note: Vite recommends not omitting file extensions for custom import types, ie:
This means you should ensure all of your imports use the
.vueextension throughout your codebase.
Install npm dependencies:
Uninstall Laravel Mix dependency and remove the config file:
Ensure environment variables are set:
Install Laravel Vite Manifest PHP package to include Vite's output files from the generated manifest:
Add the Blade directive from the package which includes the generated assets:
Add npm scripts to run Vite:
.css file inside your entry
Make a few minor changes for Inertia:
That's the quick version. If you want to understand more about each step, keep reading.
Here's what we're going to setup:
- Replace a default Laravel Mix setup
- Compile JS (Vue)
- Compile CSS (Tailwind)
If your existing Laravel Mix is more complicated than that, your mileage may vary with this guide.
We'll setup both a Vue 2 version and a Vue 3 version.
To start off, we need to create a
vite.config.js file in the root of the repo.
Let's run through each section.
plugins section tells Vite how to handle
root option tells Vite what directory is the root directory of our application. Assets will be output relative from this directory. For example,
resources/js/app.js will be output as
base option tells Vite where the assets will be served from once deployed. This is equivalent to the
publicPath option in Webpack. We pull the
ASSET_URL from the environment file so that our build uses the correct path when deployed to a CDN.
Note: Make sure the
ASSET_URL is set correctly in your
.env file when building. If you're deploying with Vapor, Vapor will set the
ASSET_URL for you.
build section tells Vite how the application should be built.
outDir - The output directory that the application should be built to.
emptyOutDir - We set this to true to suppress a warning from Vite that says we are emptying the
outDir when it exists outside project root (
manifest - Tells Vite to publish a manifest file, which we'll use in production builds to find the correct file hash names.
target - Tells Vite which browsers should be supported, you can read more on Vite's website.
rollupOptions - These are specific options you can provide to Rollup (which Vite uses to bundle the application). In our case, we need to provide Rollup with our main entry file.
server section instructs Vite on how to start the development server.
strictPort - Forces Vite to start on the port we specified. Vite will exit if the port is in use as opposed to incrementing the port number which is default behaviour.
port - Which port the Vite development server should run on.
resolve section is optional. In my case, I am using it to alias
We need to tell Vite to pre-bundle the dependencies that do not ship a ESM version. The array you pass here will vary based on the dependencies in your project.
portal-vue is not necessary in Vue 3 projects.
You'll need to make sure you install the following JS dependencies:
In order to compile Tailwind, we need to move our PostCSS configuration from
webpack.mix.js into a dedicated
postcss.config.js file, which resides at the root of your repo:
Here's my full
app.js that configures Inertia:
The asset path is controlled via the standard Laravel
ASSET_URL environment variable. However, we don't provide a default, so it must be set in order for everything to work.
We need to change a couple of environment variables based on if we're running the local development server vs if we're running a production build:
I wrote a very simple Laravel package to pull the contents of the Vite manifest and include them in your Blade view. The main logic for the package is sourced from https://github.com/andrefelipe/vite-php-setup.
The package uses the
ASSET_URL environment variables to decide how to load the assets.
Add the Blade directive to include Vite's compiled assets:
Don't forget to remove Laravel Mix and its configuration file: