Nuxtに@nuxt/contentとUnoCSSを追加する方法

イントロダクション

この記事では、Nuxt 3プロジェクトに@nuxt/contentバージョン2を統合する方法を詳しく説明します。@nuxt/contentは、Markdown、JSON、YAML、CSVなどのファイルをVueコンポーネント内で簡単に利用できるようにする強力なモジュールです。

また、UnoCSSは、高度にカスタマイズ可能な、最小限のCSSフレームワークです。これにより、パフォーマンスが向上し、開発プロセスが効率化されます。

@nuxt/content v2のインストール

@nuxt/contentモジュールをプロジェクトに追加します。

pnpmbash

pnpm add @nuxt/content

Nuxt Configの更新

nuxt.config.ts（またはnuxt.config.js）ファイルを開き、@nuxt/contentモジュールを追加します。

nuxt.config.tsts

export default defineNuxtConfig({
  modules: [
    '@nuxt/content'
  ],
  content: {
    // その他の設定...
  }
})

Contentファイルの作成

contentディレクトリをプロジェクトのルートに作成し、Markdown(md)ファイルを追加します。

index.mdmd

---
title: Hello World
description: This is my first content file in Nuxt 3!
---

# Hello World!

Welcome to my Nuxt 3 blog.

Contentの表示

/pages/［..slug］.vuevue

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

[...slug].vue(catch-all-routeについての説明はこちら)を参照して下さい。

UnoCSSを導入する

UnoCSSは、高度にカスタマイズ可能な、最小限のCSSフレームワークです。これにより、パフォーマンスが向上し、開発プロセスが効率化されます。

UnoCSSのインストール

pnpmbash

pnpm add -D @unocss/nuxt

Nuxt Configの更新

nuxt.config.tsts

export default defineNuxtConfig({
  modules: [
    '@unocss/nuxt',
  ],
})

UnoCSSの設定

UnoCSSをカスタマイズするために、uno.config.tsファイルをプロジェクトのルートに作成します。

uno.config.tsts

import { defineConfig } from 'unocss'

export default defineConfig({
  shortcuts: {
    'btn': 'py-2 px-4 font-semibold rounded-lg shadow-md',
    'btn-green': 'text-white bg-green-500 hover:bg-green-700',
  },
})

UnoCSSの利用

vue

<template>
  <button class="btn btn-green">Click me</button>
</template>

このコードは、btnとbtn-greenというショートカットクラスを使用して、ボタンにスタイルを適用します。

まとめ

この記事では、Nuxt 3に@nuxt/contentバージョン2とUnoCSSを追加する基本的な手順を説明しました。このモジュールを使用すると、Markdownや他のファイル形式のコンテンツを簡単に扱うことができ、スタイルも効率的かつ柔軟にスタイルを適用することができるようになり、ブログやドキュメントサイトの構築が容易になります。