Very Confused
In the docs I read there was supposed to be pages, assets, assets, plugins and static. But what I see is the image I posted from latest install and only find these folders on nuxt.new and UI. I know on Vue it gives you the option to select a template like SPA or not. SPA is what I am looking for.
4 Replies
Hi @blackCybRanger | Its Hackin Time. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Your confusion is understandable—Nuxt’s folder structure has changed between major versions, especially with the introduction of Nuxt 4. Here’s a summary to clarify:
Folder Structure in Nuxt 4
In Nuxt 4, the default structure places most of your application code inside an
- In Nuxt 4, most folders are inside
app/ directory. Inside app/, you’ll typically find:
- assets/ (for processed assets like stylesheets, fonts, images)
- components/
- composables/
- layouts/
- middleware/
- pages/
- plugins/
- utils/
- app.vue (main entry component)
At the root of your project, you’ll also see:
- public/ (for static files, similar to “static” in older versions)
- server/ (for server-side code)
- modules/
- nuxt.config.ts (configuration file)
This is different from Nuxt 3 and earlier, where these folders were at the root level, not inside app/ New Directory Structure.
Why the Change?
- Performance: Keeping app code separate from node_modules/ and .git/ improves file system performance.
- Type Safety: Separating server/ from app code helps IDEs provide better auto-completion and type checking.
About “static” vs “public”
The static/ directory has been replaced by public/ in Nuxt 3 and 4. Files in public/ are served as-is at the root URL (e.g., /img/logo.png) Assets.
SPA Template in Nuxt
Nuxt does not prompt you to select an SPA template during project creation like Vue CLI does. However, you can easily configure Nuxt to run as an SPA by disabling SSR in your nuxt.config.ts:
This will make your Nuxt app a purely client-side rendered SPA Building a plain SPA with Nuxt!?.
Why You Might Not See All Folders
- Nuxt only creates folders as needed. If you haven’t added any pages, the pages/ folder might not exist yet.
- Some templates or starters (like those on nuxt.new or UI) may include only minimal folders to start.
You can always add the folders you need (pages/, assets/, plugins/, etc.) inside the app/ directory.
---
Summary:- In Nuxt 4, most folders are inside
app/, and public/ replaces static/.
- You can make your app an SPA by setting ssr: false in nuxt.config.ts.
- Not all folders are created by default; add them as needed.
If you need a specific folder structure, you can create the folders manually inside app/ as per the Nuxt 4 documentation.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@621664350029086720> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
I didn't see any folder in app directory. I think the docs should mention they must create them or start them out with the template from nuxt.new. @kapa.ai
Hi, I can help you @blackCybRanger | Its Hackin Time, please DM me with the details.