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

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

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

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

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

From scratchを選択。

App Nameはアプリの名前になります。
投稿先のワークスペースも選択します。

OAuth & PermissionsのBot Token Scopesに
・chat:write
・incoming-webhook
を追加

Install to Workspaceをクリック。
投稿先のチャンネルを選択して許可するボタンをクリック。

OAuth & PermissionsのBot User OAuth Tokenは後で使います。

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

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

dotenvにOAuth & PermissionsのBot User OAuth Tokenを追加。

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

/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>

以上です。