Formie / Nuxt Headless Template

This is a template for a project using Formie plugin in a headless configuration using GraphQL, Craft CMS 4 and Nuxt 3.

Project summary

This project is a demonstration of how to use Formie in a headless configuration, using GraphQL to query forms and submit submissions. This project is an attempt to create full-featured implementation of Formie functionalities, including form rendering, submission handling, and validation.

• DDEV is used for running Craft CMS locally.
• Craft CMS 4 is the backend CMS.
• Formie is the form plugin, which is used to create forms, and handle submissions.
• Nuxt 3 is the frontend framework.
• Tailwind CSS.
• ESlint for linting.
• Prettier to keep the code correctly and consistently formatted.
• Nuxt Apollo easy GraphQL handling using Apollo for queries and mutations.
• Pristine.js simple form validation.

Setting up Nuxt 3

This repository contains Nuxt 3 project files in the main root folder.

• Clone this repository to your local machine.
• run npm install at the root of the project.
• Ensure you have the .env file setup correctly. (see below)
• copy the .env.example file to .env and update the CMS_GQL_URL variable.
• Start up the Nuxt 3 dev server by typing npm run dev.

Setting up DDEV / Craft CMS 4

This repository contains the Craft CMS project files in the main root folder. Little to no changes have been made from the craftcms/craft project.

• Clone this repository to your local machine.
• Ensure you have DDEV installed.
• Run ddev restart at the root of the project.
• Run ddev composer install at the root of the project.
• Ensure you setup your cms/.env file as you normally would.
• If this is your first time running the project, then run ddev craft setup/security-key to generate a security key
• and also run ddev import-db --file=database.sql to import the data.
• Finally, open the browser and go to https://formie-headless.ddev.site/admin.

The CP login credentials are initially set as follows:

Login: formie
Password: formie