N
Nuxt•2mo 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•2mo 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•2mo 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?