Page Configs — Blog and Product Listing

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.

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.

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.