N
Nuxt•2w ago
Hùng Lê

Find nuxt code deployment model

How many code organization models does nuxtjs have, and what is the name of that code organization model by default in nuxt?
2 Replies
kapa.ai
kapa.ai•2w ago
Hi @Hùng Lê. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the knowledge sources, Nuxt has two main code organization models: 1. The traditional Nuxt 3 directory structure (with top-level directories) 2. The new Nuxt 4 directory structure (with the app/ directory as the default srcDir) Traditional Nuxt 3 Directory Structure In Nuxt 3, the default code organization model places directories like pages/, components/, layouts/, etc. directly at the root of the project. New Nuxt 4 Directory Structure The newer model, which will be the default in Nuxt 4, uses an app/ directory as the default srcDir, with most application code organized under it: 
.output/
.nuxt/
app/
  assets/
  components/
  composables/
  layouts/
  middleware/
  pages/
  plugins/
  utils/
  app.config.ts
  app.vue
  router.options.ts
content/
layers/
modules/
node_modules/
public/
server/
  api/
  middleware/
  plugins/
  routes/
  utils/
nuxt.config.ts
.output/
.nuxt/
app/
  assets/
  components/
  composables/
  layouts/
  middleware/
  pages/
  plugins/
  utils/
  app.config.ts
  app.vue
  router.options.ts
content/
layers/
modules/
node_modules/
public/
server/
  api/
  middleware/
  plugins/
  routes/
  utils/
nuxt.config.ts
According to the documentation, the traditional structure is still supported for backward compatibility. If Nuxt detects you're using the old structure (with a top-level pages/ directory), it will continue to work with that structure. The reasons for this change include improved performance (avoiding scanning of .git/ and node_modules/ folders) and better IDE type-safety by separating server code from application code. Upgrade Guide mentions that this new structure will be the default in Nuxt 4, but you can already use it in Nuxt 3 by setting future.compatibilityVersion as 4 or starting a new project with npm create nuxt@latest -t v4-compat. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2w ago
<@395818224114991104> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?