Here's a detailed and well-formatted README document for developing a WordPress plugin using Vue:
A demonstration on how to use a Vue 3 counter application in WordPress.
- WampServer: Ensure you have WampServer installed.
- WordPress: Download and install WordPress.
- Download WampServer from the official website.
- Follow the installation instructions to set it up on your system.
- Download WordPress from the official website.
- Unzip the WordPress files to
C:\wamp64\www
.
- Start WampServer.
- Open a web browser and go to
http://localhost/phpmyadmin
. - Create a new database named
vueCounter
.
- Open a web browser and go to
http://localhost/wordpress
. - Enter the following details:
- Database Name:
vueCounter
- Username:
root
- Leave the password field blank.
- Database Name:
- Click Submit.
- On the next page, fill in the details:
- Site Title:
Vue Counter
- Username:
admin
- Password:
admin
(Check the weak password box) - Your Email:
admin@gmail.com
- Site Title:
- Click Install WordPress.
- Log in with the username
admin
and passwordadmin
.
- Navigate to
C:\wamp64\www\wordpress\wp-content\plugins
. - Create a folder named
vue-counter
.
In the vue-counter
folder, create the following files with the respective content:
<?php
/**
* Plugin Name: WordPress Vue Counter Plugin
* Description: A demo on how to use a Vue 3 counter application in WordPress.
*/
// Register scripts and styles
function func_load_vuescripts() {
// Register Vue 3 (global build)
wp_register_script('vue', 'https://unpkg.com/vue@3/dist/vue.global.prod.js', [], null, true);
// Register your custom Vue code
wp_register_script('my_app', plugin_dir_url( __FILE__ ) . 'app.js', ['vue'], null, true);
// Register CSS
wp_register_style('my_css', plugin_dir_url( __FILE__ ) . 'style.css');
}
// Enqueue scripts and styles
add_action('wp_enqueue_scripts', 'func_load_vuescripts');
// Return string for shortcode
function func_wp_vue() {
// Enqueue Vue.js and custom script
wp_enqueue_script('vue');
wp_enqueue_script('my_app');
// Enqueue CSS
wp_enqueue_style('my_css');
// Return HTML with Vue mount point
return '<div id="app"></div>';
}
// Add shortcode to WordPress
add_shortcode('vue-counter', 'func_wp_vue');
?>
const { createApp } = Vue;
createApp({
data() {
return {
count: 0
};
},
methods: {
increment() {
this.count++;
},
decrement() {
this.count--;
}
},
template: `
<div class="counter">
<h1>Counter: {{ count }}</h1>
<div class="counter-buttons">
<button @click="increment">+</button>
<button @click="decrement">-</button>
</div>
</div>
`,
mounted() {
console.log('The component has been mounted. It\'s accessible in the DOM.');
}
}).mount('#app');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font: 1em sans-serif;
text-align: center;
padding: 20px;
}
.counter {
display: flex;
justify-content: center;
align-items: center;
gap: 30px;
margin: 20px;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.counter-buttons button {
background-color: transparent;
border: none;
outline: none;
cursor: pointer;
font-size: 1.5em;
width: 40px;
aspect-ratio: 1;
font-weight: bold;
color: inherit;
border-radius: 5px;
transition: all 0.3s ease;
}
.counter button:active {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
outline: none;
border: none;
transition: all 0.3s ease;
}
- Log in to the WordPress admin dashboard.
- Navigate to Plugins and activate the WordPress Vue Counter Plugin.
- Go to Pages and create a new page.
- Enter the page title.
- Use the shortcode
[vue-counter]
in the page content. - Publish the page.
Visit the newly created page to see the Vue counter application in action.
This README provides detailed step-by-step instructions to set up a WordPress plugin using Vue, ensuring clarity for users new to both WordPress and Vue.
Sure! Here is an example of a README file that includes the instructions for creating and integrating the templates in your WordPress plugin using Vue.js.
# WordPress Vue Counter Plugin
This plugin demonstrates how to use a Vue 3 counter application in WordPress. It includes a template defined in a separate PHP file and integrates it into the Vue.js component.
## Installation
1. **Download the Plugin:**
- Download or clone this repository to your local machine.
2. **Upload the Plugin:**
- Upload the plugin folder to the `/wp-content/plugins/` directory of your WordPress installation.
3. **Activate the Plugin:**
- Go to the WordPress admin dashboard.
- Navigate to `Plugins` and activate the "WordPress Vue Counter Plugin".
## Plugin Structure
wordpress-vue-counter-plugin/ │ ├── app.js ├── style.css ├── templates.php └── wordpress-vue-counter-plugin.php
## Files Description
- `wordpress-vue-counter-plugin.php`: Main plugin file that registers and enqueues scripts and styles, and defines the shortcode.
- `app.js`: Vue.js application file.
- `style.css`: CSS file for the plugin.
- `templates.php`: PHP file containing the template for the Vue.js component.
## Usage
1. **Create `templates.php`:**
```php
<?php
/**
* templates.php
*/
?>
<script type="text/x-template" id="my-template">
<div>
<h1>Ayush Here</h1>
<button @click="decrement">-</button>
<span>{{ count }}</span>
<button @click="increment">+</button>
</div>
</script>
-
Modify
wordpress-vue-counter-plugin.php
:<?php /** * Plugin Name: WordPress Vue Counter Plugin * Description: A demo on how to use a Vue 3 counter application in WordPress. */ // Register scripts and styles function func_load_vuescripts() { // Register Vue 3 (global build) wp_register_script('vue', 'https://unpkg.com/vue@3/dist/vue.global.prod.js', [], null, true); // Register your custom Vue code wp_register_script('my_app', plugin_dir_url(__FILE__) . 'app.js', ['vue'], null, true); // Register CSS wp_register_style('my_css', plugin_dir_url(__FILE__) . 'style.css'); } // Enqueue scripts and styles add_action('wp_enqueue_scripts', 'func_load_vuescripts'); // Return string for shortcode function func_wp_vue() { // Enqueue Vue.js and custom script wp_enqueue_script('vue'); wp_enqueue_script('my_app'); // Enqueue CSS wp_enqueue_style('my_css'); // Capture the template content ob_start(); include plugin_dir_path(__FILE__) . 'templates.php'; $template_content = ob_get_clean(); // Return HTML with Vue mount point and template content return '<div id="app"></div>' . $template_content; } // Add shortcode to WordPress add_shortcode('vue-counter', 'func_wp_vue'); ?>
-
Create
app.js
:const { createApp } = Vue; createApp({ data() { return { count: 0 }; }, methods: { increment() { this.count++; }, decrement() { this.count--; } }, template: '#my-template', mounted() { console.log('The component has been mounted. It\'s accessible in the DOM.'); } }).mount('#app');
-
Add the Shortcode to a Page or Post:
- Use the
[vue-counter]
shortcode in the content of a WordPress page or post where you want the Vue counter to appear.
- Use the
By following the above steps, you can create a WordPress plugin that integrates a Vue.js component with a template defined in an external PHP file. This setup allows you to keep your templates in PHP while leveraging Vue.js for dynamic functionality.
Save this content to a `README.md` file in your plugin directory. This will provide clear instructions for users on how to set up and integrate the template with the Vue.js component in the WordPress plugin.