### File Dependencies Example

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/MANIFEST.md

Illustrates the dependency structure of the documentation files, starting from the README.md entry point.

```markdown
README.md (entry point)
├── module-configuration.md
├── composables-core.md
├── composables-auth.md
├── composables-graphql.md
├── api-v5.md
├── api-v4.md
├── api-v3.md
├── types.md
├── errors.md
├── utilities.md
├── quick-reference.md (summary)
└── api-index.md (index)
```

--------------------------------

### Complete Authentication Example (Vue)

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/composables-auth.md

A full Vue component example demonstrating login, logout, and user state management using Nuxt Strapi authentication composables.

```vue
<template>
  <div>
    <div v-if="!user">
      <input v-model="email" type="email" placeholder="Email">
      <input v-model="password" type="password" placeholder="Password">
      <button @click="handleLogin">Login</button>
      <button @click="navigateToRegister">Register</button>
    </div>

    <div v-else>
      <p>Welcome, {{ user.username }}!</p>
      <button @click="handleLogout">Logout</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const email = ref('')
const password = ref('')
const user = ref(null)

const { login, logout } = useStrapiAuth()

const handleLogin = async () => {
  try {
    const response = await login({
      identifier: email.value,
      password: password.value
    })
    user.value = response.user.value
  } catch (error) {
    console.error('Login failed:', error)
  }
}

const handleLogout = () => {
  logout()
  user.value = null
}

const navigateToRegister = () => {
  navigateTo('/register')
}
</script>
```

--------------------------------

### Fetch Articles using useStrapi Client

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/README.md

Fetch a list of articles using the auto-imported `useStrapi` composable. This example demonstrates fetching data in a Vue component's setup script.

```vue
<script setup lang="ts">
// Composables auto-imported
const client = useStrapi()
const articles = ref([])

onMounted(async () => {
  const response = await client.find('articles')
  articles.value = response.data
})
</script>

<template>
  <div>
    <article v-for="item in articles" :key="item.id">
      {{ item.title }}
    </article>
  </div>
</template>
```

--------------------------------

### Strapi Pagination Examples

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/quick-reference.md

Examples of pagination parameters for Strapi v4/v5, including by page, by offset, and the structure of the response metadata.

```json
// By page (v4/v5)
{ pagination: { page: 2, pageSize: 20 } }

// By offset (v4/v5)
{ pagination: { start: 20, limit: 20 } }

// Response metadata (v4/v5)
response.meta.pagination = {
  page: 2,
  pageSize: 20,
  pageCount: 5,
  total: 100
}
```

--------------------------------

### stringify Example: Manual Usage

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/utilities.md

Provides an example of using the `stringify` function directly to construct a full API URL with query parameters.

```typescript
import { stringify } from '~/src/runtime/utils/stringify'

const queryString = stringify({
  filters: { status: 'active' },
  sort: 'createdAt:desc'
})

const fullUrl = `https://api.example.com/articles?${queryString}`
```

--------------------------------

### Strapi Sorting Examples

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/quick-reference.md

Examples for sorting query results in Strapi, including single and multiple fields, and the v3 specific format.

```json
// Single field
{ sort: 'createdAt:desc' }
{ sort: 'title:asc' }

// Multiple fields
{ sort: ['category:asc', 'title:asc'] }

// v3 format
{ _sort: 'createdAt:DESC' }
{ _sort: ['category:ASC', 'createdAt:DESC'] }
```

--------------------------------

### Install Nuxt Strapi Module

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/README.md

Install the module using npm. This is the first step to integrate Strapi with your Nuxt application.

```bash
npm install @nuxtjs/strapi
```

--------------------------------

### Example: Basic Create

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/api-v5.md

Demonstrates a basic creation of an article with title, content, and slug.

```typescript
const client = useStrapi<Article>()

// Basic create
const newArticle = await client.create('articles', {
  title: 'My Article',
  content: 'Article content',
  slug: 'my-article'
})
console.log(newArticle.data.documentId)
```

--------------------------------

### Fetch User Data with Variables in Script Setup

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/composables-graphql.md

Demonstrates fetching user data using `useStrapiGraphQL` with dynamic variables in a script setup context. Uses a computed property for the query and defines an async function to execute it.

```vue
<script setup lang="ts">
import { ref, computed } from 'vue'

const strapiGraphQL = useStrapiGraphQL()
const userId = ref('1')

interface UserResponse {
  user: {
    id: string
    username: string
    email: string
    posts: Array<{ id: string; title: string }>
  }
}

const userQuery = computed(() => `
  query GetUser($id: ID!) {
    user(id: $id) {
      id
      username
      email
      posts {
        id
        title
      }
    }
  }
`)

