Amplify-js: use Nuxt.js to build amplify-js

[sayi65]

* Which Category is your question related to? *
how to build aws-amplify in Nuxt.js
* What AWS Services are you utilizing? *
i want to use aws appsync
* Provide additional details e.g. code snippets *
have you example ?

[skdigital]

for some reason, amplify have only included s3 as hosting options for deployment so as far as I know the hugely popular NextJS and Nuxt dont work with Amplify....

[michaelwills]

It's doable but it's kind of bleeding edge so some things may break. I had a project working in an earlier version of Amplify where the Vue components worked under Nuxt but I see a new error in the current version. this.$Amplify is undefined when it mounts the Authenticator component. aws-amplify code still works though. You can even use $nuxt.$Amplify in the browser console to inspect things.

[mfreeman451]

Any updates?

[sayi65]

I think I had Solution.
This setting can use appsync very well.

package.json

  "dependencies": {
    "aws-amplify": "^1.1.22",
  },

nuxt.config.js
`

  plugins: [
    '@/plugins/aws',
  ],
````

plugins/aws.js
`
```javascript
import Amplify, * as AmplifyModules from 'aws-amplify'

import awsmobile from './aws-exports'
Amplify.configure(awsmobile)
````

store/data.js

```javascript
import { API, graphqlOperation } from 'aws-amplify'

 let data = await API.graphql(graphqlOperation(ListProjects))
 commit('getList', data.data.listProjects)

[bart]

Unfortunately it looks like it won't work on a SSR project. The analytics category of aws-amplify package tries to assign window.YouTubeIframeLoader. So when you try to fire off a graphql query in asyncData() you're getting an error like window is not defined.

Any idea how to solve it? I must fetch the graphQL data on the server-side. Thanks!

[tiruka]

I found the same problem caused by aws-amplify/analitics including youtube-iframe module while SSR.
Unfortunately, it looks like there is no fundamental solution, but int the future version(over 1.2.18), youtube-iframe module will be removed looking through the dependencies. So, let's wait for the time.
Another solution may be that you can install each module of aws-amplify and import it separately to avoid aws-amplify/analitics. Unless you don't use aws-ampliyfy-react or the kind which need aws-amplify/analitics, you can find a way.

[bart]

Yep @tiruka that's the only way I also found. But I'm taking a different approach until aplify-js is SSR ready. Using serverless framework and going good old REST way still works :)

[InstanceOfMichael]

The docs ( https://aws-amplify.github.io/docs/js/vue ) say:

import Amplify, * as AmplifyModules from 'aws-amplify'
import { AmplifyPlugin } from 'aws-amplify-vue'
import awsconfig from './aws-exports'
Amplify.configure(awsconfig)

Vue.use(AmplifyPlugin, AmplifyModules)

// It's important that you instantiate the Vue instance after calling Vue.use!

new Vue({
  render: h => h(App)
}).$mount('#app')

specifically:

It's important that you instantiate the Vue instance after calling Vue.use!

how do you do this in nuxt?

[voraczech]

@InstanceOfMichael just create a file, for example amplify.js in plugin directory and paste this code into the file. If you also want to use Amplify components, the code looks like this:

import Vue from 'vue'
import Amplify, * as AmplifyModules from 'aws-amplify'
import {
  AmplifyPlugin,
  components
} from 'aws-amplify-vue'
import awsconfig from '../aws-exports'

Amplify.configure(awsconfig)

Vue.use(AmplifyPlugin, AmplifyModules)
Vue.component(components)

and import in nuxt.config.js file:

  plugins: [
    '@/plugins/amplify.js'
  ]

Inspiration here (not mine)

BTW be aware of dependencies! If you can't import Amplify components (this.$Amplify is undefined error), upgrade your libary with yarn/npm