Nuxt.jsでページを作成・追加する方法｜Nuxt.jsの基本

開発環境

Nuxt.jsについての詳しい説明や、開発環境の作り方は過去に記事にしているので、そちらをご覧ください。

Webrandum

Nuxt.jsの基本と最初のセットアップ「プロジェクトの作成と起動をするまでの流れ」

https://webrandum.net/nuxt-setup

最近Nuxt.jsをガッツリ触ることが多くなってきたので、理解を深めるためにもまとめていきます。Nuxt.jsとはNuxt.jsが生まれた経緯もともとNuxt.jsは、Reactのフレームワークとして開発されたNext.jsにインスパイアされて開発されました。NuxtとNextで名前が1文字違いとややこしいのですが、Vue.jsとReactで別のものなので検索結果でたまに紛れて出てきたときに惑わされないように注意しましょう。最初はVue.jsのサーバーサイドレンダリングを支援する目的で開発されていましたが、いまでは機能が追加されていき、かなり高機能になって...

ページ追加の仕組み

Nuxt.jsではVue Routerを自分で設定する必要はなく、「pages」ディレクトリの構造がそのままURLになります。

「index.vue」の場合はフォルダ直下のパスになります。
ファイル名がそのままURLになるので、修正するときにどのページのファイルを触ればいいかが分かりやすくなっています。

コンテンツの出し分けをしたいページの場合

例えば、お知らせ詳細ページやメンバー詳細ページなどは、固有の「news」「member」ではなく、「news/記事ごとのIDやパーマリンク」「member/メンバーごとのID」としないといけません。

その場合はファイルパスを「news/_id.vue」や「member/_id.vue」のようにすればOKです。

_以降の名前は自動的にプロパティ名と認識して、自動的にparamsへ代入してくれます。

404ページを作成したい

固定のページに遷移させる

nuxt.config.jsのrouterで下記のように存在しないパスにアクセスした場合はすべて特定のページに遷移させられます。

router: {
  extendRoutes (routes, resolve) {
    routes.push({
      name: 'custom',
      path: '*',
      component: resolve(__dirname, 'pages/404.vue')
    })
  }
}

あとは「404.vue」を作成しておけばOKです。
ただし、この方法だと「news/_id.vue」など_id部分が可変になっている場合は「_id.vue」が優先して表示されてしまいます。

エラーが発生した場合はすべて同じレイアウトで表示させる

「pages」ではなく、「layouts」フォルダに「layouts/error.vue」としてエラーレイアウトを用意しておくことで、エラーが発生した場合はそのページに遷移させられます。

実際に利用するのはこの方法の方が基本になりそうです。

この方法であれば、「news/_id.vue」など_id部分が可変になっているページでも、そのidを使ってAPIに問い合わせてエラーが返ってくると自動で「layouts/error.vue」のエラーレイアウトが表示されます。

<template>
  <div class="container">
    <h1>{{ error.statusCode }}</h1>
    <p v-if="error.statusCode === 404">
      ページが見つかりません
    </p>
    <p v-else>
      エラーが発生しました
    </p>
  </div>
</template>
<script>
export default {
  props: {
    error: {
      type: Object,
      default: null
    }
  }
}
</script>