Posted at

Nuxtでページごとにテンプレートを切り替えたいとき


はじめに

nuxtのプロジェクトで基本共通でヘッダー、フッターは出しておきたいが、特定のページだけ出さない、などイレギュラーのパターンが出てくると思います。そのときの対処法です。


やり方

基本的には layouts/default.vue が適用されます。

これによって、どのページにもヘッダー、フッターがでてくるようになっています。


// default.vue
import header from '~/components/header';
import footer from '~/components/footer';

export default {
components: {
header,
footer
}
}

しかし、特定のページでのみヘッダーもフッターも表示したくない!そうなった場合は /layouts 配下に新しくレイアウトファイル(hoge.vue)をつくります。

ファイルを作成したら、ヘッダー・フッターも表示したくないページに下記を追加。

export default {

layout: 'hoge',

これで共通レイアウトを簡単にはずして別のレイアウトを適用することができます。


参考

API: layout プロパティ

https://ja.nuxtjs.org/api/pages-layout/