Migrating from Materio Laravel Mix to Materio Vite

As Materio announced it's migrating from Webpack to Vite.

Introduction

Please follow documentation for Migrating Your Laravel Project to the Latest Version

Once you migrated template to Latest Laravel version, please follow steps below:

Step 1: Configure Vite

Copy vite.config.js file from Vite root folder to your Mix root folder.

Copy postcss.config.js file from Vite root folder to your Mix root folder.

Step 2: NPM Script

Replace package.json file from Vite to Mix Project to update dependencies & devDependencies as per Vite.

Vite compatible imports

Vite only supports ES modules, so if you are upgrading an existing application, you will need to replace any require() statements with import.

Now, you have downloaded vite integrated Materio template, so you can copy third-party libs that we have updated in the Vite package and replace with the mix onces.

Step 3: Replace Base Layout files

You can find below listed base layout files from mix package and replace it with latest vite package files.

Find below files at resources\views\layouts\sections\ folder:

• styles.blade.php
• scripts.blade.php
• scriptsIncludes.blade.php
• stylesFront.blade.php
• scriptsFront.blade.php
• scriptsIncludesFront.blade.php

Also, update below file from:

• resources\views\layouts\commonMaster.blade.php
• app/Helpers/Helpers.php
• app/Providers/AppServiceProvider.php
• config/app.php

Step 4: Replace mix() with @vite

Now, you need to replace mix() with @vite in your blade files.

When using Vite, you will need to use the @vite Blade directive instead of the mix() helper.

This will automatically detect whether you are running in serve or build mode and include all of the required <script> and <link rel="stylesheet"> for you:

For Example:

From:

<script src="{{ asset(mix('assets/vendor/libs/jquery/jquery.js')) }}"></script>
<script src="{{ asset(mix('assets/vendor/libs/popper/popper.js')) }}"></script>
<script src="{{ asset(mix('assets/vendor/js/bootstrap.js')) }}"></script>
<link rel="stylesheet" href="{{ asset(mix('assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.css')) }}" />
<link rel="stylesheet" href="{{ asset(mix('assets/vendor/libs/typeahead-js/typeahead.css')) }}" />

To:

@vite([
  'resources/assets/vendor/libs/jquery/jquery.js',
  'resources/assets/vendor/libs/popper/popper.js',
  'resources/assets/vendor/js/bootstrap.js',
'])
@vite([
  'resources/assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.scss',
  'resources/assets/vendor/libs/typeahead-js/typeahead.scss'
])
        

Step 5: Update Base Assets

You can find below listed base assets folders from mix package and replace it with latest vite package files.

• Replace resources\assets\ folder from Vite to Mix
• Copy resources\js\app.js file from Vite to Mix
• Copy resources\css folder from Vite to Mix
• Remove below folders from public\assets\ folder:
• css\
• js\
• vendor\
• Do not remove other folder from public\assets\

Step 6: Update Base JS files

You can find below listed files in Vite and replace to your Mix template at resources\assets\js folder:

• config.js
• front-config.js
• front-main.js
• main.js

Step 7: Update .env file

Replace .env file from root folder of Vite to Mix

Step 8:Remove Laravel Mix

Finally, the Laravel Mix package and its Webpack dependencies can now be uninstalled:

npm remove laravel-mix resolve-url-loader
rm webpack.mix.js

Depending on your deploy strategy, you may wish to add Vite's build directory to your .gitignore file:

/public/build

Cleaning Up Project Dependencies

Finally, you can remove node_modules/ folder & composer.lock files from your project.

You can use below command:

rm -rf node_modules/ composer.lock

Now, continue with the Laravel installation steps explained in the documentation