Open
Description
Description
nuxt-craftcms is an SDK for Craft CMS . It provides simple ways to query data and can map the data automatically with vue components. It enables developers to use a query builder to get data from the cms without writing huge GraphQL schemas.
Features
- Query builder: Easily build and execute queries directly from Nuxt, enabling flexible, real-time data retrieval from Craft CMS
- Connect Components to Data: Connect your data directly with your Vue components, to speed up development.
- Preview Support: Just use the provided composables to query data and previewing will work out of the box.
- Get Only the Data You Need: Avoid overfetching by using a custom function in the query builder to select only the fields you require.
- Support for Main Element Types: Query addresses, assets, entries and users.
- Full Typescript Suppport
- Multisite Composables: Built in composables to support Craft multisites.
- SeoMatic Composables: Connect SeoMatic with Nuxt fast with the built in SeoMatic composables.
Examples
Old way:
const route = useRoute();
// Construct a GraphQL fragment using the route param:
const query = `{
entry(slug: "${route.params.slug}") {
title
description
}
}`;
// Fetch the incoming token:
const token = route.query.token;
// Build the URL, with `query` and `token` params:
const { data: gql } = await useFetch('https://my-project.ddev.site/api', {
params: { query, token },
});And with the nuxt-craftcms module:
const route = useRoute()
const { data } = await useCraftEntry()
.slug(route.params.slug)
.fields(['title', 'description'])
.one()More Links
- Docs: https://samuelreichor.at/libraries/nuxt-craftcms
- Full Example: https://github.com/samuelreichor/craft-nuxt-starter
Repository
https://github.com/samuelreichor/nuxt-craftcms
npm
https://www.npmjs.com/package/nuxt-craftcms
Nuxt Compatibility
Nuxt 3