1. Folder Structure Overview

The Nexus AI Nuxt Template is built with a modular structure, allowing you to easily manage and extend your project. Here's a brief overview of the key directories and files:

nexusai-nuxt/
|   assets/css/           // Custom CSS Files
│   │   animations.css
│   │   main.css
│   │   style.css
└───components/           // Global Components
│   │   base/
│   │   card/
│   │   image/
│   │   layout/
│   │   section/
│   │   svg/
└───content/              // Content for the pages
│   │   index.md
│   │   about.md
│   │   ...
└───layouts/              // Layouts
│   │   auth.vue
│   │   default.vue
│   │   docs.vue
│   │   spotlight.vue
│   │   empty.vue
└───pages/                // Pages
│   │   index.vue
│   │   about.vue
│   │   ...
└───public/               // Public assets
│   │   img/              // Images used in the content
│   │   favicon.png
│   │   og-image.png
│   │   ...
|   server/
|   error.vue             // Error Page
|   app.vue               // Application Entry Point
|   app.config.ts         // Application Configuration
|   nuxt.config.ts        // Nuxt Configuration
|   nuxt.schema.ts        // Nuxt Studio Schema
|   tsconfig.json         // TypeScript Configuration
|   tailwind.config.js    // Tailwind Configuration
|   package.json
|   README.md

2. Pages and Layouts

The pages/ directory contains the pages of your application. Each page has a corresponding content page in the content/ directory. If you want to only edit the content of a page, then you can edit the content page in the content/ directory.

The 'layouts/' directory contains the layouts of your application. You can use the default layouts or create your own layouts. Each page layout is defined in the 'pages/' directory. Example like the signin.vue page is using the auth.vue layout.

<script setup lang="ts">
  definePageMeta({
    layout: "auth",
  });
</script>

There are 5 default layouts: auth, default, docs, spotlight and test.

• auth.vue is the layout for the authentication pages.
• default.vue is the default layout for the pages.
• docs.vue is the layout for the documentation pages.
• spotlight.vue is the layout extended from the default layout with spotlight background.
• test.vue is the layout for the test pages. You can use this layout for testing new components or sections.

3. Components Directory

The components/ directory contains the global components of your application. Each file in this directory corresponds to a component in your application.

There are 6 default directories: base, card, image, layout, section, and svg.

• base/ contains the base components of your website.
• card/ contains the card components of your website.
• image/ contains the interactive image components, usually used for features.
• layout/ contains the components that are used in specific layouts.
• section/ contains the section components of your website.
• svg/ contains the svg components of your website.

You can also create your own components in this directory.

4. Assets and Static Files

The assets directory contains the css assets of your website. There are only 3 css files in this directory: animations.css, main.css, and style.css.

• animations.css contains the css animations that were used in the website.
• main.css contains the importing of Tailwind CSS and the custom css files.
• style.css contains the Nexus AI style.

The public/ directory contains the static files of your website. There are 2 default image used for SEO purposes: favicon.png and og-image.png.

The public/img/ directory contains the images used in the content.