const fetchUser = async () => {
  const response = await strapiGraphQL<UserResponse>(
    userQuery.value,
    { id: userId.value }
  )
  return response.user
}
</script>
```

--------------------------------

### Install Preview Release of Nuxt Strapi

Source: https://github.com/nuxt-modules/strapi/blob/main/docs/content/2.setup.md

Install a continuous preview release of the `@nuxtjs/strapi` module by specifying a URL pointing to a specific commit hash or PR number on pkg.pr.new.

```diff
{ "dependencies": {
-   "@nuxtjs/strapi": "^2.1.1",
+   "@nuxtjs/strapi": "https://pkg.pr.new/@nuxtjs/strapi@95260d0",
 }
}
```

--------------------------------

### Complete Nuxt Strapi Integration Example

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/composables-core.md

A full Vue component example demonstrating the integration of various Nuxt Strapi composables like `useStrapiUser`, `useStrapiUrl`, `useStrapiVersion`, `useStrapiClient`, and `useStrapiMedia` for fetching and displaying data.

```vue
<template>
  <div>
    <h1>Dashboard</h1>
    <p v-if="user">Welcome, {{ user.username }}</p>
    
    <img 
      v-if="article?.thumbnail" 
      :src="mediaUrl"
      alt="Thumbnail"
    >
    
    <p>API Version: {{ version }}</p>
    <p>API Base URL: {{ apiUrl }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'

const user = useStrapiUser()
const baseUrl = useStrapiUrl()
const version = useStrapiVersion()
const client = useStrapiClient()

const article = ref(null)
const mediaUrl = computed(() => {
  return article.value?.thumbnail?.url 
    ? useStrapiMedia(article.value.thumbnail.url)
    : null
})

const apiUrl = computed(() => baseUrl)

onMounted(async () => {
  // Fetch article with thumbnail
  const response = await client('/articles/1', {
    params: {
      populate: ['thumbnail']
    }
  })
  article.value = response.data
})
</script>
```

--------------------------------

### Example: Create with Relations

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/api-v5.md

Shows how to create an article and associate it with existing author and category entries using their IDs.

```typescript
const client = useStrapi<Article>()

// Create with relations
const withRelations = await client.create('articles', {
  title: 'Article with Author',
  content: 'Content',
  author: 1,  // Author ID
  category: 3 // Category ID
})
```

--------------------------------

### Example: Create with Locale

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/api-v5.md

Illustrates creating an article in a specific locale, such as French.

```typescript
const client = useStrapi<Article>()

// Create with locale
const frenchArticle = await client.create('articles', {
  title: 'Mon Article',
  content: 'Contenu'
}, {
  locale: 'fr'
})
```

--------------------------------

### Make Authenticated Strapi Requests

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/composables-core.md

Demonstrates making GET, POST, and filtered GET requests using the Strapi client. Ensure the client is initialized before use. Handles typed responses and request options.

```typescript
const client = useStrapiClient()

// GET request
const articles = await client<Article[]>('/articles')

// POST request
const newArticle = await client('/articles', {
  method: 'POST',
  body: {
    data: {
      title: 'New Article',
      content: 'Content here'
    }
  }
})

// Request with query parameters
const filtered = await client('/articles', {
  method: 'GET',
  params: {
    fields: ['title', 'slug'],
    filters: {
      published: true
    },
    sort: 'createdAt:desc'
  }
})
```

--------------------------------

### stringify Example: Simple Object

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/utilities.md

Demonstrates the basic usage of the `stringify` function with a simple key-value object.

```typescript
import { stringify } from '~/src/runtime/utils/stringify'

// Simple object
stringify({ name: 'John', age: 30 })
// Returns: "name=John&age=30"
```

--------------------------------

### stringify Example: HTTP Client Parameters

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/utilities.md

Shows the transformation of a `params` object into a URL query string when using `useStrapiClient`.

```typescript
const client = useStrapiClient()

// Before: params object
await client('/articles', {
  params: {
    filters: { published: true }
  }
})

// After stringify:
// GET /api/articles?filters[published]=true
```

--------------------------------

### Example: Update with Locale

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/api-v5.md

Updates an article in a specific locale, such as French.

```typescript
const client = useStrapi<Article>()

// With locale
const translated = await client.update('articles', 'doc123', {
  title: 'Titre Français'
}, {
  locale: 'fr'
})
```

--------------------------------

### stringify Example: Array Handling

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/utilities.md

Demonstrates how `stringify` expands arrays with indexed keys and handles nested array objects.

```typescript
stringify({
  tags: ['a', 'b', 'c']
})
// Returns: "tags[0]=a&tags[1]=b&tags[2]=c"

// For nested array objects
stringify({
  items: [
    { id: 1 },
    { id: 2 }
  ]
})
// Returns: "items[0][id]=1&items[1][id]=2"
```

--------------------------------

### Complete CRUD Example for Articles

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/api-v5.md

Demonstrates full Create, Read, Update, and Delete operations for 'articles' using the Nuxt Strapi module client. Includes local state management for articles and editing.

```vue
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'

interface Article {
  title: string
  content: string
  slug: string
  publishedAt: string | null
}

const articles = ref<any[]>([])
const newArticle = ref({ title: '', content: '' })
const editingId = ref<string | null>(null)
const editData = ref({ title: '', content: '' })

const client = useStrapi<Article>()

// Read
onMounted(async () => {
  const response = await client.find('articles', {
    sort: 'createdAt:desc',
    pagination: { page: 1, pageSize: 10 }
  })
  articles.value = response.data
})

// Create
const handleCreate = async () => {
  const response = await client.create('articles', {
    title: newArticle.value.title,
    content: newArticle.value.content,
    slug: newArticle.value.title.toLowerCase().replace(/\s+/g, '-')
  })
  articles.value.unshift(response.data)
  newArticle.value = { title: '', content: '' }
}

// Update
const handleUpdate = async (id: string) => {
  const response = await client.update('articles', id, {
    title: editData.value.title,
    content: editData.value.content
  })
  const index = articles.value.findIndex(a => a.documentId === id)
  if (index !== -1) {
    articles.value[index] = response.data
  }
  editingId.value = null
}

// Delete
const handleDelete = async (id: string) => {
  await client.delete('articles', id)
  articles.value = articles.value.filter(a => a.documentId !== id)
}

const startEdit = (article: any) => {
  editingId.value = article.documentId
  editData.value = { title: article.title, content: article.content }
}
</script>

<template>
  <div>
    <h2>Create Article</h2>
    <input v-model="newArticle.title" placeholder="Title">
    <textarea v-model="newArticle.content" placeholder="Content"></textarea>
    <button @click="handleCreate">Create</button>

    <h2>Articles</h2>
    <div v-for="article in articles" :key="article.documentId" class="article">
      <div v-if="editingId !== article.documentId">
        <h3>{{ article.title }}</h3>
        <p>{{ article.content }}</p>
        <button @click="startEdit(article)">Edit</button>
        <button @click="handleDelete(article.documentId)">Delete</button>
      </div>
      <div v-else>
        <input v-model="editData.title" placeholder="Title">
        <textarea v-model="editData.content" placeholder="Content"></textarea>
        <button @click="handleUpdate(article.documentId)">Save</button>
        <button @click="editingId = null">Cancel</button>
      </div>
    </div>
  </div>
</template>

```

--------------------------------

### Strapi Population Examples

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/quick-reference.md

Demonstrates how to populate related data in Strapi queries, including simple field population and deep population with filtering and sorting for nested relations.

```json
// Simple populate
{ populate: ['author', 'category'] }
{ populate: 'author' }
{ populate: '*' }  // All relations

// Deep population (v4/v5)
{
  populate: {
    author: {
      fields: ['name', 'email'],
      populate: ['avatar']
    },
    comments: {
      sort: 'createdAt:desc',
      pagination: { limit: 5 }
    }
  }
}
```

--------------------------------

### Strapi Filter Examples

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/quick-reference.md

Examples of various filter operators for querying Strapi data, including equality, case-insensitivity, contains, numeric comparisons, array membership, NULL checks, and logical operators.

```json
// Equality
{ title: { $eq: 'Test' } }

// Case-insensitive
{ title: { $eqi: 'test' } }

// Contains
{ title: { $contains: 'str' } }

// Case-insensitive contains
{ title: { $containsi: 'STR' } }

// Starts with
{ title: { $startsWith: 'Test' } }

// Numeric comparison
{ views: { $gte: 100 } }
{ views: { $between: [10, 100] } }

// Array membership
{ status: { $in: ['published', 'draft'] } }

// NULL checks
{ author: { $notNull: true } }

// Logical operators
{ $or: [{ published: true }, { featured: true }] }
{ $and: [{ views: { $gte: 100 } }, { published: true }] }
```

--------------------------------

### stringify Example: Single Value

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/utilities.md

Illustrates the output of `stringify` for a simple object with a single key-value pair.

```typescript
stringify({ name: 'test' })
// Returns: "name=test"
```

--------------------------------

### stringify Example: Strapi v3 Compatibility

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/utilities.md

Demonstrates how `stringify` produces query strings compatible with Strapi v3's underscore-prefixed parameters like `_where` and `_sort`.

```typescript
stringify({
  _where: { published: true },
  _sort: 'createdAt:DESC',
  _limit: 10
})
// Returns: "_where[published]=true&_sort=createdAt%3ADESC&_limit=10"
```

--------------------------------

### stringify Example: Empty Object

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/utilities.md

Shows the output of `stringify` when an empty object is provided as input.

```typescript
stringify({})
// Returns: ""
```

--------------------------------

### stringify Example: Array Values

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/utilities.md

Illustrates `stringify`'s ability to handle arrays by converting them into indexed bracket notation.

```typescript
import { stringify } from '~/src/runtime/utils/stringify'

// Array values
stringify({
  tags: ['nuxt', 'strapi']
})
// Returns: "tags[0]=nuxt&tags[1]=strapi"
```

--------------------------------

### stringify Example: Nested Object

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/utilities.md

Shows how `stringify` handles nested objects by converting them into bracket notation for query parameters.

```typescript
import { stringify } from '~/src/runtime/utils/stringify'

// Nested object
stringify({
  filters: {
    published: true,
    category: 'tech'
  }
})
// Returns: "filters[published]=true&filters[category]=tech"
```

--------------------------------

### Create a New Restaurant

Source: https://github.com/nuxt-modules/strapi/blob/main/docs/content/3.usage.md

Creates a new restaurant document using the `create` method from the `useStrapi` composable. The `name` property is provided as an example of data to be created.

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

const { create } = useStrapi()

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

--------------------------------

### Fetch Paginated and Sorted Articles

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/README.md

Fetch a list of articles with specific pagination and sorting parameters. This example uses the `find` method with options for pagination and sorting.

```typescript
const client = useStrapi<Article>()
const response = await client.find('articles', {
  pagination: { page: 1, pageSize: 10 },
  sort: 'createdAt:desc'
})
```

--------------------------------

### Handle Login Failures

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/errors.md

Manage authentication errors during the login process. This example checks for specific error statuses like 400 (invalid credentials) and 401 (user not confirmed).

```typescript
const { login } = useStrapiAuth()

try {
  const response = await login({
    identifier: 'user@example.com',
    password: 'wrong'
  })
} catch (error) {
  const e = error as Strapi5Error
  
  if (e.error.status === 400) {
    // Invalid credentials
    console.error('Email or password incorrect')
  } else if (e.error.status === 401) {
    // User not confirmed
    console.error('Account not confirmed')
  }
}
```

--------------------------------

### GraphQL Mutation Example with useStrapiGraphQL

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/composables-graphql.md

Shows how to execute a GraphQL mutation (e.g., creating an article) using the useStrapiGraphQL composable. Mutations require an input object and return data based on the mutation definition.

```typescript
const strapiGraphQL = useStrapiGraphQL()

interface CreateArticleResponse {
  createArticle: {
    id: string
    title: string
  }
}

const response = await strapiGraphQL<CreateArticleResponse>(
  `
    mutation CreateArticle($input: ArticleInput!) {
      createArticle(input: $input) {
        id
        title
      }
    }
  `,
  {
    input: {
      title: 'New Article',
      content: 'Article content here',
      published: true
    }
  }
)

console.log('Created article ID:', response.createArticle.id)
```

--------------------------------

### Strapi Locale Examples

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/quick-reference.md

Specify the desired locale for fetching localized content in Strapi. v5 allows `null` to fetch the default locale.

```json
{ locale: 'fr' }
{ locale: 'en-US' }
{ locale: 'de-DE' }

// v5 allows null for default
{ locale: null }
```

--------------------------------

### Type-Safe Filtering Example

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/types.md

Demonstrates how to perform type-safe filtering on articles using various operators. Ensure the Article type is defined and the Strapi client is initialized.

```typescript
interface Article {
  title: string
  content: string
  views: number
  published: boolean
}

const client = useStrapi<Article>()

// Type-safe filters
const filtered = await client.find('articles', {
  filters: {
    // String operators
    title: { $contains: 'Strapi' },
    // Numeric operators
    views: { $gte: 100 },
    // Logical operators
    $or: [
      { published: { $eq: true } },
      { views: { $gt: 1000 } }
    ]
  }
})
```

--------------------------------

### stringify Example: Internal Recursion Detail

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/utilities.md

Explains the internal mechanism of `stringify` using the `prefix` parameter for handling nested object keys during recursion.

```typescript
// First call: stringify(obj, undefined)
stringify({
  filters: {
    published: true
  }
})

// Internally becomes:
// stringify({ published: true }, 'filters')
// Which produces: "filters[published]=true"
```

--------------------------------

### Example: Standard Update

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/api-v5.md

Performs a standard update on an article, modifying its title and setting the published date.

```typescript
const client = useStrapi<Article>()

// Standard update
const updated = await client.update('articles', 'doc123', {
  title: 'New Title',
  publishedAt: new Date().toISOString()
})
```

--------------------------------

### Install and Configure Nuxt Strapi Module

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/quick-reference.md

Add the Nuxt Strapi module to your nuxt.config.ts and configure the Strapi API URL and version.

```typescript
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxtjs/strapi'],
  strapi: {
    url: 'http://localhost:1337',
    version: 'v5' // or 'v4', 'v3'
  }
})
```

--------------------------------

### stringify Example: Integration with useStrapiClient

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/utilities.md

Illustrates how `useStrapiClient` internally uses `stringify` to convert a params object into a URL query string for API requests.

```typescript
const client = useStrapiClient()

