0
Help us understand the problem. What are the problem?
Organization

Nuxt.jsを触ってみた

Vue.jsすら触ったことのない私が、案件でNuxt.jsを使うことになりました。
実際に触ってみた所感を残したいと思います。

今回の案件の概要

  • TOPページと、下層に記事コンテンツを複数ページ作成
  • 記事コンテンツのレイアウトは全て同じ

コンポーネントを組み合わせて作る

Pugで開発をしていた時もヘッダーやフッター・頻出するボタン等はコンポーネント化して使用していましたが、今回はほとんど全てのパーツをコンポーネント化し、それを組み合わせてページを作っています。

example.vue
<template>
  <div>
    <OrganizationHeader />
    <main class="main">
      <section class="contents">
        <article class="article">
          <!-- 記事タイトルを表示するコンポーネント -->
          <OrganizationArticleHead :page-title="page.articleTitle" />
          <section class="article__main">
            <p>
              {{ page.introText }}
            </p>
              <!-- 記事の見出しを取得して目次を作るコンポーネント -->
            <MoleculesToc :page-toc="page.toc" />
              <!-- 記事の本文 -->
            <nuxt-content :document="page" :page-data="page" />
          </section>
        </article>
      </section>
      <!-- おすすめ記事を表示するコンポーネント -->
      <OrganizationRecommend :page-slug="page.slug" />
    </main>
    <!-- パンくずリストを表示するコンポーネント -->
    <OrganizationBreadcrumb :link-data="breadcrumbData" />
  </div>
</template>

<!-- データの受け渡し -->
<script>
export default {
  props: {
    breadcrumbData: {
      type: Object,
      default: () => {}
    },
    page: {
      type: Object,
      default: () => {}
    }
  }
}
</script>

<!-- cssファイルの読み込み -->
<style lang="sass">
@use '~/assets/sass/style'
</style>

今回の記事コンテンツは、後述するNuxt Contentを利用して制作しましたが、記事本文となるMarkdownファイルにページ固有の情報を持たせています。
記事タイトルやmeta情報で使用するdescription、keywords等の情報をpropsにてpageで取得し、各コンポーネントへ渡しています。

Nuxt Contentで記事作成

Nuxt.jsで記事やブログを作成するための機能、Nuxt Contentを導入しました。
記事の中身となる部分をMarkdownファイルで作り、meta情報に入れるdescriptionやkeywordsなどをこのファイルに記述します。

example.md
---
title: Nuxt Contentで記事作成
description: Nuxt Contentで記事作成のディスクリプション
slug: example
metaKeywords:
  - Qiita
  - 例文
  - 初心者
---

<h2>見出し</h2>
<p>
  HTMLタグも使えるし、Markdown記法も使えます
</p>
<div class="article__img">
  <atoms-picture :src="'./assets/images/img_001.jpg'" :width="740" :height="450" alt="" ></atoms-picture>
</div>
<p>
  .md内でコンポーネントも使用できます
</p>

ディレクトリ構成が(割と)複雑

Pugなどで開発する時に比べると、ディレクトリ構成が複雑だなという印象でした。

.nuxt      // Nuxt.jsを利用するためのファイル
assets          // cssやjsonファイルを格納
components // コンポーネントファイルを格納
content    // 記事本文となるMarkdownファイル
dist       // 納品用ファイル
layouts        // サイト全体のベースファイル
pages      // TOPや下層のベースファイル
src        // 画像を格納
static     // 最適化した画像などを格納
store            // jsonファイルを利用する時のstoreの設定ファイル

ディレクトリ構成が少々複雑な分、ファイルの所在が分かりやすくなり管理がしやすいかと思います。

感想

最初はコンポーネント化やデータの受け渡しなど、やり方を理解するまでにかなり時間がかかってしまいました。
ですが、ある程度理解してくると開発がとても楽しくなり、またNuxt.jsで開発したい!と思えました。
いろんなサイト制作に活用できそうなので、また機会があれば導入してみたいです。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
0
Help us understand the problem. What are the problem?