Nuxtでお問い合わせフォームの内容をSlackに通知する

Nuxt.jsでお問い合わせフォームを実装して、内容をSlackに送ります。
毎度忘れるのでメモ。

参考：https://log.tkyisgk.com/js-slack-bot


作業に入る前に、問合せ用のチャンネルを作るなら先に作っておきましょう。

#slack apiの設定
slack apiでcreate an appをクリック。
https://api.slack.com/


![スクリーンショット 2021-06-28 15.13.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306936/246b001d-700e-6581-4495-f7576f861af9.png)
From scratchを選択。

![スクリーンショット 2021-06-28 15.17.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306936/483d9d57-3508-db1f-6f2b-8708f16175fa.png)
App Nameはアプリの名前になります。
投稿先のワークスペースも選択します。

![thum.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306936/a3adc816-b899-e091-f33f-4ed1bd9d2dbe.jpeg)
OAuth & PermissionsのBot Token Scopesに
・chat:write
・incoming-webhook
を追加

![スクリーンショット 2021-06-28 15.20.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306936/88608a29-f297-9568-6ed3-5c87479dbe4a.png)
Install to Workspaceをクリック。
投稿先のチャンネルを選択して許可するボタンをクリック。

OAuth & PermissionsのBot User OAuth Tokenは後で使います。
![thum-4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306936/2dd48f7d-eb83-fb35-e650-e7807ac50ca5.jpeg)



#Slackの設定
投稿先に設定したチャンネルで、詳細 ＞ インテグレーションから、作成したappを追加しておく。

![thum3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306936/14d8a6a0-4483-0f96-8fbd-232ebc5a03d0.jpeg)



#Nuxtのコーディング
slack apiをサポートしているこちらをインストール。
https://github.com/beginner-corp/slack#readme

dotenvにOAuth & PermissionsのBot User OAuth Tokenを追加。
![thum-4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306936/5c0ab247-7a8f-7e8c-e373-e0b3c46569ba.jpeg)




あとはいい感じにコーディングするだけです。

```/pages/contact/index.vue
<template>
  <div>
    <div class="pt-6">
      <div class="row justify-content-center mt-5">
        <div class="col-auto">
          <h1 class="fz-2xl fz-lg-3xl text-center">お問い合わせ</h1>
        </div>
      </div>
    </div>
    <main>
      <div class="row justify-content-center pt-5 pb-9">
        <div class="col-11 col-md-8 col-xl-6 col-3xl-5">
           <validation-observer v-slot="{ valid, invalid, validate, handleSubmit, errors }" ref="myform" class="row">
             <validation-provider rules="required" class="col-12" name="お名前">
               <label for="email" class="fz-sm">お名前</label>
              <input v-model="name" name="name" type="text" class="form-control form-control-lg fz-form" />
              <small>{{ errors[0] }}</small>
            </validation-provider>
             <validation-provider v-slot="{ errors }" rules="email|required" class="col-12 mt-4" name="email">
               <label for="email" class="fz-sm">email</label>
              <input v-model="email" name="email" type="text" class="form-control form-control-lg fz-form" />
              <small>{{ errors[0] }}</small>
            </validation-provider>
             <validation-provider v-slot="{ errors }" rules="required" class="col-12 mt-4" name="お問い合わせ内容">
               <label for="text-area" class="fz-sm">お問い合わせ内容</label>
               <textarea v-model="text" name="text" type="text" class="form-control form-control-lg fz-form" />
              <small>{{ errors[0] }}</small>
            </validation-provider>
            <div class="col-12">
              <button
                type="submit"
                class="d-block rounded bsd bg-wht bc-blk clr-blk hvr-clr-wht hvr-bg-blk fz-sm py-2 w-100 ls-0 mt-5"
                :disabled="invalid"
                @click.prevent="submit"
              >
                この内容で問合わせる<font-awesome-icon :icon="['fas', 'envelope']" class="ml-2 w-2rem" />
              </button>
            </div>
          </validation-observer>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import Slack from 'slack'
import { ValidationObserver, ValidationProvider } from 'vee-validate'

export default {
  layout: 'ArticleLayout',
  data () {
    return {
      name: '',
      email: '',
      text: ''
    }
  },
  components: { ValidationObserver, ValidationProvider },
  methods: {
    submit () {
      const slackInstance = new Slack()
      slackInstance.chat.postMessage({
        token: process.env.CONTACT_SLACK_TOKEN,
        channel: '#contact',
        text: `
          ----------------------\r\r\rお問い合わせがありました\r\r【お名前】\r ${this.name}\r【email】\r ${this.email}\r\r【内容】\r${this.text}\r\r\r----------------------
        `
      })
      this.$router.push({ path: '/contact/complete' })
    }
  }
}
</script>

<style scoped>
:disabled {
  color: rgb(110, 110, 110)!important;
  cursor: not-allowed;
  background-color: #dadada;
  border: unset!important
}
</style>
```




以上です。