Set up a Nuxt project

Install a Nuxt project

1. Open a terminal, go to your development projects folder and execute the command below to create a new Nuxt project called nuxt-complete-starter from the minimal template.

   npm create nuxt@latest nuxt-complete-starter -- --template minimal

   Choose npm as the package manager and skip the official modules for now. You’ll add the module you need in the next section.

2. When the project is successfully created, go to the nuxt-complete-starter folder, the root directory of the project, and run the project with the following commands in the terminal:

   cd nuxt-complete-starter

   npm run dev

3. You should now be able to view your app on your localhost, for example, http://localhost:3000/.

4. Open the Nuxt project with your preferred code editor.

5. Update the app.vue file with the following code to display your home page:

   ./app/app.vue

   <template>
       <div>
           <h1>My home page</h1>
       </div>
   </template>

You should now see something like the image below on your localhost.

Install Tailwind

Follow the steps below to install and set up Tailwind styling.

1. In the terminal, stop the server you started in the above step (CTRL-C), and install Tailwind to make styling easier in the components you’ll create below.

   npm install tailwindcss @tailwindcss/vite

2. Add the Nuxt Fonts  module. It downloads the fonts you use in your CSS and serves them from your own website.

   npx nuxt module add fonts

3. Create an ./app/assets/css/main.css file to import the Tailwind CSS and to set up some additional colors and spacing:

   ./app/assets/css/main.css

   @import "tailwindcss";
    
   @theme {
   --font-sans: "Ubuntu", sans-serif;
    
   --text-mb-4xl: 2rem;
   --text-mb-5xl: 2.675rem;
    
   --spacing-8xl: 90rem;
   --container-8xl: 90rem;
   --container-prose: 50rem;
    
   --color-gray-50: #EEEEEE;
    
   --color-primary-50: #EFF6FF;
   --color-primary-100: #DBEAFE;
   --color-primary-600: #2563EB;
   --color-primary-700: #1D4ED8;
    
   --color-secondary-500: #64748B;
   --color-secondary-700: #334155;
   }
    
   /* Horizontal page gutter for section containers, matching the Acme Lease demo site. */
   @utility p-spacing {
   @apply px-4 sm:px-6 lg:px-8 xl:px-18 2xl:px-20;
   }

4. Add the @tailwindcss/vite plugin and your new main.css to your Nuxt configuration.

   nuxt.config.ts

   import tailwindcss from '@tailwindcss/vite'
    
   // https://nuxt.com/docs/api/configuration/nuxt-config
   export default defineNuxtConfig({
       modules: ['@nuxt/fonts'],
       compatibilityDate: '2025-07-15',
       devtools: { enabled: true },
       css: ['~/assets/css/main.css'],
       // @nuxt/fonts finds the Ubuntu font in main.css and self-hosts it.
       fonts: {
           defaults: { weights: [400, 700] },
       },
       vite: {
           plugins: [tailwindcss()],
       },
   })

5. Test that Tailwind is correctly installed by updating the app.vue file as follows:

   ./app/app.vue

   <template>
       <NuxtRouteAnnouncer />
       <h1 class="text-3xl font-bold underline">My home page</h1>
   </template>

6. Restart the localhost with npm run dev. You should see updating styling like in the image below:

   

Add a simple navigation bar

1. Create new pages folder in the app directory. Add a new file, called [...slug].vue to this subfolder. This file name creates a catch-all route  to all your pages, including the home page. Copy and paste the following basic code to this new file.

   ./app/pages/[...slug].vue

   <template>
       <h1>My home page</h1>
   </template>

2. Update the code in the app.vue to define a layout for the whole website.

   ./app/app.vue

   <script setup lang="ts">
       useHead({
       htmlAttrs: { lang: 'en' },
       title: 'Prepr Nuxt complete starter',
       meta: [{ name: 'description', content: 'Showing the power of personalization and A/B testing' }],
       })
   </script>
    
   <template>
       <NuxtRouteAnnouncer />
       <NavBar />
       <NuxtPage />
   </template>

