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

Question

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?

Answer 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!