const params = {
  fields: ['title', 'slug'],
  filters: { published: true },
  pagination: { page: 1, pageSize: 10 }
}

// Internally, these params are stringified:
const url = '/articles?' + stringify(params)
// Result: "/articles?fields[0]=title&fields[1]=slug&filters[published]=true&pagination[page]=1&pagination[pageSize]=10"

await client('/articles', { params })
```

--------------------------------

### useStrapiMedia

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/composables-core.md

Constructs absolute URLs for media files from Strapi. It takes a relative path or a full URL and returns an absolute URL ready for use in HTML elements like `<img>` or `<video>`. If the provided path is already an absolute URL (starts with 'http://' or 'https://'), it is returned unchanged. Otherwise, it joins the path with the configured Strapi base URL.

```APIDOC
## useStrapiMedia

### Description
Constructs absolute URLs for media files from Strapi. It takes a relative path or a full URL and returns an absolute URL ready for use in HTML elements like `<img>` or `<video>`. If the provided path is already an absolute URL (starts with 'http://' or 'https://'), it is returned unchanged. Otherwise, it joins the path with the configured Strapi base URL.

### Function Signature
```typescript
export const useStrapiMedia = (path: string): string
```

### Parameters
#### Path Parameters
- **path** (string) - Required - Relative path or full URL from Strapi media response

