Nuxas - Nuxt 4 Frontend Theme for SaaS & Startup Websites
Download Nuxas, a production-ready Nuxt 4 frontend theme with strict TypeScript, SEO pipeline, dark mode, and content collections. Built for SaaS, startup, and product sites.

Nuxas is a production-ready Nuxt 4 frontend theme built for SaaS founders, indie developers, and small teams who need a fast, SEO-friendly marketing site without rebuilding layout, content, and meta plumbing from scratch. It is not a page builder. It is a clean, strictly-typed codebase with a content layer you can edit in Markdown and YAML files.

Most Nuxt starters are either too minimal or too opinionated. Nuxas sits in between. Content collections, SEO meta, sitemap, accessible base components, and dark mode are already wired. Routes stay focused on layout, so editing copy does not mean editing components. Whether you are launching a landing page, a pricing page, a blog, or product pages, the structure is already there.

Two Editions, One Foundation

Nuxas is available in two editions. Both share the same high-quality Nuxt 4 frontend foundation. They differ only in how you manage content after the site is built.

Nuxas Code Only

The complete Nuxt 4 source code with strict TypeScript, SEO pipeline, dark and light theming, accessible components, and blog and product collections. You edit content directly in Markdown and YAML files using a code editor. This is the edition for developers who prefer full control over every file and do not need a browser-based CMS.

Nuxas + Decap CMS

Everything in Code Only, plus a fully integrated Decap CMS dashboard. Edit your blog, products, and site content from a browser, without touching code. Ideal for agencies and client handoffs. The CMS relies on Netlify Identity and Git Gateway, so it is deployed to Netlify. This is the edition for freelancers and agencies who need to hand off a site to non-technical editors.

You can find both editions on Gumroad. The Code Only edition is available at https://creativitaz.gumroad.com/l/nuxas, and the Code + Decap CMS edition at https://creativitaz.gumroad.com/l/nuxas-cms.

Why Choose Nuxas

Nuxt 4 Framework

Built on Nuxt 4, the Vue framework that gives you file-based routing, server-side rendering when you need it, and the Nitro server engine for universal deployment. Whether you generate a static site for a CDN or run it as a Node server, the same codebase works. Nuxt is the modern standard for Vue applications, and Nuxas is built on its latest stable release. Learn more at https://nuxt.com.

Vue 3.5 Composition API

The component layer uses Vue 3.5 with the Composition API, the modern standard for building Vue applications. Reactive state, computed values, and lifecycle hooks are written in a way that scales from a single landing page to a full multi-page site. If you already know Vue, you will feel at home. If you are new, the code is readable and idiomatic. Reference: https://vuejs.org.

100% Strict TypeScript

The entire codebase is TypeScript with strict mode enabled. Content schemas, component props, and composables are all typed. If a frontmatter field is missing or a prop has the wrong type, the build catches it before it reaches production. This is not TypeScript bolted on at the end. It is the foundation. Type safety from content schema to Vue templates means fewer runtime surprises.

Nuxt Content 3

Content collections are powered by Nuxt Content 3, the Git-based CMS for Nuxt. Blog posts, products, and static pages are Markdown files. Site settings, navigation, and footer are YAML files. Every collection has a schema defined in content.config.ts, so frontmatter is validated automatically. Nuxt Content gives you a MongoDB-like query API, automatic navigation generation, and the ability to use Vue components inside Markdown with MDC syntax. Read the docs at https://content.nuxt.com.

SEO Pipeline with @nuxtjs/seo

The @nuxtjs/seo module bundles the essential SEO tools into one install: sitemap, robots, Open Graph images, Schema.org structured data, and canonical URLs. Every page gets its meta tags generated from page data. You do not duplicate title and description by hand. The module is maintained by the Nuxt SEO team and has over 360,000 downloads . Reference: https://nuxtseo.com.

Sitemap Ready

The sitemap module generates sitemap.xml automatically from your static pages and content entries. Submit it to Google Search Console after deploy. No manual XML editing. No forgotten pages.

