`align="center"`を付与しても、`details`が高さに影響を与えるため、中央揃えにならず、`hide-details`をつける必要がある。

```js
<v-row align="center">
  ...
  <v-col>
    <v-text-field
      hide-details // 👈
      outlined
      dense
    ></v-text-field>
  </v-col>
  ...
</v-row>
```

v-text-filed 縦 中央 揃え

```js
<template>
  <v-combobox
    v-model="items"
    multiple
    small-chips
    @input="InputRules"
    :error-messages="errorMessage"
  ></v-combobox>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      errorMessage: "",
    };
  },

  methods: {
    InputRules(e) {
      const lastElement = e.slice(-1)[0]
      // 半角英数字のみ
      if (!/^[0-9a-zA-Z]*$/.test(lastElement)) {
        this.items.pop(); // 要素の削除
        this.errorMessage = "半角英数字のみにしてください"
      } else {
        this.errorMessage = ""
      }
    },
  },
};
</script>
```

[v-combobox API — Vuetify](https://vuetifyjs.com/en/api/v-combobox/#props)

[Chip component — Vuetify](https://vuetifyjs.com/en/components/chips/)

v-combobox 正規表現 バリデーション

`<template v-slot:label>`で定義する。

```js
<v-radio-group>
  <v-radio :value="true">
    <template v-slot:label>
      <div class="black--text">Black</div>
    </template>
  </v-radio>
  <v-radio :value="false">
    <template v-slot:label>
      <div class="red--text">Red</div>
    </template>
  </v-radio>
</v-radio-group>
```

[Radio button component — Vuetify](https://vuetifyjs.com/en/components/radio-buttons/#label)

Vuetify v-radio label 色変更

## TL;DR
`{APP_SCHEME}:///`で開きます。

- Slack `slack:///`
- Asana `asanadesktop:///`

![Slack App Open](//images.contentful.com/0jyj5pjwic68/2jWKbpU1tBhqnfMABhJ2Yt/5fe45f9ecc41db8ef18be4b2631ce86d/____________________________2021-08-05_11.26.47.png)
※デスクトップアプリがないと開きません。

ちなみにChromeアプリは、`chrome://apps`で管理できます。

[アプリのインストールと管理-Chromeウェブストアのヘルプ](https://support.google.com/chrome_webstore/answer/1053346?hl=en#zippy=%2Ccreate-shortcuts-for-apps-installed-from-the-chrome-web-store%2Cuninstall-an-app)

## 環境
- Electron
- Vue.js

## 調査内容
SlackやNotionなどのデスクトップアプリは、ログインする際に、ブラウザに移動しログインさせた後にデスクトップアプリに戻ります。

これらの動きについて調査します。

上記を調査するにあたって3つにスコープを分けました。

- 1.Electronからブラウザ遷移させる
- 2.ブラウザからデスクトップアプリ(Electron)を開く指示を出す
- 3.ELectronを開いた時に値を受け取れるかを調べる

それぞれ解決策が見えたので共有します。

## デスクトップアプリのログインフロー

基本的な処理の流れは、以下のようになります。

- 1.ログイン画面を表示(デスクトップアプリ)
- 2.デスクトップアプリからブラウザに移動(デスクトップアプリ)
- 3.ブラウザで認証する(ブラウザ)
- 4.ブラウザからデスクトップアプリを開く(ブラウザ)

## Electronからブラウザ遷移させる

[How do I open a url from <a> on default OS browser?](https://github.com/electron/electron/issues/1344)

下記を任意のAPIで呼び出します。

```js
const shell = require('electron').shell
shell.openExternal('http:localhost:4000/login') // ログインページ
```

この際に、queryを入れることによって、デスクトップアプリからのログインかを判別します。

```js
const shell = require('electron').shell
shell.openExternal('http://localhost:8080/login?desktop_login') // desktop_loginで判別する
```

## ブラウザからデスクトップアプリ(Electron)を開く指示を出す

```js
window.location.href = 'slack:///'
```

認証時のアクセストークンなどを扱う場合は、
`asanadesktop:///desktop_start_session?external_auth_token=xxxx&email=xxxx@xxxx.xxx` のようなリンクになるかと思います。これはAsanaの例です。
(試していないので注視してください！)

## デスクトップアプリのSchemeを定義する

[nklayman/vue-cli-plugin-electron-builder: Easily Build Your Vue.js App For Desktop With Electron](https://github.com/nklayman/vue-cli-plugin-electron-builder)を使用しています。

通常のelectron-builderであれば、[Common Configuration - electron-builder](https://www.electron.build/configuration/configuration.html)を参照してください。

```vue.config.js
module.exports = {
  pluginOptions: {
    electronBuilder: {
      builderOptions: {
        protocols: {
          name: 'App',
          schemes: [
            'appdesktop' // ここがschemeになる
          ]
        },
        // ついでにアイコン設定
        mac: {
          icon: 'src/assets/app.icns'
        },
        win: {
          icon: 'src/assets/app.ico'
        }
      }
    }
  },
}
```

`nom run electron:build`を実行すると、`dist_electron/builder-effective-config.yaml`が生成されるので、こちらで正しく設定されるか確認してください。

正しく設定できている場合、`dmg`を解凍して、Chromeで`appdesktop:///`を叩くと、起動できるはずです。

## electron:serveの場合のScheme定義

```json
"electron:serve": "vue-cli-service electron:serve --mode development",
```

`electron:serve`の場合は、`vue.config.js`で設定したProtocol Schemeがうまく働かないので、下記のように設定してみてください。

```js
app.setAsDefaultProtocolClient('appdesktop')
```

## ELectronを開いた時に値を受け取れるかを調べる

下記でScheme起動したURLを受け取ることができます。ここでTokenなどを受け取りましょう。
遷移などは、`ipcRenderer.on()`を使用し発火させます。

```js
 app.on('open-url', async (event, url) => {
  console.log('event:', event)
  console.log('url:', url)

  // Focus
  if (win) {
    if (win.isMinimized()) win.restore()
    win.focus()
  }
}) 
```

- [Launching Electron Apps From the Browser | Ship Shape](https://shipshape.io/blog/launch-electron-app-from-browser-custom-protocol/)
- [Electron を Custom URL Scheme で起動する - Qiita](https://qiita.com/umamichi/items/e47e17fca0bc8fe2bcdd)

Electron

ブラウザ(Chrome)のURL Schemeからデスクトップアプリを起動する

※SPAで試しています。

## $router.push()

### name指定

```js
this.$router.push({ name: name, query: { id: id } })
// または
this.$router.push({ name: name, params: { id: id } })
```

遷移のhistoryを遡る場合は、`$router.go`を使用する。

`router-link`や`nuxt-link`(NuxtJS)も同じコンポーネントの場合は、遷移が走らないので注意が必要です。

### path指定

```js
this.$router.push({ path: path })
// または
this.$router.push(path)
```

## beforeRouteLeave()

別コンポーネントに遷移する場合

```js
beforeRouteLeave (to, from, next) {
  next() // Hookを解決する = 次の遷移を行う
},
```

```js
beforeRouteLeave (to, from, next) {
  if (OK?) {
      someFunc(to, from, next) // この中でnext()または、$router.push()を行う
  } else {   
    next() // Hookを解決する = 次の遷移を行う
  }
},
```

## beforeRouteUpdate()

同じコンポーネントで、paramsのみを変更する場合

```js
beforeRouteUpdate (to, from, next) {
  next() // Hookを解決する = 次の遷移を行う
},
```

遷移させずに、何か処理を入れ込む場合は、

```js
beforeRouteUpdate (to, from, next) {
  if (OK?) {
      someFunc(to, from, next) // この中でnext()または、$router.push()を行う
  } else {   
    next() // Hookを解決する = 次の遷移を行う
  }
},
```

## Error: Navigation aborted...

```bash
Error: Navigation aborted from "/〇〇" to "/〇〇" via a navigation guard.
```

```js
next(false)
```

を消す

## $root.data

直接、Vue Routerとは関係ない。

Vueオブジェクトにdataを定義し、どこからでも呼び出せるようにする。
意図としては、App.vueとPage.vueで初期化の処理を書いている場合、Page.vueでリロードした際に、Page.vueのcreatedが先に発生し、App.vueでの共通の初期化が機能しないため。（非推奨）

```js
  new Vue({
    data: {
      isLoaded: false
    },
    router,
    store,
    render: h => h(App)
  }).$mount('#app')
```

```js
watch: {
  isLoaded (newVal) {
    if (newVal) {
      this.someFunc()
    }
  }
},

computed: {
  isLoaded () {
    return this.$root.isLoaded
  }
},
```
## location.href

同じコンポーネントの場合、`params`や`query`を変更しても、created関数が機能しないため、watchなどを使うか画面をリロードする。watchを使用する場合、初期化に必要な処理は、`initData`などでまとめておくこと。

```js
location.href = `/list?user_id=${this.userId}`
```

## location.reload()

reload（）メソッドは、現在のドキュメントをリロードするために使用されます。
reload（）メソッドは、ブラウザのリロードボタンと同じように機能します。

```js
location.reload()
```

## 参考

- [動的ルートマッチング](https://router.vuejs.org/ja/guide/essentials/dynamic-matching.html#%E3%83%91%E3%83%A9%E3%83%A1%E3%83%BC%E3%82%BF%E3%83%BC%E5%A4%89%E6%9B%B4%E3%81%AE%E6%A4%9C%E7%9F%A5)
- [Vue.js+VueRouterでページの離脱、再読込、別ルートへの移動時に警告を表示する](https://blog.hirokiky.org/entry/2019/08/22/111031)
- [Navigation Guards](https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards)
- [The Location Object](https://www.w3schools.com/jsref/obj_location.asp)

Vue.js

Vue Routerの使用方法まとめ

## 意図

何かの動作時に音を出してユーザーに認識して欲しいケースがあります。
ex)ビデオチャット,Push通知etc

## Audio()

JavaScriptのAudio APIを使います。

```js
const audio = new Audio('example.mp3');
audio.play();
```

## VueJSで鳴らす

```js
  data: () => ({
    audio: new Audio(require('@/assets/sounds/example.mp3'))
  }),
  created () {
    this.audio.currentTime = 0 // 連続で鳴らせるように
    this.audio.play() // 鳴らす
  }
```

ポイントとしては、VueJSのscriptsでassetsファイルを扱う場合、`require('@/assets/sounds/example.mp3')`のようにするところです。
[otologic.jp](https://otologic.jp/)がよかったです。

## 参考

- [Audio()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement/Audio)

VueJSで効果音を鳴らす

VueJSとvue-i18nを使って実装を進めている多言語対応に、引数を渡して表示できるようにしたい。

## JSON

以下のようなjsonがある場合のケースです。
\
ja.json

```json
{
  "LIMIT_MINUTES": "あと%{minutes}分で制限されます。"
}
```

en.json

```json
{
  "LIMIT_MINUTES": "limited to %{minutes} more minutes.",
}
```

## 引数の渡し方

`%{value}`で定義し、第二引数に`{ value: value }`で渡す。

```js
this.$t('LIMIT_MINUTES', { minutes: 6 })
// => あと6分で制限されます。
```

vue-i18nで引数を渡す方法

暫定的に

## 権限の形

API経由でユーザーの機能権限を取得し、配列に詰めてVueXで管理する。

```js
const features = ['機能1', '機能2']
```

## Utilに定義

```js
isEnabledFeature (features, name) {
  if (features) {
    return features(name)
  }
  return false
}
```

NuxtJSでグローバル関数を作る時は、pluginsを使用し、injectする。
[NuxtJS plugins](https://nuxtjs.org/docs/2.x/directory-structure/plugins/#inject-in-root--context)

## 呼び出し

computedの呼び出し

```js
callEnabled () {
  const features = this.$store.getters['User/features']
  return this.$Util.isEnabledFeature(features, '機能1')
},
```

※権限変更が多い場合(`this.$store.getters['User/features']`)、computedの動作がスムーズにいくかは試していない。もし動かない場合は、配列のlengthでwatchするなどありそう。

VueXで機能の制限をする

## 意図

顧客のクレジットカード情報を更新する機能を作りたい。

- クレジットカードの有効期限切れ
- 謝って入力したケース

また、バックエンドはLaravelだが、 サーバレス(node.js)で構築してみたいのでエッセンス的なところを身に付けておきたい。

## 環境

- Laravel: 6.x
- Vue.js
- [Laravel Cashier (Stripe)](https://laravel.com/docs/8.x/billing)

## カードのテスト

テストできるカードは、[Stripe テスト方法](https://stripe.com/docs/testing)に記載されています。めちゃめちゃ親切なドキュメントですね。感動しました。

- VISA: `4242424242424242`
- Master Card: `5555555555554444`

を使いまわそうかなと。
\
エラーのテストや不正請求のテストも実施することができるので、便利です。

## お支払い方法(カード情報)の変更

詳細は、[Updating The Default Payment Method](https://laravel.com/docs/8.x/billing#updating-the-default-payment-method)に書いてあります。

## Lereval側(StripeController)

※`user()`はLaravelのAPIトークンを見て、Userを取得しています。

```php
// 支払いの意図を作成し、支払いを捕捉できるようにします
public function getSetupIntent( Request $request )
{
    return $request->user()->createSetupIntent();
}
```

```php
// 支払い方法の更新
public function updatePaymentMethod(Request $request) {
    $paymentMethod = $request->input('paymentMethod');
    $request->user()->updateDefaultPaymentMethod($paymentMethod); // ココで更新
    return $this->status(); // ステータスを返しています
}
```

## Vue.js側

```js
export default {
  data () {
    return {
      card: null,
      stripe: [],
      stripeAPIToken: YOUR_STRIPE_PUBLIC_KEY, // StripeのPublic Keyを入れる
      intentToken: ''
    }
  },

  mounted () {
    // eslint-disable-next-line no-undef
    this.stripe = Stripe(this.stripeAPIToken)
    const elements = this.stripe.elements()
    this.card = elements.create('card', { options }) // 任意のオプション
    this.card.mount('#card-element')
    this.loadIntent() // ここでgetSetupIntentを呼び出し
  },

  methods: {
    async submit () {
      // 決済情報の登録
      await this.stripe.confirmCardSetup(
        this.intentToken.client_secret, {
          payment_method: {
            card: this.card,
            billing_details: {}
          }
        }
      ).then(result => {
          this.updatePaymentMethod(result.setupIntent.payment_method)
          this.card.clear()
        }
      })
    },

    loadIntent () {
      this.axios.get('/get-setup-intent')
        .then(res => {
          this.intentToken = res.data
        })
    },

    /**
     * カード情報の更新
     * @param {object} paymentMethod 支払い情報
     * @return {void}
     */
    async updatePaymentMethod (paymentMethod) {
      const data = {
        paymentMethod: paymentMethod
      }
      await this.axios.post('/update-payment-method', data)
    }
  }
}
```

※`mounted`で`getSetupIntent`を呼び出しているので、処理を実行したあとは、コンポーネントを破棄してあげる。
\
また、apiのエンドポイントは、スパイナルケース(ケバブケース)が良いとのこと。メソッド名もDBの更新であれば、 changeよりも**update**を使用したい。

- 変更結果が永続化されるならupdate
- 変更結果が一時的なものならchange

## お支払い方法(カード情報)の作成

先ほどは更新だけでしたが、お支払い方法(カード情報)のみをユーザーに登録してもらいたいケースもあると思います。カード情報の登録は、顧客を作る必要があります。
`stripe_id`を確認し、ある場合は支払い方法の更新。ない場合は、顧客を作成した後に支払い方法を更新します。(stripe_idは、Userテーブルのカラムです。)

```php
// お支払い情報(カード情報)の作成/更新
public function savePaymentMethod(Request $request) {
    $user = $request->user();
    $paymentMethod = $request->input('paymentMethod');
    if ($user->stripe_id) {
        $user->updateDefaultPaymentMethod($paymentMethod);
    } else {
        // カード情報作成の場合、顧客を作る
        $user->email = decrypt($user->email);
        $user->createAsStripeCustomer();
        $user->updateDefaultPaymentMethod($paymentMethod);
    }
    return $this->status(); // 独自で作った
}
```

また、サブスクリプションの作成の際に既に支払い情報がある場合は、`add()`を使用します。

```php
$user->newSubscription('default', $planId)->add();
```

## お支払い方法(カード情報)の削除

お支払い情報の削除は、[Deleting Payment Methods](https://laravel.com/docs/8.x/billing#deleting-payment-methods)に書いてあります。

## 資料

- [Laravel Cashier (Stripe)](https://laravel.com/docs/8.x/billing)

Stripe

Stripeで支払い方法(カード情報)の変更 with Laravel

## 意図

- Freeプラン(無料)
- Basicプラン(有料)
- Standardプラン(有料)

があった場合、それらを作成/変更したい。また、Freeプランは、アカウントを作成した段階の状態とする。
\
サブスクリプションを実装する場合、顧客のデータが必要になる。

- メールアドレス
- StripeID
- paymentMethod

が顧客データに最低限必要なデータになる。また、請求先住所、支払い先住所は任意で紐づけることができる。

Stripeの全体的な支払い機能は、[Stripe 支払い](https://stripe.com/docs/payments)
顧客関する情報は、[Stripe 顧客](https://stripe.com/docs/billing/customer)
サブスク作成の概要は、[Subscriptions with Checkout and the customer portal](https://stripe.com/docs/billing/subscriptions/checkout)

## 作成する機能

- 領収書発行
- 次回請求月/キャンセル日の確認
- カード情報の作成/変更
- カード情報の削除(unsubscribedの場合のみ)
- カード番号(下四桁)とカードブランドの確認
- サブスクリプションの作成/変更
- サブスクリプションのキャンセル/次回請求月までサービスの利用
- 決済時にメールアドレスで連絡
- 引き落とし出来ない場合にメールアドレスで連絡

※サブスクリプションのプラン(商品)は直接Stripeから取得し、表示する

## 基本的な機能

- サブスクリプションの作成 -> 顧客の作成/`購読中(subscribed)`にステータスを変更
- サブスクリプションの解約 -> `キャンセル済(cancelled)`に変更
- サブスクリプションの解約の取り消し -> `購読中(subscribed)`にステータスを変更
- サブスクリプションのプランを変更
- 顧客のカード情報の更新 -> 顧客のpaymentMethodの変更
- 顧客のステータスの確認

おそらく、顧客のステータスとプランを確認し、ユーザーにサービスの利用権限を与えるように実装すると思う。また、Stripe Webhookで決済が作成したかなども実行する必要がありそう。([Webhook でイベント通知を受信する](https://stripe.com/docs/webhooks))

## Vue.js側のTIPS

`Subscription.js`というStoreを作り、細かい粒度でデータを分けて`computed`を使いやすくする。また、[Vuex](https://vuex.vuejs.org/ja/)の設計に乗っ取り、「ActionsでAPIを呼び出し、MutationsでStateの変更、gettersをcomputedで取得し、描画する」ことを意識する。グローバルに使用するデータに関するものはActionsに記載し、Mutationsまでつなげる。

### メリット

- Store: `User.js`の肥大化を避ける。([モジュール分割](https://vuex.vuejs.org/ja/guide/modules.html))
- ObjectのSetでcomputedがうまく動いてくれない問題を避ける。

```js
const state = {
  status: null,
  planId: null,
  planName: null,
  cardBrand: null,
  cardLastFour: null,
  endDate: null
}

const getters = {
  status: (state) => {
    return state.status
  },
  planId: (state) => {
    return state.planId
  },
  planName: (state) => {
    return state.planName
  },
  cardBrand: (state) => {
    return state.cardBrand
  },
  cardLastFour: (state) => {
    return state.cardLastFour
  },
  endDate: (state) => {
    return state.endDate
  }
}

const mutations = {
  SET_STATUS (state, status) {
    state.status = status
  },
  SET_PLAN_ID (state, planId) {
    state.planId = planId
  },
  SET_PLAN_NAME (state, planName) {
    state.planName = planName
  },
  SET_CARD_BRAND (state, cardBrand) {
    state.cardBrand = cardBrand
  },
  SET_CARD_LAST_FOUR (state, cardLastFour) {
    state.cardLastFour = cardLastFour
  },
  SET_END_DATE (state, endDate) {
    state.endDate = endDate
  }
}
```

+Actionsに、プロパティを確認し、まとめてMutationsするActionsを作成しておく。

## 環境

- Laravel: 6.x
- Vue.js
- [Laravel Cashier (Stripe)](https://laravel.com/docs/8.x/billing)

## 資料

- [Laravel Cashier (Stripe)](https://laravel.com/docs/8.x/billing)
- [Stripe 支払い](https://stripe.com/docs/payments)
- [Subscriptions with Checkout and the customer portal](https://stripe.com/docs/billing/subscriptions/checkout)
- [Webhook でイベント通知を受信する](https://stripe.com/docs/webhooks)

Stripeでプラン(サブスクリプション)の変更 with Laravel

**Vuetify** も`v-select`だし、**Vue Select** も`v-select`でインポートするから、ややこしい。
（Vuetify使っていて、Vue Selectを使っている場合もあるし）

## 見分け方

Vuetifyもv-selectは、`:items`で選択肢を渡すのに対して、Vue Selectは、`:options`で渡すのでみたい。

## 意図

localStorageに保存した値を読み取り、初期表示でv-selectに表示させたかったが、空になっていたのでうまく表示させるようにしたい。

## Vue Select コード

このような形でvalueを選択したidのtext(この場合name)に揃えることができる。

```js
<v-select
  :value="valueOptions.find(option => option.id === targetId) || ''"
  :options="valueOptions"
  label="name"
  id="target-id"
  @input="changeValue">
</v-select>

data () {
  return {
    targetId: 0,
    valueOptions: [
      { id: 1, name: 'A' },
      { id: 2, name: 'B' },
    ]
  }
},

methods {
  changeValue (event) {
    if (!event) {
      this.targetId = 0
      return
    }
    this.targetId = event.id
  }
}
```

## Vuetifyの場合

多分このような形になると思う。
（試していないが。。。）

```js
<v-select
  v-model="targetId"
  :items="valueOptions"
  item-text="name"
  item-value="id">
</v-select>
```
## 資料

- [Vue Select](https://vue-select.org/)

Vue Select(v-select) 初期表示でtextが空になる

## 意図

`vm.$destroy()`が呼ばれた時に、**beforeDestroy** → **destroyed** の順番で実行されるが、URLの直変更やリロードでは、`vm.$destroy()`が実行されないようなので、**beforeunload** を使用して、処理を実行する。
\
例としては、ユーザーがサービス使用中に用意している手順で終了しないケースです。

- ブラウザそのものを終了する。
- ブラウザのタブを消す。
- ページをリロードする。

## コード

```js
export default {
  // windowを使うのでmountedでイベント登録
  mounted () {
    window.addEventListener('beforeunload', () => {
      this.test()
    })
  },

  // 一応破棄
  destroyed () {
    window.removeEventListener('beforeunload', () => {
      this.test()
    })
  },

  methods: {
    test () {
      console.log('test')
    }
  }
}
```

## 結果

`test()`にDBにデータを保存して確認してみた結果です。

- ブラウザそのものを終了する。 => 実行できている。
- ブラウザのタブを消す。 => 実行できている。
- ページをリロードする。 => 実行できている。

素晴らしい！
\
ですが、おそらくブラウザ自身が終了することを知っていないとだめなので、マシン自体の強制終了では動かないような気がします。

> beforeunload イベントは、ウィンドウ、文書、およびそのリソースがアンロードされる直前に発生します。

また、ここでネットワークに関する処理を使う場合は、オフラインかどうか判定して`localStorage`や`sessionStorage`に保存するなども考えられます。

## 資料

- [Window: beforeunload イベント](https://developer.mozilla.org/ja/docs/Web/API/Window/beforeunload_event)


Vue.jsでリロード前に処理を実行する

## コンポーネント

`ScrollIndicator.vue`を作る。

```js
<template>
  <div
    class="v-scroll--indicator-wrapper"
    :style="{ height: height, background: background }"
  >
    <div
      class="v-scroll--indicator"
      :style="{ background: color, width: width }"
    />
  </div>
</template>

<script>
export default {
  name: "ScrollIndicator",

  props: {
    height: {
      type: String,
      default: "5px",
      required: false,
    },
    color: {
      type: String,
      default: "linear-gradient(to right, #FEE645, #FEE645)",
      required: false,
    },
    background: {
      type: String,
      default: "#F9FAFB",
      required: false,
    },
  },

  data() {
    return {
      scrolled: "",
      docHeight: "",
      width: "",
    }
  },
  mounted() {
    window.addEventListener("load", this.scrollHandler)
    window.addEventListener("scroll", this.scrollHandler)
  },
  destroyed() {
    window.removeEventListener("load", this.scrollHandler)
    window.removeEventListener("scroll", this.scrollHandler)
  },
  methods: {
    scrollHandler() {
      let article = document.getElementById("article")
      if (article) {
        let articleHeight = article.scrollHeight
        this.scrolled =
          document.body.scrollTop || document.documentElement.scrollTop
        this.docHeight = articleHeight - document.documentElement.clientHeight
        this.width = (this.scrolled / this.docHeight) * 100 + "%"
      }
    },
  },
}
</script>
<style scoped>
.v-scroll--indicator-wrapper {
  /* position: fixed; */
  top: 0;
  right: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  margin-top: 0.5rem;
}
.v-scroll--indicator {
  width: 0;
  height: 100%;
}
</style>
```

## 使い方

記事のページの`id="article"`を見て判断する。

```html
<div id="article">
  ...記事
</div>
```

Headerの下に入れる。

```html
<ScrollIndicator />
```

モバイルでは表示しない && 記事ページ以外では表示しない場合、

```html
<ScrollIndicator v-show="$route.name === 'slug' && $device.isDesktop" />
```

SSRだと、`v-if`でも行けるみたい。

## ポイント

- `mounted`を使用する。`created`では、`window`プロパティが読み込めない。
- `articleHeight`は、記事の長さ
- `document.documentElement.scrollTop`は、**スクロールした長さ**
- `document.documentElement.scrollHeight`は、**スクロールできる長さ**
- `document.documentElement.clientHeight`は、heightとpaddingの合計から、スクロールバーの幅を引いた高さ(borderは含まない)
- `window.addEventListener`でイベント登録
- `window.removeEventListener`でイベント削除

## 資料

- [Element.clientHeight](https://developer.mozilla.org/ja/docs/Web/API/Element/clientHeight)
- [What is offsetHeight, clientHeight, scrollHeight?](https://stackoverflow.com/questions/22675126/what-is-offsetheight-clientheight-scrollheight)
- [robbinjohansson/vue-scroll-indicator](https://github.com/robbinjohansson/vue-scroll-indicator/blob/master/src/components/VueScrollIndicator.vue)
- [How TO - Scroll Indicator](https://www.w3schools.com/howto/howto_js_scroll_indicator.asp)

NuxtJS

Nuxt.js(Vue.js)でScroll Indicatorを作る

CDNで読み込んでいますが、インストールする方が安全かもしれないです。(バージョン変更時など)

## コード

```js
<template>
  <div id="card-element"></div>
</template>

<script>
export default {
  data () {
    return {
      card: null,
      stripe: [],
      stripeAPIToken: process.env.VUE_APP_STRIPE_API_KEY
    }
  },

  mounted () {
    this.includeStripe('js.stripe.com/v3/', () => {
      this.configureStripe()
    })
  },

  methods: {
    /**
     * Stripeを明示的に取り込む
     */
    includeStripe (URL, callback) {
      const documentTag = document; const tag = 'script'
      const object = documentTag.createElement(tag)
      const scriptTag = documentTag.getElementsByTagName(tag)[0]
      object.src = '//' + URL
      if (callback) { object.addEventListener('load', function (e) { callback(null, e) }, false) }
      scriptTag.parentNode.insertBefore(object, scriptTag)
    },

    /**
     * Stripeの設定
     */
    configureStripe () {
      // eslint-disable-next-line no-undef
      this.stripe = Stripe(this.stripeAPIToken)

      const elements = this.stripe.elements()

      this.card = elements.create('card', {
        hidePostalCode: true,
        style: {
          base: {
            fontSize: '16px'
          }
        }
      })

      this.card.mount('#card-element')
    },
  }
}
</script>
```