Skip to content
Alebat

Módulo Nuxt Strapi

Este es un resumen de la documentación oficial de Nuxt, donde se detalla más a fondo la instalación y el funcionamiento del módulo de Strapi.

Instalación y configuración inicial

El siguiente comando se encargará de la instalación e inclusión del módulo en el fichero nuxt.config.ts:

npx nuxi@latest module add strapi

Si por algún casual no se incluye correctamente, simplemente hay que incluirlo en los módulos:

export default defineNuxtConfig({
  modules: [/* Otros módulos... */,'@nuxtjs/strapi'],
  // Options
})

Y habrá que configurar ciertos valores necesarios en el propio fichero de nuxt.config.ts, como la url en la que se ubica el servidor de Strapi, el prefijo, la versión de Strapi, etc. Todas estas opciones y más se pueden configurar (para más detalle consultar la documentación oficial):

export default defineNuxtConfig({
  // Options
  strapi: {
    url: process.env.STRAPI_URL || 'http://localhost:1337',
    prefix: '/api',
    admin: '/admin',
    version: 'v5',
    cookieName: 'strapi_jwt'
  }
})

Todas estas configuraciones son las que están definidas por defecto si no se define ningún valor en el nuxt.config.ts.

useStrapi

Types

Una vez configurado el módulo, se tendrán disponibles varios composables que se necesitarán para interactuar con Strapi. El más importante es useStrapi, que se encarga de la conexión con el servidor de Strapi y de la obtención de los datos. Por ejemplo:

const { findOne } = useStrapi<Course>()


// tipado a Course
findOne('courses', '123')

Como se puede ver en este caso, se puede asignar un tipado por defecto que se aplicará a todos los submétodos, que en este caso correspondería a Course. Pero también se pueden asignar tipados individuales a los distintos métodos derivados de este composable:

const { findOne } = useStrapi<Course>()


// tipado a SpecialCourse
findOne<SpecialCourse>('courses', '123')

find

Este método es el más común a la hora de obtener datos de Strapi. Se encarga de obtener todos los datos de una colección o singleType, y se puede filtrar por distintos parámetros. Un ejemplo simple incluiría lo siguiente:

import type { Restaurant } from '~/types'


const { find } = useStrapi()


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

También hay que tener en cuenta los distintos parámetros que se pueden pasar a la función find:

  • contentType: string El nombre de la colección o singleType específicos.

  • params: Strapi4RequestParams Este es el más importante, ya que se puede usar para aplicar distintos filtros, ordenar los datos, popular, etc.

      export interface Strapi4RequestParams {
        fields?: Array<string>
        populate?: string | Array<string> | object
        sort?: string | Array<string>
        pagination?: PaginationByOffset | PaginationByPage
        filters?: Record<string, unknown>
        publicationState?: 'live' | 'preview'
        locale?: StrapiLocale
      }

    • fields: Se usa para seleccionar los campos que se quieren obtener. Solo se pueden seleccionar de este modo los campos simples (string, boolean, number, etc). Los campos más complejos no serán seleccionados si no se populan.

    • populate: Se usa para obtener los campos relacionados. Se pueden pasar los nombres de los campos relacionados o un objeto con los campos que se quieren obtener. Como se ve en la interfaz, se puede pasar un string que indique el campo a popular, un array de strings que haga eso mismo, o un objeto que siga la estructura para más complejidad a la hora de popular:

      populate: {
        test_image: {
          fields: ['url']
        }
      }

    En este ejemplo se puede ver que se está populando el campo test_image y se están seleccionando los campos url. De esta forma, al popular el campo de imagen únicamente obtendrá la url de la propia imagen.

    • sort: El parámetro sort se utiliza para ordenar los resultados según uno o más campos. Puedes pasar un string con el nombre del campo o un array de strings para ordenar por múltiples campos. También puedes incluir los sufijos :asc y :desc para ordenar en orden ascendente y descendente respectivamente.

    • pagination: El parámetro pagination controla cómo se manejan los datos paginados. Se puede configurar usando dos enfoques diferentes:

        1. Pagination by Offset: Se define el total de elementos (limit) y desde qué índice se deben empezar a mostrar (start). Por ejemplo:
        pagination: {
          start: 0,
          limit: 10
        }
        1. Pagination by Page: Se define la página actual (page) y cuántos elementos se deben incluir por página (pageSize). Por ejemplo:
        pagination: {
          page: 1,
          pageSize: 10
        }

    • filters: El parámetro filters permite aplicar condiciones para seleccionar los datos que se desean obtener. Puedes usar operadores lógicos ($eq, $ne, $lt, $lte, $gt, $gte, $in, $notIn, $contains, $notContains, $null, $notNull, $between, $or, $and, etc.) para construir filtros avanzados. Por ejemplo:

        filters: {
          price: {
            $gte: 10,
            $lte: 50
          },
          category: {
            $eq: 'electronics'
          }
        }

    • publicationState: El parámetro publicationState se utiliza para definir si deseas obtener los datos publicados o en estado de vista previa.

      • Valores posibles: live (por defecto), preview.

    • locale: El parámetro locale se utiliza para definir el idioma de los datos que se desean obtener.

      • Valores posibles: Valores posibles: Un string que representa el código del idioma (‘en’, ‘fr’, ‘es’, etc.) o ‘all’ para obtener todos los idiomas.

  • fetchOptions: Este parámetro es muy útil cuando necesitas ajustar detalles específicos de las solicitudes HTTP, como cabeceras (headers), el método de la solicitud, o incluso parámetros de autenticación que no están cubiertos por la configuración estándar del módulo Strapi. Por ejemplo:

      const { find } = useStrapi()
    

      const response = await find('restaurants', {
        fetchOptions: {
          method: 'GET',
          headers: {
            Authorization: 'Bearer yourTokenHere',
            'Content-Type': 'application/json'
          },
        }
      })

