「はじめてつくるNuxtサイト」の感想・備忘録

2022.12.10
スポンサーリンク
posted with ヨメレバ
Amazonで見る
Kindleで見る

点数

76点

感想

最新のNuxt 3を扱っているのはよいが、かなり薄い内容だった。

それでも最低限の機能を使うだけであれば、参考にはなると思う。

インストール

  1. npm init
  2. npm install nuxi
  3. npx nuxi init xxxx
  4. cd xxxx
  5. npm install npm
  6. run dev nuxiで実行
  • nuxiはNuxt.jsに必要なパッケージを管理するためのCLI
  • nuxt2の場合はcreate-nuxt-appを使う

pagesディレクトリの作成

  1. mkdir pages
  2. touch pages/index.vue
  3. App.jsの<NuxtWelcome />を<NuxtPage />に変更する

Nuxt Contentパッケージ

  • Nuxt.jsでマークダウン形式のファイルをCMS風に使用するためのモジュール
  • GitベースのヘッドレスCMSとして機能する
  • contentディレクトリに格納したMarkdown、JSON、YAML、XML、CSVファイルといったファイルをMongoDBのAPIような機能で扱えるようになる
  • npm install @nuxt/contentでインストール
  • nuxt.config.tsに以下を追加
    modules: [ '@nuxt/content', ],
<template>
  <div>
    <div v-for="article in data">
      {{ article.date }} {{ article.title }}
      <img :src="article.image">
      <NuxtLink :to="article._path">read more</NuxtLink>
      <hr>
    </div>
  </div>
</template>
<script setup>
const {data} = await useAsyncData('testContent', () => {
  return queryContent('/news/').sort({date: -1}).find();
})
</script>

<NuxtLink>タグ

  • <NuxtLink :to="article._path">read more</NuxtLink>
    リンク先はpages/news/xxxxxxxxとなるので、pages/news/2025/05/12.vueのようなファイルを用意する
  • 内部リンクは<NuxtLink>、外部リンクは <a>を使う

useRoute().path

  • Nuxt.jsではuseRoute().pathでリクエストパスを取得することができる
<template>
  <div>
    <h1>記事ページ</h1>
    <h2>{{ data.date }} {{ data.title }}</h2>
    <img :src="data.image">
    <p>{{ data.content }}</p>
  </div>
</template>
<script setup>
const {data} = await useAsyncData(useRoute().path, () => {
  return queryContent(useRoute().path).findOne();
})
</script>

layoutsの作成

  1. componentsディレクトリを作成し、そこにTheHeader.vueやTheFooter.vueを作成する
  2. layoutsディレクトリを作成し、そこにdefault.vueを作成する。
  3. App.vueを修正する（<NuxtLayout>で囲む）
<template>
  <div>
    <TheHeader />
    <slot />
    <TheFoorter />
  </div>
</template>
<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

CSSの作成

  1. assets/stylesディレクトリを作成し、その中にcssファイルを格納する
  2. nuxt.config.tsにcssの記述を追加する
    css: [ "~/assets/styles/common.css", "~/assets/styles/hoge.css", ]

<head>タグ内の設定

  • app.vueの<script setup>にuseHead()を追加する
  • titleなど個別に設定したいものは各.vueファイルに追加する。
<script setup>
useHead({
  title: 'Next.jsテストサイト'
});
</script>
スポンサーリンク

コメント