Usage

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 version you want client.

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

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

• Arguments:
  • contentType: string
  • params?: Strapi4RequestParams
  • fetchOptions?: FetchOptions
• Returns: Promise<T>

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

• Arguments:
  • contentType: string
  • id?: string | number | Strapi4RequestParams
  • params?: Strapi4RequestParams
  • fetchOptions?: FetchOptions
• Returns: Promise<T>

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

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>

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>

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.

• Arguments:
  • contentType: string
  • params?: Strapi3RequestParams
• Returns: Promise<number>

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

• Arguments:
  • query: string|DocumentNode
  • variables (optional): StrapiGraphqlVariables
• Returns: Promise<T>

<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:
  • url: string
  • fetchOptions?: FetchOptions
• 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>