How to Build a WordPress Plugin Using Vue.js Components

The Power of Vue.js in WordPress Development

Vue.js offers a modern, reactive approach to building interactive interfaces – perfect for creating dynamic WordPress plugins. By combining Vue’s component-based architecture with WordPress’s backend power, you can develop:

✔ Admin dashboards with real-time updates
✔ Frontend widgets with smooth transitions
✔ Complex form builders with validation
✔ Single-page-app experiences within WP

This guide walks through creating a custom WordPress plugin with Vue 3 (Composition API) from scratch. Our YouTube channel; https://www.youtube.com/@easythemestore

Step 1: Plugin Foundation Setup

1. Create Basic Plugin Structure

wp-content/plugins/
└── my-vue-plugin/
    ├── my-vue-plugin.php      # Main plugin file
    ├── package.json           # NPM dependencies
    ├── webpack.config.js      # Build configuration
    ├── src/
    │   ├── admin/             # Vue admin components
    │   ├── frontend/          # Public-facing components
    │   └── main.js            # Vue initialization
    └── dist/                  # Compiled assets

2. Essential Plugin Header (my-vue-plugin.php)

<?php
/*
Plugin Name: My Vue Plugin
Description: Custom plugin with Vue.js integration
Version: 1.0
*/

defined('ABSPATH') or die('Direct access not allowed');

// Enqueue compiled assets
add_action('admin_enqueue_scripts', function() {
    wp_enqueue_script(
        'my-vue-plugin-js', 
        plugins_url('dist/admin.js', __FILE__),
        [], 
        filemtime(plugin_dir_path(__FILE__) . 'dist/admin.js')
    );
    
    wp_enqueue_style(
        'my-vue-plugin-css',
        plugins_url('dist/admin.css', __FILE__)
    );
});

Step 2: Configure Vue.js Build System

1. Initialize NPM

npm init -y
npm install vue@next @vue/compiler-sfc webpack webpack-cli vue-loader @babel/core @babel/preset-enbabel-loader css-loader style-loader --save-dev

2. webpack.config.js Setup

const path = require('path');
const { VueLoaderPlugin } = require('vue-loader');

module.exports = {
  entry: {
    admin: './src/admin/main.js',
    frontend: './src/frontend/main.js'
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  plugins: [new VueLoaderPlugin()]
};

3. Babel Configuration (.babelrc)

{
  "presets": ["@babel/preset-env"]
}

Step 3: Build Your First Vue Component

1. Admin Dashboard Component (src/admin/components/Dashboard.vue)

<template>
  <div class="vue-admin">
    <h1>{{ title }}</h1>
    <button @click="counter++">Clicked {{ counter }} times</button>
    <p v-if="showMessage">Hello from Vue!</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const title = 'My Vue Admin Panel';
const counter = ref(0);
const showMessage = ref(true);
</script>

<style scoped>
.vue-admin {
  padding: 20px;
  background: #f0f0f1;
}
</style>

2. Initialize Vue (src/admin/main.js)

import { createApp } from 'vue';
import Dashboard from './components/Dashboard.vue';

// Mount to existing WP admin element
document.addEventListener('DOMContentLoaded', () => {
  const app = createApp(Dashboard);
  app.mount('#my-vue-plugin-app');
});

3. Create Admin Page Hook

// Add to my-vue-plugin.php
add_action('admin_menu', function() {
    add_menu_page(
        'Vue Plugin', 
        'Vue Plugin',
        'manage_options',
        'my-vue-plugin',
        function() {
            echo '<div id="my-vue-plugin-app"></div>';
        }
    );
});

Step 4: Advanced Integration Techniques

1. WordPress REST API + Vue

// In your Vue component
const fetchPosts = async () => {
  const response = await fetch('/wp-json/wp/v2/posts');
  return await response.json();
};

2. Shortcode for Frontend Components

// Register shortcode
add_shortcode('vue-component', function() {
    wp_enqueue_script('my-vue-plugin-frontend');
    return '<div id="vue-frontend-app"></div>';
});

3. State Management with Pinia

npm install pinia

// Store setup
import { createPinia } from 'pinia';

const pinia = createPinia();
app.use(pinia);

Step 5: Production Optimization

Code Splitting:

// Dynamic imports
const SettingsPage = () => import('./Settings.vue');

Cache Busting:
Add file timestamps to enqueued assets in WordPress
Security:

Use nonces for API requests
Sanitize all props passed from PHP to Vue

Troubleshooting Common Issues

⚠ Vue not loading:

Verify webpack output paths
Check for console errors about CSP headers

⚠ HMR not working:

Configure webpack dev server for WordPress:

devServer: {
  proxy: 'http://your-wp-site.local'
}

⚠ CSS conflicts:

Use scoped styles or CSS modules
Prefix all classes with plugin-specific namespace

By combining Vue’s reactivity with WordPress’s flexibility, you can build modern, maintainable plugins that outperform traditional jQuery-based solutions. The component architecture makes your code reusable across multiple projects.

🚀 Pro Tip: Use VitePress to document your Vue-powered plugin directly in your codebase!

January 16, 2026 1:01 AM