tusbasaのブログ

業務や勉強中に調べたことを自分用にメモするブログ

【Nuxt.js】contextとは

Nuxt から Vue コンポーネントに追加のオブジェクト/パラメータを提供する。 asyncData 、fetch 、plugins 、middleware そして nuxtServerInit のような特別な Nuxt ライフサイクル内で使用できる

<script lang="ts">
import { fetch } from '@nuxtjs/composition-api'
...
export default defineComponent({
  fetch(context) {
    console.log(context);
    },
<ref *1> {
  isStatic: false,
  isDev: true,
  isHMR: false,
  app: {
    head: [Function: head],
    router: VueRouter {
      app: [Vue],
      apps: [Array],
      options: [Object],
      beforeHooks: [],
      resolveHooks: [],
      afterHooks: [],
      matcher: [Object],
      fallback: false,
      mode: 'abstract',
      history: [AbstractHistory],
      resolve: [Function (anonymous)]
    },
    nuxt: {
...

以下のキーも参照できる

const {
    app,
    store,
    route,
    params,
    query,
    env,
    isDev,
    isHMR,
    redirect,
    error,
    $config
  } = context

以下のような形でカスタムプロパティを追加できる takacc.hatenadiary.jp

参考

techblog.roxx.co.jp

v2.nuxt.com