Getting Started with Nuxt 3

This integration guide is following the Quick Start Guide. We assume that you have fully completed its "Hands-on" path, and therefore can consume the API by browsing this url (opens new window).

If you haven't gone through the Quick Start Guide, the way you request a Strapi API with Nuxt 3 (opens new window) remains the same except that you will 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 (opens new window) module and Nuxt helper function $fetch (opens new window) (based on ohmyfetch). You may choose any of this variants.

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 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>

Example GET request with @nuxtjs/strapi

// Get all restaurants
const response = await find<Restaurant>('restaurants')

// Get one restaurant by id
const response = await findOne<Restaurant>("restaurants", restaurantId)

Example GET request with $fetch

// 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}`)

Example response

// 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.

Example POST request with @nuxtjs/strapi

await create<Restaurant>("restaurants", { 
    name: restaurantName, 
    description: restaurantDescription })

Example POST request with $fetch

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.

Example PUT request with @nuxtjs/strapi

await update<Restaurant>("restaurants", restaurantId, { 
    name: restaurantName, 
    description: restaurantDescription })

Example PUT request with $fetch

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.

Example DELETE request with @nuxtjs/strapi

await remove<Restaurant>("restaurants", restaurantId);

Example DELETE request with $fetch

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.

./pages/index.vue

<template>
  <div>
    <ul v-if="!pending">
      <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 lang="ts">
import type { Restaurant } from "~/types"
const { find, delete: remove } = useStrapi()
const { data: restaurants, pending, refresh, error } = await useAsyncData(
  'restaurants',
  () => find<Restaurant>('restaurants')
)
onMounted(() => refresh())
const deleteRestaurant = async (restaurantId: number) => {
  await remove<Restaurant>("restaurants", restaurantId);
  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 lang="ts">
import type { Restaurant } from "~/types"
const { create } = useStrapi()
const restaurant = ref({ name: "", description: "" })
const createRestaurant = async () => {
  await create<Restaurant>("restaurants", { 
    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 lang="ts">
import type { Restaurant } from '~/types'
const route = useRoute()
const { findOne, update } = useStrapi()
const response = await findOne<Restaurant>("restaurants", route.params.id)
const restaurant : Restaurant = ref(response.data.attributes)
const updateRestaurant = async () => {
  await update<Restaurant>("restaurants", route.params.id, { 
    name: restaurant.value.name, 
    description: restaurant.value.description })
}
</script>

./pages/index.vue

<template>
  <div>
    <ul v-if="!pending">
      <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, pending, refresh } = await useAsyncData(
  'restaurants', 
  () => $fetch("http://localhost:1337/api/restaurants")
)
onMounted(() => refresh())
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>

Starter app

Source code used in this article can be found in this (opens new window) repo. It's tiny CRUD app that demostrates basic features of interacing between Nuxt frontend and Strapi backend.

Conclusion

Here is how to request your collection types in Strapi using Nuxt.js. When you create a collection type or a single type you will have a certain number of REST API endpoints available to interact with.

We used the GET, POST, PUT and DELETE methods here. Learn more about API Endpoints.