【Nuxt.js】ビュー デフォルトレイアウトのカスタマイズ

はじめに

こんにちは！
今回は【Vue.js】デフォルトレイアウトのカスタマイズについてアウトプットしていきます！

デフォルトのレイアウトはページの基本的なレイアウト定義するものです。

カスタマイズ法

layouts⏩default.vueを開きます。

default.vue

<template><!--⏪コンポーネントの基本となるプロパティ。
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　このテンプレートに設定した内容がコンポーネントとしてページに表示される。-->
  <div>
    <nuxt /><!--⏪各ページ異なるページコンポーネントを表示するために使われるもの-->
  </div>
</template>

<style> /*⏪各ページで使用されるstyle*/
html {
  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 128px;
  word-spacing: 1px;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

各ページで使用されるstyleはdefaulte.vueに書くと◎。このdefaulte.vueはレイアウトが明示的に指定されていない全てのページに使用されます。

関係性

app.html(⏪HTMLの大枠を記述)
|
layouts/default.vue(サイト共通のstyleなどを記述)
|
pages/index.vueなど(pagesディレクトリに配置した各ページごとのコンポーネント)

まとめ

関係性にある３つを使って１つのページを表示しています。各ページごとに共通化できる部分は１箇所にまとめてメンテナンス性を高めていきましょう！

最後に

今回はデフォルトレイアウトについてアウトプットしました。
今回の記事を読んで質問、間違い等あればコメント等頂けると幸いです。

今後ともQiitaにてアウトプットしていきます！

最後までご愛読ありがとうございました！