如何开始将 AWS Amplify 集成到 Nuxt.js 项目？

Question

我最近开始使用 vue 和 nuxt。我想向我的项目添加 AWS 后端。我已经看到 Amplify 很有用，但一直无法找到有关如何在 nuxt 中实现它的任何资源。有什么建议吗？

Answer 1

我正在尝试实施 AWS 服务作为我正在开发的应用程序的后端。

我通过执行以下步骤成功地获得了与我的 Nuxt 应用程序一起使用的基本设置。

1.- 创建一个 Amplify 插件文件。 (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.- 将插件导入 Nuxt Config。

plugins: [
    {
        src: '~plugins/amplify.js',
        ssr: false
    }
]

我会尝试进一步阐述，或者创建一个教程。希望对您有所帮助！

Answer 2

这是我的设置：

1/ plugins/amplify.client.js -> 这个名字让它在客户端执行

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'],

它让我可以使用 this.$Amplify.Hub 或 store.$Amplify 这样的命令，这样我就可以在任何地方访问主要功能。

如何开始将 AWS Amplify 集成到 Nuxt.js 项目？

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

nuxt.js

aws-amplify