@nuxtjs/strapi

The @nuxtjs/strapi module provides several key capabilities for building Strapi-powered Nuxt applications:

• Nuxt Ready: Includes auto-imported composables and Nuxt DevTools integration.
• Multi-version Support: Compatible with Strapi v5, v4, and v3.
• Authentication: Provides the useStrapiUser composable to manage user authentication.
• RESTful Interaction: Supports all HTTP methods for interacting with your Strapi API.
• Error Handling: Includes hooks to handle API errors and improve user experience.
• TypeScript Support: Composables support types augmentation for better developer experience.

The module provides several capabilities for integrating Strapi with Nuxt:

• Nuxt 3 ready: Fully compatible with the Nuxt 3 ecosystem.
• Strapi Version Compatibility: Supports Strapi v5, v4, and v3.
• Authentication: Built-in support for Strapi authentication flows.
• RESTful methods: Provides methods to interact with Strapi's REST API.
• Error Handling: Includes hooks to intercept and handle errors.
• TypeScript support: Full type definitions for a better developer experience.

The @nuxtjs/strapi module acts exclusively as a client for a Strapi backend. It provides the connection between your Nuxt application and a Strapi server.

Important: This module does not install, run, or bundle the Strapi CMS itself. You must run and host your Strapi server separately.

To leverage server-side rendering (SSR) when fetching data from Strapi, wrap the useStrapi composable methods inside Nuxt's useAsyncData. This ensures data is fetched on the server and hydrated on the client.

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

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

const { data, pending, refresh, error } = await useAsyncData(
  'restaurant',
  () => findOne<Restaurant>('restaurants', route.params.id)
)
</script>

Forgot Password

Sends an email to the user containing a link to your reset password page. The link includes a URL parameter code required for the next step.

const { forgotPassword } = useStrapiAuth()
const onSubmit = async () => {
  try {
    await forgotPassword({ email: '' })
    router.push('/')
  } catch (e) {}
}

Reset Password

Updates the user's password using the code received from the email.

const { resetPassword } = useStrapiAuth()
const onSubmit = async () => {
  try {
    await resetPassword({ code: '', password: '', passwordConfirmation: '' })
    router.push('/authenticated-page')
  } catch (e) {}
}

To use .gql files directly in your components, you need to configure a plugin like @rollup/plugin-graphql in your Nuxt/Vite configuration to process the imports.

1. Configure Vite in nuxt.config.ts:

import gql from "@rollup/plugin-graphql"

export default defineNuxtConfig({
  // ...
  vite: {
    plugins: [ gql() ]
  }
})

2. Use the query in a component:

<script setup lang="ts">
import query from "./query/example-query.gql"
const route = useRoute()
const graphql = useStrapiGraphQL()

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

3. Fix TypeScript errors (if necessary): If TypeScript cannot find the .gql module, create a globals.d.ts file:

declare module '*.gql' {
  import { DocumentNode } from 'graphql'
  const Schema: DocumentNode
  export = Schema
}

To allow the Strapi Admin to be embedded in the Nuxt Devtools, you must modify the strapi::security middleware configuration in your Strapi project's config/middlewares.js file. You need to update the contentSecurityPolicy directives to include frameAncestors for http://localhost:* and 'self'.

module.exports = [
  'strapi::errors',
  {
    name: 'strapi::security',
    config: {
      contentSecurityPolicy: {
        directives: {
          frameAncestors: ['http://localhost:*', 'self']
        }
      }
    }
  },
  'strapi::cors',
  'strapi::poweredBy',
  'strapi::logger',
  'strapi::query',
  'strapi::body',
  'strapi::session',
  'strapi::favicon',
  'strapi::public'
]

To use the Strapi Admin directly within the Nuxt Devtools, you must perform two steps: configure your Strapi security middleware to allow embedding and enable the devtools option in your Nuxt configuration.

1. Configure Strapi Security Middleware

Strapi uses helmet for security, which by default prevents the admin panel from being embedded in frames via the Content Security Policy directive frame-ancestors 'self'.

In your Strapi project, open config/middlewares.js and update the strapi::security middleware to allow http://localhost:* and self in the frameAncestors directive:

2. Enable Devtools in Nuxt

In your Nuxt project, open nuxt.config.ts and set the strapi.devtools option to true.

export default defineNuxtConfig({
  strapi: {
    devtools: true
  }
})

You can access the latest features and bug fixes before official releases by using pkg.pr.new. This allows you to install specific commits or PRs directly from your package.json.

To use a preview release, replace your package version with the specific commit hash or PR number URL.

{
  "dependencies": {
    "@nuxtjs/strapi": "https://pkg.pr.new/@nuxtjs/strapi@95260d0"
  }
}

To add the Strapi module to your Nuxt project, use the Nuxt CLI. This will automatically register the module in your nuxt.config.ts file.

Note that @nuxtjs/strapi is a client for a Strapi backend. It connects your Nuxt app to a Strapi server that you run and host separately. It does not install, run, or bundle Strapi itself.

npx nuxi@latest module add strapi