Skip to content

Upgrade from Laravel Mix to Vite - #205

Open
betsyecastro wants to merge 6 commits into
developfrom
upgrade-to-laravel-vite
Open

Upgrade from Laravel Mix to Vite#205
betsyecastro wants to merge 6 commits into
developfrom
upgrade-to-laravel-vite

Conversation

@betsyecastro

@betsyecastrobetsyecastro commented Nov 19, 2025

Copy link
Copy Markdown
Contributor
  • Requires Node.js v20
  • Installs the Vite plugin and created the Vite configuration file.
  • Includes adjustments to migrate from Webpack-style imports to ES module-compatible imports for Vite.
  • Includes updated npm scripts and updated blade templates to use the @Vite directive instead of the old asset helper.

@betsyecastrobetsyecastro self-assigned this Nov 19, 2025
@betsyecastrobetsyecastro added ✨ enhancement New feature or request 📦️ dependencies Update, change, or remove a dependency ☕️ javascript Pull requests that update Javascript code labels Nov 19, 2025
@betsyecastrobetsyecastro changed the title Laravel Vite Upgrade Upgrade from Laravel Mix to ViteNov 26, 2025
…urcemaps only available in dev mode
The build.sourcemap option generates sourcemaps for JavaScript but not for CSS. This is a known Vite limitation that doesn't impact how Vite is designed to work, but it slightly affects our current workflow—the Vite dev server is required to use CSS sourcemaps for debugging styles. When changes are ready for deploy, use npm run build to compile and commit the assets.
Add the `vite-plugin-css-sourcemap plugin` to generate CSS sourcemaps during production builds and include it in compiled assets. Requires downgrading to Vite 6 and laravel-vite-plugin 1.x due to plugin compatibility constraints. With this change, `npm run build` generates both JS and CSS sourcemaps, eliminating the need to run the dev server for CSS debugging.
@betsyecastro

Copy link
Copy Markdown
ContributorAuthor

@wunc Vite serves assets from a local dev server during development and only compiles them for production. CSS sourcemaps are a known limitation—the build.sourcemap option only generates JS sourcemaps, while CSS sourcemaps require the dev server. A plugin exists to generate CSS sourcemaps in builds, but it only supports Vite 5–6 (we're on 7) and is relatively new. The last two commits on this PR are the two approaches proposed:

Commitb00287cf7a6173
Vite version7 (latest)6 (downgrade)
Dependencies"vite": "^7.2.2"
"laravel-vite-plugin": "^2.0.1"
"vite": "^6.4.1"
"laravel-vite-plugin": "^1.3.0"
"vite-plugin-css-sourcemap": "^1.0.2"
CSS sourcemapsDev server onlyIncluded in build
WorkflowRun dev server to debug CSS, then build for deploySingle npm run build for everything
Trade-offStays current, extra step for CSS debuggingMatches previous Mix workflow, older dependencies

@betsyecastro
betsyecastro marked this pull request as ready for review December 18, 2025 17:53
@betsyecastrobetsyecastro added the 🔨 tooling Related to dev tooling or workflow label Dec 18, 2025
@wunc

wunc commented Dec 19, 2025

Copy link
Copy Markdown
Collaborator

@betsyecastro thanks for the analysis. It's very helpful. Seeing this, I think I'd rather upgrade to the newer version (7) right now, and we'll adjust how we work in dev.

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

📦️ dependenciesUpdate, change, or remove a dependency✨ enhancementNew feature or request☕️ javascriptPull requests that update Javascript code🔨 toolingRelated to dev tooling or workflow

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@betsyecastro@wunc