Starter Template for Nuxt x Craft CMS
This starter is built using the Craft Query API.
You don’t need any knowledge of GraphQL—just familiarity with Craft CMS’s query builder is enough to get started.
Features
✅ No GraphQl
✅ Optimized images with ImagerX
✅ World-class SEO with SeoMatic
✅ Navigation Plugin installed and configured
✅ Multilingual with Craft multisites
✅ Fully runs on ddev
✅ Tailwind v4, Nuxt v3, Eslint, TypeScript, Craft v5
✅ Great Cats all over the place
Requirements
- DDEV installed locally
- Basic Nuxt and Craft Knowledge
Setup
./scripts/setup.shNote: If your frontend shows a nginx error on the first start you should refresh your Browser.
This happens because the setup script launches the browser before the dev process is running.
Access the control panel:
Use these credentials to access the control panel:
- User: admin
- Password: admin123
Scripts
ddev fe <command>: cd's in the frontend folder and runs the provided command.ddev npm run <command>runs the commands in the frontend folder due to npm workspaces.
Note: This template uses npm workspaces, which is why there are two package.json files.
This setup allows you to run npm commands at the root level while managing multiple packages
within the workspace efficiently. (ddev npm run dev does the same as ddev fe npm run dev)
Important Security Notes
If you use this as a starter for your own application, be sure to flip the access token! The access token used in that
demo project is publicly available and not save at all.
Further Resources
- Craft Query API: The Craft CMS Plugin that powers this great stuff.
- Nuxt SDK: The package used to get the query builder in Nuxt.
- JS SDK:
@query-api/nuxtis built on the@query-api/js.
Support
If you encounter bugs or have feature requests, please submit an issue. Your feedback helps improve the starter!