【Nuxt3】2時間でできるNuxt.js入門（Vue3, Naive UI, Tailwind CSS, pinia）

Nuxtの最新バージョンを使ってサンプルアプリを作ってみました。
環境は下記のようになっています。

• Nuxt 3.12.2

• pinia 2.1.7

• tailwindcss 3.4.4

• naive-ui 2.38.2

動画で学習できるコースも出してるので、動画の方が学習しやすい方はこちらをご覧ください。

【Nuxt3】2時間でできるNuxt.js入門（Vue3, Naive UI, Tailwind CSS, pinia）

開発環境を構築しよう

Nuxt3のプロジェクトを作成しよう

Nuxt3のホームページにアクセスしましょう。

Installation · Get Started with Nuxt

今回の記事ではパッケージ管理ツールにはpnpmを使おうと思います。

pnpm dlx nuxi@latest init nuxt-demo

設定ファイルを編集してssrをしないようにしましょう。

// nuxt.config.ts

export default defineNuxtConfig({
  ssr: false
)}

次にNuxtがlayoutsディレクトリとpagesディレクトリを読み込むようにapp.vueを編集します。

// app.vue

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

無事設定できているかpages配下にファイルを追加して確認してみましょう。

// pages/index.vue

<template>
  <div>
    <span>hoge</span>
  </div>
</template>

開発サーバーを立ててルートページへアクセスするとhogeという文字列が表示されてるかと思います。

Tailwind CSSを導入しよう

プロジェクトにTailwind CSSを導入しましょう。

必要なパッケージをインストールします。

pnpm add -D autoprefixer postcss sass tailwindcss

その後、Tailwind CSSの初期化コマンドを実行しましょう。

npx tailwindcss init

初期化コマンドを実行したらNuxtの設定ファイルにPostCSSの設定を追加します。

// nuxt.config.ts

export default defineNuxtConfig({
  devtools: { enabled: true },
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
  ssr: false,
})

Tailwind CSSの初期設定も追加しましょう。

// taiwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./app.vue",
    "./error.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

次にスタイルシートのエントリポイントを作成し、Taiwind CSSを読み込みます。

// assets/styles/main.scss

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

最後にNuxtからスタイルシートを読み込むようにしましょう。

// nuxt.config.ts

export default defineNuxtConfig({
  devtools: { enabled: true },
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
  css: ["@/assets/styles/main.scss"],
  ssr: false,
})

Naive UIを導入しよう

プロジェクトにNaive UIを導入しましょう。
Naive UIのページはこちらです。

Naive UI

Naive UIはVue3に対応したUIフレームワークであり、今回はこちらを使おうと思います。

まずプロジェクトにインストールしましょう。

pnpm add naive-ui

Naive UIの設定に必要なライブラリがあるので、そちらもインストールしてしまいましょう。

pnpm add -D unplugin-vue-components

次にNuxtの設定ファイルを使ってNaive UIが使えるようにしましょう。

// nuxt.config.ts

import { NaiveUiResolver } from "unplugin-vue-components/resolvers";
import Components from "unplugin-vue-components/vite";

export default defineNuxtConfig({
  devtools: { enabled: true },
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
  css: ["@/assets/styles/main.scss"],
  ssr: false,
  vite: {
    plugins: [Components({ resolvers: [NaiveUiResolver()] })],
  },
})

以上でNaive UIが使えるようになります。

useFetchを使ってユーザーの一覧を取得してみよう

useFetchを使ってjsonplaceholderからデータを取得しよう

Nuxt3からデータ取得の方法が変わりました。
Nuxt3には$fetch, useFetch, useAsyncDataという標準のAPIが準備されています。
この記事ではaxiosなどの外部ライブラリは使わずに標準のAPIを使ってリクエストしようと思います。

ページ配下に新しいファイルを準備して、ユーザーの一覧を取得しましょう。
リクエスト先のAPIにはjsonplaceholderを使います。

JSONPlaceholder - Free Fake REST API

ユーザーの一覧はjsonplaceholderの/usersから取得します。
ユーザーモデルの定義を行いましょう。

// models/user.ts

export interface User {
  id: number;
  name: string;
  username: string;
  email: string;
  address: {
    street: string;
    suite: string;
    city: string;
    zipcode: string;
    geo: {
      lat: string;
      lng: string;
    };
  };
  phone: string;
  website: string;
  company: {
    name: string;
    catchPhrase: string;
    bs: string;
  };
}

モデルの定義ができたらuseFetchを使ってユーザーの一覧を取得します。

// pages/users/index.vue

<template>
  <div>
    <pre>{{ JSON.stringify(users, null, 2) }}</pre>
  </div>
</template>

<script setup lang="ts">
import type { User } from "~/models/user";

const { data: users } = useFetch<User[]>(
  "https://jsonplaceholder.typicode.com/users"
);
</script>

ここまでで、画面にユーザーの一覧が整形された状態で表示されてると思います。

取得したデータをテーブル形式で表示しよう

取得したデータをNaiveUIのNDataTableを使ってテーブル形式で表示しましょう。

// pages/users/index.vue

<template>
  <div>
    <NDataTable v-if="users" remote :data="users" :columns="columns" />
  </div>
</template>

<script setup lang="ts">
import { NDataTable, type DataTableColumns } from "naive-ui";
import type { User } from "~/models/user";

const { data: users } = useFetch<User[]>(
  "https://jsonplaceholder.typicode.com/users"
);


const columns = computed<DataTableColumns<User>>(() => [
  {
    key: "id",
    title: "ID",
    render: (row) => row.id,
  },
  {
    key: "name",
    title: "Name",
    render: (row) => row.name,
  },
  {
    key: "email",
    title: "Email",
    render: (row) => row.email,
  },
  {
    key: "website",
    title: "Website",
    render: (row) => row.website,
  },
]);
</script>