Skip to content

Commit 3ffa979

Browse files
authored
Update UPGRADE.md
1 parent d4fc875 commit 3ffa979

File tree

1 file changed

+9
-13
lines changed

1 file changed

+9
-13
lines changed

UPGRADE.md

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22

33
## Migrating from Laravel Mix to Vite
44

5-
> **Note:** This upgrade guide does not cover all possible Mix usages, such as Sass compilation. Please consult the [Vite documentation](https://vitejs.dev/guide/) for information on configuring Vite for these scenarios.
5+
> **Note:** This upgrade guide does not cover all possible Mix use cases, such as Sass compilation. Please consult the [Vite documentation](https://vitejs.dev/guide/) for information on configuring Vite for these scenarios.
66
77
### Install Vite and the Laravel Plugin
88

9-
First you will need to install [Vite](https://vitejs.dev/) and the [Laravel Vite Plugin](https://www.npmjs.com/package/laravel-vite-plugin) using your npm package manager of choice:
9+
First, you will need to install [Vite](https://vitejs.dev/) and the [Laravel Vite Plugin](https://www.npmjs.com/package/laravel-vite-plugin) using your npm package manager of choice:
1010

1111
```shell
1212
npm install --save-dev vite laravel-vite-plugin
@@ -53,7 +53,7 @@ export default defineConfig({
5353

5454
If you are building an SPA, you will get a better developer experience by removing the CSS entry point above and [importing your CSS from Javascript](#importing-your-css-from-your-javascript-entry-points).
5555

56-
### Update NPM Scripts
56+
### Update NPM scripts
5757

5858
Update your NPM scripts in `package.json`:
5959

@@ -71,9 +71,9 @@ Update your NPM scripts in `package.json`:
7171
}
7272
```
7373

74-
### Make your imports compatible with Vite
74+
### Vite compatible imports
7575

76-
Vite only supports ES modules, so if you are upgrading an existing application you will need to replace any `require()` statements with `import`. You may refer to [this PR](https://github.com/laravel/laravel/pull/5895/files) for an example.
76+
Vite only supports ES modules, so if you are upgrading an existing application you will need to replace any `require()` statements with `import`. You may refer to [this pull request](https://github.com/laravel/laravel/pull/5895/files) for an example.
7777

7878
#### Inertia
7979

@@ -188,9 +188,7 @@ If you are using StyleCI and have ignored the `webpack.mix.js` file in your conf
188188

189189
### Optional: Configure Tailwind
190190

191-
If you are using Tailwind, perhaps with one of Laravel's starter kits, you will need a `postcss.config.js` file.
192-
193-
Tailwind can generate this for you automatically:
191+
If you are using Tailwind, perhaps with one of Laravel's starter kits, you will need a `postcss.config.js` file. Tailwind can generate this for you automatically:
194192

195193
```shell
196194
npx tailwindcss init -p
@@ -225,7 +223,7 @@ You may remove your dedicated Laravel Mix SSR configuration:
225223
rm webpack.ssr.mix.js
226224
```
227225

228-
In most cases you won't need a dedicated SSR configuration file with Vite. You can specify your SSR entry point by passing a configuration option to the Laravel plugin.
226+
In most cases you won't need a dedicated SSR configuration file when using Vite. You can specify your SSR entry point by passing a configuration option to the Laravel plugin:
229227

230228
```js
231229
import { defineConfig } from 'vite'
@@ -297,7 +295,7 @@ mix.js('resources/js/app.js', 'public/js')
297295
]);
298296
```
299297

300-
### Update NPM Scripts
298+
### Update NPM scripts
301299

302300
Update your NPM scripts in `package.json`:
303301

@@ -317,9 +315,7 @@ Update your NPM scripts in `package.json`:
317315

318316
#### Inertia
319317

320-
Vite requires a helper function to import page components which is not required with Laravel Mix.
321-
322-
You can remove this as follows:
318+
Vite requires a helper function to import page components which is not required with Laravel Mix. You can remove this as follows:
323319

324320
```diff
325321
- import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers'

0 commit comments

Comments
 (0)