Create a Nuxt Application

In this lesson, we'll create a new Nuxt 3 application that will serve as our frontend. We'll also add Tailwind CSS for styling.

What is Nuxt?

Key Nuxt features we'll use:

• File-based routing – Pages in pages/ folder become routes automatically
• Auto-imports – Vue functions and components are available without importing
• Composables – Reusable logic in composables/ folder
• Plugins – Client/server initialization in plugins/ folder
• TypeScript support – First-class TypeScript integration

Step 1: Create the Project

Open PowerShell and navigate to where you want to create your project:

Create a new Nuxt application:

When prompted:

• Package manager: Choose npm
• Initialize git repository: Yes

Enter the project directory:

Step 2: Add Tailwind CSS

Tailwind CSS is a utility-first CSS framework that makes styling fast and consistent. It's optional but recommended for this course.

Install Tailwind and its dependencies:

Add it to your Nuxt configuration. Open nuxt.config.ts and update it:

// nuxt.config.ts
export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },
  
  // Add Tailwind CSS
  modules: ['@nuxtjs/tailwindcss'],
  
  // TypeScript strict mode
  typescript: {
    strict: true,
  },
});

Create a Tailwind config file:

Step 3: Install Amplify Dependencies

Install the AWS Amplify libraries we'll need:

Package	Purpose
aws-amplify	Core Amplify library with auth, data, storage modules
@aws-amplify/ui-vue	Pre-built Vue components (like the Authenticator)

Step 4: Create Basic App Structure

Let's set up a basic layout and home page. First, create a layout:

Create layouts/default.vue:

<template>
  <div class="min-h-screen bg-gray-50">
    <!-- Navigation -->
    <nav class="bg-white shadow-sm">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16">
          <div class="flex items-center">
            <NuxtLink to="/" class="text-xl font-bold text-indigo-600">
              Amplify Todo
            </NuxtLink>
          </div>
          <div class="flex items-center space-x-4">
            <slot name="nav-right" />
          </div>
        </div>
      </div>
    </nav>

    <!-- Main Content -->
    <main class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
      <slot />
    </main>
  </div>
</template>

Update app.vue to use the layout:

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

Create your first page at pages/index.vue:

<template>
  <div class="px-4 py-6 sm:px-0">
    <div class="text-center">
      <h1 class="text-4xl font-bold text-gray-900 mb-4">
        Welcome to Amplify Todo
      </h1>
      <p class="text-lg text-gray-600 mb-8">
        A full-stack application with AWS Amplify Gen 2 and Nuxt 3
      </p>
      <div class="bg-white rounded-lg shadow p-6 max-w-md mx-auto">
        <p class="text-gray-700">
          Next, we'll add AWS Amplify to enable authentication and data storage.
        </p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// Page metadata
useHead({
  title: 'Amplify Todo App',
});
</script>

Step 5: Test the Application

Start the development server:

Open http://localhost:3000 in your browser.

Understanding the Files We Created

File	Purpose
nuxt.config.ts	Nuxt configuration (modules, TypeScript settings)
app.vue	Root Vue component that wraps all pages
layouts/default.vue	Default layout with navigation and content area
pages/index.vue	Home page (accessible at /)
tailwind.config.js	Tailwind CSS configuration

Current Project Structure

amplify-todo-app/
├── .nuxt/              # Nuxt build output (gitignored)
├── node_modules/       # Dependencies (gitignored)
├── layouts/
│   └── default.vue     # Default page layout
├── pages/
│   └── index.vue       # Home page
├── public/             # Static files
├── app.vue             # Root component
├── nuxt.config.ts      # Nuxt configuration
├── package.json        # Project dependencies
├── tailwind.config.js  # Tailwind configuration
└── tsconfig.json       # TypeScript configuration

Summary

In this lesson, you:

• Created a new Nuxt 3 application
• Added Tailwind CSS for styling
• Installed AWS Amplify dependencies
• Created a basic layout and home page
• Verified the app runs correctly

Next, we'll initialize AWS Amplify and create our backend resources!