Getting Started with Nuxt 3
The Strapi Documentation team focuses on improving the documentation for Strapi 5's core experience. We will release many changes in the next 6 months, so please keep an eye out 👀.
As a result, the present page is now in maintenance mode only, might not be fully up-to-date with Strapi 5, and will soon be removed from docs.strapi.io and moved to Strapi's integrations page.
In the meantime, if you want to help us improve this page, please feel free to contribute to the documentation's GitHub repository.
This integration guide follows the Quick Start Guide. You should be able to consume the API by browsing the URL http://localhost:1337/api/restaurants.
If you haven't gone through the Quick Start Guide, the way you request a Strapi API with Nuxt 3 remains the same except that you do not fetch the same content.
Create a Nuxt 3 app
Create a basic Nuxt 3 application with npx package runner
npx nuxi init nuxt-app
Use an HTTP client
For this example we are using the awesome @nuxt/strapi module and Nuxt helper function $fetch (based on ohmyfetch
). You may choose any of this variants.
- @nuxtjs/strapi
- fetch
yarn add --dev @nuxtjs/strapi
Add @nuxtjs/strapi
to the module section of nuxt.config.ts
with the following settings:
modules: ['@nuxtjs/strapi'],
strapi: {
url: 'http://localhost:1337'
},
No installation needed.
GET Request - get list of entities or one entity
Execute a GET
request on the restaurant
collection type in order to fetch your restaurants.
Be sure that you activated the find
and findOne
permission for the restaurant
collection type.
- @nuxtjs/strapi
- fetch
@nuxtjs/strapi
exposes composables that are auto-imported by Nuxt 3. Note that delete
function must be renamed because it's reserved word in JavaScript.
<script setup lang="ts">
import type { Restaurant } from '~/types'
const { find, findOne, create, update, delete: remove } = useStrapi()
</script>
// Get all restaurants
const response = await find<Restaurant>('restaurants')
// Get one restaurant by id
const response = await findOne<Restaurant>("restaurants", restaurantId)
// Get all restaurants
const response = $fetch("http://localhost:1337/api/restaurants")
// Get one restaurant by id
const response = await $fetch(`http://localhost:1337/api/restaurants/${restaurantId}`)
// List of the restaurants
{
"data": [
{
"id": 1,
"attributes": {
"name": "Biscotte Restaurant",
"description": "Welcome to Biscotte restaurant! \nRestaurant Biscotte offers a cuisine based on fresh, quality products, often local, organic when possible, and always produced by passionate producers.",
"createdAt": "2022-10-29T09:37:55.061Z",
"updatedAt": "2022-11-07T18:53:27.702Z",
"publishedAt": "2022-10-29T09:47:48.782Z"
}
},
{
"id": 2,
"attributes": {
"name": "Dolemon Sushi",
"description": "Unmissable Japanese Sushi restaurant. The cheese and salmon makis are delicious.",
"createdAt": "2022-10-29T09:37:55.061Z",
"updatedAt": "2022-11-07T18:53:27.702Z",
"publishedAt": "2022-10-29T09:47:48.782Z"
}
}
],
"meta": {
"pagination": { "page": 1, "pageSize": 25, "pageCount": 1, "total": 4 }
}
}
// One restaurant
{
"data": {
"id": 1,
"attributes": {
"name": "Biscotte Restaurant",
"description": "Welcome to Biscotte restaurant! \nRestaurant Biscotte offers a cuisine based on fresh, quality products, often local, organic when possible, and always produced by passionate producers.",
"createdAt": "2022-10-29T09:37:55.061Z",
"updatedAt": "2022-11-07T18:53:27.702Z",
"publishedAt": "2022-10-29T09:47:48.782Z"
}
},
"meta": {}
}
POST Request - create new entity
Execute a POST
request on the restaurant
collection type in order to create a restaurant.
Be sure that you activated the create
permission for the restaurant
collection type.
- @nuxtjs/strapi
- fetch
await create<Restaurant>("restaurants", {
name: restaurantName,
description: restaurantDescription })
await $fetch("http://localhost:1337/api/restaurants", {
method: "POST",
body: {
data: {
name: restaurantName,
description: restaurantDescription
}
}
})
PUT Request - update existing entity
Execute a PUT
request on the restaurant
collection type in order to update your restaurant.
Be sure that you activated the put
permission for the restaurant
collection type.
- @nuxtjs/strapi
- fetch
await update<Restaurant>("restaurants", restaurantId, {
name: restaurantName,
description: restaurantDescription })
await $fetch(`http://localhost:1337/api/restaurants/${restaurantId}`, {
method: "PUT",
body: {
data: {
name: restaurantName,
description: restaurantDescription
}
}
})
DELETE Request - delete existing entity
Execute a DELETE
request on the restaurant
collection type in order to delete your restaurant.
Be sure that you activated the delete
permission for the restaurant
collection type.
- @nuxtjs/strapi
- fetch
await remove<Restaurant>("restaurants", restaurantId);
await $fetch(`http://localhost:1337/api/restaurants/${restaurantId}`, {
method: 'DELETE'
})
Example
Consider an example of a simple CRUD Nuxt application that implements the functions described above.
- @nuxtjs/strapi
- fetch
./pages/index.vue
<template>
<div>
<ul>
<li v-for="restaurant in restaurants?.data" :key="restaurant.id">
{{ restaurant.attributes.name }}
<button @click="$router.push(`${$route.path}/restaurant/${restaurant.id}`)">Edit</button>
<button @click="deleteRestaurant(restaurant.id)">Delete</button>
</li>
</ul>
<nuxt-link :to="`${$route.path}/restaurant/create`">Create</nuxt-link>
</div>
</template>
<script setup lang="ts">
import type { Restaurant } from '~/types'
const { find, delete: remove } = useStrapi() // delete is keyword in JS, must not be used
const { data: restaurants, refresh } = await useAsyncData(
'restaurants',
() => find<Restaurant>('restaurants')
)
const deleteRestaurant = async (restaurantId: number) => {
await remove<Restaurant>("restaurants", restaurantId);
refresh()
};
</script>
./pages/restaurant/create.vue
<template>
<div>
<div><input type="text" v-model="name" /></div>
<div><textarea v-model="description"></textarea></div>
<button @click="createRestaurant();$router.go(-1)">Create</button>
<button @click="$router.go(-1)">Cancel</button>
</div>
</template>
<script setup lang="ts">
import type { Restaurant } from "~/types"
const { create } = useStrapi()
const name = ref("")
const description = ref("")
const createRestaurant = async () => {
await create<Restaurant>("restaurants", {
name: name.value,
description: description.value
})
</script>
./pages/restaurant/[id].vue
<template>
<div>
<div><input type="text" v-model="name" /></div>
<div><textarea v-model="description"></textarea></div>
<button @click="updateRestaurant();$router.go(-1)">Update</button>
<button @click="$router.go(-1)">Cancel</button>
{{ restaurant }}
</div>
</template>
<script setup lang="ts">
import type { Restaurant } from '~/types'
const { findOne, update } = useStrapi()
const route = useRoute()
const restaurantId: number = +route.params.id // cast to number
const response = await findOne<Restaurant>("restaurants", restaurantId)
const name = ref(response.data.attributes.name)
const description = ref(response.data.attributes.description)
const updateRestaurant = async () => {
await update<Restaurant>("restaurants", restaurantId, {
name: name.value,
description: description.value
})
}
</script>
./pages/index.vue
<template>
<div>
<ul>
<li v-for="restaurant in restaurants.data" :key="restaurant.id">
{{ restaurant.attributes.name }}
<button @click="$router.push(`${$route.path}/restaurant/${restaurant.id}`)">Edit</button>
<button @click="deleteRestaurant(restaurant.id)">Delete</button>
</li>
</ul>
<div v-else>Loading...</div>
<nuxt-link :to="`${$route.path}/restaurant/create`">Create</nuxt-link>
</div>
</template>
<script setup>
const { data: restaurants, refresh } = await useAsyncData(
'restaurants',
() => $fetch("http://localhost:1337/api/restaurants")
)
const deleteRestaurant = async (restaurantId) => {
await $fetch(`http://localhost:1337/api/restaurants/${restaurantId}`, {
method: 'DELETE'
})
refresh()
}
</script>
./pages/restaurant/create.vue
<template>
<div>
<div><input type="text" v-model="restaurant.name" /></div>
<div><textarea v-model="restaurant.description"></textarea></div>
<button @click="createRestaurant();$router.go(-1)">Create</button>
<button @click="$router.go(-1)">Cancel</button>
{{ restaurant }}
</div>
</template>
<script setup>
const restaurant = ref({ name: "", description: "" })
const createRestaurant = async () => {
await $fetch("http://localhost:1337/api/restaurants", {
method: "POST",
body: {
data: {
name: restaurant.value.name,
description: restaurant.value.description
}
}
})
}
</script>
./pages/restaurant/[id].vue
<template>
<div>
<div><input type="text" v-model="restaurant.name" /></div>
<div><textarea v-model="restaurant.description"></textarea></div>
<button @click="updateRestaurant();$router.go(-1)">Update</button>
<button @click="$router.go(-1)">Cancel</button>
{{ restaurant }}
</div>
</template>
<script setup>
const route = useRoute()
const response = await $fetch(`http://localhost:1337/api/restaurants/${route.params.id}`)
const restaurant = ref(response.data.attributes)
const updateRestaurant = async () => {
await $fetch(`http://localhost:1337/api/restaurants/${route.params.id}`, {
method: "PUT",
body: {
data: {
name: restaurant.value.name,
description: restaurant.value.description
}
}
})
}
</script>