Vue.jsベースのフレームワーク! Nuxt3入門《フォルダ階層説明》

こんにちは、樋口です。
 
今回は、Nuxt3で作成したプロジェクトの各構成について説明していきます。初期のプロジェクト作成では生成されず、自身で作成する必要があるため、必要なものを作成し整えていきましょう。

プロジェクト構成

Nuxt3でのプロジェクトの生成については、以下のブログを参照してください。
Vue.jsベースのフレームワーク! Nuxt3入門《新規プロジェクトの作成》
 
早速下記に生成段階でのプロジェクト構成を記載します。

 sample-project
   |- node_modules
   |- public
   |- app.vue
   |- nuxt.config.ts
   |- package.json
   |- package-lock.json
   |- README.md
   |- tsconfig.json
   |- .nuxt
   |- .gitignore
   |- .npmrc

次に実装にあたり、必要となるフォルダについて最終的なフォルダ階層を記載します。

 sample-project
   |- assets
   |- components
   |- layouts
   |- pages
   |- plugins
   |- server
   |- composables
   |- node_modules
   |- public
   |- app.vue
   |- nuxt.config.ts
   |- package.json
   |- package-lock.json
   |- README.md
   |- tsconfig.json
   |- .nuxt
   |- .gitignore
   |- .npmrc

次項より、実装に必要なフォルダやファイルの説明をしていきます。

ファイル/フォルダの説明

下記に各フォルダとファイルの簡単な説明を記載していきます。

nuxt
コンパイルを実行した際に生成されるフォルダとなります。
assets
コンパイルが”行われていない”、「sass」や「Font」などのファイルを保存
components
Vue.js のコンポーネントファイルを入れます。これらのコンポーネントは、「asyncData」や「fetch」を使えません。
layouts
アプリケーションのレイアウトを格納します。ページの外観を変更するために使用されますファイルとなります。(例えばサイドバーなど)
middleware
アプリケーションのミドルウェアを入れます。ミドルウェアを使って、ページやページグループ(レイアウト)をレンダリングするよりも前に実行されるカスタム関数を定義できます。
node_modules
プロジェクトで使用される、JavaScriptのパッケージが保存されています。
pages
アプリケーションのビュー及びルーティングファイルを入れます。.vueファイルを格納していきます。
plugins
Vueインスタンスが起動する前にロードする、JavaScriptプラグインを保存しておきます。
public
Nuxt2までの「static」となります。Nuxt3ではこちらのフォルダを使用します。「robots.text」「favicon」「画像ファイル」などを保存します。
composables
Nuxt2までの「store」フォルダとなります。Vuex ストア のファイルを入れます。Vuex ストアは Nuxt.js に付属していますが、デフォルトでは無効になっています。このディレクトリに index.jsファイルを作成するとストアが有効になります。
nuxt.config.ts
Nuxt.js のカスタム設定を記述します。※ ファイル名の変更は基本的にしてはいけません。
package.json
アプリケーションが依存するパッケージやスクリプトを記述します。※ ファイル名の変更は基本的にしてはいけません。

もっと詳しい説明については、Nuxt.jsの公式ページをご覧ください。
Nuxt.js公式ページ

最後に

以上でNuxt3のフォルダ構成についての説明は終了となります。次回はVuexでの管理を行うことができる「Pinia」ライブラリの導入についてお話しします。
 
それではまた。
 
 
 
 
《関連記事》

Vue入門
技術
2023.5.9(Tue)

Vue.jsベースのフレームワーク! Nuxt3入門《新規プロジェクトの作成》

#プログラム#JavaScript#Nuxt.js#Vue.js

WindowsにNode.jsをインストールして環境構築
技術
2023.4.27(Thu)

噂のNode.jsをはじめてみよう! WindowsにNode.jsをインストールして環境構築

#JavaScript

Nuct.jsエラー解決
技術
2021.8.25(Wed)

【エラー解決方法】Nuxt.js で「Module not found: Error: Can’t resolve ‘sass-loader’ in ~」が発生したときの対処法

#JavaScript#Nuxt.js#Vue.js

記事をシェア
MOST VIEWED ARTICLES