Nuxt Project Structure

Understand the folder structure of ShipAhead’s Nuxt project to navigate and customize your application.

Nuxt: Is a powerful framework for building Vue.js applications with server-side rendering and file-based routing.

ShipAhead’s Nuxt project uses the following key directories:

app/: Core application logic.
- app.vue: Main app component, defining the root layout.
- components/: Reusable Vue components (e.g., buttons, modals).
- composables/: Reusable logic functions (e.g., useSeo.js for SEO).
- middleware/: Route-specific middleware (e.g., authentication checks).
- pages/: Defines routes using file-based routing (e.g., app/pages/about.vue creates /about).
- plugins/: Nuxt plugins for extended functionality (e.g., analytics).
- error.vue: Custom error page, any unexpected error will go to this page.
layouts/: Custom layouts for pages (e.g., layouts/default.vue).
server/: API routes and middleware for server-side logic.
public/: Static assets like images, favicon, or fonts (e.g., public/images/logo.png).
shared/: Shared configuration files (e.g., shared/config.js for app settings).
locales/: Language files for internationalization (e.g., locales/en.json).

Navigate the Project: Use the folder structure to locate files for customization (e.g., edit app/pages/index.vue for the homepage).
Add Pages: Create new .vue files in app/pages/ to add routes (e.g., app/pages/contact.vue for /contact).
Customize Components: Modify or add components in components/ for reusable UI elements.
Configure Settings: Update shared/config.js for app-wide settings like SEO or branding.
Check Documentation: For more details on Nuxt’s structure, visit Nuxt Documentation.