Share On

Claps upto fifty times for each post.

0


Make WordPress plugin using Vue with Vite build

It needs only 10 sec to create a WP plugin with a fresh Vue + Vite setup.

Every time we create a new WordPress plugin we have to set up all the things repeatedly. Which is really time-consuming and an extra burden for us. There are some common things every WordPress plugin has. So if we can make those listed and make it reusable for the future that saves a lot of time for us. Also, we don’t have to plan or think about plugin architecture all the time for new ones. This is the WordPress boilerplate plugin which did that perfectly.
Also, HMR(hot module replacement) will save time during development and compress package size on production.

Let’s make a new plugin. Trust me it only need’s couple of seconds to make a WordPress plugin with a single-page application using Vue js and Vite.

Dependencies:

There is no extra dependency at all. Just need the basic things to run a single-page JS application. Check that Node and Npm are installed globally on your device. You may check the installation status of the node by node v and npm -v for Npm.

How to create? Quick setup:

Step 1. Just clone this repository into your WordPress plugin directory (wp-content/plugins)
Step 2. Open in the terminal and install npm using the command npm i
Step 3. Call the Aladin 🧞 by command node aladin and it will prompt your Plugin Name. Just Write the name and hit enter.

Step 4. To run the dev environment run `npm run dev`

All done!

Use the plugin

Everything is done. Check the Plugin repository to find your chosen name and activate your plugin.

Check that all of your ClassNames and slugs are updated with your new plugin info.

Plugin Architecture

You may check the package.json directory to get the dependency of your application. Keep those you want or feel free to remove them. The /src directory holds all the JavaScript and Vue js codes. You can check the Vue sources code there.

It has a prebuilt tailwind setup, Use it or remove it easily by deleting it from package.json, tailwind.config.js and CSS from the src/element.js.

You may use the popular UI plugin element-plus as well.

Here the directory includes contains all the PHP files you need in your plugin. You may update or modify the structure as per your needs.

plugin-entry file is the main plugin file, which loads all the classes.

/src directory contains all the vue and js files.
NB: You may not be concerned about other files/directories. They are just development dependencies. You don’t need that for production build as well.

Development Helper Class

There is an HMR setup in Vite. So you don’t have to reload all the pages when the development server is running. It will automatically load and update on DOM. However, the assets only build on production and the development assets server after the local port. So we have to change the asset’s URL when we enqueue the assets like scripts or styles.

To make that easy and more efficient it has a Vite class. we don’t need to call wp_enqueue_script or wp_enqueue_style.

Just use Vite::enqueueScript to load scripts and Vite::enqueueStyle for styles. All the parameters are the same as the WordPress enqueue script and enqueue style methods.

Example:
Vite::enqueueScript($enqueueTag, $yourAdminSourcePath, $dependency = [], $version = null, $inFooter = false);

Vite::enqueueScript('my-plugin-script-boot', 'admin/start.js', array('jquery'), PLUGIN_CONST_VERSION, true);

NB: Here $yourAdminSourcePath will be the src directory path.

Port Declaration:

You may use different ports for your site project. The default port is set to 8880. To update the port change the port declaration on includes/classes/Vite and vite.config.js file.

Production Build

You only need to run npm run production delete all except these files/directories.

  • assets
  • includes
  • plugin-entry.php (plugin Entry file
  • Language

Make them zip and upload them on any WordPress plugin directory.


Check the plugin repo link (https://github.com/hasanuzzamanbe/wp-boilerplate-vue-with-vite) for more. Or Create an issue for any dependency you face.


Leave a Reply

Your email address will not be published. Required fields are marked *

Hasanuzzaman Avatar

Click to follow this author!


Posts by this author


Posts related this

Quick and Easy way to deploy WordPress, PHP, and Node apps into VPS

Hasanuzzaman

02 September 2024

Share your local WordPress site.

AKM Elias

24 February 2024

Make WordPress plugin using Vue with Vite build

Hasanuzzaman

09 October 2023

How to Install Laravel Valet on Mac

Hasanuzzaman

21 August 2022