Vue / Nuxt / Nuxt UI / Payload CMS API integration

Simple example project to actually render stuff from Payload CMS, not just retrieve it.

Goals

• Use Nuxt useFetch to retrieve.
• Use Nuxt MDC and their Prose* components to render (in replacement for Nuxt Content).
• Use Payload CMS REST API to retrieve a Rich Text field based on Lexical.
• Implement, map and render a Nuxt UI Alert through a Payload Block mounted inside the Rich Text field.
• Avoid dependencies to @payloadcms as they are heavy and should not be required as an headless CMS REST API source.

Running the prototype

Clone the repo.

npm install
npm run dev

The project will boot as a single-page application on http://localhost:3000 rending the example page.

Remarks

This repo is not a plugin, but a solution finding playground. The example is functional complete for the limited use-case I wanted.

If you have better approaches, ideas or suggestions, please feel free to PR them, so others can benefit from them. I do not care about tests, just ideas and solutions.

While the app/composables/usePayload.ts is offered, this project uses a REST API snapshot result from Payload found in data/example.json. That result is a simple dump of a request of /api/example/1?depth=1&locale=en

The Payload block and editor setup for the AlertBlock can be found in payload/ for reference what was used to create it within the CMS system.

The mapping towards the Nuxt UI Alert component can be found in app/components/PayloadRichText.ts:156.

Project layout is based on Nuxt 4 future compatibility, so everything worthwhile will end up in app/.

Further references

Most findings are adaptations of different sources:

• How Payload solves this through JSX
• How Nuxt MDC uses Prose* components that I want to use