comilablog

GridsomeでComposition APIを使う時の注意点

このブログをGridsomeベースにしようと思ってやめたんですけど、その時にComposition APIを使ったらちょいちょい大変だったので、そのまとめなど。

導入方法

yarn add @vue/composition-apiして、src/main.jsで

import VueCompositionApi from '@vue/composition-api'

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

とすればOK。Composition API自体の書き方はググって下さい。

mixinが使えない問題

Gridsomeでは、GraphQLで取得したデータはmixin機能でthis.$pageに格納されます。
ですがComposition APIではmixinを使うことができません。これはGridsomeに限った問題ではなく、mixinに依存した全てのライブラリ（vue-router等）に共通しています。
なので対処法も調べたらすぐ分かります。context.rootから引っ張ってこいというやつです。

import { defineComponent, computed } from '@vue/composition-api'

export default defineComponent({
  setup (props, context) {
    const page = computed(() => context.root.$page)
  }
})

こんな感じですね。

Gridsomeでも開発中はこれで動くんですが、yarn buildで静的生成するとコケます。
モードによって$pageのアクセスしに行く先が違うようです。

というわけで、context.rootではなくcontext.parentを使いましょう。

import { defineComponent, computed } from '@vue/composition-api'

export default defineComponent({
  setup (props, context) {
    const page = computed(() => context.parent.$page)
  }
})

ちなみに$routeにアクセスしたい場合は、従来通りcontext.root.$routeとすればOKです。

metaInfo使えない問題

メタ情報（タイトルタグとか）の書き換えについて、公式ドキュメントでは各コンポーネント内で

export default {
  metaInfo: {
    title: 'title'
  }
}

って感じで設定してね！と書いてあるんですが、これがComposition APIに対応していません。
色々調べても全然情報が出てこず、そもそもこんなことやろうとしてる人がいないのでは？！と思いながら、無理矢理解決した方法がこちら。

import { defineComponent } from '@vue/composition-api'

const component = defineComponent({
  //
})

component.metaInfo = { title: 'title' }

export default component

なんだか残念な感じのコードですが動作はします。