点数
76点
感想
最新のNuxt 3を扱っているのはよいが、かなり薄い内容だった。
それでも最低限の機能を使うだけであれば、参考にはなると思う。
インストール
- npm init
- npm install nuxi
- npx nuxi init xxxx
- cd xxxx
- npm install npm
- run dev nuxiで実行
- nuxiはNuxt.jsに必要なパッケージを管理するためのCLI
- nuxt2の場合はcreate-nuxt-appを使う
pagesディレクトリの作成
- mkdir pages
- touch pages/index.vue
- 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/2024/11/21.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の作成
- componentsディレクトリを作成し、そこにTheHeader.vueやTheFooter.vueを作成する
- layoutsディレクトリを作成し、そこにdefault.vueを作成する。
- App.vueを修正する（<NuxtLayout>で囲む）
<template>
<div>
<TheHeader />
<slot />
<TheFoorter />
</div>
</template><template>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>CSSの作成
- assets/stylesディレクトリを作成し、その中にcssファイルを格納する
- 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>