Unable to use API key as env variable with Butter CMS library inside asyncData()
up vote
1
down vote
favorite
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: {
API_KEY: process.env.API_KEY || '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?
javascript asynchronous vue.js environment-variables nuxt.js
asked Nov 11 at 22:58
wonder95
83331531
add a comment |
up vote
1
down vote
favorite
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: {
API_KEY: process.env.API_KEY || '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?
javascript asynchronous vue.js environment-variables nuxt.js
asked Nov 11 at 22:58
wonder95
83331531
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
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: {
API_KEY: process.env.API_KEY || '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?
javascript asynchronous vue.js environment-variables nuxt.js
asked Nov 11 at 22:58
wonder95
83331531
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: {
API_KEY: process.env.API_KEY || '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?
javascript asynchronous vue.js environment-variables nuxt.js
javascript asynchronous vue.js environment-variables nuxt.js
asked Nov 11 at 22:58
wonder95
83331531
asked Nov 11 at 22:58
wonder95
83331531
asked Nov 11 at 22:58
wonder95
83331531
asked Nov 11 at 22:58
wonder95
83331531
asked Nov 11 at 22:58
wonder95
83331531
83331531
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
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
answered Nov 12 at 11:20
Aldarund
7,07743259
Well, since I'm calling Butter inside of asyncData(), I can't use this, since it's not available yet, and if I try $butter or just leave it as is, I get an error that butter isn't defined.
– wonder95
Nov 22 at 6:12
@wonder95 you could get it from app. ctx.app.$butter
– Aldarund
Nov 22 at 9:28
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53254092%2funable-to-use-api-key-as-env-variable-with-butter-cms-library-inside-asyncdata%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
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
answered Nov 12 at 11:20
Aldarund
7,07743259
Well, since I'm calling Butter inside of asyncData(), I can't use this, since it's not available yet, and if I try $butter or just leave it as is, I get an error that butter isn't defined.
– wonder95
Nov 22 at 6:12
@wonder95 you could get it from app. ctx.app.$butter
– Aldarund
Nov 22 at 9:28
add a comment |
up vote
0
down vote
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
answered Nov 12 at 11:20
Aldarund
7,07743259
Well, since I'm calling Butter inside of asyncData(), I can't use this, since it's not available yet, and if I try $butter or just leave it as is, I get an error that butter isn't defined.
– wonder95
Nov 22 at 6:12
@wonder95 you could get it from app. ctx.app.$butter
– Aldarund
Nov 22 at 9:28
add a comment |
up vote
0
down vote
up vote
0
down vote
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
answered Nov 12 at 11:20
Aldarund
7,07743259
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
answered Nov 12 at 11:20
Aldarund
7,07743259
answered Nov 12 at 11:20
Aldarund
7,07743259
answered Nov 12 at 11:20
Aldarund
7,07743259
answered Nov 12 at 11:20
Aldarund
7,07743259
7,07743259
Well, since I'm calling Butter inside of asyncData(), I can't use this, since it's not available yet, and if I try $butter or just leave it as is, I get an error that butter isn't defined.
– wonder95
Nov 22 at 6:12
@wonder95 you could get it from app. ctx.app.$butter
– Aldarund
Nov 22 at 9:28
add a comment |
Well, since I'm calling Butter inside of asyncData(), I can't use this, since it's not available yet, and if I try $butter or just leave it as is, I get an error that butter isn't defined.
– wonder95
Nov 22 at 6:12
@wonder95 you could get it from app. ctx.app.$butter
– Aldarund
Nov 22 at 9:28
Well, since I'm calling Butter inside of asyncData(), I can't use this, since it's not available yet, and if I try $butter or just leave it as is, I get an error that butter isn't defined.
– wonder95
Nov 22 at 6:12
Well, since I'm calling Butter inside of asyncData(), I can't use this, since it's not available yet, and if I try $butter or just leave it as is, I get an error that butter isn't defined.
– wonder95
Nov 22 at 6:12
@wonder95 you could get it from app. ctx.app.$butter
– Aldarund
Nov 22 at 9:28
@wonder95 you could get it from app. ctx.app.$butter
– Aldarund
Nov 22 at 9:28
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53254092%2funable-to-use-api-key-as-env-variable-with-butter-cms-library-inside-asyncdata%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