Dark Mode with Zero Flicker

Theming uses CSS custom properties with a token architecture. The theme respects system preference and stores the user's choice. There is no flash of unstyled content when the page loads. The toggle works on every page. This is the kind of detail that separates a production-ready theme from a demo.

Accessible Base Components

Components include ARIA attributes and keyboard-friendly focus states as a baseline. The goal is not WCAG certification out of the box, but a foundation that does not fight you when you need to pass an audit. Accessible markup should be the default, not an afterthought.

Purchase Link Ready

Product pages accept any purchase URL: Gumroad, Lemon Squeezy, Stripe, or PayPal. There is no backend checkout logic to maintain. You paste the link, and the button works. This makes Nuxas suitable for selling digital products, templates, or services without building a custom checkout flow.

Vite Build Tool

Development and production builds run on Vite, the build tool that provides fast hot module replacement during development and optimized static assets for production. Vite is the standard build tool for modern Vue and Nuxt projects. You do not need to configure it. It comes pre-wired with the Nuxt preset. Reference: https://vite.dev.

Deploy Anywhere

The same codebase can generate a static site for Netlify, Cloudflare Pages, Vercel, AWS Amplify, cPanel, or a VPS. If you later need server-side rendering for API routes or authentication, the Nitro engine is already there. Static generation is the recommended path for frontend-only sites. For a static site, you run npm run generate and upload the contents of .output/public to any static host. For server rendering, you run npm run build and start the Node server. The deployment documentation covers both paths for every major platform.

Full Source Code Ownership

One purchase. Unlimited personal and commercial projects. Not for resale as a template or theme. You own the code you buy.

Who This Is For

SaaS founders who need a landing page, pricing page, blog, and product pages from one codebase. Developers who want a Nuxt 4 starting point with content collections and SEO already wired. Content teams comfortable editing Markdown and YAML files. Small teams that need a readable codebase one or two people can maintain. Agencies building client sites on Nuxt 4.

Who This Is Not For

Projects that need drag-and-drop layout editing. Nuxas is not a page builder. Projects that need a full backend with auth, payments, and dashboards out of the box. Teams looking for a no-code page builder. This is a codebase. If you need browser-based CMS editing, see the Code + Decap CMS edition instead.

Documentation

This article is both an introduction and a complete guide. The sections below walk you through everything from installation to deployment, written for developers of all experience levels. If you get stuck, the official documentation at https://nuxas.pages.dev/docs expands on every topic with screenshots and troubleshooting notes.

---

Complete Beginner's Guide: From Download to Deployment

This guide assumes you have never deployed a Nuxt site before. Follow the steps in order. Do not skip the prerequisites.

Step 1: Install the Tools You Need

Before you touch Nuxas, you need three things on your computer: Node.js, npm, and a code editor.

Node.js

Node.js is the runtime that lets you run JavaScript outside a browser. Nuxt needs it to build and serve your site. Download the LTS version from https://nodejs.org. As of this writing, Node.js 20 or newer is required. After installing, open a terminal (Command Prompt on Windows, Terminal on macOS or Linux) and run node --version. You should see a version number like v20.x.x or v22.x.x.

npm

npm comes bundled with Node.js. It is the package manager that installs the dependencies Nuxas needs. Run npm --version in the same terminal. You should see a version number like 10.x.x. If you see an error, Node.js did not install correctly. Reinstall it.

A Code Editor

Visual Studio Code (VS Code) is the recommended editor. It is free, works on every platform, and has excellent support for Vue and TypeScript. Download it from https://code.visualstudio.com. Once installed, open the Extensions panel and install the "Vue - Official" extension. This gives you syntax highlighting and type checking for .vue files.

Step 2: Download and Extract Nuxas

