Using the AWS SDK for Javascript with Vue.js 2.0

Question

I'm accessing API's hosted by AWS API Gateway with Vue.Js.

There's some pretty good instructions here http://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-generate-sdk-javascript.html.

I have a bunch of different components, each of which will get data from a different API GET call. Initially I tried adding all the script files to my index.html and doing the following:

RetailerDetails.vue:

<script>

export default {
    name: 'RetailerDetails',
    mounted() {
        var apigClient = apigClientFactory.newClient({
            accessKey: 'blah',
            secretKey: 'blah',
        });

        apigClient.businessGet = function (params, body, additionalParams) {
            if (additionalParams === undefined) { additionalParams = {}; }

            apiGateway.core.utils.assertParametersDefined(params, [], ['body']);

            var businessGetRequest = {
                verb: 'get'.toUpperCase(),
                path: pathComponent + uritemplate('/business').expand(apiGateway.core.utils.parseParametersToObject(params, [])),
                headers: apiGateway.core.utils.parseParametersToObject(params, []),
                queryParams: apiGateway.core.utils.parseParametersToObject(params, []),
                body: body
            };

            return apiGatewayClient.makeRequest(businessGetRequest, authType, additionalParams, config.apiKey);
        };
    },
}

That didn't work, I got ReferenceError: apigClientFactory is not defined.

So then I tried taking the script tags out of my index.html and adding the following lines to my component:

require('../assets/js/lib/axios/dist/axios.standalone.js');
require('../assets/js/lib/CryptoJS/rollups/hmac-sha256.js');
require('../assets/js/lib/CryptoJS/rollups/sha256.js');
require('../assets/js/lib/CryptoJS/components/hmac.js');
require('../assets/js/lib/CryptoJS/components/enc-base64.js');
require('../assets/js/lib/url-template/url-template.js');
require('../assets/js/lib/apiGatewayCore/sigV4Client.js');
require('../assets/js/lib/apiGatewayCore/apiGatewayClient.js');
require('../assets/js/lib/apiGatewayCore/simpleHttpClient.js');
require('../assets/js/lib/apiGatewayCore/utils.js');   
require('../assets/js/custom/apigClient.js');

This don't work either, now I get ReferenceError: Can't find variable: CryptoJS

which from what I understand is because I haven't referenced the flles properly?

What do I need to do?

Mark · Accepted Answer · 2017-06-26 05:22:25Z

2

Don't put javascript files in the assets folder. Put them in the static folder instead. If you are using the CLI install, Webpack sorts through the assets and takes care of things like image and fonts, but not javascript files.

When I put the files in the /static/ or something like /static/js/ and then bring them in with:

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

the functions are available to my Vue components. Maybe there's a nicer way that doesn't pollute the global namespace, but this is a pretty easy solution (assuming it also works for you).

answered Jun 26, 2017 at 5:22

Mark

92.7k8 gold badges116 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Evonet Over a year ago

Thanks for responding. I tried that but still the same ReferenceError: Can't find variable: apigClientFactory". I even changed the index.html to reference the /dist/ versions in case that would help

Mark Over a year ago

Bummer. And you're not getting any 404 errors in the browser's console? If not the only thing that comes to mind is maybe they aren't getting loaded soon enough. Are your <script> tags in the head of the html doc?

Collectives™ on Stack Overflow

Using the AWS SDK for Javascript with Vue.js 2.0

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related