Nuxt Guide To Create AI Websites

Info

To use the generated Nuxt.js project, you have to export the code from the siteplay.ai visual builder first.

Introduction

Your Nuxt + TypeScript export brings the “developer experience” of Vue to the next level. We’ve configured this project to take advantage of Nuxt’s best features: file-system routing, automatic component discovery, and standardized SEO layouts.

The project uses:

• Nuxt for routing, layouts, rendering, and build tooling.
• Vue + TypeScript for generated components.
• Tailwind CSS v4 for styling.
• Shadcn-style Vue primitives for interactive UI elements.
• SVG files, Iconify, and Lucide Vue for icons.
• Motion Vue for generated animations.
• Nuxt color mode for light and dark mode support.

Directory structure

A freshly exported Siteplay.ai Nuxt project follows this structure:

• Directory

  app/

  • Directoryassets/

    • Directorycss/

      • main.css -------------- global styles here
      • theme.css ------------- design tokens here
    • favicon.ico
  • Directorycomponents/

    • Directorycommon/

      • …
    • Directorysections/ ----------------- all sections here

      • Directoryglobal/

        • Navbar.vue
        • Footer.vue
        • …
      • Directoryhome/

        • Hero.vue
        • …
      • Directorypage-1/

        • …
    • Directoryui/

      • Directoryicons/

        • …
      • Directorybutton/

        • …
      • …
  • Directorycomposables/

    • …
  • Directorylayouts/

    • FullPageLayout.vue ------- page layout here
  • Directorypages/ ----------------------- all pages here

    • Directorypage-1/

      • …
    • index.vue
  • Directorytypes/

    • …
  • app.config.ts
  • app.vue
  • constants.ts ---------------- all site defaults here
  • utils.ts

• public

• server

• .env.local

• .env.production

• .gitignore

• .prettierignore

• .prettierrc

• components.json

• eslint.config.js

• nuxt.config.ts

• package.json

• README.md

• tailwind.config.ts

• tsconfig.json

Your downloaded project may include more generated files in app/components/sections and app/pages than this starter structure.

Important files

app.vue

File: /app/app.vue

This is the root Vue entry for the Nuxt app. It renders the active layout and the active page through Nuxt’s built-in layout and page components.

Use this file when you want to:

• Add wrappers that should sit around every route.
• Add app-level providers or global UI.
• Change how all pages are mounted.

Most site-level layout work should still happen in layouts/FullPageLayout.vue, not directly in app.vue.

FullPageLayout.vue

File: /app/layouts/FullPageLayout.vue

This is the shared layout used by generated Siteplay pages. It imports the global stylesheet, reads page SEO from route metadata, sets default language and text direction, writes page title and description with useHead(), and initializes color mode.

Use this file when you want to:

• Add scripts or analytics.
• Change the root language or text direction.
• Add layout-level wrappers.
• Adjust how SEO metadata is applied.
• Change global theme behavior.

Page files

File: /app/pages/**/*.vue

Siteplay.ai creates Nuxt page files from the pages in your sitemap. Each page usually loads a page object, defines page metadata, selects the shared layout, imports generated sections, and renders those sections inside a page wrapper.

Use generated page files when you want to:

• Adjust page-level SEO metadata.
• Add custom page logic.
• Connect a page to dynamic data.
• Change route-specific behavior.
• Reorder or insert generated sections manually.

Section files

