Nuxt framework overview in Vue - Mini Project: Build & Apply

Nuxt Framework Overview

📖 Scenario: You are building a simple Nuxt 3 app to understand its basic structure and features.Nuxt helps you create Vue apps with server-side rendering and easy routing.

🎯 Goal: Create a basic Nuxt 3 app with a homepage that displays a welcome message using the Nuxt page system.

📋 What You'll Learn

Create a Nuxt 3 project structure with a pages directory

Add a homepage component in pages/index.vue

Use the <template> section to display a welcome message

Add a script setup block with a reactive variable

Display the reactive variable value in the template

💡 Why This Matters

🌍 Real World

Nuxt is used to build fast, SEO-friendly websites and apps with Vue. It simplifies routing, server rendering, and page metadata management.

💼 Career

Knowing Nuxt is valuable for frontend developers working on Vue projects that need good SEO and performance. Many companies use Nuxt for their web apps.

1

Create the Nuxt pages directory and homepage component

Create a pages directory and inside it create a file called index.vue. In index.vue, add a <template> section with a <h1> that says Welcome to Nuxt 3!.

Vue

Hint

Nuxt automatically uses files in pages as routes. The index.vue file is the homepage.

2

Add a reactive variable in the script setup

Inside pages/index.vue, add a <script setup> block. Import ref from vue and create a reactive variable called message with the value 'This is a reactive message.'.

Vue

  Welcome to Nuxt 3!



// Your code here

Hint

Use ref to create reactive data in the script setup block.

3

Display the reactive variable in the template

Modify the <template> in pages/index.vue to add a <p> tag below the <h1>. Inside the <p>, display the value of the reactive variable message using Vue's template syntax.

Vue

  Welcome to Nuxt 3!
  



import { ref } from 'vue'
const message = ref('This is a reactive message.')

Hint

Use double curly braces {{ }} to display reactive data in the template.

4

Add a page head title using Nuxt's useHead composable

In pages/index.vue, inside the <script setup> block, import useHead from #app. Then call useHead with an object setting the title to 'Nuxt 3 Overview'.

Vue

  Welcome to Nuxt 3!
  {{ message }}



import { ref } from 'vue'
// Your code here
const message = ref('This is a reactive message.')

Hint

Nuxt provides useHead to set page metadata like the title.