AWS-Amplify Integration with NUXT 3.0

AWS-Amplify is a library that helps front-end developers connect with AWS services without any cloud expertise required.

In this post, I will go through the step-by-step integration of the AWS-Amplify with Nuxt3 and some of the issues I have faced.

This post will only go through the frontend installation of the AWS-Amplify with Nuxt 3.0

Installation

To install the AWS-Amplify in your Nuxt project run the following command

npm i aws-amplify

This will install the js library to utilize AWS-Amplify inside your application.

You can read the docs here to create new AWS Cognito resources or import the existing ones. The best way to do it is through the Amplify CLI and these docs provide step-by-step instructions on configuring your application.

Once you step up the project using Amplify CLI it will create a aws-exports.js file inside the root of your application. This will contain all the configurations and keys for your project.

Plugin for Amplify

Once the aws-exports.js file is made with all its configurations and keys you need to initialize the Amplify with these configurations. To initialize this for the entire app in Nuxt JS the easiest way is to write a plugin for the configuration. This will initialize the amplify instance with all the keys from aws-exports.js exposing it to the entire app for use.

Create a file in the plugins folders called amplify.client.ts and copy-paste the following code

import { Amplify } from "aws-amplify";
import { defineNuxtPlugin } from "#app";
import awsExports from "../aws-exports";

export default defineNuxtPlugin((NuxtApp) => {

  return {
    provide: {
      amplifyConfigs: Amplify.configure(awsExports),
    },
  };
});

Now you can easily use the amplify instance and all of its methods inside the Nuxt application.