# @nuxtclub/amplify

> An easy way to integrate Amplify with NuxtJS

Latest version **1.0.0** (published 2021-04-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install @nuxtclub/amplify
pnpm add @nuxtclub/amplify
yarn add @nuxtclub/amplify
bun add @nuxtclub/amplify
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2021-04-07 |
| First published | 2021-04-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Lautaro Pereyra |
| Maintainers | imlautaro |
| Keywords | nuxt, amplify, module |

## Links

- npm: https://www.npmjs.com/package/@nuxtclub/amplify
- Repository: https://github.com/nuxtclub/amplify
- Homepage: https://github.com/nuxtclub/amplify#readme
- Issues: https://github.com/nuxtclub/amplify/issues
- npm.io page: https://npm.io/package/@nuxtclub/amplify

## Dependencies (2)

- [aws-amplify](https://npm.io/package/aws-amplify.md) ^3.3.26
- [@aws-amplify/ui-vue](https://npm.io/package/@aws-amplify/ui-vue.md) ^1.0.6

## Recent versions

- 1.0.0 (latest) — 2021-04-07

## README

# @nuxtclub/amplify

## Setup

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

```bash
npm i -D @nuxtclub/amplify
```

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

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

## Using top level options

```javascript
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.

```javascript
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:

```javascript
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

```vue
<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>
```

---
_Source: https://npm.io/package/@nuxtclub/amplify · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._