After purchasing Nuxas on Gumroad, you will receive a ZIP file. Download it to a folder you can find easily, such as your Downloads folder or a dedicated Projects folder. Extract the ZIP. On Windows, right-click the ZIP and choose "Extract All." On macOS, double-click the ZIP. You should end up with a folder named something like nuxas-code-only or nuxas-cms, depending on which edition you bought.

Inside that folder, you will see several files and folders: app/, content/, public/, nuxt.config.ts, package.json, and a README. Do not worry about understanding all of them yet. The README contains a quick start, and this guide explains the rest.

Step 3: Install Dependencies

Open your terminal and navigate to the Nuxas folder. The command depends on your operating system.

On Windows, use cd followed by the path. For example, if the folder is on your Desktop, run:

cd Desktop\nuxas-code-only

On macOS or Linux:

cd ~/Desktop/nuxas-code-only

Once you are inside the folder, run:

npm install

This command reads package.json and downloads every dependency Nuxas needs into a node_modules folder. The first install can take a few minutes. You will see progress bars. When it finishes, you should see a message like "added 500 packages" or similar. If you see errors about Python or node-gyp, it is usually because the better-sqlite3 package needs build tools. On Windows, install the Visual Studio Build Tools with the "Desktop development with C++" workload. On macOS, run xcode-select --install. On Linux, install python3, make, and g++.

Step 4: Run the Development Server

With dependencies installed, run:

npm run dev

This starts the Nuxt development server. It compiles your code, starts a local server, and watches for changes. After a few seconds, you will see output like:

Nuxt 4.x.x with Nitro

Local: http://localhost:3000

Open http://localhost:3000 in your browser. You should see the Nuxas homepage. The development server has hot module replacement, which means when you edit a file and save it, the browser updates automatically. You do not need to restart the server for content changes.

To stop the server, press Ctrl+C in the terminal.

Step 5: Understand the Project Structure

Before you edit anything, take five minutes to understand where things live. Open the project folder in VS Code. The key folders are:

app/

This is the Nuxt application directory. It contains components/, composables/, layouts/, pages/, and plugins/. You will spend most of your time in pages/ (which defines your routes) and components/ (which defines reusable UI pieces). Nuxt uses file-based routing: a file at app/pages/about.vue becomes the /about route. You do not need to configure a router manually.

content/

This is where your content lives. Blog posts are Markdown files in content/blog/. Products are Markdown files in content/products/. Static pages are in content/pages/. Site settings, navigation, and footer are YAML files in content/data/. If you bought the Decap CMS edition, the CMS edits these files. If you bought Code Only, you edit them directly.

public/

Files in public/ are served as-is. The favicon, images, and the admin/ folder (for Decap CMS) live here. If you add an image to public/uploads/, it is accessible at /uploads/filename.jpg.

nuxt.config.ts

This is the main configuration file. It tells Nuxt which modules to load, how to handle SEO, and where to output builds. You will edit this file during initial setup to set your site URL and contact form ID.

content.config.ts

This file defines content collections and their schemas. It tells Nuxt Content how to validate your Markdown and YAML files. If you add a new field to a blog post, you also add it to the schema here. This is what gives you type safety and build-time validation.

Step 6: Set Your Site URL

Before you deploy, you need to tell Nuxas what your production URL will be. Open nuxt.config.ts in VS Code. Find the site block:

site: {

url: 'http://localhost:3000',

name: 'Nuxas',

description: '...',

defaultLocale: 'en',

}

Replace 'http://localhost:3000' with your actual domain, for example 'https://your-domain.com'. This URL is used for canonical tags, sitemap entries, and Open Graph metadata. If you leave it as localhost, Google will think your site belongs to localhost, not to you. This is the single most common mistake beginners make.

Also find runtimeConfig.public.appUrl and replace it with the same URL. Save the file.

Step 7: Customize Your Site Content

You do not need to touch components to change your site's text. Almost all user-facing copy lives in content/data/site.yml. Open it in VS Code. You will see sections for brand, nav, hero, features, pricing, testimonials, footer, and more. Change the strings to match your product. The YAML structure is indented with spaces, not tabs. If you break the indentation, the build will fail with a clear error pointing to the line.

