Nuxt Content

1. About Nuxt Content

A powerful content management system that allows you to manage your content in a structured way. Taskify 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

Taskify 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: Taskify - Contact Us
  description: Get in touch with us today!
  image: /og-image.png
---

::background-radial
::

::contact-hero-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="[BackgroundRadial, ContactHeroSection]" />
</template>

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