Vue.js / Vue HTTP Requests and APIs
Using Vue 3 Composition API for APIs
In this tutorial, we'll delve into Vue 3's Composition API and how to use it when interacting with APIs. We'll refactor a Vue component from using Options API to Composition API.
Section overview
5 resourcesExplores making API requests and handling responses using Vue.js.
1. Introduction
In this tutorial, we'll be working with Vue 3's Composition API to interact with APIs. The aim is to refactor a Vue component that's currently using the Options API, to use the Composition API instead. By the end of this tutorial, you should be able to understand how to use the Composition API and apply it in your own projects.
What you'll learn:
- An overview of Vue 3's Composition API
- How to refactor a Vue component from Options API to Composition API
- How to interact with APIs using Vue 3's Composition API
Prerequisites:
- Basic understanding of Vue.js
- Familiarity with JavaScript and ES6 syntax
- Basic knowledge of HTML and CSS
2. Step-by-Step Guide
Vue 3's Composition API is a new way to manage state and logic in Vue components. It was designed to address the limitations of the Options API, providing better TypeScript support and making code more readable and maintainable.
Refactoring the Vue Component
Consider a Vue component that fetches data from an API using the Options API:
<template>
<div>{{ data }}</div>
</template>
<script>
export default {
data() {
return {
data: null
};
},
mounted() {
fetch('http://api.example.com')
.then(response => response.json())
.then(data => (this.data = data));
}
};
</script>
Let's refactor this using the Composition API:
<template>
<div>{{ data.value }}</div>
</template>
<script>
import { ref, onMounted } from 'vue';
export default {
setup() {
const data = ref(null);
onMounted(async () => {
const response = await fetch('http://api.example.com');
data.value = await response.json();
});
return { data };
}
};
</script>
In the Composition API, we move the logic to a setup method. We use ref to create a reactive reference, and onMounted to replace the mounted lifecycle hook. Notice how it makes our code more readable.
3. Code Examples
Example 1: Fetching data from an API
<template>
<div>{{ users.value }}</div>
</template>
<script>
import { ref, onMounted } from 'vue';
export default {
setup() {
const users = ref(null);
onMounted(async () => {
const response = await fetch('https://jsonplaceholder.typicode.com/users');
users.value = await response.json();
});
return { users };
}
};
</script>
In this example, we're fetching user data from an API. users.value will contain the fetched data, which we can use in our template.
Example 2: Using watch to fetch data when a prop changes
<template>
<div>{{ post.value }}</div>
</template>
<script>
import { ref, watch, onMounted } from 'vue';
export default {
props: ['id'],
setup(props) {
const post = ref(null);
const fetchPost = async () => {
const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${props.id}`);
post.value = await response.json();
};
onMounted(fetchPost);
watch(() => props.id, fetchPost);
return { post };
}
};
</script>
Here, we fetch a post based on a prop id. If id changes, we refetch the post using watch.
4. Summary
In this tutorial, we've learned about Vue 3's Composition API and how to refactor a Vue component from the Options API to the Composition API. We've also seen how to fetch data from an API using the Composition API.
Next Steps
- Try refactoring more complex components
- Learn about more advanced features of the Composition API, like
computedandwatchEffect
Additional Resources
5. Practice Exercises
- Create a Vue component that fetches a list of albums from the API
https://jsonplaceholder.typicode.com/albumsand displays it. Use the Composition API. - Modify the component from exercise 1 to update the albums when a prop
userIdchanges.
Exercise 1 Solution
<template>
<div v-for="album in albums.value" :key="album.id">
{{ album.title }}
</div>
</template>
<script>
import { ref, onMounted } from 'vue';
export default {
setup() {
const albums = ref(null);
onMounted(async () => {
const response = await fetch('https://jsonplaceholder.typicode.com/albums');
albums.value = await response.json();
});
return { albums };
}
};
</script>
Exercise 2 Solution
<template>
<div v-for="album in albums.value" :key="album.id">
{{ album.title }}
</div>
</template>
<script>
import { ref, watch, onMounted } from 'vue';
export default {
props: ['userId'],
setup(props) {
const albums = ref(null);
const fetchAlbums = async () => {
const response = await fetch(`https://jsonplaceholder.typicode.com/albums?userId=${props.userId}`);
albums.value = await response.json();
};
onMounted(fetchAlbums);
watch(() => props.userId, fetchAlbums);
return { albums };
}
};
</script>
In the first exercise, we fetch the albums and display them. In the second exercise, we update the albums when the userId prop changes.
Need Help Implementing This?
We build custom systems, plugins, and scalable infrastructure.
Related topics
Keep learning with adjacent tracks.
Popular tools
Helpful utilities for quick tasks.
Latest articles
Fresh insights from the CodiWiki team.
AI in Drug Discovery: Accelerating Medical Breakthroughs
In the rapidly evolving landscape of healthcare and pharmaceuticals, Artificial Intelligence (AI) in drug dis…
Read articleAI in Retail: Personalized Shopping and Inventory Management
In the rapidly evolving retail landscape, the integration of Artificial Intelligence (AI) is revolutionizing …
Read articleAI in Public Safety: Predictive Policing and Crime Prevention
In the realm of public safety, the integration of Artificial Intelligence (AI) stands as a beacon of innovati…
Read articleAI in Mental Health: Assisting with Therapy and Diagnostics
In the realm of mental health, the integration of Artificial Intelligence (AI) stands as a beacon of hope and…
Read articleAI in Legal Compliance: Ensuring Regulatory Adherence
In an era where technology continually reshapes the boundaries of industries, Artificial Intelligence (AI) in…
Read article