Understanding the Project Structure

Let's take a detailed tour of your project structure, understanding what each file and folder does.

Complete Project Structure

amplify-todo-app/
├── .amplify/                  # Amplify local cache (gitignored)
├── .nuxt/                     # Nuxt build output (gitignored)
├── amplify/                   # 🔵 Amplify backend (AWS resources)
│   ├── auth/
│   │   └── resource.ts        # Authentication configuration
│   ├── data/
│   │   └── resource.ts        # Data models and schema
│   └── backend.ts             # Main backend definition
├── composables/               # 🟢 Vue composables (reusable logic)
│   └── (we'll add these)
├── layouts/                   # 🟢 Page layouts
│   └── default.vue            # Default layout with navigation
├── pages/                     # 🟢 File-based routing
│   └── index.vue              # Home page (/)
├── plugins/                   # 🟢 Nuxt plugins
│   └── amplify.client.ts      # Amplify client configuration
├── public/                    # Static files (served as-is)
├── server/                    # Nuxt server routes
├── amplify_outputs.json       # 🔴 Generated Amplify config (gitignored)
├── app.vue                    # Root Vue component
├── nuxt.config.ts             # Nuxt configuration
├── package.json               # Dependencies and scripts
├── tailwind.config.js         # Tailwind CSS configuration
└── tsconfig.json              # TypeScript configuration

Legend: 🔵 Backend | 🟢 Frontend | 🔴 Generated

Backend: The amplify/ Folder

This folder contains all your AWS backend definitions.

amplify/backend.ts

The main entry point that combines all your resources:

import { defineBackend } from '@aws-amplify/backend';
import { auth } from './auth/resource';
import { data } from './data/resource';

defineBackend({
  auth,   // Cognito User Pool
  data,   // DynamoDB + AppSync
  // Add more: storage, functions, etc.
});

amplify/auth/resource.ts

Defines authentication using Amazon Cognito:

import { defineAuth } from '@aws-amplify/backend';

export const auth = defineAuth({
  loginWith: {
    email: true,           // Email-based authentication
    // phone: true,        // Phone authentication
    // externalProviders: {...}  // Social logins
  },
  userAttributes: {
    // Add custom attributes here
  },
  // multifactor: {...},   // MFA configuration
  // passwordPolicy: {...}, // Password requirements
});

amplify/data/resource.ts

Defines data models and authorization rules:

import { type ClientSchema, a, defineData } from '@aws-amplify/backend';

const schema = a.schema({
  // Define models here
  Todo: a.model({
    content: a.string().required(),
    completed: a.boolean().default(false),
  }).authorization(allow => [allow.owner()]),
});

export type Schema = ClientSchema<typeof schema>;
export const data = defineData({ schema });

Frontend: Nuxt Folders

pages/

File-based routing. Each file becomes a route:

File	Route
pages/index.vue	/
pages/about.vue	/about
pages/login.vue	/login
pages/todos/index.vue	/todos
pages/todos/[id].vue	/todos/:id (dynamic)

layouts/

Layouts wrap your pages with shared UI (navigation, footer, etc.):

<!-- layouts/default.vue -->
<template>
  <div>
    <nav>...</nav>
    <slot />  <!-- Page content goes here -->
    <footer>...</footer>
  </div>
</template>

composables/

Reusable Vue logic. Files here are auto-imported. We'll create composables for authentication and data operations:

// composables/useAmplifyAuth.ts
export const useAmplifyAuth = () => {
  const user = useState('user', () => null);
  
  const signIn = async (email: string, password: string) => {
    // Auth logic here
  };
  
  return { user, signIn };
};

plugins/

Initialization code that runs when the app starts. The .client.ts suffix means it only runs in the browser:

// plugins/amplify.client.ts - Runs only in browser
// plugins/analytics.server.ts - Runs only on server
// plugins/setup.ts - Runs on both

Generated Files

amplify_outputs.json

Generated by ampx sandbox. Contains your AWS resource IDs and endpoints. Never commit this file!

{
  "version": "1.3",
  "auth": {
    "user_pool_id": "us-east-1_xxxxx",
    "user_pool_client_id": "xxxxxxxxx",
    "aws_region": "us-east-1"
  },
  "data": {
    "url": "https://xxx.appsync-api.us-east-1.amazonaws.com/graphql",
    "aws_region": "us-east-1",
    "default_authorization_type": "AMAZON_COGNITO_USER_POOLS"
  }
}

.amplify/

Local cache for the Amplify CLI. Also gitignored.

.nuxt/

Nuxt build output. Regenerated on each build.

Configuration Files

nuxt.config.ts

Nuxt application configuration:

export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: ['@nuxtjs/tailwindcss'],
  typescript: { strict: true },
  
  // Amplify compatibility
  vite: {
    resolve: {
      alias: {
        './runtimeConfig': './runtimeConfig.browser',
      },
    },
  },
});

package.json

Project dependencies and scripts:

{
  "scripts": {
    "dev": "nuxt dev",           // Start dev server
    "build": "nuxt build",       // Build for production
    "preview": "nuxt preview",   // Preview production build
    "generate": "nuxt generate"  // Static site generation
  },
  "dependencies": {
    "aws-amplify": "^6.x",
    "@aws-amplify/ui-vue": "^4.x",
    "nuxt": "^3.x",
    "vue": "^3.x"
  }
}

tsconfig.json

TypeScript configuration (mostly managed by Nuxt).

Recommended .gitignore

Add these to your .gitignore:

# Nuxt
.nuxt
.output
dist

# Amplify
amplify_outputs.json
.amplify

# Dependencies
node_modules

# Environment
.env
.env.local

# IDE
.vscode/*
!.vscode/extensions.json
.idea

# OS
.DS_Store
Thumbs.db

Where Code Lives: Quick Reference

I want to...	Location
Add a new page	pages/my-page.vue
Change the navigation	layouts/default.vue
Add a reusable function	composables/useMyFunction.ts
Create a UI component	components/MyComponent.vue
Add a data model	amplify/data/resource.ts
Configure authentication	amplify/auth/resource.ts
Add a Lambda function	amplify/functions/my-function/
Configure Nuxt	nuxt.config.ts

Module 3 Complete!

Next, we'll implement user authentication with Amazon Cognito!