3. Create a components folder in the app directory and add the following three components to your project to display a navigation bar at the top of your website.

   ButtonLogoNavigation bar

   Button

   ./app/components/Button.vue

   <script setup lang="ts">
   withDefaults(defineProps<{ buttonStyle?: 'primary' | 'secondary' }>(), {
     buttonStyle: 'primary',
   })
   </script>
    
   <template>
     <button
       class="flex rounded-full text-sm px-6 py-2.5 font-medium"
       :class="{
         'bg-primary-600 hover:bg-primary-700 text-white': buttonStyle === 'primary',
         'bg-white hover:bg-gray-50 text-secondary-700': buttonStyle === 'secondary',
       }"
     >
       <slot />
     </button>
   </template>

4. To view the navigation bar, restart the localhost server with npm run dev in the terminal and go back to your browser. You should see the navigation bar and your heading text like in the image below.

   

Once your Nuxt project is created and working, you can create a static page with components.

Create static components

In this step, you’ll create a static version of the page to contain two front-end components. One for a Hero section at the top of the page and another for Feature sections to highlight features for the company. Add these components to the front end as follows:

1. Replace the simple code in the [...slug].vue with the code below to display the components with static data.

   ./app/pages/[...slug].vue

   <template>
       <HeroSection />
       <FeatureSection />
       <FeatureSection align="right" />
       <FeatureSection />
   </template>

2. Go to the components folder, create new files called HeroSection.vue and FeatureSection.vue and copy the code below to construct these components.

<template>
  <section class="bg-primary-50">
    <div class="mx-auto max-w-8xl p-spacing flex flex-col items-center md:flex-row gap-8 py-10 lg:py-20">
      <div class="basis-6/12">
        <h1 class="text-mb-5xl lg:text-7xl text-secondary-700 font-medium break-words text-balance">
          Acme Lease
        </h1>
        <p class="text-secondary-500 lg:text-lg mt-4 lg:mt-6 text-balance">
          A car leasing company
        </p>
        <div class="flex gap-4 mt-8 xl:mt-10">
          <div>
            <a href="#"><Button>Find your car</Button></a>
          </div>
        </div>
      </div>
      <div class="basis-6/12 relative flex justify-end items-center">
        <div class="z-10 flex items-center aspect-[20/17] w-9/12 overflow-hidden justify-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
          <svg viewBox="0 0 402 260" class="w-full max-w-[400px]" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M398.251 260H7.15201C4.49222 260 3.14794 256.795 5.01181 254.898L90.6954 167.668C94.5446 163.749 100.834 163.669 104.782 167.487L150.523 211.731C154.934 215.998 162.113 215.321 165.649 210.304L259.838 76.6611C263.834 70.9911 272.249 71.0127 276.216 76.703L400.712 255.284C402.099 257.273 400.676 260 398.251 260Z" fill="white" />
            <circle cx="50" cy="50" r="50" fill="white" />
          </svg>
        </div>
        <div class="w-9/12 aspect-[20/17] bg-primary-100 rounded-3xl right-0 top-0 z-0"></div>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
withDefaults(defineProps<{ align?: 'left' | 'right' }>(), { align: 'left' })
</script>
 
<template>
  <section class="bg-primary-50">
    <div class="mx-auto max-w-8xl p-spacing py-10 lg:py-10 xl:py-20">
      <div class="flex flex-col items-start md:items-center md:flex-row gap-8 xl:gap-28 text-secondary-700">
        <div class="order-first basis-1/2" :class="align === 'right' ? 'md:order-last' : 'md:order-none'">
          <div class="rounded-2xl w-full aspect-[29/19] bg-primary-100"></div>
        </div>
        <div class="basis-1/2">
          <h2 class="text-mb-4xl lg:text-5xl font-medium text-secondary-700 text-balance">
            Feature heading
          </h2>
          <p class="text-lg mt-4 xl:mt-6 font-medium text-balance">
            A short text that explains the feature.
          </p>
          <a href="#"><Button>Learn more</Button></a>
        </div>
      </div>
    </div>
  </section>
</template>

When you restart the localhost server with npm run dev in the terminal and go back to your browser, you should now see something like the image below.