Some SSGs, like Jekyll, Hugo, Astro, and Eleventy, have strong opinions about how to organize the content in your repository. CloudCannon can run automatic processes on these SSGs and provide basic editing out-of-the-box. Nuxt takes a less opinionated approach and allows you to decide where and how content is stored. This means that for Nuxt, CloudCannon’s out-of-the-box options only include the source editor.
CloudCannon has a few concepts that make organizing data easier:
- Data — These are standalone data files. This is ideal for site configuration or files that don’t need to be repeated. Data is edited by altering a single file.
- Collections — A collection is a single folder of files with a repeated format. For example, a collection might include pages, blogs, staff members, or recipes that share a format. Collections are edited by altering any file or adding more files.
Using the Nuxt Content module makes integrating your Nuxt site with CloudCannon easy, with clear analogs to the organization of data mentioned above. Most importantly, this module requires that you separate your site content from the templating and rendering logic. This will make it easier to integrate the site into the CMS.
When using the Nuxt Content module, we recommend grouping related content in directories. For instance, if your site has a blog with multiple posts, it is a good idea to keep those posts in a posts/ folder.
CloudCannon supports a set of file formats for files in Data or Collections:
- Structured data files: JSON, YAML, TOML, CSV, TSV
- Markup files: HTML, Markdown, MDX
- Combination files: HTML with front matter, Markdown with front matter, MDX with front matter
Front matter refers to a section at the top of a markup file that contains structured data. CloudCannon supports JSON, YAML, and TOML front matter. Markdown comes in many flavors, so be sure to check out configuring your Markdown engine.
If you need another supported format, get in touch with our support team, and we would be happy to look into it.
Updating Nuxt to use file data#
Now that we have covered the terminology, it’s time to organize our content. For Document-driven sites, in your Nuxt page component(s), you can fetch your page data like so:
const { page } = useContent();
const pageData = page.value
This catch-all route will fetch the relevant file in your content/ directory based on the URL you have navigated to. For example, navigating to /about/ will fetch the content/about.md, if it exists.
If you are not using Document-driven mode, you can instead fetch your page data using the queryContent composable, like so:
const page = await queryContent().where({ _path: '/about' }).findOne();
For more usage examples, we recommend taking a look at our Sendit Nuxt template.