Nuxt.jsで独自のページを表示する

ぬにょす(挨拶)。

pagesディレクトリに .vue ファイルを作成

Nuxt.jsは規定のディレクトリ構造を持っています。

pages ディレクトリに配置した Vue ファイルは自動的にルーティングされます。

ひとまず、シンプルなページを2つ、作成してみます。

<!-- pages/one.vue -->
<template lang="pug">
  div
    h1 これは {{ myText }} ページ。
    nuxt-link(to="/two") Two ページ
</template>

<script>
export default {
  data() {
    return {
      myText: 'One'
    }
  }
}
</script>

<style lang="scss" scoped="">
h1 {
  color: coral;
}
</style>

<!-- pages/two.vue -->
<template lang="pug">
  div
    h1 これは {{ myText }} ページ。
    nuxt-link(to="/one") One ページ
</template>

<script>
export default {
  data() {
    return {
      myText: 'Two'
    }
  }
}
</script>

<style lang="scss" scoped="">
h1 {
  color: teal;
}
</style>

VueファイルはNuxt.jsではなくVue.jsの範疇なので、Vue.jsの公式ガイドなどを参考にしながら書き方を覚える感じですね。

https://jp.vuejs.org/v2/guide/

色んなドキュメントやサンプルを見て、なんとなく理解した範囲では

<template>, <script>, <style>のブロックに分けて書く。
lang属性で言語プリプロセッサを指定する。
<style>にscoped属性を指定すると、同ファイルの<template>だけに有効なスタイルになる。
<template>直下には1つの要素しか置けない。上の例で言えばdivタグを削除するとエラーになる。

あたりがポイントでしょうか。

ローダーのインストール

初期状態では lang で指定した pug や scss に対応するローダーが入っていないので、インストールします。

Nuxt 2 - 設定（ja.nuxtjs.org）

$ yarn add -D pug pug-plain-loader node-sass sass-loader

設定ファイルをゴニョゴニョする必要はありません。素敵。

表示確認

コンパイルして起動してみます。

$ yarn run dev

ブラウザで /one にアクセスしたところ。

one

Buefy のデフォルトレイアウトに埋め込まれる形で表示されました。Two ページへのリンクをクリックすると。

two

当たり前に表示されました。クライアント側ではSPAとして動作するので、アドレスバーのURLは変化するのにサーバーへのアクセスは発生せず、ヌルッとページ遷移するのは気持ち良いです。

まとめ

pages ディレクトリに Vue ファイルを置くと、そのファイル名で自動的にルーティングされる。
テンプレート、スクリプト、スタイルの記述言語を変えたい場合は、適切なローダーをインストールすれば良い。