Skip to content

Instantly share code, notes, and snippets.

@fukuiretu
Last active November 27, 2021 15:57
Show Gist options
  • Save fukuiretu/b4b13794972e8234ac09ab96b86ab6e8 to your computer and use it in GitHub Desktop.
Save fukuiretu/b4b13794972e8234ac09ab96b86ab6e8 to your computer and use it in GitHub Desktop.
Nuxt.jsで必要なTypeScriptの型定義
import Vue from 'vue'
import { Route } from 'vue-router'
import { Store } from 'vuex'
import { MetaInfo } from 'vue-meta'
import { AxiosInstance } from 'axios'
interface NuxtContext {
isClient: boolean
isServer: boolean
isStatic: boolean
isDev: boolean
isHMR: boolean
route: Route;
store: Store<any>
env: object
query: object
nuxtState: object
req: Request
res: Response
params: { [key: string]: any }
redirect: (path: string) => void
error: (params: { statusCode?: String; message?: String }) => void
beforeNuxtRender: ({ Conmponents, nuxtState }) => void
$axios: AxiosInstance // axios-moduleを利用している場合
}
declare module 'vue/types/options' {
interface ComponentOptions<V extends Vue> {
layout?: string
middleware?: string | String[]
fetch?: (context: NuxtContext) => void
asyncData?: (context: NuxtContext) => void
scrollToTop?: boolean
transition?: string | object | Function
validate?: (context: NuxtContext) => boolean
head?: MetaInfo
}
}
@iwata
Copy link

iwata commented Nov 7, 2018

すごい参考になりました!
ちなみにheadの返り値はvue-metaMetaInfoを使うのがよりよさそうです。

@fukuiretu
Copy link
Author

@iwata ありがとうございます、修正しました!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment