Setting up Nuxt3 + Contentful on dev/production about tech-blog-vue3-nuxt3 HOT 4 CLOSED

@y-takebe thank you very much for your help!

I tried what you said, but it works only in production, it stops working in development.

So, I had to change some things to make it work in both environments.

In nuxt.config.js:

import { defineNuxtConfig } from "nuxt";

// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
  runtimeConfig: {
    dev: process.env.NODE_ENV !== "production",
  },
});

Then, in contentful.js:

import * as contentful from "contentful";

export default defineNuxtPlugin((nuxtApp) => {
  const config = useRuntimeConfig();
  // Workaround to make the build work on development AND production
  const createClient = config.dev ? contentful.createClient : contentful.default.createClient;
  const client = createClient({
    space: config.ctfSpaceId,
    accessToken: config.ctfCdaAccessToken,
  });
  nuxtApp.provide("contentfulClient", client);
});

Hope it can help you too.

from tech-blog-vue3-nuxt3.

Hi @thiagorossener, thanks wrote a comment.

But I’m Sorry, I trying local development now, I haven't gone that SSR and/or SSG deployment yet. In my plan, it will be a few days later.

When I was use a beta version, wrote this syntax was work.

import contentful from "contentful”;

However, When I was update to a RC version after, same happen to me.

TypeError: contentful.createClient is not a function

So, I try changed import * as … syntax and trouble was fix.

I use the latest version.

• contentful: 9.1.24
• nuxt: 3.0.0-rc.1

from tech-blog-vue3-nuxt3.

Thanks for the response @y-takebe.

I've updated my project to use [email protected] and [email protected], but I keep getting:

[nuxt] [request error] contentful.createClient is not a function

It works fine on development, but when trying SSR or SSG this happens.

I'm importing contentful like:

import * as contentful from "contentful";

Does your page work perfectly when running npm run build, then npm run start? I get an error 500 when I do that.

from tech-blog-vue3-nuxt3.

@thiagorossener

I tried.

In this case,

import * as contentful from "contentful";

Response is 500 error. But, this case:

import contentful from "contentful";

and nuxt.config.ts is:

  target: 'server',

I have few minor problem, but working.

Hope this helps a little!

from tech-blog-vue3-nuxt3.