findOne

El funcionamiento de este método es muy similar al de find, pero en este caso se obtiene un único elemento. Por ejemplo:

import type { Restaurant } from '~/types'


const id = 1
const { findOne } = useStrapi()


const response = await findOne<Restaurant>('restaurants', id)

Como se puede ver en el ejemplo, la única diferencia es que se pasa un id como segundo parámetro, y se obtiene un único elemento en lugar de una colección..

Otros

  • create: Se utiliza para crear un nuevo elemento en la base de datos de Strapi.

    • Argumentos:
      • contentType: string
      • data?: Partial<T>

  • update: Se utiliza para actualizar un elemento existente en la base de datos de Strapi.

    • Argumentos:
      • contentType: string
      • id: string | number | Partial<T>
      • data?: Partial<T>

  • delete: Se utiliza para eliminar un elemento existente en la base de datos de Strapi.

    • Argumentos:
      • contentType: string
      • id: string | number

useStrapiClient

Este composable se encarga de la conexión con el servidor de Strapi, y se puede usar para realizar peticiones HTTP personalizadas. Por ejemplo:

import type { Restaurant } from '~/types'


const client = useStrapiClient()


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

Únicamente recibe los siguientes parámetros:

  • url: La url de la colección, singleType o endpoint al que se quiere acceder.

  • fetchOptions: Funciona exactamente igual que el explicado anteriormente.

useStrapiUrl

Este composable únicamente devuelve el valor de la url de Strapi que se ha configurado en el nuxt.config.ts. Por ejemplo:

const url = useStrapiUrl()

useStrapiVersion

Este composable únicamente devuelve el valor de la versión de Strapi que se ha configurado en el nuxt.config.ts. Por ejemplo:

const version = useStrapiVersion()

Autenticación

Configuración y Almacenamiento

Por defecto, el token que se genera con los métodos de autenticación está configurado para almacenarse en una cookie llamada strapi_jwt y la caducidad de la misma está configurada para la Sesión, por lo que se perderá al cerrar el navegador. Si se quiere cambiar la configuración de la cookie, se puede hacer en el nuxt.config.ts:

export default defineNuxtConfig({
  strapi: {
    cookie: {
      path: '/',
      maxAge: 14 * 24 * 60 * 60,
      secure: process.env.NODE_ENV === 'production',
      sameSite: true
    }
  }
})

useStrapiUser

Una vez que el usuario haya iniciado sesión, puedes acceder a su información desde cualquier lugar de tu aplicación utilizando este composable.

const user = useStrapiUser()

useStrapiToken

Este composable sirve para acceder al token JWT almacenado en la cookie strapi_jwt.

const token = useStrapiToken()

useStrapiAuth

Este composable expone todos los métodos del plugin Users & Permissions de Strapi, como login, register, resetPassword y authenticateProvider.

  • login: Envía las credenciales del usuario para autenticarlo. Una vez autenticado, establece el usuario y el token anteriormente mencionados.

    • Argumentos:

  • register: Crea un nuevo usuario en la base de datos de Strapi.

    • Argumentos:

      • data: StrapiRegistrationData

          export interface StrapiRegistrationData {
            username: string
            email: string
            password: string
            // customExtraFields
          }

  • forgotPassword: Envía un email al usuario con un enlace que contiene un token para restablecer su contraseña.

  • resetPassword: Restablece la contraseña del usuario, así como realiza la asignación del usuario y del token anteriormente mencionados.

    • Argumentos:

      • data: StrapiResetPasswordData

          export interface StrapiResetPasswordData {
            code: string
            password: string
            passwordConfirmation: string
          }

  • changePassword: Cambia la contraseña del usuario.

    • Argumentos:

      • data: StrapiChangePasswordData

          export interface StrapiChangePasswordData {
            currentPassword: string
            newPassword: string
            newPasswordConfirmation: string
          }

  • sendEmailConfirmation: Reenvía el email de confirmación al correo electrónico proporcionado.

Estos son los servicios más comunes que se pueden utilizar con este composable, pero hay muchos más que se pueden consultar en la documentación oficial.