How to Build a WordPress Plugin Using Vue.js Components

How to Build a WordPress Plugin Using Vue.js Components: A Complete Guide

Vue.js is a progressive JavaScript framework that’s perfect for building interactive interfaces in WordPress plugins. By combining Vue’s reactivity with WordPress’s backend power, you can create modern, dynamic plugins with excellent user experiences.

Why Use Vue.js with WordPress Plugins?

✔ Reactive UI – Automatic DOM updates when data changes
✔ Component-based architecture – Reusable, maintainable code
✔ Lightweight – Only ~20KB min+gzip (Vue 3)
✔ Easy integration – Works alongside jQuery and other WP scripts
✔ Growing ecosystem – Vuex, Router, and UI libraries available

Prerequisites

Basic knowledge of PHP and WordPress plugin development
Familiarity with JavaScript and Vue.js fundamentals
Node.js and npm/yarn installed
WordPress development environment. Need further info? here you go to our YouTube channel: https://www.youtube.com/@easythemestore

Step 1: Set Up Your Plugin Structure

Create a standard WordPress plugin folder structure:

/my-vue-plugin/
├── assets/
│   ├── dist/          # Compiled JS/CSS
│   ├── src/           # Vue source files
│   │   ├── main.js    # Vue entry point
│   │   └── App.vue    # Root component
├── includes/          # PHP classes
├── my-vue-plugin.php  # Main plugin file
└── package.json       # NPM dependencies

Step 2: Initialize the Plugin

In my-vue-plugin.php:

<?php
/*
Plugin Name: My Vue Plugin
Description: A WordPress plugin using Vue.js
Version: 1.0
*/

// Enqueue Vue and our app
function mvp_enqueue_scripts() {
    wp_enqueue_script(
        'my-vue-plugin',
        plugins_url('assets/dist/js/app.js', __FILE__),
        [], // Dependencies added by build system
        filemtime(plugin_dir_path(__FILE__) . 'assets/dist/js/app.js'),
        true
    );
    
    wp_enqueue_style(
        'my-vue-plugin',
        plugins_url('assets/dist/css/app.css', __FILE__),
        [],
        filemtime(plugin_dir_path(__FILE__) . 'assets/dist/css/app.css')
    );
}
add_action('wp_enqueue_scripts', 'mvp_enqueue_scripts');

// Add shortcode to render Vue app
function mvp_shortcode() {
    return '<div id="my-vue-app"></div>';
}
add_shortcode('my_vue_app', 'mvp_shortcode');

Step 3: Set Up Vue.js with Vite

Vite is a modern build tool that’s perfect for Vue development:

Initialize npm:

npm init -y

Install dependencies:

npm install vue @vitejs/plugin-vue vite --save-dev

Create vite.config.js:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  build: {
    outDir: 'assets/dist',
    emptyOutDir: true,
    rollupOptions: {
      input: 'assets/src/main.js',
      output: {
        entryFileNames: 'js/app.js',
        chunkFileNames: 'js/[name].js',
        assetFileNames: 'css/[name].[ext]'
      }
    }
  }
})

Step 4: Create Your Vue Components

Main entry point (assets/src/main.js):

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.mount('#my-vue-app')

Root component (assets/src/App.vue):

<template>
  <div class="vue-plugin-container">
    <h1>{{ title }}</h1>
    <button @click="count++">Clicked {{ count }} times</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'My Vue WordPress Plugin',
      count: 0
    }
  }
}
</script>

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

Step 5: Conn ect Vue to WordPress Data

Pass WordPress data to Vue using wp_localize_script:

In my-vue-plugin.php:

function mvp_localize_data() {
    wp_localize_script('my-vue-plugin', 'mvpData', [
        'apiUrl' => rest_url('my-vue-plugin/v1/'),
        'nonce' => wp_create_nonce('wp_rest'),
        'currentUser' => wp_get_current_user(),
        'siteSettings' => get_option('my_plugin_settings')
    ]);
}
add_action('wp_enqueue_scripts', 'mvp_localize_data');

Access in Vue:

// In any component
console.log(window.mvpData.apiUrl)

Step 6: Create a WordPress REST API Endpoint

function mvp_register_api_routes() {
    register_rest_route('my-vue-plugin/v1', '/data', [
        'methods' => 'GET',
        'callback' => 'mvp_api_get_data',
        'permission_callback' => function() {
            return current_user_can('edit_posts');
        }
    ]);
}
add_action('rest_api_init', 'mvp_register_api_routes');

function mvp_api_get_data($request) {
    return [
        'success' => true,
        'data' => [
            'posts' => get_posts(['numberposts' => 5]),
            'time' => current_time('mysql')
        ]
    ];
}

Step 7: Build and Deploy

Add build scripts to package.json:

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "watch": "vite build --watch"
  }
}

Run development server:

npm run dev

Build for production:

npm run build

Advanced Features

1. Vuex for State Management

npm install vuex@next

// store.js
import { createStore } from 'vuex'

export default createStore({
  state: {
    loading: false,
    posts: []
  },
  mutations: {
    SET_POSTS(state, posts) {
      state.posts = posts
    }
  },
  actions: {
    async fetchPosts({ commit }) {
      const response = await fetch(window.mvpData.apiUrl + 'data')
      commit('SET_POSTS', await response.json())
    }
  }
})

2. Vue Router for SPAs

npm install vue-router@4

import { createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/settings', component: Settings }
  ]
})

3. UI Libraries

Popular choices:

Vuetify – Material Design components
PrimeVue – Enterprise-grade UI
Headless UI – Unstyled accessible components

Best Practices

✔ Use wp_localize_script for PHP → JS data passing
✔ Implement proper REST API security (nonces, capabilities)
✔ Code split large plugins with dynamic imports
✔ Prefix all components to avoid conflicts
✔ Test with WordPress Heartbeat API for real-time updates

Troubleshooting

🔧 Vue not loading? Check:

Proper enqueue order (Vue loaded first)
No jQuery conflicts
Correct DOM element ID

🔧 Build errors?

Verify Node.js version (14+)
Check import paths
Clean node_modules and reinstall

Complete Example Plugin

You can find a complete working example at:
github.com/wordpress-vue-plugin-starter

Final Thoughts

Combining Vue.js with WordPress plugins gives you:
🚀 Modern reactive interfaces
🧩 Reusable component architecture
⚡ Excellent performance
🔌 Seamless WordPress integration

Start with simple components and gradually add complexity as needed. The Vue+WordPress combo is perfect for:

Dashboard widgets
Front-end interactive elements
Complex form builders
Real-time data displays

November 30, 2025 7:54 AM