Wpgql Nuxt Boilerplate

screenshot of Wpgql Nuxt Boilerplate

A boilerplate setup of Nuxt with content from headless Wordpress using the Wordpress GraphQL plugin.

Overview

If you're looking to build a modern, headless WordPress application with a solid framework, the wpgql-nuxt-boilerplate is a fantastic starting point. Utilizing Nuxt.js for server-side rendering alongside the powerful WPGraphQL plugin for WordPress, this boilerplate offers a robust solution for those who want to leverage the flexibility of a headless CMS while enjoying the rich features of Vue.js. This setup is not only efficient but also developer-friendly, enabling a streamlined workflow from installation to deployment.

The combination of Docker for containerization and a structured directory layout makes it easy to get started quickly. With built-in support for SCSS and a suite of additional NPM packages, this boilerplate helps you focus on building your application without having to worry about the underlying setup. Whether you're a seasoned developer or just getting started with headless architectures, this boilerplate can save you significant time and effort.

Features

  • Seamless Content Rendering: Renders your content using Nuxt.js, providing a smooth server-side Vue.js experience for users.
  • GraphQL Integration: Makes use of WPGraphQL to allow easy querying of WordPress data, offering flexibility in how content is retrieved.
  • Docker Compatibility: Simplifies the installation process with Docker, allowing you to run the environment locally with minimal configuration.
  • Dynamic Menu Support: Automatically highlights menu items based on the current route, enhancing user navigation.
  • Effortless Content Management: Easily get and paginate a list of pages or posts with built-in components like PostDirectory.vue.
  • Global SCSS Utilities: Access to globally defined SCSS variables, mixins, and functions for consistent styling across components.
  • Comprehensive Testing Support: Integrates Jest for testing, ensuring your code is consistently reliable and secure.
  • Enhanced Development Tools: Includes JSDoc capabilities within Vue files, as well as useful libraries like lodash and style-resources for improved developer productivity.

This boilerplate serves as a powerful foundation for anyone looking to build a scalable, headless WordPress application with the latest web technologies.