### Returns
- **string** - Absolute URL ready for use in `<img>`, `<video>`, etc.

### Example
```typescript
// Example with a relative path
const mediaUrl = useStrapiMedia('/uploads/image.jpg')
// Returns: "http://localhost:1337/uploads/image.jpg"

// Example with an external URL
const externalUrl = useStrapiMedia('https://cdn.example.com/image.jpg')
// Returns: "https://cdn.example.com/image.jpg" (unchanged)

// Example using a Strapi response object
const article = ref({
  thumbnail: {
    url: '/uploads/abc123.jpg'
  }
})

const imageUrl = useStrapiMedia(article.value.thumbnail.url)
// This imageUrl can then be used in a template: <img :src="imageUrl">
```
```

--------------------------------

### stringify Example: Special Characters

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/utilities.md

Shows how `stringify` automatically URL-encodes values containing special characters like spaces and ampersands.

```typescript
import { stringify } from '~/src/runtime/utils/stringify'

// Special characters (URL-encoded)
stringify({
  search: 'hello world & stuff'
})
// Returns: "search=hello%20world%20%26%20stuff"
```

--------------------------------

### Strapi Utilities

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/quick-reference.md

Access utility composables for getting the Strapi base URL, version, token, user, constructing media URLs, and using the low-level HTTP client.

```typescript
// Get base URL
const url = useStrapiUrl()

