NXUTでTypeScriptを使っているときのlayout
の使い方は下記のとおり。
nuxt-class-componentまたはnuxt-property-decoratorを使用している前提。
またプロジェクトはnuxt-community/typescript-templateで作った想定。
- プロジェクトルートの
index.d.ts
に下記を追記する。
index.d.ts
declare module 'vue/types/options' { export interface ComponentOptions<V extends Vue> { layout?: any } }
layouts
フォルダに任意のレウアウトファイル(.vue)を配置
layouts/Sample.vue
<template> <div> <nuxt /> </div> </template>
pages
フォルダ内のページコンポーネント(.vue)で使いたいレイアウトファイルを指定する。
pages/Hoge.vue
<script lang="ts"> import { Vue, Component, Prop } from 'nuxt-property-decorator' @Component({ layout: 'Sample' }) export default class Hoge extends Vue {} </script>