Can you only use the latest version of this module with typescript? What about normal nuxt?

[EmilyFlocc]

Apologies if I am missing something, but the latest version of this strapi module documentation https://strapi.nuxtjs.org/usage/ is all showing typescript examples. Can you still use this module with standard nuxt js (eg. this.$strapi.find() as with the older version)? If so, can you please update the docs accordingly because I think they are very misleading, its not clear what you can do!

Also, is there support for if you are using strapi v4 but nuxt v2? Or do you have to upgrade to nuxt v3? I find nuxt v3 has issues with some of the other packages I use (using nuxt 2 with bridge), but would like to use the latest version of strapi if I can.

Thanks!

[benjamincanac]

Hello @EmilyFlocc,

The latest version of this module v1.x.x is only compatible with nuxt3 and nuxt-bridge (2.16.0), as mentioned in the docs if you want to use this module for Nuxt 2, check out the documentation of the v0 module: https://strapi-v0.nuxtjs.org. So if you're using bridge you can take full advantage of the latest version of this module

Unfortunately, the v0 version of the module for Nuxt 2 does not support Strapi v4, however you can use the Strapi SDK made by @Stun3R, here is the details: https://github.com/nuxt-community/strapi-module/issues/163#issuecomment-1012939655.

[Tragio]

@benjamincanac not sure if I'm doing something wrong 🤔

I'm using Nuxt Bridge with "@nuxtjs/strapi": "npm:@nuxtjs/strapi-edge@latest"

<script>
export default {
  setup() {
    const { find } = useStrapi4()
    console.log(find)
  },
}
</script>

and I got 'useStrapi4' is not defined.

I have the module defined in my nuxt.config.js and in my buildModules.

Thank you very much 🙏

[luke-z]

Hi @Tragio

Did you install the package as a dev dependency? yarn add -D @nuxtjs/strapi

Btw: You don't need to use the edge channel anymore to use v1 of the module :)

[Tragio]

Hi @Tragio

Did you install the package as a dev dependency? yarn add -D @nuxtjs/strapi

Btw: You don't need to use the edge channel anymore to use v1 of the module :)

Hmm, I think the problem was with ESLint. It should work now 😄 the only question remaining for me is, is it only be able to be used with script setup? Or is there any way I'm unaware that it can be used in Options API? 🤔

PS: Why also not inject it, or provide a way to inject globally so it can be easier to upgrade from older projects? Maybe @benjamincanac has a reply for it?

[luke-z]

@Tragio this example uses Nuxt3 & v1.2.0 of the strapi module:

pages/index.vue

<template>
  <div>Strapi Test</div>
</template>

<script>
export default {
  data() {
    return {
      contentType: "subscriptions",
    };
  },
  methods: {
    async testFind() {
      const { find } = useStrapi4();
      const res = await find(this.contentType);

      console.log(res);
    },
  },
  mounted() {
    this.testFind();
  },
};
</script>

So it is possible to use the composables inside of the Options API

[Tragio]

@Tragio this example uses Nuxt3 & v1.2.0 of the strapi module:

pages/index.vue

<template>
  <div>Strapi Test</div>
</template>

<script>
export default {
  data() {
    return {
      contentType: "subscriptions",
    };
  },
  methods: {
    async testFind() {
      const { find } = useStrapi4();
      const res = await find(this.contentType);

      console.log(res);
    },
  },
  mounted() {
    this.testFind();
  },
};
</script>

So it is possible to use the composables inside of the Options API

@luke-z thank you very much. I tried but I have an Uncaught (in promise) Error: nuxt app instance unavailable 🤔

[jbool24]

@Tragio

Hi @Tragio

Did you install the package as a dev dependency? yarn add -D @nuxtjs/strapi

Btw: You don't need to use the edge channel anymore to use v1 of the module :)

Dependency installed but similar problems here using the following:

"devDependencies": {
   "@nuxtjs/strapi": "^1.3.1",
   "@nuxtjs/tailwindcss": "^5.0.0-4",
   "nuxt3": "^3.0.0-27437402.494f85a"
 }

