CODEWITHSUNDEEP
nuxt.jsaws-amplify
tlalco
tlalco

Reputation: 412

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?

Upvotes: 3

Views: 3374

Answers (2)

Boris
Boris

Reputation: 85

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.

Upvotes: 3

Armando Herra
Armando Herra

Reputation: 76

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!

Upvotes: 6

Related Questions