DEV Community

Christopher Robin Chase
Christopher Robin Chase

Posted on

Headless Vue + WordPress Boilerplate

#vue #wordpress #php #javascript

Headless Vue + WordPress Boilerplate

This boilerplate allows you to use Vue as the front-end for your WordPress theme in a headless architecture. WordPress handles the backend and REST API, while Vue powers the user interface using modern frontend tooling like Vite.

🧠 Key Features

  • 🌟 Use Vue 3 with Vite for a fast and modern development experience

  • 🔌 Connects to WordPress REST API for dynamic content

  • 🗂 Modular folder structure for components, pages, APIs, and stores

  • ♻️ Supports Vue Router and Pinia (Vue Store)

  • 🎨 Style with standard CSS or your preferred CSS preprocessor

📁 Folder Structure 

themes/
└── vue-boilerplate/
    ├── functions/               # WordPress PHP functions
    ├── public/                  # Public assets
    ├── src/                     # Vue application root
    │   ├── api/                 # JS modules for API calls
    │   │   └── wp/
    │   ├── assets/              # Static assets like images and SVGs
    │   ├── components/          # Vue components (e.g., layout)
    │   ├── page/                # Vue page views
    │   ├── router/              # Vue Router setup
    │   └── stores/              # Pinia stores
    │       └── wp/
    │   ├─── App.vue             # Root Vue component
    │   ├─── main.js             # Vue app entry point
    │   └─── style.css           # Global styles
    ├── index.html               # Entry HTML for the Vue app
    ├── *.php                    # WordPress theme files (header.php, footer.php, etc.)
    ├── style.css                # Wordpress Global styles + Theme metadata
    ├── vite.config.js           # Configuration file for Vite, a fast frontend build tool.
Enter fullscreen mode Exit fullscreen mode

🚀 Getting Started

  1. Download and put the files inside your themes folder.
    Download Latest Release

  2. Install Dependencies

npm install
Enter fullscreen mode Exit fullscreen mode
  1. Run the Development Server 
npm run start
Enter fullscreen mode Exit fullscreen mode

This will start the Vite development server and compile your Vue frontend.

Make sure WordPress is running locally (e.g., with LocalWP or Laragon) and that the theme is activated.

📦 Build for Production 

npm run build
Enter fullscreen mode Exit fullscreen mode

This will compile and optimize your Vue app for production inside the WordPress theme.

🛠 Integration Tips

  • Use the functions.php file to enqueue the compiled assets

  • Use WordPress routes to serve the base HTML (index.php)

  • Connect your Vue app to the WP REST API through src/api/wp/

Feel free to clone or fork the repository and customize it for your projects.

Contributions and feedback are always welcome! 😃

Repository: https://github.com/chrischase011/wordpress-vue-theme-boilerplate

Star it if you find it useful! ⭐😉

Prepared by: Christopher Robin Chase

Top comments (0)