How to import the AWS SDK into Vue.JS

Question

I have the AWS Javascript for Browsers SDK that's been configured from my AWS API Gateway endpoints.

The readme says that I need to include the files and then reference like this:

<script type="text/javascript" src="apigClient.js"></script>

This file contains:

var apigClientFactory = {};
apigClientFactory.newClient = function (config) {
    var apigClient = { };
    if(config === undefined) {
        config = {
            accessKey: '',
            secretKey: '',
            sessionToken: '',
            region: '',
            apiKey: undefined,
            defaultContentType: 'application/json',
            defaultAcceptType: 'application/json'
        };
    // Etc...

}

However I'm not sure how to do this in Vue.js. I've set up a separate component which I think needs to import this file, but how do I do that?

Have you tried adding this file, and trying to reference apigClientFactory from your Vue component? — uksz
– uksz, Commented Jun 19, 2017 at 7:38
You don't need any specific pattern. Vue is not like angular, it's perfectly integrated with normal js behavior. You should be able to access your aws client the same way in a component than anywhere else. — FitzFish
– FitzFish, Commented Jun 19, 2017 at 7:40
I've tried adding it as a link through a <script> tag, but get Can't find variable: apigClientFactory — Evonet
– Evonet, Commented Jun 19, 2017 at 7:55

FitzFish · Accepted Answer · 2017-06-19 08:08:11Z

There is nothing particular to know, really.

I'm not sure this is the way to go with AWS SDK, but if you don't want to use a bundler, just assign the variable you want to export to the global window object. It should be available everywhere, including in your components.

If you want to use the newClient function outside, you can make apigClientFactory global.

window.apigClientFactory = {};
apigClientFactory.newClient = function (config) {
    // ...
}

So in your component you can create a new client, assuming that newClient() return the created client:

var myClient = window.apigClientFactory.newClient();

Or, if you want to keep a single AWS client through you whole app, make the client itself global instead.

var apigClientFactory = {};
apigClientFactory.newClient = function (config) {
    // ...
}
window.myClient = apigClientFactory.newClient();

Collectives™ on Stack Overflow

How to import the AWS SDK into Vue.JS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related