Nuxt 3、Tailwind、Nuxt content v2によるブログ作成のための基本設定

2023-09-24

2023-09-26

元々ブログ作成に使っていたNext.jsのシステムを変更したかったので、新しくNuxt 3を使用したシステムに構築し直しました。

新ブログ移行の要件は以下の通りです。

既存のURLをそのままにできる
Markdownで記事が書ける
自分である程度ブログデザインをコントロールできる
Nuxt 3で作れる

Nuxt 3は最近出たばかりで自身の学習のために採用することにしました。以上の要件を踏まえて調べてみると、Nuxtには Nuxt content v2という静的サイト作成用のパッケージがありました。どうやらこれを使えば要件にあったサイトが作れそうです。

ということで、今回はNuxt content v2とどのようにブログを構築したかを説明していきます。長くなるのでいくつかの投稿に分けたいと思います。今回はまず第一弾です。

必要なもの

下記コマンドを利用すると必要最低限のものがセットされたプロジェクトが作成されます。content-app部分がプロジェクト名です。

npx nuxi@latest init content-app -t content

以下のnuxtと@nuxt/contentが最低限必要なパッケージです。Nodeは18.13.0のバージョンを利用しています。

{
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview"
  },
  "devDependencies": {
    "@nuxt/content": "^2.8.2",
    "nuxt": "^3.7.3"
  }
}

（参考：公式サイト）

これらをインストールし、yarn devを実行するとlocalhost: 3000で以下のようにindex.mdに記述されたマークダウンがHTMLに変換されて表示されているはずです。

Nuxt Contentではプロジェクトフォルダにcontentフォルダを作成し、そこにマークダウンファイルを置いていきます。

vueファイルは一旦pages/[...slug].vueだけです。中身は以下のようになっています。

<template>
  <main>
    <ContentDoc />
  </main>
</template>

まずは細かいところはおいて置いてそのほかの設定をやっていきます。

TypeScriptの設定

Nuxt 3ではデフォルトでTypeScriptのサポートが提供されています。したがって特に自分で設定したくなければそのままTypeScriptの記法が使えます。

今回は開発中の型チェックのサポートが欲しかったので以下のような設定を行いました。（参考：Type-Checking、nuxt-config#typescript）

defaultのnuxt.config.tsを以下のようにします。

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  modules: ['@nuxt/content'],
  typescript: {
    shim: false, // VScodeの拡張機能を使うためにfalse
    strict: true, // 型チェックの厳格化
    typeCheck: true // 開発、build時の型チェックを有効に。vue-tscとtypescriptのインストールが必要
  },
})

型チェックを有効にしたい場合はvue-tscが必要です。vue-tscはTypeScriptのtscのラッパーだそうです。特徴としてはSingle File Component（シングルファイルコンポーネント）の<template></template>内部についても型チェックをしてくれることです。

vue-tscを使うにはpackage.jsonにTypeScriptの記載が必要らしくインストールする必要があります。

yarn add -D typescript vue-tsc

vue-tscのコマンドはvue-tsc --noEmit && vite buildです。試してみると、確かに<tempalte>内のtypeエラーを指摘してくれます。一方で、VSCodeの拡張機能を有効にしていると開発中に同様の型エラーは気づけます。typecheckが不要な方はインストールの必要はないかもです。

（参考：vue-tsc）

Tailwind CSSの設定

続いてTailwind CSSの設定を行います。Nuxtの場合は@nuxtjs/tailwindcssをインストールします。インストール後、npx tailwindcss initでtailwind.config.jsを作成します。

その後./assets/css/tailwind.cssのようにフォルダとファイルを作成します。tailwind.cssには以下を書きます。（参考: Config）

@tailwind base;
@tailwind components;
@tailwind utilities;

最後にnuxt.config.tsにモジュールを追加して以下のようにします。

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  modules: ['@nuxt/content', '@nuxtjs/tailwindcss'],
  typescript: {
    shim: false,
    strict: true,
    typeCheck: true
  },
})

ここまで来てyarn devを走らせると、元のスタイルが失われます。

はい、h1などのスタイルが効かなくなってしまうのです。

こちら公式サイトに記載があり、上記のtailwind.cssを適用すると各種HTMLタグの余白がなくなり見出しのスタイルが通常のテキストと同様のフォントサイズになります。

一応、以下の内容をtailwind.config.jsに記載することで無効化することもできます。ある程度デフォルトのものを使いたい場合は無効にした方が楽かもです。

module.exports = {
  corePlugins: {
    preflight: false,
  }
}

ただ開発を進めてみると結局自分で細かく設定したくなりました。Nuxt Content v2ではh1タグをはじめ各種基本的なHTMLの要素を上書きできるのでその機能を使い上書きしていくことにします。

またtypographyを使う手もあります。候補は@nuxt-themes/typographyと@tailwindcss/typographyでした。前者の方はvue-tscで大量のエラーが出たので採用しませんでした。

後者の方は上で紹介したTailwindの設定をした上で、@tailwindcss/typographyをインストールし、tailwind.config.jsに下記のpluginを追加すると使えます。

/** @type {import('tailwindcss').Config} */
export default {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [require('@tailwindcss/typography')]
}