// Get version
const version = useStrapiVersion()

// Get token
const token = useStrapiToken()

// Get/manage user
const user = useStrapiUser()

// Construct media URL
const imageUrl = useStrapiMedia('/uploads/image.jpg')

// Low-level HTTP client
const client = useStrapiClient()
const data = await client('/endpoint', { method: 'GET' })
```

--------------------------------

### Pagination by Offset

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/types.md

Defines pagination parameters for Strapi v4 and v5 when paginating by offset. Includes start index and limit, with an option to include the total count.

```typescript
export interface PaginationByOffset {
  start: number
  limit: number
  withCount?: boolean
}
```

--------------------------------

### Get Full Media URL

Source: https://github.com/nuxt-modules/strapi/blob/main/docs/content/3.usage.md

A helper composable to generate the full URL for media assets. It automatically handles both relative paths from self-hosted instances and absolute URLs from Strapi Cloud.

```vue
<script setup>
const imageUrl = useStrapiMedia('/uploads/image.png')
</script>
```

--------------------------------

### Get Configured Strapi Version

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/composables-core.md

Returns the configured Strapi version ('v5', 'v4', or 'v3') from the Nuxt runtime configuration. Use this to conditionally apply logic based on the Strapi version.

```typescript
import { useStrapiVersion } from '#imports'

const version = useStrapiVersion()

if (version === 'v5') {
  // Use v5-specific API
} else if (version === 'v4') {
  // Use v4-specific API
}
```

--------------------------------

### Example: Delete with Locale

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/api-v5.md

Deletes a specific locale version of an article entry.

```typescript
const client = useStrapi<Article>()

// Delete with locale (deletes specific locale)
await client.delete('articles', 'doc123', {
  locale: 'fr'
})
```

--------------------------------

### Example: Delete Single Entry

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/api-v5.md

Demonstrates deleting a single article entry by its ID.

```typescript
const client = useStrapi<Article>()

// Delete single entry
await client.delete('articles', 'doc123')
```

--------------------------------

### Example: Update Specific Fields

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/api-v5.md

Updates only a specific field, such as 'views', on an existing article.

```typescript
const client = useStrapi<Article>()

// Update specific fields
const partial = await client.update('articles', 'doc123', {
  views: 42
})
```

--------------------------------

### Request Parameters: Pagination (v3)

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/README.md

Use `_limit` and `_start` for pagination in Strapi v3.

```typescript
{ _limit: 20, _start: 40 }
```

--------------------------------

### Initialize Strapi Client

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/api-v5.md

Initialize the Strapi client with a generic type for the content you expect to retrieve.

```typescript
export const useStrapi = <T>(): StrapiV5Client<T>
```

--------------------------------

### Example: Overwrite Mode Update

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/api-v5.md

Updates an entry by providing an object that completely replaces the existing document's data.

```typescript
const client = useStrapi<Article>()

// Overwrite mode (data becomes entire body)
const overwritten = await client.update('articles', {
  title: 'Completely New'
})
```

--------------------------------

### Minimal Nuxt Strapi Module Configuration

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/module-configuration.md

Demonstrates the most basic configuration for the Nuxt Strapi module, specifying only the Strapi API URL.

```typescript
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxtjs/strapi'],
  strapi: {
    url: 'http://localhost:1337'
  }
})
```

--------------------------------

### stringify Example: Null Handling

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/utilities.md

Shows that `stringify` encodes `null` values as the string 'null', while `undefined` values are skipped.

```typescript
stringify({
  field: null
})
// Returns: "field=null"

// Undefined is skipped
stringify({
  field: undefined
})
// Returns: ""
```

--------------------------------

### ModuleOptions

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/api-index.md

Configuration options for the Nuxt Strapi module.

```APIDOC
## ModuleOptions

### Description
Configuration options for the Nuxt Strapi module.

### Properties
- `url?: string`
- `token?: string`
- `prefix?: string`
- `admin?: string`
- `version?: 'v5' | 'v4' | 'v3'`
- `cookie?: CookieOptions`
- `cookieName?: string`
- `auth?: AuthOptions`
- `devtools?: boolean`

### Location
`src/module.ts`

### Documentation
[module-configuration.md](./module-configuration.md)
```

--------------------------------

### stringify Example: Undefined Values

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/utilities.md

Illustrates that `stringify` skips keys with `undefined` values, ensuring they are not included in the query string.

```typescript
import { stringify } from '~/src/runtime/utils/stringify'

// Undefined values (skipped)
stringify({
  name: 'John',
  email: undefined
})
// Returns: "name=John" (email omitted)
```

--------------------------------

### create

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/api-v5.md

Creates a new entry for a specified content type with the provided data.

```APIDOC
## create

