Content

1. Managing Content with Nuxt Content

Content is the heart of Taskify. It is integrated with Nuxt Content and Nuxt Studio, thereby CMS is already included with the template.

You can find the content in the content/ directory. Each markdown file is a page in the directory.

Here is the list of pages that are already included in the template:

taskify-nuxt/
└───content/
|   └───changelog/
|   |   |   index.md
|   |   |   ...
|   └───blog/
|   |   |   index.md
|   |   |   ...
|   └───integrations/
|   |   |   index.md
|   └───legal/
|   |   |   dpa.md
|   |   |   privacy-policy.md
|   |   |   report-a-vulnerability.md
|   |   |   terms-of-service.md
│   │   index.md
│   │   about.md
│   │   contact.md
│   │   pricing.md

Also there are .yml files in the content/ directory. These files are used to provide content in specific to section components.

Following are the list of .yml files that are already included in the template:

taskify-nuxt/
└───content/
|   |   faq.yml
|   |   integration-categories.yml
|   |   integrations-list.yml
|   |   pricing-features.yml
|   |   pricing-plans.yml
|   |   team-members.yml
|   |   testimonials.yml

With Nuxt Studio, you can easily add, edit and delete content. You can also add new pages to the website by adding new markdown files to the content/ directory. Nuxt Studio is a powerful tool that allows you to manage your markdown and yaml content in a visual way.

2. Markdown and Nuxt Content

Taskify uses Markdown for content. It is a lightweight markup language with plain text formatting syntax.

Markdown is widely used in many platforms, including GitHub, Stack Overflow, and many more.

Taskify uses Nuxt Content to manage content. It is a powerful tool that allows you to manage your markdown and yaml content in a visual way. If you want to learn more about Nuxt Content, you can check out the Nuxt Content documentation.

3. Adding and Organizing Pages

You can add new pages to the website by adding new markdown files to the content/ directory. Also you will have to add the page component in the pages/ directory. And edit the page component to import the markdown file.

For example:

// 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>

This will assure that the page content is fetched and rendered correctly.

Current Taskify pages uses section components in block manner. You can also use the section components in a page. To do so you will have to import the section component in the page component and use it in the page.

For example:

// pages/example.vue
<script setup lang="ts">
  // Import section component
  import ExampleSection from "#components";

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

<template>
  <main>
    <!-- Render page content -->
    <ContentRenderer :value="page" :components="[ExampleSection]" />
  </main>
</template>

You can learn more about the section components in the Section Components documentation.