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 };
      });
  },
  puted: {
    styles() {
      return landingPageCss;
    }
  },
  ponents: {
    priceBox,
    contact,
    home,
    aboutUs,
    footerDiv
  }
};

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 };
      });
  },
  puted: {
    styles() {
      return landingPageCss;
    }
  },
  ponents: {
    priceBox,
    contact,
    home,
    aboutUs,
    footerDiv
  }
};

• javascript
• vue.js
• axios
• nuxt.js
• contentful

• have you tried outputting the contents of process.env.CONTENTFUL_ENV_ACCESS_TOKEN? Maybe the environment isn't being loaded correctly? – Marcus Ilgner Commented Mar 21, 2020 at 20:38
• @milgner Yes, it doesn't work :( – BobiDaHombre Commented Mar 21, 2020 at 23:09
• So the question is: how are you setting the environment? Are you using https://www.npmjs./package/dotenv? Via another mechanism? – Marcus Ilgner Commented Mar 21, 2020 at 23:12
• Yes, I use dotenv – BobiDaHombre Commented Mar 22, 2020 at 2:08
• 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 Commented Mar 22, 2020 at 13:40

2 Answers 2

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./watch/using-env-files-with-nuxt

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