Content Editing

Global Site Config — Navbar, Footer, and Homepage

A complete, beginner-friendly guide to editing the global site configuration in Nuxas. Learn how to update your navbar, footer, homepage hero, social proof, features, steps, pricing, testimonials, and call-to-action sections through Decap CMS or by editing site.yml directly.

In the previous chapter, we started Nuxas with Decap CMS running in the local mode. Now it is time to edit content for the first time.

This chapter focuses on the Global Site Config — the single file that controls the navbar, the footer, and almost every section on your homepage. Once you understand how this file works, you will understand how the rest of the content system is organized.

Before we dive in, let us clarify what "Global Site Config" actually means.

What Is the Global Site Config?

The Global Site Config is a file called site.yml, located at content/data/site.yml. It is a YAML file, which is a human-readable format for structured data. It contains every piece of content that appears across multiple pages: the brand name, the navigation links, the footer columns, the homepage hero, the pricing tiers, and so on.

Every page in Nuxas reads from this file. The header reads the navigation links. The footer reads the footer columns and social links. The homepage reads the hero section, the features section, the pricing section, and so on.

If you change a value in site.yml, that change appears everywhere the value is used. This is the power of the global config: one edit, many places.

How to Edit the Global Site Config

The way you edit site.yml depends on which edition of Nuxas you purchased.

If You Purchased the Code + Decap CMS Edition

Open your browser and go to http://localhost:3000/admin. In the left sidebar, click Site Settings. Then click Global Site Config.

The CMS will show a form with every field in site.yml, organized into groups. Scroll through the form and you will see sections for Brand, Navigation, Hero, Social Proof, Features, Steps, Pricing, Testimonials, Call to Action, Contact, Footer, and UI Labels.

Edit any field, then click Save in the top right corner. The change is written to site.yml, and the Nuxt development server reloads the page automatically. Refresh your browser and you will see the change on the site.

If You Purchased the Code Only Edition

Open content/data/site.yml in VS Code. You will see a YAML file with the same structure as the CMS form, but written in plain text.

Edit any value, then save the file with Ctrl + S. The Nuxt development server reloads the page automatically. Refresh your browser and you will see the change on the site.

The rest of this chapter explains what each section of site.yml does. You can follow along in either the CMS or VS Code — the fields are identical.

Section 1 — Brand

The brand section controls your project's identity. It appears in the header, the footer, and the browser tab.

brand:
  name: NuxtSass
  badge: Starter
  tagline: Production-ready Nuxt 4 SaaS template kit

name — the name of your project. It appears next to the logo in the header.
badge — a small label that appears after the name. In the default config, it is "Starter". Change it to something like "Pro", "SaaS", or remove it entirely.
tagline — a short description that appears in the footer, under the brand name.

If you change name to "My SaaS", the header will show "My SaaS" instead of "NuxtSass". Simple as that.

The nav section controls the primary navigation links in the header.

nav:
  - label: Home
    to: /
  - label: Products
    to: /products
  - label: Blog
    to: /blog
  - label: About
    to: /about
  - label: Contact
    to: /contact

label — the text shown in the navigation.
to — the URL the link points to. For internal pages, use a path like /products. For external pages, use a full URL like https://example.com.

To add a new link, add a new item to the list. To remove a link, delete its item. The order in the list is the order in the navigation.

The mobileNav section works the same way, but it controls the mobile drawer instead of the desktop navigation. You can use different labels for mobile if you want.

Section 3 — Hero

The hero section controls the large section at the top of your homepage. It is the first thing visitors see.

hero:
  badge: Nuxt 4.14+ & Nitro Engine Ready
  title: The Production-Grade SaaS Template Built For
  titleHighlight: Nuxt Developers
  subtitle: Stop re-inventing authentication...
  primaryCta:
    label: Get the Template
    to: /products
  secondaryCta:
    label: View Live Demo
    to: "#demo-preview"
  metrics:
    - 100% Strict TypeScript
    - Lighthouse 99+ Performance
  preview:
    file: server/api/subscription/checkout.post.ts
    tabs:
      - Nitro Composable
      - Nuxt 4
    image: https://images.unsplash.com/...
    alt: Nitro server route with Stripe checkout session
    width: 1600
    height: 900

badge — a small label above the title.
title — the main headline. It is split into two parts: title and titleHighlight. The highlighted part is rendered in a different color.
subtitle — a paragraph below the headline.
primaryCta and secondaryCta — the two buttons below the subtitle.
metrics — a list of short bullet points below the buttons.
preview — the image below the metrics. It uses an image URL, an alt text, and width/height for performance.

To customize the hero, change the text values. To change the image, replace the image URL with your own.

The socialProof section controls the row of statistics below the hero.

socialProof:
  tag: Trusted By Developers
  title: Built with Nuxt Idiomatic Principles
  desc: Over 1,200+ indie hackers...
  cards:
    - title: 14ms
      text: Average serverless TTFB response...
    - title: 45+
      text: Battle-tested composables...

