WordPress Plugin with Vuejs
A WordPress Vue.js starter plugin with required toolbelts 😎
Build & Required Tech Stack
- Vuejs 3
- Webpack 5
- PHP 7.4 or greater
- WordPress 5.0 or greater
- Pre-configured Webpack config
- Babel loader, Vue loader, CSS and SCSS loader
- Separate vendor.js with all vendor scripts
- Uglify JS for production
- Separate frontend.js and admin.js
- Extracted CSS/SCSS to separate frontend.css and admin.css files.
- Cross-browser auto prefix included for CSS/SCSS.
- Auto reloading with Browser with Browsersync (config)
- Vue and Vue Router
- Frontend (shortcode) and Backend starter app
- Modern PHP codebase with namespace support
- Clone this repository in your plugins folder
- Activate the plugin
- The name of the plugin class is WpPluginVue, change the class name with your desired class name.
- Replace the PHP namespace SayedulSayem with your desired name.
- Replace wp-plugin-vue or WPPV reference in files.
- Run composer install
- Run npm install
- To start developing, run npm run dev 🤘
- For production build, run npm run build 👍
⛑ Some Instructions/ Features
- For activating auto reloading with the browser with Browsersync you have to create a .env from the .env.example file and replace BROWSERSYNC_PROXY with your app settings page URL and BROWSERSYNC_PORT with your desired port.
- It supports JavaScript string translation. Many people struggle to make translatable vue component strings. It supports that but you have to generate .pot file by WP-CLI. Just install WP-CLI and run npm run wp-cli-pot

Made by Sayedul Sayem.
Found anything that can be improved? You are welcome to contribute.
Inspired from Vue WP Starter by Tareq Hasan