--- title: "Managing Products" description: "A complete, beginner-friendly guide to creating, reading, updating, and deleting products in Nuxas. Learn every frontmatter field, how to add gallery images, and how to connect each product to a purchase URL." canonical_url: "https://nuxas.pages.dev/docs/13-product-crud" --- > Index of every page on this site: [llms.txt](https://nuxas.pages.dev/llms.txt) ## Managing Products In the previous chapter, we managed blog posts. Now we will manage **products** — the items you sell on your site. Products are different from blog posts in one key way: they are **commercial**. Each product has a price, a purchase URL, and a gallery of images. The product detail page is designed to convert visitors into buyers, so every field matters. This chapter walks you through the entire lifecycle of a product, from creation to deletion. ### Where Products Live All products live in `content/products/`. Each product is a separate Markdown file. The filename becomes the URL slug for the product. For example: - `content/products/nuxas-code.md` becomes `/products/nuxas-code` - `content/products/nuxas-cms.md` becomes `/products/nuxas-cms` Filenames should be lowercase, with hyphens instead of spaces. Keep them short and descriptive. ### Understanding the Product Frontmatter Every product file starts with a block of YAML between two `---` lines. This is the frontmatter. It defines the product's metadata: the title, price, features, gallery, and purchase URL. Here is a complete example of a product frontmatter: ```yaml --- title: Nuxas — Nuxt 4 SaaS Starter (Code Only) badge: Code Only Edition price: 59 priceLabel: one-time description: The complete Nuxt 4 SaaS starter — Nitro engine, strict TypeScript, Stripe-ready architecture, dark mode, accessible components, and a full SEO pipeline. Full source ownership, no CMS, no lock-in. excerpt: Launch your SaaS in days with a clean, production-grade Nuxt 4 foundation. icon: layers cover: https://images.unsplash.com/photo-1555066931-4365d14bab8c?auto=format&fit=crop&w=1200&q=80 gallery: - image: https://images.unsplash.com/photo-1467232004584-a241de8bcf5d?auto=format&fit=crop&w=1200&q=80 title: No-Code Admin Dashboard desc: Edit blog, products, and site content without touching code. - image: https://images.unsplash.com/photo-1551288059-bebda4e38f71?auto=format&fit=crop&w=1200&q=80 title: Git-Based Content Workflow desc: Every edit is a commit — automatic audit trail, easy rollback. features: - Full Nuxt 4 + Nitro source repository - 100% strict TypeScript across client and server - Dark and light theme with zero flash of unstyled content - Stripe and Lemon Squeezy integration ready - WCAG AA accessible components - Lifetime updates, no recurring fees specs: - label: Core Framework value: Nuxt 4.14+ (Vue 3.5+, Composition API) - label: Server Engine value: Nitro with universal deploy targets - label: Language value: 100% strict TypeScript - label: Styling value: Custom CSS tokens, dark and light mode - label: License value: Single commercial project popular: false order: 1 purchaseLabel: Buy Nuxas Code Only purchaseUrl: https://creativitaz.gumroad.com/l/nuxas --- ``` Let us go through each field. #### title The product title. It appears on the product card, on the detail page, and in the browser tab. **Tip:** Keep it descriptive but concise. "Nuxas — Nuxt 4 SaaS Starter (Code Only)" is better than "Nuxas". #### badge A short label that appears above the title on the product card. Examples: `Code Only Edition`, `Most Popular`, `Enterprise Custom`. **Tip:** If you want to highlight a product, set its badge to "Most Popular" and its `popular` field to `true`. #### price The numeric price of the product. This is used in the pricing display, the structured data, and the product card. **Tip:** Use a number, not a string. `59` is correct; `"59"` is not. #### priceLabel A short string that appears next to the price. Examples: `one-time`, `starting from`, `per month`. **Tip:** For one-time purchases, use `one-time`. For services that start at a certain price, use `starting from`. #### description A full description of the product. It appears on the detail page, below the title. **Tip:** Be specific. Mention what is included, what technologies are used, and what makes the product unique. #### excerpt A short summary of the product. It appears on the product card and in the related products section. **Tip:** Keep it under 160 characters. The excerpt is often the first thing visitors read. #### icon A short name that identifies the product's icon. The available icons are: - `layers` - `settings` - `code` - `cpu` The icon appears on the product card, above the title. If you use a name that is not in the list, the card will show a default icon. #### cover The URL of the cover image. It appears on the product card and at the top of the detail page. **Tip:** Use a 16:9 aspect ratio image at least 1200 pixels wide. Unsplash is a good source for free images. #### gallery An array of gallery items. Each item has an `image` (the URL), a `title`, and a `desc`. The gallery appears on the detail page, with thumbnail navigation. **Tip:** Use 3 to 5 gallery items. Too few and the gallery looks empty; too many and visitors will not scroll through all of them. #### features A list of features. Each feature is a short sentence. The features appear on the detail page, under "What is Included", and on the product card (only the first three). **Tip:** Use 4 to 6 features. Each feature should be a benefit, not a technical specification. #### specs A list of technical specifications. Each spec has a `label` and a `value`. The specs appear on the detail page, in a table. **Tip:** Use 4 to 6 specs. The label should be a category (e.g., "Core Framework"), and the value should be specific (e.g., "Nuxt 4.14+"). #### popular A boolean. If `true`, the product card is highlighted with a "Most Popular" badge. **Tip:** Only mark one product as popular. If you mark multiple, the badge loses its impact. #### order A number that determines the product's position on the products page. Lower numbers appear first. **Tip:** Use increments of 1 (1, 2, 3, etc.). If you want to insert a product between two existing ones, use a decimal (e.g., 1.5). #### purchaseLabel The text on the purchase button. Examples: `Buy Nuxas Code Only`, `Hire on Fiverr`, `Get the Template`. **Tip:** Keep it action-oriented. "Buy" and "Get" convert better than "Purchase". #### purchaseUrl The URL the purchase button points to. This is usually a Gumroad or Fiverr link. **Tip:** Test the link before publishing. A broken purchase link is the fastest way to lose a sale. ### Writing the Body Below the frontmatter, the body of the product is written in Markdown. The body appears on the detail page, below the specs and features. Use it to explain the product in more depth: what it includes, who it is for, and why someone should buy it. Here is an example body for `nuxas-code.md`: ```markdown Nuxas Code Only is a production-ready Nuxt 4 foundation for SaaS products. Everything you need to start building — without bloat, without unnecessary dependencies, and without monthly fees. You get full access to the source repository, including the Nitro API structure, strict TypeScript configuration, a dark and light theming system with zero flash of unstyled content, and accessible components that already pass WCAG AA. ## Why developers choose Nuxas Most Nuxt boilerplates force you into their own abstractions. Nuxas does the opposite: idiomatic Nuxt code that reads like it was written by a senior engineer — easy to read, easy to change, easy to maintain. - **Zero lock-in**: fork, modify, and deploy to Vercel, Cloudflare, or Netlify as you wish. - **Full ownership**: one payment, lifetime updates. - **Production-grade**: 14ms TTFB on the edge, Lighthouse 99+, no hydration mismatches. ## Who it is for Freelancers and solo founders who want to launch a SaaS in days, not months. If you want to edit content without touching code, consider the [Nuxas + Decap CMS edition](/products/nuxas-cms) — an upgrade that gives you a no-code admin dashboard. ``` The body can be as long as you want. Use headings, paragraphs, lists, and internal links to make it readable. ### Creating a New Product #### If You Purchased the Code + Decap CMS Edition 1. Open `http://localhost:3000/admin`. 2. In the left sidebar, click **Products**. 3. Click **New Product** in the top right corner. 4. Fill in the fields: - **Title** — the product title. - **Badge** — an optional badge. - **Price** — a number. - **Price Label** — a string like "one-time". - **Description** — a full description. - **Excerpt** — a short summary. - **Icon** — one of the available icon names. - **Cover Image** — upload an image or paste a URL. - **Gallery** — add 3 to 5 items, each with an image, title, and description. - **Features** — add 4 to 6 feature strings. - **Specs** — add 4 to 6 specs, each with a label and value. - **Popular** — toggle on if you want to highlight the product. - **Order** — a number. - **Purchase Label** — the button text. - **Purchase URL** — the Gumroad or Fiverr link. - **Body** — the product body in Markdown. 5. Click **Save** in the top right corner. The CMS will create a new file in `content/products/` with a slug derived from the title. #### If You Purchased the Code Only Edition 1. Open the `content/products/` folder in VS Code. 2. Right-click the folder and choose **New File**. 3. Name the file with a slug, e.g., `my-new-product.md`. 4. Paste the frontmatter template at the top of the file. 5. Fill in the fields. 6. Write the body in Markdown below the frontmatter. 7. Save with **Ctrl + S**. ### Reading a Product To view a product on your local site, navigate to `/products` and click on a product. Or go directly to the product URL: ```text http://localhost:3000/products/nuxas-code ``` The product detail page shows: - The gallery at the top, with thumbnail navigation. - The badge, title, description, and price. - The purchase button. - The technical specs table. - The features list. - The product body in Markdown. - Related products at the bottom. ### Updating a Product #### If You Purchased the Code + Decap CMS Edition 1. Open `http://localhost:3000/admin`. 2. In the left sidebar, click **Products**. 3. Click the product you want to edit. 4. Change any field or the body. 5. Click **Save**. #### If You Purchased the Code Only Edition 1. Open the product file in `content/products/`. 2. Edit any field or the body. 3. Save with **Ctrl + S**. ### Deleting a Product #### If You Purchased the Code + Decap CMS Edition 1. Open `http://localhost:3000/admin`. 2. In the left sidebar, click **Products**. 3. Click the product you want to delete. 4. Click the three dots in the top right corner, then choose **Delete**. 5. Confirm the deletion. #### If You Purchased the Code Only Edition 1. Open the `content/products/` folder in VS Code. 2. Right-click the product file and choose **Delete**. 3. Confirm the deletion. ### A Complete Example Here is a complete product, ready to copy and adapt: ```markdown --- title: My SaaS Template badge: Best Seller price: 39 priceLabel: one-time description: A production-ready SaaS template built with Nuxt 4. Includes authentication, billing, a dashboard, and a full SEO pipeline. excerpt: Launch your SaaS in days, not months. icon: layers cover: https://images.unsplash.com/photo-1555066931-4365d14bab8c?auto=format&fit=crop&w=1200&q=80 gallery: - image: https://images.unsplash.com/photo-1555066931-4365d14bab8c?auto=format&fit=crop&w=1200&q=80 title: Dashboard desc: A fully responsive dashboard with dark mode. - image: https://images.unsplash.com/photo-1551288059-bebda4e38f71?auto=format&fit=crop&w=1200&q=80 title: Billing desc: Stripe integration with subscription management. features: - Full Nuxt 4 source code - 100% strict TypeScript - Dark and light theme - Stripe integration - WCAG AA accessible - Lifetime updates specs: - label: Framework value: Nuxt 4.14+ - label: Language value: TypeScript - label: Styling value: Custom CSS tokens - label: License value: Single commercial project popular: true order: 1 purchaseLabel: Buy Now purchaseUrl: https://example.com/buy --- This is a complete SaaS template built with Nuxt 4. Everything you need to launch a product, without the boilerplate. ## What is included - Full source code - Authentication - Billing - Dashboard - SEO pipeline ## Who it is for Founders who want to ship fast without sacrificing code quality. **[Buy Now →](https://example.com/buy)** ``` ### What to Expect in the Next Chapter In the next chapter, we will manage **static pages** — pages like About, Privacy, and Terms that are not blog posts or products. These pages are simpler than blog posts and products, but they still support rich content. See you in the next chapter. ## Sitemap See the full [sitemap](https://nuxas.pages.dev/sitemap.md) for all pages.