How can I get started with integrating AWS Amplify to a Nuxt.js project?

问题

Im recently started working with vue and nuxt. I want to add an AWS backend to my project. I've seen that Amplify is useful but haven't been able to find any resources on how to implement it in nuxt. Any advice?

回答1:

I'm trying to implement as well AWS services as a backend for an app I'm working on.

I managed to get a basic setup working with my Nuxt app doing the following steps.

1.- Create a Amplify Plugin File. (plugins/amplify.js)

import Vue from 'vue'
import Amplify, * as AmplifyModules from 'aws-amplify'
import { AmplifyPlugin, components } from 'aws-amplify-vue'
import aws_exports from '@/aws-exports'
Amplify.configure(aws_exports)

Vue.use(AmplifyPlugin, AmplifyModules)

//register components individually for further use
// Do not import in .vue files
Vue.component('sign-in', components.SignIn)

2.- Import the plugin into the Nuxt Config.

plugins: [
    {
        src: '~plugins/amplify.js',
        ssr: false
    }
]

I'll try and elaborate further or maybe create a tutorial. Hope it helps!

回答2:

This is my setup:

1/ plugins/amplify.client.js -> this name makes it execute on client side

import Vue from 'vue'
import Amplify, * as AmplifyModules from 'aws-amplify'
import { AmplifyPlugin } from 'aws-amplify-vue'
import awsmobile from '~/aws-exports'
Amplify.configure(awsmobile)

Vue.use(AmplifyPlugin, AmplifyModules)

// Make Amplify available in store and Vue instances
export default (_, inject) => {
  inject('Amplify', AmplifyModules)
}

2/ nuxt.config.js

plugins: ['@/plugins/amplify.client.js'],

It let me use commands such as this.$Amplify.Hub or store.$Amplify so I have access to the main functions anywhere.

来源：https://stackoverflow.com/questions/52209553/how-can-i-get-started-with-integrating-aws-amplify-to-a-nuxt-js-project

标签

nuxt.js

aws-amplify