More Premium Hugo Themes Premium Vue Themes

Vuejs Wordpress Plugin Starter

A quick way to get up and running with a Vue-based WordPress plugin

Vuejs Wordpress Plugin Starter

A quick way to get up and running with a Vue-based WordPress plugin

Author Avatar Theme by evanagee
Github Stars Github Stars: 103
Last Commit Last Commit: Feb 11, 2020 -
First Commit Created: Jan 15, 2024 -
Vuejs Wordpress Plugin Starter screenshot

Overview

The imagevuejs-wordpress-plugin-starter is a WordPress plugin starter kit that allows developers to easily create and customize their own WordPress plugins using Vue.js. It provides features like Browsersync for auto-refreshing during local development and webpack for handling assets.

Features

  • Browsersync: Automatically refreshes the browser during local development, making it easier for developers to see changes in real-time.
  • Webpack: Handles all of the plugin’s assets, including JavaScript files, CSS files, and other resources, making it easier to manage and optimize them.

Installation

  1. Clone the repository and navigate to the wp-content/plugins directory of your WordPress installation.
  2. Rename the cloned plugin directory to suit your needs.
  3. Rename the vwp-plugin.php file and the files inside the inc/ directory to match your own namespacing requirements.
  4. Review the contents of vwp-plugin.php and replace any occurrences of vwp-plugin, vwp_plugin, and VwpPlugin with your own namespacing.
  5. Navigate to the plugin’s directory in your terminal and run the following commands:
    npm install
    npm run watch (for development)
    npm run build (when you're ready to deploy the plugin)
    
  6. The base PHP template for the plugin’s settings UI can be found in templates/admin/index.php. Make any necessary changes and modifications to suit your needs.
  7. Activate the plugin in the WordPress admin dashboard.
  8. Start working on your customized WordPress plugin using Vue.js.

Summary

The imagevuejs-wordpress-plugin-starter is a powerful tool for developers looking to create their own custom WordPress plugins using Vue.js. With features like Browsersync and webpack, it provides a streamlined development experience, allowing developers to see real-time changes and efficiently manage their plugin’s assets. By following the installation guide and making the necessary customizations, developers can easily get started with creating their own customized WordPress plugins.