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
  }
};

Answer 1

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

Answer 2

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