1. About Nuxt Content

A powerful content management system that allows you to manage your content in a structured way. Nexus AI uses Nuxt Content to manage its content in every page and section components.

Default content is stored in content folder. Every page and some section components are using Nuxt Content to fetch its content.

Learn more about Nuxt Content here.

2. Fetching Content in Pages

Here is an example of how to fetch content in a page:

// pages/example.vue
<script setup lang="ts">
  // Fetch page content
  const { data: page, error } = await useAsyncData("example", () =>
    queryContent("/example").findOne()
  );
</script>

<template>
  <main>
    <!-- Render page content -->
    <ContentRenderer :value="page" />
  </main>
</template>

3. Fetching Content in Section Components

Here is an example of how to fetch content in a section component:

<template>
  <ContentQuery path="/faq" find="one" v-slot="{ data }">
    <Accordion
      v-for="item in data.body"
      :key="item.id"
      :title="item.question"
      variant="filled"
    >
      {{ item.answer }}
    </Accordion>
  </ContentQuery>
</template>

Above example is using ContentQuery component to fetch content of faq.yml file in content/ directory. ContentQuery component is a wrapper component that allows you to fetch content from Nuxt Content.

4. Styling and Formatting Content

Nexus AI uses markdown format for content. It is also complimented by markdown components. This way you rearrange or add new pages using existing components easily.

Here is an example how contact page is using markdown format:

---
seo:
  title: Nexus AI - Get in touch
  description: Please feel free to send us any questions, feedback or suggestions you might have.
  image: /og-image.png
---

::contact-form-section
::

::faq-section
::

::newsletter-section
::

As you can see, in the top of the file, we have seo section that is used to set the SEO metadata for the page. And then we have section components that are used to render the page content.

In the corresponding vue page, we are using ContentRenderer component to render the content and using the 'components' attribute to specify the components that are used in the content.

<template>
  <ContentRenderer :value="page" :components="[ContactFormSection, FaqSection, NewsletterSection]" />
</template>

This is how you can use markdown components in your content.