WP Plugin Vue Boilerplate (Vite Build)
Run only 4 commands and make your own plugin
git clone https://github.com/hasanuzzamanbe/wp-boilerplate-vue-with-vite.git
cd wp-boilerplate-vue-with-vite
npm i
node aladin
and 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
How faster is Vite than the Webpack in development?
It needs milliseconds to update the dom, Check very short video
How to use? (details)
- Just clone/fork this repository on your wp-content/plugins directory
- run:
npm i
You may check the package.json file for more info.
Make Your Own plugin from boilerplate within 10 sec (Quick Setup 🧞♂️)
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 aladin
and 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
production mode
You only need to run npm run production
delete all excepts these files/directory.
- assets
- includes
- plugin-entry.php (plugin Entry file)
Development Helping Docs:
Enqueue Assets:
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
Example use case:
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. :)
Vue + Element UI auto command boilerplate
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
Other Setups You May Use
- 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]