@nuxtclub/amplify

Setup

1. Add @nuxtclub/amplify dependency to your project.

npm i -D @nuxtclub/amplify

2. Add @nuxtclub/amplify to the buildModules section of nuxt.config.js.

export default {
	buildModules: [
		[
			'@nuxtclub/amplify',
			{
				/* module options */
			},
		],
	],
}

Using top level options

export default {
	buildModules: ['@nuxtclub/amplify'],
	amplify: {
		/* module options */
	},
}

🛠 Configuration

To start using Amplify in your project you should pass the content of your aws-exports file (generated by Amplify CLI) to the module options.

import awsconfig from './aws-exports'

export default {
	amplify: {
		awsconfig,
	},
}

If you want to use the UI Components of Amplify for VueJS you can enable them as follows:

export default {
	amplify: {
		/* module options */
		components: true,
	},
}

🎮 Usage

This module will inject $amplify in the context of your application.

Using $amplify you can access to all the client libraries of Amplify for JavaScript.

Example

<template>
	<div v-if="products">
		<Product
			v-for="product in products"
			:key="product.id"
			:data="product"
		/>
	</div>
</template>

<script>
import { Product } from '~/models'

export default {
	data: () => ({
		products: null,
	}),
	mounted() {
		this.$amplify.DataStore.query(Product).then(
			(res) => (this.products = res)
		)
	},
}
</script>