Vue Guide To Create AI Websites

Info

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

Introduction

Welcome to your Vue 3 + TypeScript project. We’ve stayed true to the Vue philosophy by providing a highly readable, SFC-based (Single File Component) architecture. This export uses Vite for lightning-fast HMR and handles routing via vue-router.

The project uses:

• Vue + TypeScript for generated pages and components.
• Vite for local development, HMR, and production builds.
• Vue Router for page routing.
• 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.
• Unhead for page metadata.
• VueUse color mode for light and dark mode support.

Directory structure

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

• Directory

  public/

  • Directoryimages/ ------------------- all images here

    • …
• Directory

  src/

  • Directoryassets/

    • …
  • Directorycomponents/

    • Directorycommon/

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

      • Directoryglobal/

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

        • Hero.vue
        • …
    • Directoryui/

      • Directoryicons/

        • …
      • Directorybutton/

        • …
      • …
  • Directorycomposables/

    • …
  • Directorylayouts/

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

    • index.vue
  • Directorytypes/

    • …
  • App.vue
  • constants.ts ---------- all site defaults here
  • main.ts ---------------- app entry here
  • router.ts ------------ all routes here
  • style.css ------------- global styles here
  • theme.css ------------- design system tokens here
  • utils.ts
  • vite-env.d.ts

• .gitignore

• .prettierignore

• .prettierrc

• components.json

• eslint.config.js

• index.html

• package.json

• pnpm-lock.yaml

• README.md

• stylelint.config.js

• tailwind.config.ts

• tsconfig.app.json

• tsconfig.json

• tsconfig.node.json

• vite.config.ts

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

Important files

main.ts

File: /src/main.ts

This is the Vue app entry point. It creates the Vue app, imports global styles, installs the router, installs Unhead for metadata, and mounts the app to the page.

Use this file when you want to:

• Add app-level plugins.
• Add app-level providers.
• Register global behavior.
• Connect global analytics or monitoring libraries.

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

router.ts

File: /src/router.ts

This file defines the client-side routes generated from your Siteplay.ai sitemap. Generated page components are imported here and connected to URL paths through Vue Router.

Use this file when you want to:

• Add, rename, or remove client-side routes.
• Connect a generated page to a different path.
• Add route-level guards.
• Add custom routes that were not generated by Siteplay.ai.

App.vue

File: /src/App.vue

This is the root Vue component. It renders the active page through <router-view />.

Use this file when you want to add wrappers that should sit around every route. Keep page-specific and layout-specific work in generated pages or FullPageLayout.vue.

FullPageLayout.vue

File: /src/layouts/FullPageLayout.vue

This is the shared layout used by generated Siteplay pages. It imports global styles, applies default language and text direction, initializes color mode, and uses Unhead to manage document metadata.

Use this file when you want to:

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

Page files

File: /src/pages/*.vue

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

Use generated page files when you want to:

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

Section files

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

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

Section files are organized based on the pages in the sitemap. Example: /src/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: /src/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: /src/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: /src/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: /src/composables/*.ts

This folder contains reusable Vue composables. Use it for shared state, form helpers, animation helpers, responsive behavior, or site-specific behavior that is needed by multiple components.

utils.ts

File: /src/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: /src/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 Vue application.

Tailwind CSS styling

Files: /src/style.css and /src/theme.css

style.css contains global app styles and Tailwind entry styles. theme.css contains design tokens and CSS variables generated from the Siteplay.ai design system.

Use these files when you want to make site-level visual changes that should apply across multiple pages and sections.

vite.config.ts

File: /vite.config.ts

This is the main Vite configuration file. It controls Vue support, local development behavior, path aliases, Tailwind integration, and build settings.

Use this file when you want to:

• Add Vite plugins.
• Change build behavior.
• Adjust aliases or dev server settings.
• Configure framework-level tooling.

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 Vue

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

Siteplay.ai concept	Vue output
Site	A complete Vite Vue project
Page	A component under src/pages and a route in src/router.ts
Sitemap	The generated Vue Router route list
Section	A Vue component under src/components/sections
Global section	A reused component under src/components/sections/global
Design system	Tailwind classes, CSS variables, theme constants, and layouts
SEO settings	Unhead metadata from layout and page components
Images and uploads	Static assets in public or imported assets in src/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: src/style.css and src/theme.css

Use src/style.css and src/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 src/components/sections.
• Shared element styling in src/components/common.
• Project-wide Tailwind settings in tailwind.config.ts.
• Global styles in src/style.css.
• Design tokens and CSS variables in src/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

Files: src/layouts/FullPageLayout.vue and src/pages/*.vue

Siteplay.ai page SEO settings can be exported into Vue page data and applied through Unhead. The shared layout owns the document-level useHead() setup, while generated pages can provide page-specific metadata.

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

After export, review:

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

Forms

Generated forms use the form settings configured in Siteplay.ai. The Vue 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 third-party form backend, a serverless endpoint, 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.
• src/assets for assets that should be processed by the 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 Vue project produces a static Vite build that can be deployed to platforms such as Vercel, Netlify, Cloudflare Pages, GitHub Pages, S3, or any static hosting provider.

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 Vue 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 Vite and Vue versions.

Tailwind styles are missing

Check that src/style.css is imported by the generated layout or app entry. Also confirm the generated components are inside paths covered by Tailwind.

Routes show a blank page

Check src/router.ts and confirm the generated page is imported and included in the Vue Router route list.

Images are broken

Make sure referenced files exist in public or src/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 your API or form backend.

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.