-
-
Nuxtでの初期設定の種類
-
Nuxtをインストール（下記npm）した時はデフォルトプロジェクトは下記画像のようになっている
npx nuxi@latest init <my-project>
⇩ディレクトリ構造⇩
各ディレクトリ作成
| ディレクトリ名 | 役割 |
|---|---|
| pages | 各画面を配置 |
| layouts | 共通部品を配置 |
| components | コンポーネントを配置 |
| composables | composableな関数(reactiveな変数とロジックをコンポーネントから切り離して再利用できるようにした関数)を含むファイルを配置 |
| assets | cssファイルや画像などを配置 |
| public | 画像ファイルのような静的ファイルを配置(faviconとか)assetsとの違いとして、バンドルによりビルド後に名称を変更したくないファイル(S3にアップするものなど)を配置 |
| plugins | アプケーション初期化時に実行される |
| middleware | Route Middlewareを利用することでページ間の移動、サイトへのアクセスをトリガーとしてページが表示される前に事前に設定していた処理を行う |
| server | API Routeを作成 |
-- pagesディレクトリ
app.vueと同階層にpagesフォルダを作成。
その中にindex.vue(topとなるファイル)Aboutフォルダなどリンク先のフォルダを作成する。
-- layoutsディレクトリ
layoutsフォルダは'heder'や'footer'など、複数のページで共有できる内容を記述します。
レイアウトを利用する場合はlayouts ディレクトリを作成してdefault.vueファイルを作成します。
<template>
<div>
<nav>ここにナビゲーションバーを入れる</nav>
<slot />
</div>
</template>
app.vueファイルにNuxtLayoutタグを追加しNuxtPageタグをラップします。
<template>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>
app.vueファイルにNuxtLayoutタグを追加することで自動でlayoutsディレクトリに存在するdefault.vueファイルの内容が適用されます。
- 特定のページでlayoutを使いたくない場合
definePageMeta関数を使う。また、別のlayout/○○.vueを使いたい場合はコメントの部分を書く
<script setup>
definePageMeta({
layout: false,// falseの部分を'○○'に変更。シングルくぉーてクォーテーションも入れる
});
</script>
<template>
<h1>About Page</h1>
</template>
App.vueを削除してもpages/index.vueは反映されるので削除してもしなくても可能
-- componentsディレクトリ
再利用可能なコンポーネントファイルを保存するためにcomponentsディレクトリを作成します。
作成したcomponentsディレクトリにNavbar.vueファイルを作成します。Navbar.vueファイルはdefault.vueファイルでナビテーションバーを設定するために利用します。
<template>
<nav>
<NuxtLink to="/">Home</NuxtLink>
<NuxtLink to="/about">About</NuxtLink>
</nav>
</template>
layout/default.vueを下記に変更
<template>
<div>
<Navbar /> //ここを変更・追加
<slot />
</div>
</template>
-- assetsディレクトリ
assetsディレクトリにはstylesheetsやfontsなどの情報を保存します。
共通で使うcssやリセットcss、画像などを入れる。
// assets/style.css
h1 {
color: gray;
}
上記では動かないのでnuxt.config.tsに下記を記載
export default defineNuxtConfig({
devtools: { enabled: true },
css: ['/assets/css/style.css'], // ここを追加
});
上記以外にもstyleタグ、scriptタグの中でimportする事もできる（ページ最後の参考URLで確認可能）
画像は使いたい場所で
<img src="~/assets/icon.png" alt="icon" />
-- publicディレクトリ
faviconなどの静的画像を格納する。
assetsフォルダとアクセス方法が少し違うので記載。
なお、必要なディレクトリではないので削除しても可能。
<img src="/icon.png" alt="icon" />
SEOのmetaタグの設定
nuxt.config.tsに下記を設定
export default defineNuxtConfig({
app: {
head: {
title: 'Nuxt 3 basic',
meta: [{ name: 'description', content: 'Nuxt 3 for beginners' }],
link: [{ rel: 'icon', href: '/icon.png' }],
},
},
});
各種ページごとにSEOを変える場合は下記
useHead関数を使う
// About/index.vue
<script setup>
useHead({
title: 'Aboutページ',
meta: [
{
name: 'description',
content: 'Aboutページ',
},
],
});
</script>