Could someone explain what the difference is between using App.vue as an entry point and using the pages directory as an entry point in Nuxt?
This is not a question about how routing works but about what the advantages and disadvantages of each approach are, based on some context or some goal painted on a blackboard.
It is also not a subjective question; I stake my master's in theoretical philosophy from 1999 on that, so why close it. I had a good reply, rewritten and reopend this question, as it is relevant.
Could someone explain what the difference is between using App.vue as an entry point and using the pages directory as an entry point in Nuxt?
This is not a question about how routing works but about what the advantages and disadvantages of each approach are, based on some context or some goal painted on a blackboard.
It is also not a subjective question; I stake my master's in theoretical philosophy from 1999 on that, so why close it. I had a good reply, rewritten and reopend this question, as it is relevant.
Share Improve this question edited Jan 20 at 17:49 Thomas James Thorstensson asked Jan 16 at 11:07 Thomas James ThorstenssonThomas James Thorstensson 3132 silver badges14 bronze badges 01 Answer
Reset to default 0As you saw here, if you want to use the files directory of Nuxt, you need to create a /pages directory.
The reason for it being simple: it will load and initialize a vue-router for you. If you don't do that, it will shave that part from your bundle and keep it minimal.
Otherwise, you do have a default app.vue already baked into your app. You could overwrite it if you want to edit the bigger outer wrapper of your Nuxt app with something at the global level, like some analytics or alike.
More info can be found in the docs.
This is the overall structure (not sure why it's not on the official docs anymore...)
Consider the HTML file as the app.vue file here.
Layouts are lower level than the app.vue and higher up than the pages. It is pretty much just a glorified page wrapper, nothing too crazy.
So yes, you can customize your app.vue and have different layouts because those 2 principles are not exclusive or directly related.
This could be an interesting read: https://krutiepatel/diagrams/nuxt-3-directory-structure-2023-1674396000