fuxt

A complete Headless WordPress tech stack built on Nuxt, using GraphQL.

Works best with the fuxt-backend WordPress theme and included WordPress optimized components.

We also have some Shopify components under development here. Headless Shopify and WordPress together finally!

Built by Funkhaus. We normally host on Flywheel.

PS: The name Fuxt comes from Funkhaus and Nuxt. It's provocative.

Features

• Optimized for Netlify deployment. Includes custom WordPress plugin for manual and auto deploys.
• WordPress Previews and Drafts work with regular WordPress logins. Preview token in requests to work with CDNs.
• Includes a WordPress admin bar on frontend for logged in users.
• Supports Gutenberg blocks on frontend and backend!
• Includes Nuxt Storybook module!
• Includes custom module for nuxtGenerateInit. Populate the store once at the beginning of Generate!
• Optimized fuxt-backend WordPress theme:
  • Auto installs any WordPress plugin dependencies
  • GraphQL powered API using Nuxt GraphQL Request
  • ACF first class citizen
  • Includes GQL email mutation to send email from frontend via backend
• Google Analytics plugin baked in, pulls from WordPress dashboard (requires ACF Pro)
• Includes lots of components for common WordPress needs
  • wp-gutenberg (supports custom frontend gutenberg components)
  • wp-menu and wp-menu-item (supports sub-menus!)
  • wp-image (uses WordPress generated src-sets and much more!)
  • wp-link (handles parsing WordPress permalinks)
• Built in webfontloader for fast font loading
• Uses Nuxt Auto Components
• Built in proxy server, to make secure HTTP requests via WordPress
• Lots of common functions to save you time!
  • Mobile swipe events baked in
  • Solve for 100vh on mobile baked in
  • Tracks window dimensions and scroll top position into Vuex
  • IP Stack region detection built in (requires API key)
  • Lodash baked in
  • Prettier and ESLint built in for nice looking code

Build Setup

This is just a Nuxt site, so it builds and deploys like any other Nuxt project.

Works best with the fuxt-backend WordPress theme as the backend.

First step: Duplicate and rename .example.env to .env. Define any vars environment needed there.

# install dependencies
$ npm install

# serve with hot reload at localhost:3000
$ npm run dev

# serve with hot reload Storybook at localhost:3003
$ npm run storybook

# build for production and launch server
$ npm run build
$ npm start

# build Storybook for production
$ npx nuxt storybook build

# generate static project
$ npm run generate

Documentation

For detailed explanation on how things work, checkout the wiki.