Issues in the nuxt.config.ts

import { defineNuxtConfig } from 'nuxt3';

// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
  typescript: {
    strict: true,
  },
  buildModules: ['@nuxtjs/tailwindcss', '@nuxtjs/strapi'],
  css: ['~/assets/css/animate.css', '~/assets/css/style.css'],
  strapi: { // This whole object is linted by ts (see below)
    url: process.env.STRAPI_URL || 'http://localhost:9001',
    prefix: '/api',
    version: 'v4',
    cookie: {},
  }, 
});

Argument of type '{ typescript: { strict: true; }; buildModules: string[]; css: string[]; strapi: { url: string; prefix: string; version: string; cookie: {}; }; }' is not assignable to parameter of type 'NuxtConfig'. Object literal may only specify known properties, and 'strapi' does not exist in type 'NuxtConfig'.ts(2345)

Also errors in index.vue component

<template>
  <div>
    <Header />
    <Footer />
  </div>
</template>

<script lang="ts">
import type { Strapi4Response } from '@nuxtjs/strapi' //<-- lint error here -- 
/* Module '"@nuxtjs/strapi"' has no exported member 'Strapi4Response'. 
* Did you mean to use 'import Strapi4Response from "@nuxtjs/strapi"' instead?ts(2614)
*/

import { defineComponent } from "vue";
import Header from '../components/sections/header/Header.vue'
import Footer from "../components/sections/footer/Footer.vue";


export default defineComponent({
  components: {
    Header,
    Footer,
  },
  layout: 'base',
  setup() {
    const { find } = useStrapi4(); // <-- lint error here -- "Cannot find name 'useStrapi4'.ts(2304)"

    const homepage = find<Strapi4Response>('homepage');

    console.log(homepage);

    return {

    }
  }
})
</script>

[benjamincanac]

@jbool24 We currently have an issue with exported types I have to look into. For now, you can import types like this:

import type { Strapi4Response } from '@nuxtjs/strapi/dist/runtime/types'

[Tragio]

@benjamincanac for my issue, is there any idea why its not working for the Options API?

[msoler75]

I'm in the process of switching to nuxt 3 and strapi v4 and it would be easier if it didn't force me to use typescript. Besides I didn't know from how the strapi types (models) are imported.

I've resolved with this types-4-strapi generator

After creating the types, I use this code

<script setup lang="ts">
import type { Strapi4Response } from '@nuxtjs/strapi/dist/runtime/types' // @benjamincanac comment
import type { Restaurant } from '@/../strapi4/types/restaurant'
const { find } = useStrapi4()
const response = await find<Strapi4Response<Restaurant>>('restaurants')
</script>

[EmilyFlocc]

Hi @benjamincanac thank you for explaining, and sorry for the delayed response (had notifications off, oops!), I have taken the plunge and am using nuxt 3 and strapi 4 for my project now.

In the docs, to use the Find One call (for example) you do the following:

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

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

const response = await findOne<Strapi4Response<Restaurant>>('restaurants', route.params.id)
</script>

But my code errors because ~/types isn't found. Do you have an example of this types file?

import type { Restaurant } from '@/../strapi4/types/restaurant' as above but this also errors with "Internal server error: [@vue/compiler-sfc] Unexpected token, expected "from" (12:12)"

[benjamincanac]

@EmilyFlocc Here Restaurant is an example, types are not bundled with the library, you have to create them yourself ~/types/index.ts for example.

[benjamincanac]

@Tragio Sorry for the late answer, composables are only usable in setup hook as mentioned here https://vuejs.org/guide/reusability/composables.html#conventions-and-best-practices, here is also an example on how to use composables with Options API: https://vuejs.org/guide/reusability/composables.html#using-composables-in-options-api

[Theo-Rige]

Hi, does anyone have an example of the contents of the "/types" folder and a type declaration file because nuxt cannot find my @/types module.

[anon36]

@Theo-Rige , try this: interface Restaurant { title: string; content: string; }

export { Restaurant };

The file I created in types-Folder is called index.d.ts