FolderStructure.dev

Nuxt 4 Static Site Project Structure

Static generation with Nuxt Content. Ideal for blogs, documentation, and marketing sites.

#nuxt #nuxt4 #vue #static #content #blog #jamstack
PNGPDF

Project Directory

my-static-site/
app/
Application source
app.vue
Root component
app.config.ts
Site metadata
pages/
File-based routing
index.vue
Landing page
blog/
index.vue
Blog listing
[...slug].vue
Blog post from content/
docs/
[...slug].vue
Doc pages from content/
components/
Auto-imported components
content/
MDC components
Alert.vue
Use as ::alert in markdown
CodeGroup.vue
Callout.vue
AppHeader.vue
AppFooter.vue
BlogCard.vue
DocsSidebar.vue
layouts/
default.vue
docs.vue
With sidebar navigation
composables/
useNavigation.ts
Doc nav from content/
assets/
Processed assets
css/
main.css
prose.css
Typography for content
content/
Markdown/YAML content
index.md
Home page content
blog/
Blog posts
1.getting-started.md
Ordered by prefix
2.nuxt-features.md
docs/
Documentation
1.introduction.md
2.installation.md
3.guides/
1.quickstart.md
public/
Static files
favicon.ico
images/
nuxt.config.ts
Static generation settings
package.json
tsconfig.json
.gitignore

Why This Structure?

This structure uses Nuxt Content to build static sites from Markdown. Content lives in content/, pages in app/pages/. Pre-rendered at build time for maximum performance and SEO. Perfect for blogs, docs, and marketing sites where content changes less frequently than code.

Key Directories

  • content/-Markdown files become queryable content
  • content/blog/-Blog posts with frontmatter metadata
  • content/docs/-Documentation with automatic navigation
  • app/components/content/-MDC components for rich markdown
  • app/pages/[...slug].vue-Catch-all route renders content

Nuxt Content Features

  • Frontmatter-YAML at top of .md for title, date, tags
  • MDC syntax-::component for Vue in markdown
  • queryContent()-Query and filter markdown files
  • Numbered prefixes-1.intro.md, 2.setup.md for ordering

Getting Started

npx nuxi@latest init -t v4 my-static-site
cd my-static-site
npm install @nuxt/content
# Add @nuxt/content to nuxt.config.ts modules
mkdir -p content/blog
npm run dev
npm run generate  # Build static site

When To Use This

  • Blogs and personal websites
  • Documentation sites
  • Marketing and landing pages
  • Portfolio sites
  • Content-heavy sites with infrequent updates

Static Generation

Run npm run generate to pre-render all pages to .output/public/. Deploy to any static host: Vercel, Netlify, Cloudflare Pages, GitHub Pages. No server runtime needed—just HTML, CSS, and JS.

Trade-offs

  • Build time-Regenerate entire site for content changes
  • No dynamic data-Can add client-side fetching if needed
  • @nuxt/content-Adds module dependency vs plain markdown

Best Practices

  • Use numbered prefixes (1., 2.) to order content
  • Put reusable markdown in content/_partials/
  • Use components/content/ for MDC components
  • Add images to public/images/ and reference absolutely
  • Configure sitemap and robots via nuxt-seo module