🐈

Nuxt 4.0(4.2.1) を触ってみた (途中)

2025/11/21に公開

Nuxt

tech

前置き

対象者について

一通り Vue.js と Nuxt.js を触ったことがある方を対象としています。

技術選定について

各項目で説明はしますが、おおまかに使うものだけここで記述しておきます。

pnpm (パッケージマネージャー)
Nuxt Tailwind (CSS フレームワーク)

本編

1. Nuxt.js をインストールする

今回のこの記事では v4.2.1 をインストールしました。

インストールする際に使うパッケージマネージャーはご自身の環境に合わせてお使いください。
今回は pnpm を使います。

# nuxt-twicas-app の部分にはご自身が作成されるアプリ名を入力してください
pnpm create nuxt@latest nuxt-twicas-app

今回は私自身が Nuxt で作ってみたい小さなアプリがあったため、この名前にしています。
コマンドを叩くと、対話コマンドが出てくるので、そのまま Enter を押していきます。

※ Would you like to install any of the official modules? の部分は Yes にしました。

対話コマンドにしたがって Enter を押していくと、Nuxt のインストールが完了します。
Next Step として以下のコマンドが出てくるので、そのまま打ちます。

cd nuxt-twicas-app
pnpm run dev

そうすると、このような localhost 環境が立ち上がります。

2. さっそく、コンポーネントを作ってみる

…の前に、環境整備をします

sass-embedded のインストール

CSS に scss を使いたいので sass-embedded を追加します。

pnpm add -D sass-embedded

Nuxt Tailwind のインストール

pnpm i -D @nuxtjs/tailwindcss

インストール後 nuxt.config.ts への追記も必要です。

# nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss']
})

コンポーネント構成について

Nuxt4 の大きな変更点の 1 つとして、コンポーネントのフォルダ設計があります。
コンポーネント構成は Nuxt.js の公式ドキュメントと atomic design の構成を参考に、下記のように設定しました。

app
  - components
    - atoms
      - atoms component file
      - atoms component file
      ...
    - molecules
      - molecules component file
      - molecules component file
      ...
    - organisms
      - organisms component file
      - organisms component file
      ...
  - pages
    - page component file
    - page component file
    - page component file
    .....

参考ページ:

試しにトップページを作る

/app/pages/ の中に index.vue というファイルを作ります。

# index.vue
<template>
  <p>ここがトップページです。</p>
</template>

<script setup lang="ts"></script>

<style lang="scss"></style>

app.vue にトップページを表示させる

app.vue の <template> 内に <NuxtPage /> を追加します。

# app.vue
<template>
  <NuxtPage />
</template>

<script setup lang="ts"></script>

<style lang="scss"></style>

そうすると、トップページが表示されるようになります。

実際のソースコード

こちらのリポジトリに置いています。

2025 年 11 月 21 日、現在進行形で開発中なので、随時ソースコードは変わっていく予定です。