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

Nuxt.js

ぬにょす(挨拶)。

先日作成したNuxtアプリケーションにページを追加してみます。

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>
Code language: HTML, XML (xml)
<!-- 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>
Code language: HTML, XML (xml)

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

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

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

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

ローダーのインストール

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

$ yarn add -D pug pug-plain-loader node-sass sass-loader
Code language: plaintext (plaintext)

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

表示確認

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

$ yarn run dev
Code language: plaintext (plaintext)

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

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

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

まとめ

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

コメント

タイトルとURLをコピーしました