[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

【ふるさと納税】BUFFALO/バッファロー ポータブルSSD TypeA&am...
価格：44,000円（税込、送料無料) (2023/5/26時点)


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

/ Vue.js(書評) / , ,

点数

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/[date].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>

関連記事

【1つ新しい記事】

【1つ古い記事】

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です