How to use Vite with WP

After setting up vite with wp (see guide here) you can now utilize it’s features.

For example you want to create custom codes/js for a map page.

1.) Create the wp page, and load the shortcode / ff_module

2.) Create your codes under vite-wp/src/components/{name} folder

In this example, folder name would be map. Inside, create your main file map.js

3.) Update the vite.config.js file to include your new file

Edit the vite.config.js file under vite-wp folder, add your new file as entry point under rollupOptions input.

				
					export default defineConfig({
    build: {
        manifest: true,
        rollupOptions: {
            input: {
                critical: 'src/critical.js',
                main: 'src/main.js',

                // add your additional entry points here
                map: 'src/components/map.js',
            },
        },
    },
})

4.) Enqueue / Load the file in wordpress

Load the script in wp using the FF\Vite\load_asset function.

Execute the npm run dev command and you should be able to see your script loaded

				
					FF\Vite\load_asset('src/components/map/map.js');

5.) Bundle your codes for production

After you are done with coding and want to upload for production, Execute the command npm run build

This will compile and output the optimized codes (minified, combined). The files will be saved on the dist folder. You don’t need to do anything else to load the bundled version on wp, this is already done automatically under the hood.