ももの知恵の樹

Nuxt.js_プロパティ

middleware プロパティ

Nuxtミドルウェアとは

ミドルウェアを使うと、ページがレンダリングされる前に、実行されるカスタム関数を定義できます。


ページでミドルウェアを読み込む

middleware/sample.jsを用意します。 


    export default function({ route }) {
      console.log('This is middlewaree sample', route.path)
    }

pages/home.vue用意し、middleware/sample.jsを実行するように定義します。 


    <template>
      <h1>Home</h1>
    </template>
    <script>
    export default {
      middleware: 'sample'
    }
    </script>

/homeにページ遷移すると、middleware/sample.jsが実行されます。


routerでミドルウェアを読み込む

nuxt.config.jsで下記のように定義すれば、router起動（ページ遷移）時に毎回sample.jsが実行されるようになります。 


   module.exports = {
     router: {
       middleware: 'sample'
     }  
   }


layout プロパティ

layoutファイルを用意することにより、ページレイアウトを参照することができます。

メインのレイアウトは「default.vueファイル」であり、layoutプロパティを指定しない場合にはこれが適用されます。 


export default {
  layout: 'default',

CSSフレームワークを一時的に無視したい場合

layouts/plane.vueを用意します。

「<nuxt />」にpagesファイルが反映されます。 


<template>
  <v-app id="plane">
    <nuxt />
  </v-app>
</template>

pages/login.vueで利用するレイアウトを指定します。 


<script>
export default {
  layout: 'plane',
  data: () => ({
    username: '',
    password: ''
  }),
  ...(略)
}
</script>

pages/login.vueではCSSフレームワークを利用していない状態になりますので、任意に templateタグでHTMLを組むことができます。



関連ページ