我如何开始将AWS Amplify集成到Nuxt.js项目中?

时间:2018-09-06 17:41:08

标签: nuxt.js aws-amplify

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

2 个答案:

答案 0 :(得分:1)

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

通过以下步骤,我设法使用Nuxt应用程序进行了基本设置。

1.-创建一个放大插件文件。 (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
    }
]

我将尝试进一步阐述,或者创建一个教程。希望对您有帮助!

答案 1 :(得分:1)

这是我的设置:

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.Hubstore.$Amplify之类的命令,因此我可以在任何地方访问主要功能。