Getting Started with Nuxt.js 3: A Beginner’s Guide to API Integration and Frontend Development

Introduction

Nuxt.js 3 is a powerful framework built on top of Vue.js, designed to make the development of universal or single-page applications easier. It comes with many features out-of-the-box, including server-side rendering (SSR), static site generation (SSG), and API handling. In this guide, we’ll walk you through setting up a basic Nuxt.js 3 project, integrating an API, and creating frontend pages.

Setting Up Your Nuxt.js 3 Project

To start, you’ll need Node.js installed on your system. Once that’s ready, you can create a new Nuxt.js project using the following commands:

npx nuxi init nuxt3-app
cd nuxt3-app
npm install

This will set up a new Nuxt.js 3 project in a folder named nuxt3-app. After installation, you can run the development server using:

npm run dev

You should now see your Nuxt.js app running at http://localhost:3000.

Project Structure

Nuxt.js 3 comes with a well-organized folder structure. Here’s a quick overview of the key folders and files:

pages/: This is where you’ll create your Vue components that represent different pages of your application.
server/: Contains server-side logic, such as API routes.
components/: This folder is for reusable Vue components that you can use across multiple pages.

Creating Your First Page

Let’s create a simple homepage. In the pages/ folder, create a new file called index.vue:

<template>
  <div>
    <h5>Welcome to My Nuxt.js 3 App</h5>
    <p>This is your first page built with Nuxt.js 3!</p>
  </div>
</template>

<script setup>
</script>

<style scoped>
h5 {
  color: #42b983;
}
</style>

When you visit http://localhost:3000/, you’ll see your homepage with the message “Welcome to My Nuxt.js 3 App.”

Setting Up an API Route

Nuxt.js 3 allows you to easily set up API routes using the server/ folder. Create a new folder called api inside the server/ folder, and then add a new file called hello.js:

export default defineEventHandler(() => {
  return {
    message: "Hello, Nuxt.js 3!"
  };
});

This simple API route returns a JSON object with a message. You can access this API at http://localhost:3000/api/hello.

Fetching Data from the API

Now, let’s fetch data from the API we just created and display it on our homepage. Update the index.vue file in the pages/ folder:

<template>
  <div>
    <h5>{{ message }}</h5>
    <p>This data is fetched from the API.</p>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const message = ref('');

onMounted(async () => {
  const res = await fetch('/api/hello');
  const data = await res.json();
  message.value = data.message;
});
</script>

<style scoped>
h5 {
  color: #42b983;
}
</style>

Now, when you visit the homepage, you’ll see the message fetched from the API.

Conclusion

You’ve just created a simple Nuxt.js 3 application that includes an API and displays data on the frontend. Nuxt.js 3 makes it easy to build modern web applications with its intuitive structure and powerful features. This guide covered the basics, but there’s much more you can do with Nuxt.js 3, including routing, state management, and advanced API handling. Happy coding!

Final Thoughts

This blog post is a great starting point for beginners who want to learn Nuxt.js 3. By following this guide, you’ll have a basic understanding of how to structure a Nuxt.js project, set up API routes, and display data on the frontend. The next steps could include exploring more advanced features like middleware, plugins, or deploying your application to production.

Feel free to ask any questions in the comments, and good luck with your Nuxt.js journey!