git clone https://github.com/hasanuzzamanbe/wp-boilerplate-vue-with-vite.gitcd wp-boilerplate-vue-with-vitenpm inode aladinand enter your Plugin Name in the command prompt.
Aladdin π§ββοΈ will make it within a blink.
Congratulations Everything is done π₯³
npm run dev to run development mode. Find and activate your plugin in WordPress.
This is a Customizable Boilerplate WordPress Plugin that is developed as a single-page app with Vue js and Vite. You don't have to reload the page all the time. Read the Detailed quick setup can help to make a new fresh plugin within 10 sec
It needs milliseconds to update the dom, Check very short video
photo_2023εΉ΄10ζ09ζ₯ 00 03 48
- Just clone/fork this repository on your wp-content/plugins directory
- run:
npm iYou may check the package.json file for more info.
No worries! It needs just one command to create your own plugin with your Namespaces, Text Domains and Slugs.
Open the directory in the terminal (cd wp-boilerplate-vue-with-vite)
Call aladin π§ββοΈ by one command.
- run:
node aladinand enter your Plugin Name in the command prompt.
Aladdin π§ββοΈ will make it within a blink. Congratulations Everything is done π₯³
Just find the plugin name and activate it in your WordPress. Run development mode by npm run dev
Yes, you can update all those things later also.
Manual setup(Not recommended):
you have to replace all the NameSpaces and slugs. You may search and replace in plugin directory. by these keywords bellow.
PluginClassName to yourClassName
pluginlowercase to yourpluginslug,
PLUGIN_CONST to YOUR_PLUGIN_SLUG,
PluginName to Your Plugin Name,
pluginslug to your-plugin-slug
You only need to run npm run production delete all excepts these files/directory.
- assets
- includes
- plugin-entry.php (plugin Entry file)
Now easy enqueue from version 1.0.6
No need to worry about the dev environment enqueue or Production level enqueue.
everything here can be managed by Vite dedicated class (includes/Classes/Vite.php)
Just Call like this
Vite::enqueueScript($enqueueTag, $yourAdminSourcePath, $dependency = [], $version = null, $inFooter = false)
Note: same as wp_enqueue_script
No need to enqueue production manually again, It will enqueue from manifest on production. Just call `Vite::enqueueScript()`
Vite::enqueueScript('my-plugin-script-boot', 'admin/start.js', array('jquery'), PLUGIN_CONST_VERSION, true)
Vite::enqueueStyle('my-plugin-style', 'scss/my-style.js', array(), PLUGIN_CONST_VERSION, true)
NOT RECOMMENDED wp_enqueue_script (see why)
If you want to use wp_enqueue_script then you have to call both dev and production manually:
(Production and dev enqueue script should be like this)
if (defined('PLUGIN_CONST_DEVELOPMENT') && PLUGIN_CONST_DEVELOPMENT !== 'yes') {
wp_enqueue_script('pluginlowercase-script-boot', PLUGIN_CONST_URL . 'assets/js/start.js', array('jquery'), PLUGIN_CONST_VERSION, false);
} else {
wp_enqueue_script('pluginlowercase-script-boot', 'http://localhost:8880/' . 'src/admin/start.js', array('jquery'), PLUGIN_CONST_VERSION, true);
}
Read web documentation here Details Docs
If you face any issues feel free to let me know. :)
You can check another boilerplate plugin with vue js and element UI, You can create your own project using a simple command line on that project within 2 minutes.
Check it here: https://github.com/hasanuzzamanbe/wp-boilerplate-plugin-with-vuejs
- WordPress Plugin with Vue 3, tailwind (Laravel Mix Build) [https://github.com/hasanuzzamanbe/wp-plugin-with-vue-tailwind]
- WordPress Plugin with Vue 2, Element UI (Laravel Mix Build) [https://github.com/hasanuzzamanbe/wp-boilerplate-plugin-with-vuejs]
Plugin using this boilerplate: https://wordpress.org/plugins/buy-me-coffee/
Github Repo: https://github.com/hasanuzzamanbe/buy-me-coffee