### Description
Creates a new entry for a given content type. You can provide partial data for the new entry.

### Method
`create<F = T>(contentType: string, data: Partial<F>, params?: Omit<Strapi5RequestParams<F>, 'filters'>): Promise<Strapi5ResponseSingle<F>>`

### Parameters
#### Path Parameters
None

#### Query Parameters
- **contentType** (string) - Required - Plural content type name.
- **data** (Partial<F>) - Required - Partial data for the new entry.
- **params** (Omit<Strapi5RequestParams<F>, 'filters'>) - Optional - Query parameters.

### Request Example
```typescript
const client = useStrapi<Article>()

const newArticle = await client.create('articles', {
  title: 'My New Article',
  content: 'This is the content.'
})
```

### Response
#### Success Response (200)
- **data** (Strapi5ResponseData<F>) - The newly created content entry.
- **meta** (Strapi5ResponseMeta) - Metadata about the response.

```typescript
interface Strapi5ResponseSingle<T> {
  data: Strapi5ResponseData<T>
  meta: Strapi5ResponseMeta
}
```
```

--------------------------------

### AuthOptions

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/api-index.md

Options for controlling the fetch parameters for `/users/me`.

```APIDOC
## AuthOptions

### Description
Options for controlling the fetch parameters for `/users/me`.

### Properties
- `populate?: string | string[]`
- `fields?: string | string[]`
```

--------------------------------

### create

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/api-v5.md

Creates a new entry in a specified content type. You can provide data for fields and optionally include query parameters like locale.

```APIDOC
## create

### Description
Creates a new entry.

### Method
POST (inferred)

### Endpoint
`/api/:contentType` (inferred)

### Parameters
#### Path Parameters
- `contentType` (string) - Yes - Plural content type name

#### Query Parameters
- `params` (Omit<Strapi5RequestParams<F>, 'filters'>) - No - Query parameters

#### Request Body
- `data` (Partial<F>) - Yes - Object with fields to create. Wrapped in `{ data: {...} }

### Request Example
```typescript
const client = useStrapi<Article>()
const response = await client.create('articles', { title: 'New Article' })
```

### Response
#### Success Response (200)
- `data` (Strapi5ResponseSingle<F>) - The created entry

#### Response Example
```json
{
  "data": {
    "id": 1,
    "attributes": {
      "title": "New Article",
      "createdAt": "2023-10-27T10:00:00.000Z",
      "updatedAt": "2023-10-27T10:00:00.000Z"
    }
  },
  "meta": {}
}
```
```

--------------------------------

### Get Provider Authentication URL

Source: https://github.com/nuxt-modules/strapi/blob/main/docs/content/4.auth.md

Generates the correct URL for authenticating with an external provider like GitHub. Accepts a StrapiAuthProvider.

```vue
<script setup lang="ts">
const { getProviderAuthenticationUrl } = useStrapiAuth()

const onClick = () => {
  window.location.href = getProviderAuthenticationUrl('github')
}
</script>
```

--------------------------------

### Strapi Configuration via Environment Variables

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/module-configuration.md

Shows how to configure Strapi URL and Token using environment variables. The module automatically loads these variables if not explicitly set in the Nuxt config.

```bash
STRAPI_URL=https://api.example.com
STRAPI_TOKEN=abc123token
```

```typescript
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxtjs/strapi']
  // url and token loaded from env vars automatically
})
```

--------------------------------

### Fetch a List of Restaurants

Source: https://github.com/nuxt-modules/strapi/blob/main/docs/content/3.usage.md

Fetches a list of restaurant documents using the `find` method from the `useStrapi` composable. Ensure the `Restaurant` type is imported.

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

const { find } = useStrapi()

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

--------------------------------

### Request Parameters: Pagination (v4/v5)

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/README.md

Control pagination by specifying page number and page size, or by using start offset and limit.

```typescript
// By page
{ pagination: { page: 2, pageSize: 20 } }
// By offset
{ pagination: { start: 40, limit: 20 } }
```

--------------------------------

### Simple String Query with useStrapiGraphQL

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/composables-graphql.md

Demonstrates how to perform a basic GraphQL query using a string literal with the useStrapiGraphQL composable. Ensure the response type matches your query structure.

```typescript
const strapiGraphQL = useStrapiGraphQL()

interface ArticlesResponse {
  articles: Array<{
    id: string
    title: string
    content: string
  }> 
}

const response = await strapiGraphQL<ArticlesResponse>(`
  query {
    articles {
      id
      title
      content
    }
  }
`)

console.log(response.articles)
```

--------------------------------

### Type-Safe Sorting Example

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/types.md

Illustrates how to sort articles by 'title' in ascending order and 'views' in descending order. The sorting is type-safe against the Article type.

```typescript
const sorted = await client.find('articles', {
  sort: ['title:asc', 'views:desc']
  // Only allows actual Article fields
})
```

--------------------------------

### Type-Safe Field Selection Example

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/types.md

Shows how to select specific fields from articles to retrieve only the 'title' and 'slug'. This ensures only existing fields are requested.

```typescript
const summary = await client.find('articles', {
  fields: ['title', 'slug'] as const
  // Only allows fields that exist in Article type
})
```

--------------------------------

### Use Strapi with Default Data Model

Source: https://github.com/nuxt-modules/strapi/blob/main/docs/content/3.usage.md

