Nuxt project structure in Vue - Mini Project: Build & Apply

Understanding Nuxt Project Structure

📖 Scenario: You are starting a new Nuxt 3 project to build a simple blog website. To organize your work, you need to set up the basic project structure with the main folders and files Nuxt uses.

🎯 Goal: Build the initial Nuxt project structure by creating the pages folder with a homepage file, add a components folder for reusable parts, and set up the nuxt.config.ts file for configuration.

📋 What You'll Learn

Create a pages folder with an index.vue file containing a basic template

Create a components folder with a Header.vue component file

Add a nuxt.config.ts file with the default export of a Nuxt config object

Use the Nuxt 3 recommended file and folder names exactly

💡 Why This Matters

🌍 Real World

Nuxt is used to build fast, SEO-friendly Vue websites and apps with automatic routing and server-side rendering.

💼 Career

Understanding the Nuxt project structure is essential for frontend developers working with Vue and Nuxt to build modern web applications.

1

Create the pages folder and homepage

Create a folder named pages and inside it create a file named index.vue with a <template> containing a <h1> with the text Welcome to Nuxt.

Vue

# Create the pages folder and index.vue file with a template
# Your code here

Hint

Remember, the pages/index.vue file is the homepage in Nuxt.

2

Add the components folder and Header component

Create a folder named components and inside it create a file named Header.vue with a <template> containing a <header> element with the text My Blog Header.

Vue

  Welcome to Nuxt


# Create components/Header.vue with a header element
# Your code here

Hint

The components folder holds reusable Vue components.

3

Create the nuxt.config.ts file

Create a file named nuxt.config.ts in the root folder with a default export of a Nuxt config object using defineNuxtConfig({}).

Vue

  Welcome to Nuxt




  My Blog Header


# Create nuxt.config.ts with default export
# Your code here

Hint

The nuxt.config.ts file configures your Nuxt app globally.

4

Use the Header component in the homepage

In pages/index.vue, import the Header component from ~/components/Header.vue in a <script setup> block and add it inside the <template> above the <h1>.

Vue

  
  Welcome to Nuxt



// Import Header component
// Your code here

Hint

Use import and include the component tag in the template.