Dfyjkt

I recently converted my site from Drupal to Vue, and it's currently running as a regular Vue app. For SEO (and other reasons), I'm working on converting it to use Nuxt, and I'm having trouble figuring out how to set the private API key as an environment variable and use it in a component with the Butter library and asyncData(). Using the Butter docs for Vue, I have it working fine in a SPA, but I can't get the same thing to work in Nuxt.

In my SPA, I just added API_KEY to dev.env.js, and then I have these two lines in buttercms.js:

import Butter from 'buttercms'
export const butter = Butter(process.env.API_KEY)

and then in my component:

<script>
import butter from "@/buttercms";
...
methods: 
 getPost() 
 butter.post.retrieve(this.$route.params.slug)
 .then(res => 
 this.post = res.data;
 )
 .catch(res => 
 console.log(res);
 );
 
,

which works fine. In Nuxt, I set my API key in nuxt.config.js like so:

env: '1234567890'
,

the same contents for buttercms.js as listed above, and then in my component:

<script>
import butter from "buttercms";
export default {
 asyncData(context) 
 return butter.page
 .retrieve("static_page", "about-smga")
 .then(res => 
 console.log(res.data.data);
 return 
 page: res.data.data
 ;
 )
 .catch(res => 
 console.log(res);
 );
 ,
...
</script>

However, when I run it, I get an error that says Cannot read property 'page' of undefined, which tells me that the Butter library isn't being used. Obviously I'm doing something wrong, but I'm not sure what. What do I need to change to be able to use butter in my asyncData() call?

You are importing butter class from buttercms module in your component. But its not initialized. You can put your initialization into plugins/buttercms.js and add it into nuxt.config into plugin section.

import Butter from 'buttercms'

export default (ctx, inject) => 
 inject('butter', Butter(process.env.API_KEY))

And then you can reference initialzied instance via this.$butter in your components