For blog posts, open any file in content/blog/. The top of the file is frontmatter between --- lines. Fields like title, description, date, and author are defined there. The body below the frontmatter is standard Markdown. You can write paragraphs, headings, lists, and links. If you need to embed a Vue component, Nuxt Content supports MDC syntax, but for most content, plain Markdown is enough.

For products, open files in content/products/. The frontmatter includes price, features, and purchaseUrl. The purchaseUrl is where the "Buy" button points. You can set it to a Gumroad link, a Stripe payment link, or any URL.

Step 8: Set Up the Contact Form

Nuxas uses Formspree for the contact form by default. Formspree is a service that receives form submissions and emails them to you. It does not require a backend.

Create a free account at https://formspree.io. Create a new form. Formspree gives you a form ID, which looks like a short string of letters and numbers. Open content/data/site.yml and find the contact section:

contact:

formspreeId: YOURFORMSPREEID

Replace YOURFORMSPREEID with your actual ID. Save the file. Now, when someone submits the contact form, Formspree will email you. You can also view submissions in the Formspree dashboard.

If you prefer not to use Formspree, you can replace the form action with your own endpoint, or remove the form entirely.

Step 9: Test the Build Locally

Before deploying, run a production build to catch errors that do not appear in development mode. There are two modes: SSG (Static Site Generation) and SSR (Server-Side Rendering).

SSG (Recommended for Frontend-Only Sites)

Run:

npm run generate

This command builds your site and pre-renders every page into static HTML, CSS, and JavaScript files. The output is in .output/public/. You can open these files directly or upload them to any static host. SSG is recommended because it is faster, cheaper, and simpler. There is no server to maintain.

SSR (Only If You Need Server Logic)

If you have API routes, authentication, or per-request logic, run:

npm run build

This creates a Node.js server in .output/. You run it with:

node .output/server/index.mjs

SSR requires a Node.js runtime. For a frontend-only Nuxas site, you do not need it.

After the build finishes, check the output folder. For SSG, you should see .output/public/ containing index.html, 404.html, sitemap.xml, and folders for each route. If sitemap.xml is missing, the SEO module did not run correctly. Check that @nuxtjs/seo is installed and listed in nuxt.config.ts.

Step 10: Deploy to Netlify (Recommended)

Netlify is the recommended host for Nuxas because it has a generous free tier, built-in Identity and Git Gateway (for the CMS edition), and excellent static hosting .

Push to GitHub First

If you have not already, create a GitHub account at https://github.com. Create a new repository. In your terminal, inside the Nuxas folder, run:

git init

git add .

git commit -m "Initial commit"

git remote add origin https://github.com/YOURUSERNAME/YOURREPO.git

git push -u origin main

Connect to Netlify

Log in to https://netlify.com. Click "Add new site" and choose "Import an existing project." Select GitHub and choose your repository. Netlify will auto-detect Nuxt and suggest build settings. Do not accept the defaults if you want SSG. Change them to:

• Build command: npm run generate
• Publish directory: .output/public

Click "Deploy site." Netlify will build and deploy your site. The first build takes a few minutes. When it finishes, Netlify gives you a URL like https://random-name-12345.netlify.app.

For the Decap CMS Edition

If you bought the Code + Decap CMS edition, you must deploy to Netlify. After the site deploys, go to Site Settings → Identity and click "Enable Identity." Set Registration to "Invite only." Then go to Services → Git Gateway and enable it. Finally, invite yourself or your client via email. The CMS is now accessible at https://your-site.netlify.app/admin.

Step 11: Deploy to Other Hosts

If you do not want to use Netlify, Nuxas works on other platforms. The key difference is the build command and output folder.

Cloudflare Pages

Cloudflare Pages offers unlimited bandwidth on the free tier and the fastest global TTFB . Create a Pages project, connect your Git repository, and set:

