---
title: "Page Configs — Blog and Product Listing"
description: "A complete, beginner-friendly guide to configuring the blog list page and the product list page in Nuxas. Learn how to set page titles, headings, intros, and page sizes through Decap CMS or by editing YAML files directly."
canonical_url: "https://nuxas.pages.dev/docs/09-page-configs"
---

> Index of every page on this site: [llms.txt](https://nuxas.pages.dev/llms.txt)

## Page Configs — Blog and Product Listing

In the previous chapter, we edited the Global Site Config — the file that controls the navbar, footer, and homepage. Now we will move to the **Page Configs**, which control the blog list page and the product list page.

Unlike the Global Site Config, which affects every page, the Page Configs only affect two specific pages: `/blog` and `/products`. They control the page title, the heading, the intro text, and the number of items shown per page.

There are two Page Configs:

1. **content/data/blog.yml** — controls the `/blog` page.
2. **content/data/product.yml** — controls the `/products` page.

This chapter explains what each field does and how to edit it.

### How to Edit Page Configs

As with the Global Site Config, the way you edit depends on your edition.

#### If You Purchased the Code + Decap CMS Edition

Open `http://localhost:3000/admin`. In the left sidebar, click **Page Configs**. You will see two entries: **Products Page Config** and **Blog Page Config**. Click either to edit it.

The form shows every field in the corresponding YAML file. Edit any value, then click **Save** in the top right corner. The change is written to the file, and the Nuxt development server reloads the page automatically.

#### If You Purchased the Code Only Edition

Open `content/data/blog.yml` or `content/data/product.yml` in VS Code. Edit any value, then save with **Ctrl + S**. The change is written to the file, and the Nuxt development server reloads the page automatically.

The rest of this chapter explains what each field does. You can follow along in either the CMS or VS Code.

### Part 1 — Blog Page Config

The blog page config lives in `content/data/blog.yml`. It controls the `/blog` page.

```yaml
title: Engineering Blog — NuxtSass Starter
description: Technical deep-dives, SEO strategies, and architectural best practices for Nuxt 4 developers building high-converting SaaS products.
tag: Engineering Log
heading: Nuxt Architecture & SaaS Strategy
intro: In-depth technical guides, benchmark comparisons, and conversion-focused insights for building fast, SEO-optimized web applications with Vue and Nuxt.
pageSize: 4
sortBy: date
sortOrder: desc
```

Here is what each field does:

- **title** — the browser tab title and the SEO title. It appears in search engine results and social media previews. Keep it under 60 characters for best results.
- **description** — the SEO description. It appears in search engine results and social media previews. Keep it between 120 and 160 characters.
- **tag** — a small label that appears above the heading. In the default config, it is "Engineering Log". Change it to something like "Latest Articles" or "From the Team".
- **heading** — the main heading of the page, rendered as an `<h1>`.
- **intro** — a paragraph below the heading, explaining what the page is about.
- **pageSize** — how many blog posts to show per page. The default is 4. Increase it to show more posts, or decrease it to show fewer.
- **sortBy** — which field to sort by. The default is `date`, which sorts by publication date. You can also sort by `title` if you want alphabetical order.
- **sortOrder** — `asc` for ascending, `desc` for descending. The default is `desc`, which shows the newest posts first.

### Part 2 — Product Page Config

The product page config lives in `content/data/product.yml`. It controls the `/products` page.

```yaml
title: Nuxt Templates & SaaS Starters — NuxtSass Starter
description: Browse production-ready Nuxt 4 themes: code-only starter, Decap CMS edition, and fully custom web app engineering.
tag: Production Toolkits
heading: Nuxt Templates & SaaS Starters
intro: Explore our curated selection of pre-architected Nuxt templates. Designed for high performance, edge compatibility, and rapid deployment — with full source ownership and no recurring fees.
pageSize: 6
sortBy: order
sortOrder: asc
```

The fields are the same as the blog page config:

- **title** — the browser tab title and SEO title.
- **description** — the SEO description.
- **tag** — a small label above the heading.
- **heading** — the main heading of the page.
- **intro** — a paragraph below the heading.
- **pageSize** — how many products to show per page. The default is 6.
- **sortBy** — which field to sort by. The default is `order`, which uses the `order` field in each product file. You can also sort by `price` or `title`.
- **sortOrder** — `asc` for ascending, `desc` for descending.

### Understanding the sortBy and sortOrder Fields

The `sortBy` and `sortOrder` fields work together to determine the order of items on the page.

For blog posts, the default is `sortBy: date` and `sortOrder: desc`. This means: sort by the `date` field, in descending order. The newest post appears first.

For products, the default is `sortBy: order` and `sortOrder: asc`. This means: sort by the `order` field, in ascending order. Products with a lower `order` value appear first.

Each product file has an `order` field. For example, `nuxas-code.md` has `order: 1`, and `nuxas-cms.md` has `order: 2`. This ensures that `nuxas-code` appears before `nuxas-cms` on the products page.

If you add a new product and want it to appear first, give it a lower `order` value than the existing products.

### Understanding the pageSize Field

The `pageSize` field determines how many items are shown on each page of the listing. The remaining items are paginated — accessible through the pagination controls at the bottom of the page.

For blog posts, the default `pageSize` is 4. If you have 12 blog posts, the blog list will show 4 posts per page, with 3 pages total.

For products, the default `pageSize` is 6. If you have 10 products, the product list will show 6 products per page, with 2 pages total.

The pagination controls are automatically generated by the `AppPagination` component. You do not need to configure anything else.

### Saving Your Changes

If you are editing through the CMS, click **Save** in the top right corner.

If you are editing through VS Code, press **Ctrl + S**.

Either way, the change is written to the file, and the Nuxt development server reloads the page automatically. Refresh your browser and visit `/blog` or `/products` to see the change.

### What to Expect in the Next Chapter

In the next chapter, we will set up the **Contact Page** with Formspree. This is the page where visitors can send you messages. We will walk you through creating a Formspree account, getting your form ID, and connecting it to the contact form in Nuxas.

If you do not plan to use the contact form, you can still read the chapter for completeness. The form is optional, and you can remove it from the contact page if you prefer.

See you in the next chapter.

## Sitemap

See the full [sitemap](https://nuxas.pages.dev/sitemap.md) for all pages.