Skip to main content

Getting Started with Nuxt 3

This integration guide follows the Quick Start Guide and assumes you have you have fully completed the "Hands-on" path. 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.

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'
},

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.

Example GET request with @nuxtjs/strapi
<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)
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 })

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

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​

Consider an example of a simple CRUD Nuxt application that implements the functions described above.

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