AB型技術系 主に備忘録

ほぼプログラム関連の備忘録

Nuxt.js ヘッダ部やフッタ部をコンポーネント化

ヘッダ部やフッタ部をコンポーネント

前回レイアウトディレクトリにレイアウト用のファイルを追加しレイアウトを切り替えられるようにしました。

freelancer.hatenablog.jp

ヘッダ部やフッタ部はcomponents直下に配置してコンポーネント化したほうがよさそうなのでためしてみました。

header.vueとfooter.vueを追加

componentsディレクトリにheader.vueとfooter.vueを追加する。

/components/header.vue

<template>
    <header style="border-bottom:solid 1px #CCC;padding:10px">ヘッダ部(共通)</header>
</template>

/components/footer.vue

<template>
    <footer style="padding:10px">フッタ部(共通)</footer>
</template>

defaultvueを修正

/layouts/default.vue 修正前

<template>
    <div>
        <header style="border-bottom:solid 1px #CCC;padding:10px">ヘッダ部(デフォルト)</header>
        <div style="border-bottom:solid 1px #CCC">
            <nuxt/>
        </div>
        <footer style="padding:10px">フッタ部(デフォルト)</footer>
    </div>
</template>

/layouts/default.vue 修正後

<template>
    <div>
        <Header/>
        <div style="border-bottom:solid 1px #CCC">
            <nuxt/>
        </div>
        <Footer/>
    </div>
</template>

<コンポーネント名 />でコンポーネントの内容が表示されるようになります。
古いバージョンのNuxt.jsだとimport宣言が必要になりますが、新しいバージョンだとcomponents配下にあるコンポーネントは自動でインポートされます。

/layouts/default.vue inport宣言する場合

<template>
    <div>
        <Header/>
        <div style="border-bottom:solid 1px #CCC">
            <nuxt/>
        </div>
        <Footer/>
    </div>
</template>
<script>
import Header from '~/components/header.vue'
import Footer from '~/components/footer.vue'
export default {
  components: {
    Header,
    Footer
  }
}
</script>

/lnuxt.config.js 自動インポートの設定個所

// Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

http://localhost:3000/layout_default


部品化したヘッダーとフッターが表示されるようになりました。
データ取得やレイアウトに関する機能はある程度ためせたので次回はコンポーネント間のデータのやりとりについて試してみます。