DEV Community

Cover image for Fetching Mock Data in Nuxt.js Using MockAPI.io
PO
PO

Posted on

1

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>
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

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.

API Trace View

How I Cut 22.3 Seconds Off an API Call with Sentry ๐Ÿ•’

Struggling with slow API calls? Dan Mindru walks through how he used Sentry's new Trace View feature to shave off 22.3 seconds from an API call.

Get a practical walkthrough of how to identify bottlenecks, split tasks into multiple parallel tasks, identify slow AI model calls, and more.

Read more โ†’

Top comments (0)

๐Ÿ‘‹ Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay