A WordPress plugin that seamlessly integrates Vue.js applications into WordPress sites.
This plugin allows you to embed Vue.js applications within WordPress pages and posts using a simple shortcode. It handles all the necessary script loading and provides a clean integration between WordPress and Vue.js.
- Simple shortcode integration
- Automatic script and style loading
- Environment variable support
- Customizable container element
- WordPress hooks for extending functionality
- Upload the plugin files to the
/wp-content/plugins/wp-vue-wrapperdirectory, or install the plugin through the WordPress plugins screen. - Activate the plugin through the 'Plugins' screen in WordPress.
- Use the shortcode
[vue-wp-app]in your posts or pages to embed the Vue application.
Simply add the shortcode to any post or page:
You can customize the container element and pass additional attributes: [vue-app id="custom-app-id" class="custom-class"]
The plugin uses environment variables for configuration. Create a .env file in the plugin root directory with your settings:
- Node.js and npm
- WordPress development environment
- Clone this repository to your WordPress plugins directory
- Run
npm installto install dependencies - Run
npm run devfor development mode with hot-reload - Run
npm run buildto build for production
wp-vue-wrapper.php- Main plugin file with WordPress integrationsrc/- Vue.js application source filesdist/- Compiled Vue.js application (generated after build).env- Environment configuration
The plugin provides several WordPress filters and actions for extending functionality:
wp_vue_wrapper_shortcode_atts- Filter shortcode attributeswp_vue_wrapper_container- Filter the container HTML
This project is licensed under the GPL v2 or later.
Developed by TenGate and as free to use under the GPL v2 or later.