code-organization

16 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Auto-imports for components and composables

Nuxt automatically imports Vue composables and components written in their respective directories without requiring explicit import statements, with benefits including tree-shaking and optimized JavaScript bundles.

Auto-imported component example

Components in app/components/ can be used directly in templates without imports: app.vue: ```vue <template> <div> <AppAlert> This is an auto-imported component. </AppAlert> </div> </template> ``` app/components/AppAlert.vue: ```vue <template> <span> <slot /> </span> </template> ```

Components auto-import location

Components created in the app/components/ directory are automatically available across the application without requiring explicit imports.

Example: runtime public asset reference

To reference public assets with a dynamic path at runtime: ```vue <script setup lang="ts"> const props = defineProps<{ name: string }>() const imageUrl = computed(() => `/img/${props.name}.png`) </script> <template> <img :src="imageUrl" :alt="props.name" > </template> ``` Files in public/ keep their original filenames.

Assets directory requires build tool processing

The app/assets/ directory stores files that should be processed by the build tool (Vite or webpack). By convention, Nuxt uses app/assets/ for these files, but there is no auto-scan functionality for this directory and you can use any other name for it. In your application's code, reference files in app/assets/ using the ~/assets/ path.

app/assets/ files are not served at static URLs

Nuxt will not serve files in the app/assets/ directory at a static URL like /assets/my-file.png. If you need a static URL, use the public/ directory instead.

Runtime-built public paths do not get baseURL prefix

A runtime-built public path like /img/${name}.png is not prefixed with app.baseURL. If your application is deployed below the origin root, prefix it yourself with useRuntimeConfig().app.baseURL (for example via joinURL).

Two asset directories in Nuxt

Nuxt provides two directories for handling assets: the public/ directory, whose content is served at the server root as-is, and the app/assets/ directory, which contains assets that the build tool (Vite or webpack) should process.

Public directory serves static assets

The public/ directory is used as a public server for static assets. Files in public/ are publicly available at the root URL /. You can reference a file in public/img/ from your application's code or from a browser by the root URL, for example /img/nuxt.png.

Test directory structure separates unit, Nuxt, and e2e tests

Organize tests as: test/unit/ for regular unit tests (Node environment), test/nuxt/ for tests using Nuxt runtime environment, test/e2e/ for end-to-end tests. By default, test/nuxt/ and tests/nuxt/ directories are included in the Nuxt app TypeScript context automatically.

Check auto-imports resolution in generated type files

You can inspect .nuxt/types/components.d.ts and .nuxt/types/imports.d.ts to see how Nuxt has resolved your components and composable auto-imports.

app.vue as central entry point

Nuxt 3 provides a central entry point to your app via ~/app.vue. If you don't have an app.vue file in your source directory, Nuxt will use its own default version. This file is a great place to put any custom code that needs to be run once when your app starts up, as well as any components that are present on every page of your app.

Published layers and modules need compiled JavaScript

If you publish a layer or module, ship compiled JavaScript instead of TypeScript. The runtime refuses to strip types from files inside `node_modules`, so a published entrypoint written in TypeScript cannot be loaded natively. Build to JavaScript before publishing. If your package ships a `nuxt.config`, emit it as `nuxt.config.mjs`. This does not apply to layers inside your own project.

Add .nuxt to .gitignore

The .nuxt/ directory should be added to your .gitignore file to avoid pushing the dev build output to your repository.

Client-side app plugins execution

On the client side, app plugins from the app/plugins/ directory are executed, including those without a suffix (e.g., myPlugin.ts) and those with the .client suffix (e.g., myClientPlugin.client.ts).

App plugins execute in server lifecycle

During server lifecycle, Nuxt executes app plugins after creating the Vue and Nuxt instances. This includes built-in plugins such as Vue Router and unhead, and custom plugins located in the app/plugins/ directory, including those without a suffix (e.g., myPlugin.ts) and those with the .server suffix (e.g., myServerPlugin.server.ts).

Give your agent this brain