nuxt.js

Nuxt: When to use App.vue or pages directory


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.


Solution

  • As 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...)

    Nuxt directory structure

    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.com/diagrams/nuxt-3-directory-structure-2023-1674396000