Demonstrates how to use the `useStrapi` composable with a default data model for all methods. The type is inferred from the generic parameter.

```typescript
const { findOne } = useStrapi<Course>()

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

--------------------------------

### stringify Example: Complex Nested Structure

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/utilities.md

Demonstrates `stringify`'s capability to handle deeply nested objects and arrays, including logical OR conditions.

```typescript
import { stringify } from '~/src/runtime/utils/stringify'

// Complex nested structure
stringify({
  filters: {
    $or: [
      { title: 'Article' },
      { published: true }
    ]
  }
})
// Returns: "filters[$or][0][title]=Article&filters[$or][1][published]=true"
```

--------------------------------

### Get Logged-in User

Source: https://github.com/nuxt-modules/strapi/blob/main/docs/content/4.auth.md

Access the currently logged-in user's information from anywhere in your Nuxt application using the `useStrapiUser` composable. This is automatically imported.

```typescript
const user = useStrapiUser()
```

--------------------------------

### Get Strapi Version

Source: https://github.com/nuxt-modules/strapi/blob/main/docs/content/3.usage.md

A helper composable to retrieve the configured Strapi version. This value is used internally by `useStrapiUrl` to determine the correct API endpoint.

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

--------------------------------

### register

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/composables-auth.md

Registers a new user with provided details and returns the JWT and user information.

```APIDOC
## register

### Description
Registers a new user and returns JWT and user.

### Method
`register(data: StrapiRegistrationData) => Promise<StrapiAuthenticationResponse>`

### Parameters
#### Path Parameters
- **data** (StrapiRegistrationData) - Required - Object with `username`, `email`, `password` and optional custom fields
  - **data.username** (string) - Optional - Username
  - **data.email** (string) - Required - User email (required)
  - **data.password** (string) - Required - User password (required)

### Returns
`Promise<StrapiAuthenticationResponse>`
```

--------------------------------

### Get Strapi URL Endpoint

Source: https://github.com/nuxt-modules/strapi/blob/main/docs/content/3.usage.md

A helper composable to retrieve the Strapi URL endpoint. This is used internally by `useStrapiClient` to construct API request URLs.

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

--------------------------------

### Selective Relation Population

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/README.md

Control which relations are populated in your API responses to minimize data transfer. This example shows how to fetch only the 'name' field of the 'author' relation.

```typescript
{ populate: { author: { fields: ['name'] } } }
```

--------------------------------

### Create a New Entry

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/api-v5.md

Use the `create` method to add a new entry to a content type. Provide the content type name and the data for the new entry.

```typescript
const client = useStrapi<Article>()
const response = await client.create('articles', { title: 'New Article' })
```

--------------------------------

### useStrapiMedia(path: string): string

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/api-index.md

Constructs absolute URLs for media files by accepting relative paths from Strapi responses and joining them with the configured base URL.

```APIDOC
## useStrapiMedia(path: string): string

### Description
Constructs absolute URLs for media files by accepting relative paths from Strapi responses and joining them with the configured base URL. Returns unchanged if already an absolute URL.

### Parameters
- **path** (string) - The relative path of the media file from Strapi.
```

--------------------------------

### Create Article with Relations

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/quick-reference.md

Create a new article, setting its title, content, author, and category. Ensure authorId and categoryId are defined.

```typescript
const newArticle = await client.create('articles', {
  title: 'My Article',
  content: 'Content here',
  author: authorId,
  category: categoryId
})
```

--------------------------------

### useStrapiClient

Source: https://github.com/nuxt-modules/strapi/blob/main/docs/content/3.usage.md

A wrapper around Nuxt's `$fetch` helper, utilizing `ofetch`. This composable allows interaction with custom Strapi endpoints not covered by the `useStrapi` composable.

```APIDOC
## useStrapiClient

### Description
Composable function that provides a client for making requests to custom Strapi API endpoints.

### Arguments
- **url** (string) - The endpoint URL to fetch.
- **fetchOptions** (FetchOptions) - Optional. Options to configure the fetch request, compatible with `ofetch`.

### Returns
- **Promise<T>** - A promise that resolves with the fetched data.

### Request Example
```javascript
import type { Restaurant } from '~/types';

const client = useStrapiClient();

// Example of making a POST request to create a new restaurant
const newRestaurant = await client<Restaurant>('/restaurants', {
  method: 'POST',
  body: { name: 'My new restaurant' }
});
```
```

--------------------------------

### Runtime Configuration for Strapi URL

Source: https://github.com/nuxt-modules/strapi/blob/main/docs/content/2.setup.md

Configure Strapi URLs at runtime using Nuxt's runtime config. This allows for separate client and server configurations.

```typescript
export default defineNuxtConfig({
  // Example of separate client/server URLs
  runtimeConfig: {
    strapi: {
      url: 'http://localhost:1337'
    },
    public: {
      strapi: {
        url: 'http://localhost:1337'
      }
    }
  }
})
```

--------------------------------

### Register New User

Source: https://github.com/nuxt-modules/strapi/blob/main/docs/content/4.auth.md

Create a new user account in the database. This method accepts user credentials and optional custom fields like `phoneNumber`. It sets the default role to 'Authenticated'.

```vue
<script setup lang="ts">
const { register } = useStrapiAuth()
const router = useRouter()