• Build command: npm run generate
• Build output directory: .output/public

Note: Cloudflare cannot use a folder starting with a dot as the root output, but it accepts the full .output/public path. If you previously configured nitro.output in nuxt.config.ts to change the output directory, remove that configuration for Cloudflare. The default .output/public works.

Vercel

Vercel offers zero-config deployment and excellent developer experience . Import your repository. Vercel will auto-detect Nuxt and suggest SSR defaults. Override them to:

• Build command: npm run generate
• Output directory: .output/public

Click Deploy.

cPanel Shared Hosting

If your host provides Node.js Selector, you can deploy SSG output without Node.js. Run npm run generate locally. Upload the contents of .output/public/ into publichtml/ via File Manager. Create or edit .htaccess in publichtml to add SPA fallback:

RewriteEngine On

RewriteBase /

RewriteRule ^index\.html$ - [L]

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

RewriteRule . /index.html [L]

Visit your domain. The site is live. No Node.js required.

VPS with Nginx

For SSG, upload the contents of .output/public/ to /var/www/nuxas/ on your server. Configure Nginx to serve that folder with try_files $uri $uri/ /index.html;. Restart Nginx. Set up SSL with Certbot. This is the most manual option but gives you full control.

Step 12: Set Up a Custom Domain

After your site is live on a platform URL, you can connect your own domain. On Netlify, go to Domain Settings and add your domain. Netlify will give you DNS records to add at your registrar. If you use Cloudflare for DNS, the process is similar. Once DNS propagates, enable HTTPS. Most platforms provide automatic SSL via Let's Encrypt.

Common Mistakes to Avoid

Leaving site.url as localhost. This breaks SEO. Change it before deploying. Every time.

Using npm run build instead of npm run generate for a static site. nuxt build produces a Node server. nuxt generate produces static files. If you want to host on Netlify, Cloudflare, or Vercel without a Node runtime, use generate.

Forgetting to add .env to .gitignore. If you use API keys or form IDs, keep them out of Git. Add .env to .gitignore before your first commit.

Editing node_modules. Never edit files in node_modules. They are generated and will be overwritten on the next install. Put your changes in your own components or composables.

Skipping the local build test. Always run npm run generate locally before deploying. It catches errors that the development server hides. If the build fails locally, it will fail on the platform too.

Troubleshooting Common Issues

Build fails with "Cannot find module 'better-sqlite3'"

Install build tools. On Windows, install Visual Studio Build Tools with C++ workload. On macOS, run xcode-select --install. On Linux, run sudo apt install python3 make g++. Then delete node_modules and package-lock.json and run npm install again.

Sitemap is empty or missing

Check that @nuxtjs/seo is installed and listed in nuxt.config.ts modules. Check that your site.url is set correctly. The sitemap module uses the site URL to generate entries. If site.url is localhost, the sitemap will contain localhost URLs, which is not useful for production.

CMS admin page shows a blank screen

This usually means Netlify Identity or Git Gateway is not enabled. Go to your Netlify dashboard, check Identity and Git Gateway settings. Also check that public/admin/config.yml has the correct backend name (git-gateway) and branch (main).

Changes in the CMS do not appear on the site

The CMS commits to your repository. Netlify detects the commit and rebuilds. Check the Deploys tab in Netlify. If the deploy failed, the change will not appear. Fix the build error and redeploy.

Documentation and Support

This article covers the essentials. The official documentation at https://nuxas.pages.dev/docs goes deeper. It includes chapters on installing and running Nuxas locally, running with Decap CMS locally, understanding the project structure, configuring global site settings, managing blog posts and products, pushing to GitHub, deploying to Netlify and other hosts, setting up a custom domain, and getting support.

If you get stuck, contact creativebydre@gmail.com with your order ID and a description of the issue. For custom development or AI automation work, visit https://www.fiverr.com/creativitas.

License

One-time purchase. Unlimited personal and commercial projects. Not for resale as a template or theme. You own the code you buy.