General feedback about Strapi 5 support

[olrtg]

trafficstars

I'm creating this general issue to collect some feedback from other people about the work done in past PRs to support Strapi 5 and how we can improve it. If you want it, maybe I create separate issues to track these individually.

After installing the module myself and using v5 for a while in a personal project I've found the following:

• Maybe It'll be good to document that if people want to try v5 out, aside from switching to the edge version, they should also set the version manually in the nuxt.config.ts file:

  export default defineNuxtConfig({
    strapi: {
      version: 'v5',
    },
  })
  

• For some reason, if you pass an interface instead of a type as the generic type of the useStrapi<T>() composable it will not give you the correct types. This didn't happen to me on the v4 composable and I don't even know if this is fixable (because it seems to be a TS thing) but I guess at least we should tell people to use types instead of interfaces in the docs, or even better, try to find a workaround. In my opinion, users should not be bothered with this and they should be able to use both if they want. I've created a small repro here: https://tsplay.dev/WYxeQm.
• If I do a find request to a collection to query all elements, the locale key has a null value, which differs from the current type locale?: string, I think it should be locale?: string | null instead:

For now, that's what I've found. Let me know what you think!

Related PRs:

• https://github.com/nuxt-modules/strapi/pull/424
• https://github.com/nuxt-modules/strapi/pull/425
• https://github.com/nuxt-modules/strapi/pull/426

[reslear]

1. maybe
2. same
3. agree

also need export StrapiLocale for setting out request instead types error import type { StrapiLocale } from '@nuxtjs/strapi/dist/runtime'

[BayBreezy]

1. Yes, the fact that v5 is not the default should be somewhere in the docs. Could be tricky as the default version of Strapi is now 5. The module has not been fully tested for v5.
2. I am no TS expert so I am not even sure how to approach this 🤣. That is a weird one tho. Why would types work and not interfaces?
3. Correct! locale can be null.

@reslear would the StrapiLocale be a composable? Not sure what you mean there.

[benjamincanac]

As you guys might know, I'm not actively maintaining this repository. Would you mind telling me once everything is good so I can release a major version?

[reslear]

✅ 1, 3 - fixed

2. i was thinking maybe we could just do it like v4 without generics ? like data | data []

3. I'm also thinking of exporting types like

   import type { StrapiLocale } from '#nuxt-strapi/types';
   

4. I also keep the same types between projects, I suggest adding StrapiDynamicZone, StrapiComponent, StrapiImage, StrapiSeo.

5. For dynamic editor I suggest to add information about

   • https://github.com/niklasfjeldberg/vue-strapi-blocks-renderer
   • https://github.com/freb97/nuxt-strapi-blocks-renderer

[olrtg]

@reslear 2 sounds great to me. About the other points idk. I just started using this module and Strapi, so I don't know much yet.

[Zellokr]

Hi guys, I'm trying to use useStrapi module (V5), nuxt can't find useStrapi, however I can use useStrapiUser, UseStrapiToken, useStrapiAuth, etc... do you know why?

[benjamincanac]

@Zellokr Do you use the latest Edge version?

[Zellokr]

Yes, as devDepencencies

[benjamincanac]

Could you try npm:@nuxtjs/[email protected] (latest release), sometimes the latest tag don't work that well.

[Zellokr]

It works, however type error "V5" in nuxt.config.ts still appears.

Thank you! :)

[MarijnFK]

✅ 1, 3 - fixed

2. i was thinking maybe we could just do it like v4 without generics ? like data | data []

3. I'm also thinking of exporting types like import type { StrapiLocale } from '#nuxt-strapi/types';

4. I also keep the same types between projects, I suggest adding StrapiDynamicZone, StrapiComponent, StrapiImage, StrapiSeo.

5. For dynamic editor I suggest to add information about

   • https://github.com/niklasfjeldberg/vue-strapi-blocks-renderer
   • https://github.com/freb97/nuxt-strapi-blocks-renderer

3. sounds great. With the latest i can't import any types from "@nuxtjs/strapi", i.e. import type { Strapi4ResponseData } from "@nuxtjs/strapi"; This did work in strapi v4, but seems broken now.

[derrickmehaffy]

Stopping by here from the Strapi team (as I work for Strapi) to mention that if anyone needs any information clarity on how something works or help maintain or build support for Strapi 5 please don't hesitate to stop by our Discord: https://discord.strapi.io

Or if you are in dire need of some information for this module you can email me directly: [email protected] (please don't send emails asking for normal application support but if it's related to this module then it's all good).

Thanks!

[benjamincanac]

Just released a v2.0.0, let me know if you encounter any issue with it!

[BayBreezy]

Okie! Will do

[benjamincanac]

Could you guys have a look at https://github.com/nuxt-modules/strapi/pull/445? Thanks!

[reslear]

Could you guys have a look at #445? Thanks!

the code looks good, we need to write instructions so that we can test directly from pr. or maybe build night version to npm

[SvenWesterlaken]

I found a small deprecated part in the documentation, might as well post it here so it can be considered for change:

https://strapi.nuxtjs.org/advanced#file-upload is the old way, which is not supported by strapi v5 anymore as stated per: https://docs.strapi.io/dev-docs/migration/v4-to-v5/breaking-changes/no-upload-at-entry-creation

I am currently updating my applications using this piece of code. So, if I find some time soon, I could change the documentation with a section for the old v4 way as a reference and the new way for strapi v5.

[kasperjha]

Hi guys, I'm trying to use useStrapi module (V5), nuxt can't find useStrapi, however I can use useStrapiUser, UseStrapiToken, useStrapiAuth, etc... do you know why?

I also cannot import useStrapi. The composable is not present in imports.d.ts. I'm on the latest edge version and have specified version: "v5" in nuxt config.

[Dumk0]

Hi. I have an issue with data type. I am using Strapi V5 and nuxt strapi module with version: 'v5' param in my config file.

My users.vue page:

<script setup lang="ts">
const { find } = useStrapi();

type User = {
  username: string,
  jobTitle: string,
  phone: string,
  email: string,
}
const users = await find<User>('users', { fields: ['username', 'jobTitle', 'phone', 'email'] });
</script>

<template>
  <div>
    <div v-for="user in users">
      Username: {{user.username}}
    </div>
  </div>
</template>

This causes the error: ERROR(vue-tsc) Property 'username' does not exist on type '({ username: string; jobTitle: string; phone: string; email: string; } & StrapiSystemFields)[] | Strapi5ResponseMeta'. Property 'username' does not exist on type '({ username: string; jobTitle: string; phone: string; email: string; } & StrapiSystemFields)[]'.

Despite the error in console, I get expected HTML result. And if I print users variable, I get this result:

[ { "id": 1, "documentId": "y8dvgdwjsrx341cnaho72gc3", "username": "Arna ", "jobTitle": "Accountant", "phone": "123455", "email": "[email protected]" }, { "id": 2, "documentId": "hs8pzrbgwcsly3geazvnm7sl", "username": "John", "jobTitle": "Officer", "phone": "123456", "email": "[email protected]" } ]

If I change my template to:

<template>
  <div>
    <div v-for="user in users.data">
      Username: {{user.username}}
    </div>
  </div>
</template>

then there is no errors, but also no content!

If I understand it right, users variable expected to be instance of <Strapi5ResponseMany> (with data and meta properties), but in reality it is just <User[]>.

UPDATE: only /api/users resource has this problem, the issue is coming from the Strapi Users plugin - Strapi/Strapi #12911