1. 1. # Nuxtでの初期設定の種類 Nuxtをインストール（下記npm）した時はデフォルトプロジェクトは下記画像のようになっている ``` npx nuxi@latest init ``` ⇩ディレクトリ構造⇩ ![Nuxt_shoki.png](https://firebasestorage.googleapis.com/v0/b/prod-ticket-app.appspot.com/o/post%2Fkumataku%2F1717088232083?alt=media&token=2fbee5a8-b4b6-41c3-9a76-f218267a7457) ## 各ディレクトリ作成 | ディレクトリ名 | 役割 | | --- | --- | | 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ファイルを作成します。は必須です。 ```html ``` app.vueファイルにNuxtLayoutタグを追加しNuxtPageタグをラップします。 ```html ``` app.vueファイルにNuxtLayoutタグを追加することで自動でlayoutsディレクトリに存在するdefault.vueファイルの内容が適用されます。 * 特定のページでlayoutを使いたくない場合`definePageMeta関数`を使う。また、別のlayout/○○.vueを使いたい場合はコメントの部分を書く ```html ``` `App.vueを削除してもpages/index.vueは反映されるので削除してもしなくても可能` ### -- componentsディレクトリ再利用可能なコンポーネントファイルを保存するためにcomponentsディレクトリを作成します。作成したcomponentsディレクトリにNavbar.vueファイルを作成します。Navbar.vueファイルはdefault.vueファイルでナビテーションバーを設定するために利用します。 ```html ``` layout/default.vueを下記に変更 ```html ``` ### -- assetsディレクトリ assetsディレクトリにはstylesheetsやfontsなどの情報を保存します。共通で使うcssやリセットcss、画像などを入れる。 ```css // assets/style.css h1 { color: gray; } ``` 上記では動かないので`nuxt.config.ts`に下記を記載 ```js export default defineNuxtConfig({ devtools: { enabled: true }, css: ['/assets/css/style.css'], //　ここを追加 }); ``` 上記以外にもstyleタグ、scriptタグの中でimportする事もできる（ページ最後の参考URLで確認可能）画像は使いたい場所で ```html

``` ### -- publicディレクトリ faviconなどの静的画像を格納する。 assetsフォルダとアクセス方法が少し違うので記載。なお、必要なディレクトリではないので削除しても可能。 ```html

``` ## SEOのmetaタグの設定 nuxt.config.tsに下記を設定 ```js 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関数を使う ```js // About/index.vue ``` その他、SEO設定は[参考サイト](https://reffect.co.jp/vue/nuxt3#Meta_Components)へその他、詳しく書いてあるので[参考サイトトップ](https://reffect.co.jp/vue/nuxt3)へ

About Page