Usage

Learn how to use strapi module in your Nuxt 3 application.

This module exposes composables that are auto-imported by Nuxt 3.

useStrapi

Depending on which version you have in your options, you will be using either the v3 or v4 client.

All examples below are demonstrated with v4 useStrapi().

Note that v3 exposes the same methods with different options. Check out specific types for v3 and v4.

Learn how to handle Strapi errors globally by using nuxt hooks.

All examples below are demonstrated with http calls in script setup. However, to handle SSR properly you may want to use useAsyncData.

Types

When using the composable, you can pass in a default data model for all methods.

const { findOne } = useStrapi<Course>()

// typed to Course
findOne('courses', '123')

If you prefer not to use a default data type and want to override the default, you can pass the data model on individual methods as well.

const { findOne } = useStrapi<Course>()

// typed to SpecialCourse
findOne<SpecialCourse>('courses', '123')

find

Get entries. Returns entries matching the query filters (see parameters documentation).

<script setup lang="ts">
import type { Restaurant } from '~/types'

const { find } = useStrapi()

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

Check out the Strapi Get entries REST API endpoint.

findOne

Returns an entry by id.

<script setup lang="ts">
import type { Restaurant } from '~/types'

const route = useRoute()
const { findOne } = useStrapi()

const response = await findOne<Restaurant>('restaurants', route.params.id)
</script>
This method can be used to get a single type entry as id is optional. You can pass the params instead of the id if needed.

Check out the Strapi Get an entry REST API endpoint.

create

Creates an entry and returns its value.

  • Arguments:
    • contentType: string
    • data: Partial<T>
  • Returns: Promise<T>
<script setup lang="ts">
import type { Restaurant } from '~/types'

const { create } = useStrapi()

const onSubmit = async () => {
  await create<Restaurant>('restaurants', { name: 'My restaurant' })
}
</script>

Check out the Strapi Create an entry REST API endpoint.

update

Partially updates an entry by id and returns its value. Fields that aren't sent in the query are not changed in the database. Send a null value if you want to clear them.

  • Arguments:
    • contentType: string
    • id: string | number | Partial<T>
    • data?: Partial<T>
  • Returns: Promise<T>
<script setup lang="ts">
import type { Restaurant } from '~/types'

const route = useRoute()
const { update } = useStrapi()

const onSubmit = async () => {
  await update<Restaurant>('restaurants', route.params.id, { name: 'My updated restaurant' })
}
</script>
This method can be used to update/create a single type entry as you can pass the data instead of the id.

Check out the Strapi Update an entry REST API endpoint.

delete

Deletes an entry by id and returns its value.

  • Arguments:
    • contentType: string
    • id?: string | number
  • Returns: Promise<T>
<script setup lang="ts">
import type { Restaurant } from '~/types'

const route = useRoute()
// An alias is used here as `delete` is a reserved key-word.
const { delete: _delete } = useStrapi()

const onSubmit = async () => {
  await _delete<Restaurant>('restaurants', route.params.id)
}
</script>
This method can be used to delete a single type entry as id is optional.

Check out the Strapi Delete an entry REST API endpoint.

count

Returns the count of entries matching the query filters. You can read more about parameters here.

Available only for v3 as Strapi v4 can do the same thing with the Pagination queries of the find method.
<script setup lang="ts">
const { count } = useStrapi()

const total = await count('restaurants')
</script>

Check out the Strapi v3 Count entries REST API endpoint.

useStrapiGraphQL

This composable is an alias of useStrapiClient that sets the url to /graphql and method to POST. You can use this method to send an authenticated GraphQL query to your API. See Use Imported GraphQL to use Option 2 below.

<script setup lang="ts">
const route = useRoute()
const graphql = useStrapiGraphQL()

// Option 1: use inline query
const restaurant = await graphql(`
  query {
    restaurant(id: ${route.params.id}) {
      data {
        id
        attributes {
          name
        }
      }
    }
  }
`)

// Option 2: use imported query
const restaurant = await graphql(query, { id: route.params.id })
</script>

useStrapiClient

This composable is a wrapper around Nuxt 3 $fetch helper that uses ofetch under the hood. You can use this method to reach custom strapi endpoints not available in the useStrapi composable.

  • Arguments:
  • Returns: Promise<number>
<script setup lang="ts">
import type { Restaurant } from '~/types'

const client = useStrapiClient()

const restaurant = await client<Restaurant>('/restaurants', { method: 'POST', body: { name: 'My restaurant' } })
</script>

useStrapiUrl

This composable is an helper to get the strapi url endpoint. It is used internally to reach the api in the useStrapiClient composable.

<script setup>
const url = useStrapiUrl()
</script>

useStrapiVersion

This composable is an helper to get version defined in options. It is used internally to compute the useStrapiUrl composable.

<script setup>
const version = useStrapiVersion()
</script>

useStrapiMedia

This composable is an helper to get full url for media. By default, Strapi endpoints return an media URL in the form /uploads/image-[hash].png.

<script setup>
const media = useStrapiMedia()
</script>

Setup

Learn how to setup strapi module in your Nuxt 3 application.

Authentication

Learn how to authenticate users with the strapi module in your Nuxt 3 application.