Contentful with Nuxt.JS "Expected parameter accessToken"

Question

I made a page which pulls data from Contentful. The data is pulling correctly, but buttons which use functions from methods don't work. Live updating of variables (for example, using v-model) doesn't work either.

I see this error in the console:

I think this error is the problem. Does anyone know what's wrong? I have no clue how to solve it :(

My contentful.js:

const contentful = require('contentful')

const client = contentful.createClient({
  space: process.env.CONTENTFUL_ENV_SPACE_ID,
  accessToken: process.env.CONTENTFUL_ENV_ACCESS_TOKEN
})

module.exports = client

Code which pulls data:

export default {
  layout: "landing_page",
  asyncData() {
    return client
      .getEntries({
        content_type: "landingPage"
      })
      .then(entries => {
        return { contentfulData: entries.items[0].fields };
      });
  },
  computed: {
    styles() {
      return landingPageCss;
    }
  },
  components: {
    priceBox,
    contact,
    home,
    aboutUs,
    footerDiv
  }
};

have you tried outputting the contents of `process.env.CONTENTFUL_ENV_ACCESS_TOKEN`? Maybe the environment isn't being loaded correctly? — Marcus Ilgner, Mar 21 '20 at 20:38
So the question is: how are you setting the environment? Are you using `https://www.npmjs.com/package/dotenv`? Via another mechanism? — Marcus Ilgner, Mar 21 '20 at 23:12
Okay but then your question isn't about Nuxt or the Contentful API but about your environment not being loaded correctly? You should add some code about how you're loading dotenv and maybe a redacted version of your `.env` file? — Marcus Ilgner, Mar 22 '20 at 13:40

Szymon · Accepted Answer · 2020-03-22T16:23:12.860

5

The best approach is used dotenv package to that. Set your env keys in .env file.

nuxt.config.js file should contain:

const env = require('dotenv').config()

export default {
  mode: 'universal',
  ...
  env: env.parsed,
  ...
}

Look at this video: https://codecourse.com/watch/using-env-files-with-nuxt

edited Mar 22 '20 at 16:23

answered Mar 22 '20 at 16:16

Szymon

170
9

score 2 · Answer 2 · answered Mar 23 '20 at 06:38

If you use dotenv you need to do following steps:

npm install --save-dev @nuxtjs/dotenv

Then you install it as an module. Note here if you using Nuxt.js older then v2.9 then you ahve to go to nuxt.config.js and put your code into the module section:

...
   module: [
   '@nuxtjs/dotenv'
 ]
...

If there is no module section then create one.

If you using newer then v2.9 then you put it into the buildModules

  ...
   buildModules: [
   '@nuxtjs/dotenv'
 ]
...

Your variables that are saved in the .env file are now accessable through context.env or process.env

Contentful with Nuxt.JS "Expected parameter accessToken"

2 Answers2