Fuxt
A complete Headless WordPress tech stack built on Nuxt.
Overview
Fuxt is a complete Headless WordPress tech stack built on Nuxt and GraphQL. It is optimized for Netlify deployment and works best with the fuxt-backend WordPress theme. Fuxt is developed by Funkhaus and is normally hosted on Flywheel. It allows for the integration of Headless Shopify and WordPress together.
Features
- Optimized for Netlify deployment
- WordPress Previews and Drafts work with regular WordPress logins
- 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
- Optimized fuxt-backend WordPress theme
- 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
- Includes lots of components for common WordPress needs
- 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
- Lodash baked in
- Prettier and ESLint built in for nice looking code
Summary
Fuxt is a powerful Headless WordPress tech stack built on Nuxt and GraphQL. It offers numerous features and optimizations that make it ideal for Netlify deployment. It works seamlessly with the fuxt-backend WordPress theme and includes a variety of components to enhance the WordPress experience. With Fuxt, users can integrate Headless Shopify and WordPress together, opening up new possibilities for their websites.
- Nuxt
nuxt.js is a lightweight and flexible JavaScript framework that allows developers to easily build dynamic and reactive user interfaces. Its intuitive syntax, modular architecture, and focus on performance make it a popular choice for modern web development.
- Vue
Vue.js is a lightweight and flexible JavaScript framework that allows developers to easily build dynamic and reactive user interfaces. Its intuitive syntax, modular architecture, and focus on performance make it a popular choice for modern web development.
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- Pinia
Pinia is the official state management library for Vue.js. It provides a simple and intuitive API with full TypeScript support, devtools integration, and modular design. Pinia replaces Vuex as the recommended state management solution for Vue 3.
- Postcss
PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and more maintainable code.
- Storybook
Storybook is a tool for developing and testing UI components in isolation. It provides a sandbox environment where you can experiment with different props and states to see how your component responds.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.