Fetching Mock Data in Nuxt.js Using MockAPI.io

Nuxt.js is a powerful framework built on top of Vue.js that makes it easy to create server-side rendered applications. One common task in web development is fetching data from an API. In this blog post, we'll walk through how to fetch mock data using MockAPI.io in a Nuxt.js application.

Step 1: Setting Up Your Nuxt.js Project

First, ensure you have Node.js and npm installed on your machine. Then, create a new Nuxt.js project by running the following commands:

npx nuxi@latest init <project-name>

Follow the prompts to set up your project. Once the setup is complete, navigate to the project directory and start the development server:

npm run dev

Your Nuxt.js application should now be running at http://localhost:3000.

Step 2: Setting Up MockAPI.io

Go to MockAPI.io and sign up for a free account. Once logged in, create a new project and add a new resource. For this example, let's create a resource called todos with fields like name, and isDone.

MockAPI.io will provide you with a base URL for your API. For example, it might look something like this:

https://33a5a112s2ae2d13eb211a75.mockapi.io/todos

Step 3: Fetching Data in Nuxt.js Using fetch

Delete app.vue

Since we're not going to cover app.vue and simply want to quickly show how to fetch data from an API, we don't need the app.vue so we can delete it.

Create a New Page

Create a new file called index.vue in the pages directory (create the directory if it doesn't exist):

Fetch Data Using asyncData

Open pages/index.vue and add the following code:

<template>
  <div>
    <h1>Todos</h1>
    <ul class="todo-list">
      <li v-for="todo in todos" :key="todo.id" class="todo-item">
        <p class="todo-name">{{ todo.name }}</p>
        <p class="todo-status" :class="{ done: todo.isDone }">
          {{ todo.isDone ? 'Done' : 'Not Done' }}
        </p>
      </li>
    </ul>
  </div>
</template>

<script setup>
const { data: todos } = await useFetch(
  'https://<your-project-id>.mockapi.io/api/v1/todos'
);
</script>

<style scoped>
.todo-list {
  padding: 0;
}

.todo-item {
  margin-bottom: 20px;
  text-transform: capitalize;
}

.todo-name {
  font-weight: bold;
}

.todo-status {
  font-size: 0.8em;
}

.done {
  color: green;
}
</style>

Navigate to http://localhost:3000 in your browser. You should see a list of todos fetched from MockAPI.io.

Conclusion

In this blog post, we've quickly set up a Nuxt.js project and fetched mock data from MockAPI.io. This is a simple yet powerful way to prototype and test your application without needing a real backend.

Thanks for reading!
Po.