$ npm install -g @aws-amplify/cli

$ amplify configure

- src/
  | - components/ // コンポーネント
  | - layouts/
       | - Default.vue //  全体のLayoutです
  | - pages/ // 各ページのファイルを作成します。
       | - Index.vue // トップページ
  | - templates/ // ブログ等、localのmarkdownファイルからブログ詳細ページ等の元となるvue component
  | - favicon.png
  | - main.js // 最初に呼ばれるjsファイル
  | - aws-exports.js // Amplify initしてpushすれば出来るファイル 主にCognito のpoolキーなど
- static/
- gridsome.config.js // configファイルで、pluginを読ませたり
- gridsome.server.js // サイトをジェネレートする時の内容等を書きます。contentfulなどのheadlessCMSからデータを取得し、記事分のページを作成する指示もここ
.
.

~
import Amplify, { Auth } from 'aws-amplify';
import awsconfig from './aws-exports';
~
export default function (Vue, { router, head, isClient }) {

  Amplify.configure(awsconfig);
~
~

 ERROR  Failed to compile with 175 errors                                                                                                                                                       16:45:58

 error  in ./node_modules/@aws-amplify/pubsub/node_modules/graphql/index.mjs

Can't reexport the named export 'BREAK' from non EcmaScript module (only default export is available)

 error  in ./node_modules/@aws-amplify/pubsub/node_modules/graphql/index.mjs

Can't reexport the named export 'BreakingChangeType' from non EcmaScript module (only default export is available)

 error  in ./node_modules/@aws-amplify/pubsub/node_modules/graphql/index.mjs

Can't reexport the named export 'DEFAULT_DEPRECATION_REASON' from non EcmaScript module (only default export is available)

 error  in ./node_modules/@aws-amplify/pubsub/node_modules/graphql/index.mjs

Can't reexport the named export 'DangerousChangeType' from non EcmaScript module (only default export is available)

 error  in ./node_modules/@aws-amplify/pubsub/node_modules/graphql/index.mjs

rules: [ // fixes https://github.com/graphql/graphql-js/issues/1272
  {
    test: /\.mjs$/,
    include: /node_modules/,
    type: 'javascript/auto'
  }
]

~
~
module.exports = {
~
~
  ],
  configureWebpack: {
    module:{
      rules: [ // fixes https://github.com/graphql/graphql-js/issues/1272
        {
          test: /\.mjs$/,
          include: /node_modules/,
          type: 'javascript/auto'
        }
      ]
    }
  }
}

<template>
~
<amplify-authenticator>
  <h1>indexページ</h1>
</amplify-authenticator>
~
.
</template>
<script>
import '@aws-amplify/ui-vue'
</script>

~
export default function (Vue, { router, head, isClient }) {
~
~

// This is the main.js file. Import global CSS and scripts here.
// The Client API can be used here. Learn more: gridsome.org/docs/client-api

import DefaultLayout from '~/layouts/Default.vue'

import Buefy from 'buefy'
import 'buefy/dist/buefy.css'

import Amplify from 'aws-amplify'
import '@aws-amplify/ui-vue'
import aws_exports from './aws-exports'

import VueLazyload from 'vue-lazyload' // 画像のlazy load
import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

import Login from './pages/Login.vue'
import store from './store.js'

// Amplify読み込み
import { AmplifyEventBus, AmplifyPlugin } from 'aws-amplify-vue'
import * as AmplifyModules from 'aws-amplify'


function getUser() {
  return Amplify.Auth.currentAuthenticatedUser().then((data) => {
    if (data && data.signInUserSession) {
      store.commit('setUser', data);
      return data;
    }
  }).catch(() => {
    store.commit('setUser', null);
    return null;
  })
}

export default function (Vue, { router, head, isClient }) {

  let user

  Amplify.configure(aws_exports)

  Vue.use(AmplifyPlugin, AmplifyModules)

  // ユーザー管理
  getUser().then((user) => {
    if (user) {
      router.push({path: '/'});
    }
  })
  // ログイン状態管理
  AmplifyEventBus.$on('authState', async (state) => {
    if (state === 'signedOut'){
      user = null;
      store.commit('setUser', null);
      router.push({path: '/login/'});
    }
    else if (state === 'signedIn') {
      user = await getUser();
      router.push({path: '/'});
    }
  })

  // リダイレクト設定
  router.beforeResolve(async (to, from, next) => {
    if (to.matched.some((record) => {
      return record.path == "/cart"
    })) {
      user = await getUser();
      if (!user) {
        return next({
          path: '/login/'
        })
      }
      return next()
    }
    return next()
  })

  // load library.
  library.add(fas)

  Vue.use(Buefy, { // css framework
    defaultIconComponent: 'vue-fontawesome',
    defaultIconPack: 'fas',
  })
  Vue.use(VueLazyload)　// 画像のlazy load
  Vue.component('font-awesome-icon', FontAwesomeIcon)　// font icon
  // Set default layout as a global component
  Vue.component('Layout', DefaultLayout)

}

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    user: null
  },
  mutations: {
    // ユーザー情報保存
    setUser(state, user) {
    state.user = user
    },
  },
  actions: {
  },
  modules: {
  }
})

<template>
  <amplify-authenticator />
</template>