const onSubmit = async () => {
  try {
    await register({ username: '', email: '', password: '', phoneNumber: '' })

    router.push('/authenticated-page')
  } catch (e) {}
}
</script>
```

--------------------------------

### useStrapiToken

Source: https://github.com/nuxt-modules/strapi/blob/main/docs/content/4.auth.md

Retrieve the JWT token used for authentication. This helper is used internally to get the `strapi_jwt` cookie and falls back to the config variable `token` if the cookie does not exist.

```APIDOC
## useStrapiToken

### Description
Retrieve the JWT token used for authentication. This helper is used internally to get the `strapi_jwt` cookie and falls back to the config variable `token` if the cookie does not exist.

### Usage
```ts
const token = useStrapiToken()
```
```

--------------------------------

### useStrapiGraphQL()

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/api-index.md

Returns an async function for executing GraphQL queries against the Strapi API, accepting string queries or DocumentNode objects with optional variables.

```APIDOC
## useStrapiGraphQL()

### Description
Returns an async function for executing GraphQL queries against the Strapi API, accepting string queries or DocumentNode objects with optional variables.

### Method Signature
```typescript
<T>(query: string | DocumentNode, variables?: StrapiGraphqlVariables): Promise<T>
```
```

--------------------------------

### useStrapiMedia

Source: https://github.com/nuxt-modules/strapi/blob/main/docs/content/3.usage.md

A helper composable to construct the full URL for media assets. It automatically handles both relative paths from self-hosted instances and absolute URLs from Strapi Cloud.

```APIDOC
## useStrapiMedia

### Description
Composable function to generate the complete URL for Strapi media assets.

### Arguments
- **path** (string) - The relative path or absolute URL of the media asset provided by Strapi.

### Returns
- **string** - The full, accessible URL of the media asset.

### Request Example
```javascript
const imageUrl = useStrapiMedia('/uploads/image.png');
// imageUrl will be the full URL to the image
```
```

--------------------------------

### Create Strapi HTTP Client

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/composables-core.md

Instantiates an authenticated HTTP client for making requests to the Strapi API. Automatically includes the authorization token and handles query parameter conversion. Use for any authenticated API interaction.

```typescript
import { useStrapiClient } from '#imports'

const client = useStrapiClient()
```

--------------------------------

### Detect Strapi Version

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/quick-reference.md

Get the Strapi version using `useStrapiVersion()`. Use conditional logic to adapt API calls based on the detected version (v5, v4, or v3).

```typescript
const version = useStrapiVersion()

if (version === 'v5') {
  // Use documentId
} else if (version === 'v4') {
  // Use numeric id, attributes wrapper
} else if (version === 'v3') {
  // Use numeric id, flat data
}
```

--------------------------------

### Pagination Types for Strapi API

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/api-v5.md

Defines interfaces for different pagination strategies: by page number (page, pageSize) and by offset (start, limit). Includes response types for both methods.

```typescript
// Pagination by page number
interface PaginationByPage {
  page: number
  pageSize: number
  withCount?: boolean
}

// Pagination by offset
interface PaginationByOffset {
  start: number
  limit: number
  withCount?: boolean
}

// Response pagination (by page)
interface MetaResponsePaginationByPage {
  page: number
  pageSize: number
  pageCount: number
  total: number
}

// Response pagination (by offset)
interface MetaResponsePaginationByOffset {
  start: number
  limit: number
  total: number
}

```

--------------------------------

### Use Strapi URL

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/api-index.md

Returns the base Strapi API URL. For v3, it returns the raw URL, while for v4/v5, it returns the URL with the configured prefix.

```typescript
useStrapiUrl(): string
```

--------------------------------

### Get OAuth Provider Authentication URL

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/composables-auth.md

Constructs the URL needed to initiate the OAuth authentication flow with a specified provider. Accepts provider names like 'github', 'google', etc.

```typescript
const { getProviderAuthenticationUrl } = useStrapiAuth()

const githubUrl = getProviderAuthenticationUrl('github')
// Returns: "http://localhost:1337/connect/github"

const googleUrl = getProviderAuthenticationUrl('google')
// Returns: "http://localhost:1337/connect/google"
```

--------------------------------

### Handle Strapi v5 Not Found Error (404)

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/errors.md

Implement error handling for Strapi v5's 404 Not Found errors when attempting to retrieve a non-existent resource. Logs a 'Article not found' message.

```typescript
try {
  const article = await client.findOne('articles', 'nonexistent-id')
} catch (error) {
  const e = error as Strapi5Error
  if (e.error.status === 404) {
    console.error('Article not found')
  }
}
```

--------------------------------

### Get Strapi API Base URL

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/composables-core.md

Retrieves the base URL for the Strapi API, including the prefix for v4/v5. Use this to construct URLs for direct API access or when integrating with other services.

```typescript
import { useStrapiUrl } from '#imports'

const baseUrl = useStrapiUrl()
console.log(baseUrl)
// v5: "http://localhost:1337/api"
// v3: "http://localhost:1337"
```

--------------------------------

### ModuleOptions Interface

Source: https://github.com/nuxt-modules/strapi/blob/main/_autodocs/module-configuration.md

Defines the available configuration options for the @nuxtjs/strapi module.

```typescript
export interface ModuleOptions {
  url?: string
  token?: string
  prefix?: string
  admin?: string
  version?: 'v5' | 'v4' | 'v3'
  cookie?: CookieOptions
  cookieName?: string
  auth?: AuthOptions
  devtools?: boolean
}
```