Each card has a title (a short number or phrase) and a text (a sentence explaining the number). Add or remove cards to change the row.

Section 5 — Features

The features section controls the grid of feature cards on the homepage.

features:
  tag: Engineered for Velocity
  title: Everything You Need To Launch in One Kit
  desc: We skipped the unnecessary dependencies...
  items:
    - icon: zap
      title: Nitro Engine Architecture
      desc: Leverage Nitro's file-based API routing...

Each item has an icon (a name like zap, shield, or globe), a title, and a desc. The icon names are mapped to SVG icons in the code. The available icons are:

zap
credit-card
shield
globe
package
activity

To add a new feature, add a new item. To remove a feature, delete its item.

Section 6 — Steps

The steps section controls the three-step process section on the homepage.

steps:
  tag: 3 Simple Steps
  title: From Download To Production Deployment
  desc: Launch your SaaS without getting stuck...
  items:
    - number: "01"
      title: Clone & Configure
      desc: Download the repository, run npm install...

Each item has a number (a string like "01"), a title, and a desc. You can add more steps if you want.

Section 7 — Pricing

The pricing section controls the pricing section on the homepage. This is different from the product collection — pricing here is independent of the products you sell. It is meant for the marketing pricing cards on the homepage.

pricing:
  tag: Transparent Pricing
  title: Invest Once. Ship Unlimited Projects.
  desc: Lifetime updates, complete source code access...
  popularLabel: Most Popular
  tiers:
    - title: Nuxas Code Only
      badge: Code Only Edition
      price: 59
      priceLabel: one-time
      excerpt: Launch your SaaS in days...
      popular: false
      features:
        - Full Nuxt 4 + Nitro source repository
        - 100% strict TypeScript
      ctaLabel: Buy Nuxas Code Only
      ctaType: gumroad
      ctaUrl: https://creativitaz.gumroad.com/l/nuxas

Each tier has:

title — the tier name.
badge — a small label above the title.
price — a number.
priceLabel — a string like "one-time" or "starting from".
excerpt — a short description.
popular — a boolean. If true, the tier is highlighted with a "Most Popular" badge.
features — a list of bullet points.
ctaLabel — the button text.
ctaType — the platform type (used for styling, not for the URL).
ctaUrl — the URL the button points to.

To add a new tier, add a new item. To remove a tier, delete its item. The order in the list is the order on the page.

Section 8 — Testimonials

The testimonials section controls the row of quotes below the pricing section.

testimonials:
  tag: Developer Reviews
  title: Loved by Builders Across the Globe
  desc: Here is what developers say...
  items:
    - quote: We deployed our AI micro-SaaS in 4 days...
      initials: MS
      name: Marcus Sterling
      role: Founder, ShipVibe.io

Each item has a quote (the testimonial text), initials (two letters for the avatar), name, and role.

Section 9 — Call to Action

The cta section controls the final call-to-action band at the bottom of the homepage.

cta:
  title: Ready To Launch Your Nuxt SaaS?
  desc: Download NuxtSass Starter today...
  primaryCta:
    label: Get NuxtSass Starter
    to: /products
  secondaryCta:
    label: Browse All Packages
    to: /products

It has a title, a desc, and two buttons.

The footer section controls the footer that appears on every page.

footer:
  description: The premium open-standard template kit...
  columns:
    - title: Products
      links:
        - label: Nuxas Code Only
          to: /products/nuxas-code
  socials:
    - label: GitHub
      href: https://github.com/mesinkasir
      icon: github
  copyright: © 2026 NuxtSass Starter...

description — a paragraph below the brand name.
columns — a list of columns, each with a title and a list of links.
socials — a list of social links, each with a label, an href, and an icon (github, twitter, or discord).
copyright — the copyright text at the bottom.

To add a new column, add a new item to columns. To add a new social link, add a new item to socials.

Section 11 — UI Labels

The ui section controls the small text labels used throughout the site, such as button labels.

ui:
  readMore: Read Article
  viewDetails: View Details
  viewKit: View Kit
  buyNow: Buy Now
  previous: Previous
  next: Next
  showing: Showing
  of: of
  items: items
  prevArticle: Previous Article
  nextArticle: Next Article

These labels are used in components like ProductCard, BlogCard, and AppPagination. If you want to translate your site to another language, this is where you start.

Saving Your Changes

If you are editing through the CMS, click Save in the top right corner. The change is written to site.yml immediately.

If you are editing through VS Code, press Ctrl + S. The change is written to site.yml immediately.

Either way, the Nuxt development server reloads the page automatically. Refresh your browser to see the change.

What to Expect in the Next Chapter

In the next chapter, we will edit the Page Configs — the files that control the blog list and product list pages. These are smaller than the global site config, but just as important.

See you in the next chapter.

Global Site Config — Navbar, Footer, and Homepage