WordPress + Vue.js Headless Boilerplate

Modern boilerplate for headless projects with WordPress Bedrock (backend) and Nuxt 4 (frontend). Includes complete Docker configuration, GraphQL, WooCommerce, and sitemap proxy for SEO.

🚀 Features

Backend (WordPress Bedrock)

• ✅ WordPress Bedrock - Modern structure with Composer
• ✅ Docker Compose - NGINX, PHP 8.2, MariaDB, Redis, MailHog
• ✅ WPGraphQL - Complete GraphQL API
• ✅ WooCommerce + WPGraphQL WooCommerce - Headless e-commerce
• ✅ Yoast SEO - SEO and sitemap generation
• ✅ Redis Object Cache - Object caching for better performance

Frontend (Nuxt 4)

• ✅ Nuxt 4 - Vue.js framework with SSR
• ✅ Pinia - State management
• ✅ Apollo Client - GraphQL client
• ✅ Bootstrap 5 + SCSS - Styles and components
• ✅ Sitemap Proxy - Sitemap URLs rewritten to frontend domain

📁 Project Structure

wordpress-vue-boilerplate/
├── backend/              # WordPress Bedrock + Docker
│   ├── config/          # Bedrock configuration
│   ├── docker/          # Dockerfiles and configs
│   ├── web/             # Document root
│   ├── composer.json    # PHP dependencies
│   └── docker-compose.yml
│
└── frontend/            # Nuxt 4 Application
    ├── pages/           # App pages
    ├── assets/          # SCSS, images
    ├── server/          # API routes (sitemap proxy)
    ├── nuxt.config.ts   # Nuxt configuration
    └── package.json

🛠️ Prerequisites

• Docker and Docker Compose
• Node.js 18+ and npm
• Git

⚡ Quick Start

1. Clone the Repository

git clone https://github.com/reandimo/wordpress-vue-boilerplate.git
cd wordpress-vue-boilerplate

2. Setup and Start the Backend

cd backend

# Copy environment variables
cp .env.example .env

# Edit .env and generate new salts at: https://roots.io/salts.html

# Install WordPress dependencies
docker compose run --rm php composer install

# Start Docker services
docker compose up -d

Access http://localhost:8080 and complete the WordPress installation.

Activate plugins from WP Admin:

• WPGraphQL
• WPGraphQL WooCommerce
• Yoast SEO
• WooCommerce
• Redis Object Cache

3. Setup and Start the Frontend

cd ../frontend

# Install dependencies
npm install

# Copy environment variables (already configured for localhost:8080)
cp .env.example .env

# Start development server
npm run dev

Access http://localhost:3000 to see your application.

📚 Detailed Documentation

• Backend README - Docker setup, WordPress, plugins, troubleshooting
• Frontend README - Nuxt configuration, environment variables, build
• Sitemap Proxy Guide - Sitemap proxy guide for SEO

🔗 Available Services

Service	Port	URL
Frontend (Nuxt)	3000	http://localhost:3000
Backend (WordPress)	8080	http://localhost:8080
WP Admin	8080	http://localhost:8080/wp/wp-admin
GraphQL Endpoint	8080	http://localhost:8080/graphql
MailHog (Email UI)	8025	http://localhost:8025
MariaDB	3306	localhost:3306
Redis	6379	localhost:6379

🧪 GraphQL

The GraphQL endpoint is available at http://localhost:8080/graphql

Example Query

query GetPosts {
  posts(first: 10) {
    nodes {
      id
      title
      excerpt
      date
      author {
        node {
          name
        }
      }
    }
  }
}

WooCommerce Query

query GetProducts {
  products(first: 10) {
    nodes {
      id
      name
      price
      image {
        sourceUrl
      }
    }
  }
}

🚢 Production

Backend

1. Change WP_ENV to production in .env
2. Use secure passwords
3. Configure HTTPS with SSL certificates
4. Consider external Redis for better scalability
5. Configure automatic backups

Frontend

cd frontend
npm run build

Deploy the .output folder to your hosting service (Vercel, Netlify, etc.)

🤝 Contributing

Contributions are welcome! Please:

1. Fork the project
2. Create a feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📝 License

This project is licensed under the MIT License. See the LICENSE file for details.

🙏 Acknowledgments

• Roots/Bedrock - WordPress boilerplate
• WPGraphQL - GraphQL for WordPress
• Nuxt - Vue.js framework
• WooCommerce - E-commerce for WordPress

💬 Support

If you encounter any issues or have questions:

• Open an Issue
• Check the detailed documentation

---

Made with ❤️ for the community