File: /app/components/sections/[page]/*.vue

This folder contains the section components generated from the Siteplay.ai editor. A hero, pricing block, feature grid, contact form, footer, or FAQ section will typically live here.

Section files are organized based on the pages in the sitemap. Example: /app/components/sections/home/Hero.vue

Use this folder when you want to customize one specific visual section without changing the rest of the site.

Global section files

File: /app/components/sections/global/*.vue

Global sections are shared across pages. Navigation bars, footers, announcement bars, and other repeated sections usually live here.

Use this folder when you want one edit to update every page that uses the same global section.

Common component files

File: /app/components/common/*.vue

This folder contains shared wrappers and elements used across generated pages and sections, such as page wrappers, buttons, images, links, rich content, and background rendering helpers.

Use this folder when you want a change to apply consistently across many generated sections.

UI component primitives

File: /app/components/ui/*.vue

This folder is reserved for lower-level UI primitives. Siteplay.ai uses these for interactive components such as accordions, dialogs, selects, navigation menus, form controls, and other reusable building blocks.

Most users should customize sections and common components first, and only edit UI primitives when changing the behavior of a shared control.

Composables

File: /app/composables/*.ts

Nuxt auto-imports composables from this folder. Use it for reusable Vue logic, such as shared state, form helpers, animation helpers, or site-specific behavior that is needed by multiple components.

utils.ts

File: /app/utils.ts

This file contains shared helper functions used by generated components. Common examples include:

• cn() for merging Tailwind class names.
• Form submission helpers.
• Animation helpers.
• Color shade utilities.
• Small formatting helpers such as kebab-case conversion.

Use this file for reusable logic that should stay framework-local and shared across components.

constants.ts

File: /app/constants.ts

This file serves as the central configuration layer for the application. It defines shared defaults, reusable UI settings, and predefined animation presets that are used throughout the project.

By keeping these values in a single location, the application maintains consistency across themes, components, layouts, pages, sections, and motion behaviors while making customization significantly easier.

This file primarily handles:

• Default application settings.
• Shared component styling classes.
• Localization and layout defaults.
• Animation configuration and reusable presets.
• Background and visual configuration.

The animation system included in this file is highly extensible and supports multiple motion styles such as slide, fade, zoom, flip, reveal, and micro-interactions. These presets help developers create consistent, production-ready UI animations without rewriting configuration objects repeatedly.

Overall, this file acts as the foundation for maintaining a scalable and configurable design system across the entire Nuxt application.

app.config.ts

File: /app/app.config.ts

Nuxt app config is available at runtime through Nuxt’s app configuration system. Use it for project-level settings that should be available to the app without hard-coding values inside individual components.

nuxt.config.ts

File: /nuxt.config.ts

This is the main Nuxt configuration file. It controls Nuxt modules, component auto-imports, Vite plugins, route rules, Tailwind integration, ESLint settings, and color mode behavior.

Use this file when you want to:

• Add Nuxt modules.
• Change build or prerender behavior.
• Adjust component auto-import settings.
• Configure Tailwind through Vite.
• Change color mode defaults.

Public folder

File: /public/*

Static assets live in public. Files placed here are served from the site root. For example, public/images/p.svg is available at /images/p.svg.

Use this folder for images, downloadable files, icons, robots.txt, and other static assets.

How Siteplay maps to Nuxt

The exported project follows the same mental model as the Siteplay.ai builder:

Siteplay.ai concept	Nuxt output
Site	A complete Nuxt project
Page	A route under app/pages
Sitemap	The generated file-based routes and page relationships
Section	A Vue component under app/components/sections
Global section	A reused component under app/components/sections/global
Design system	Tailwind classes, CSS variables, theme constants, and layouts
SEO settings	Nuxt page metadata and useHead() output
Images and uploads	Static assets in public or app assets in app/assets

This makes it easier to move between the visual builder and the exported code. If you know where something lived in Siteplay.ai, you can usually find the matching code by looking for the page, section label, or component name.

Run the project locally

1. Install dependencies

   npm

   npm install

   pnpm

   pnpm i

   Yarn

   yarn

2. Run the code in local development

   npm

   npm run dev

   pnpm

   pnpm dev

   Yarn

   yarn dev

3. Build for production

   npm

   npm run build

   pnpm

   pnpm build

   Yarn

   yarn build

4. Preview production in local

   npm

   npm run preview

   pnpm

   pnpm preview

   Yarn

   yarn preview

Styling with Tailwind CSS

Files: app/assets/css/main.css and app/assets/css/theme.css

Use app/assets/css/main.css and app/assets/css/theme.css to make site-level changes. Siteplay.ai generates Tailwind v4 based components. Most visual changes can be made by editing class names directly in the generated page and section Vue components.

Start with these areas:

• Section-level layout and spacing in app/components/sections.
• Shared element styling in app/components/common.
• Project-wide Tailwind settings in tailwind.config.ts.
• Global styles in app/assets/css/main.css.
• Design tokens and CSS variables in app/assets/css/theme.css.

Because the editor already applies a design system, keep broad changes in shared components or theme files. Use section files for one-off edits.

SEO metadata

File: app/pages/**/*.vue

Siteplay.ai page SEO settings are exported into Nuxt page metadata. Generated pages define route metadata, and the shared layout reads that metadata to update the page title and description.

const page = {
  seo: {
    title: "About Us Page",
    description: "lorem ipsum dolor sit...",
  },
} as Page;

definePageMeta({
  layout: "full-page-layout",
  seo: page.seo,
});

After export, review:

• Page title and description.
• Open Graph or social metadata if included.
• Canonical URLs after you know the final production domain.
• public/robots.txt.

Forms

Generated forms use the form settings configured in Siteplay.ai. The Nuxt export includes helpers and generated form components that submit payloads with the configured method and action.

After export, check:

• The form action URL.
• The HTTP method.
• Required fields and validation behavior.
• Whether you want to handle submissions through a Nuxt server route, a third-party form backend, or your own API.

Images and assets

Images used by the generated site are referenced from the exported project.

Use:

• public for files that should be served directly from the site root.
• app/assets for assets that should be processed by the Nuxt/Vite pipeline.

When replacing images:

• Keep filenames stable if you do not want to update component references.
• Add useful alt text in the generated image components.
• Optimize large images before deploying.

Deployment

The exported Nuxt project can be deployed anywhere that supports Nuxt. You can deploy it to platforms such as Vercel, Netlify, Cloudflare, or any Node-compatible host.

Before deploying:

• Run npm run build.
• Confirm environment variables in .env.local, .env.production, or your host settings.
• Review final SEO metadata and domain-specific URLs.
• Test key forms and links.
• Check light and dark mode if both are enabled.

Customization checklist

Use this checklist after downloading a Nuxt project from Siteplay.ai:

• Run the project locally.
• Review every generated route.
• Replace placeholder images and copy.
• Check page titles and descriptions.
• Verify buttons, links, and forms.
• Update theme, colors, and typography if needed.
• Remove unused generated sections or components.
• Run a production build before deployment.

Troubleshooting

The site does not start

Run npm install, then npm run dev again. If the issue continues, confirm you are using a Node.js version supported by the exported Nuxt version.

Tailwind styles are missing

Check that app/assets/css/main.css is included in nuxt.config.ts and imported by the generated layout. Also confirm the generated components are inside paths covered by Tailwind.

Images are broken

Make sure referenced files exist in public or app/assets, and check whether the component expects a root URL such as /images/example.webp or an imported asset.

A form submits but nothing happens

Check the generated form action, method, and any required environment variables. If you want server-side handling, connect the form to a Nuxt server route or your backend API.

Build works locally but fails in deployment

Compare the deployed environment variables with your local .env.local and .env.production, then run npm run build locally before pushing again.