Here's a detailed and well-formatted README document for developing a WordPress plugin using Vue:

---

WordPress Vue Counter Plugin

A demonstration on how to use a Vue 3 counter application in WordPress.

Prerequisites

• WampServer: Ensure you have WampServer installed.
• WordPress: Download and install WordPress.

Setup Instructions

Step 1: Download and Install WampServer

1. Download WampServer from the official website.
2. Follow the installation instructions to set it up on your system.

Step 2: Install WordPress

1. Download WordPress from the official website.
2. Unzip the WordPress files to C:\wamp64\www.

Step 3: Setup the WordPress Database

1. Start WampServer.
2. Open a web browser and go to http://localhost/phpmyadmin.
3. Create a new database named vueCounter.

Step 4: Configure WordPress

1. Open a web browser and go to http://localhost/wordpress.
2. Enter the following details:
   • Database Name: vueCounter
   • Username: root
   • Leave the password field blank.
3. Click Submit.
4. On the next page, fill in the details:
   • Site Title: Vue Counter
   • Username: admin
   • Password: admin (Check the weak password box)
   • Your Email: [email protected]
5. Click Install WordPress.
6. Log in with the username admin and password admin.

Step 5: Create the Plugin Folder

1. Navigate to C:\wamp64\www\wordpress\wp-content\plugins.
2. Create a folder named vue-counter.

Step 6: Create Plugin Files

In the vue-counter folder, create the following files with the respective content:

vue-counter.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');

    // Return HTML with Vue mount point
    return '<div id="app"></div>';
}

// Add shortcode to WordPress
add_shortcode('vue-counter', 'func_wp_vue');
?>

app.js

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');

style.css

* {
  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;
}

Step 7: Activate the Plugin

1. Log in to the WordPress admin dashboard.
2. Navigate to Plugins and activate the WordPress Vue Counter Plugin.

Step 8: Create a New Page with the Plugin

1. Go to Pages and create a new page.
2. Enter the page title.
3. Use the shortcode [vue-counter] in the page content.
4. Publish the page.

Step 9: View the Counter Application

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.

USECASE - EXAMPLE (COUNTER APPLICATION)

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>

2. 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');
   ?>

3. 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');

4. 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.

Summary

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.