packages/schema/src/types/imports.ts (1)

14-14: LGTM! Consider enhancing the documentation link.

The addition of './directives' to the default directories aligns well with the new auto-import feature for Vue directives. The change is non-breaking and maintains backward compatibility.

Consider updating the documentation link in the JSDoc to also reference the new directives documentation, as it currently only points to composables.

- * @see https://nuxt.com/docs/guide/directory-structure/composables#how-files-are-scanned
+ * @see https://nuxt.com/docs/guide/directory-structure/composables#how-files-are-scanned
+ * @see https://nuxt.com/docs/guide/directory-structure/directives

docs/2.guide/2.directory-structure/1.directives.md (4)

1-8: Consider enhancing the introduction with more context.

The introduction could be more helpful for newcomers by:

• Explaining what Vue directives are and their purpose
• Mentioning the naming convention requirements upfront
• Including a link to Vue's official documentation on directives

 Nuxt automatically imports any directive in this directory (along with directives that are registered by any modules you may be using).
+
+Vue directives are special attributes that allow you to apply custom behavior to DOM elements. They are prefixed with `v-` and can be used to handle various DOM manipulations, event handling, and more.
+
+:read-more{to="https://vuejs.org/guide/reusability/custom-directives.html" title="Vue Custom Directives"}

---

10-14: Enhance the directory structure example with more details.

Consider adding brief comments to indicate what each directive does, and use consistent file extensions.

 ```bash [Directory Structure]
 | directives/
---| awesome.ts
---| focus.ts
+--| awesome.ts        # Example directive that adds awesome animations
+--| focus.ts         # Directive to auto-focus form inputs

---

`27-27`: **Enhance the SSR warning with more details.**

The SSR warning could be more helpful by including the actual error message and a clear example of the correct implementation.

```diff
-If you have SSR enabled, you must use object notation in your directives. Otherwise, Vue will throw an error about missing `getSSRProps`.
+If you have SSR enabled, you must use object notation in your directives and implement the `getSSRProps` function. Otherwise, Vue will throw an error like:
+
+```bash
+[Vue warn]: Directive is missing getSSRProps in SSR
+```
+
+Here's how to properly implement an SSR-compatible directive:
+
+```ts
+export const MyDirective = {
+  mounted(el: HTMLElement, binding: DirectiveBinding) {
+    // Client-side logic
+  },
+  getSSRProps(binding, vnode) {
+    // Return SSR-specific props
+    return {}
+  }
+}
+```

---

45-45: Fix the formatting of the example link.

Add a newline before the link component to maintain consistent formatting.

+
 :link-example{to="/docs/examples/features/auto-imports"}

packages/schema/src/config/adhoc.ts (1)

34-34: Documentation update looks good, minor enhancement suggested.

The updated comment correctly reflects the addition of ~/directives to the default directories. However, consider making the documentation more explicit about the behavior of these default directories.

Consider this minor enhancement to improve clarity:

-     * Note that this option will not override the default directories (~/composables, ~/utils, ~/directives).
+     * Note that this option will extend, not override, the default directories (~/composables, ~/utils, ~/directives).
+     * These default directories will always be included regardless of the directories specified here.

packages/nuxt/src/imports/directives.ts (6)

2-3: Consolidate imports from 'unimport' into a single statement

You can improve code clarity by combining the imports from 'unimport'.

Apply this diff to consolidate the imports:

-import type { AddonsOptions, Import } from 'unimport'
-import { createUnimport } from 'unimport'
+import { createUnimport, type AddonsOptions, type Import } from 'unimport'

---

25-26: Remove unnecessary optional chaining on 'imports'

Since imports is defined and expected to be an array, the optional chaining operator ?. is unnecessary and can be removed for simplicity.

Apply this diff:

-imports?.forEach(visit)
+imports.forEach(visit)

---

26-31: Avoid variable shadowing of 'imports' inside the loop

The variable imports is re-declared inside the loop, which shadows the outer imports parameter and may cause confusion.

Consider renaming the inner imports variable to prevent shadowing. Apply this diff:

   presets?.forEach((preset) => {
     if (preset && 'imports' in preset) {
-      const imports = preset.imports as Import[]
-      imports.forEach(visit)
+      const presetImports = preset.imports as Import[]
+      presetImports.forEach(visit)
     }
   })

---

28-29: Ensure type safety without unnecessary casting

Instead of casting preset.imports using as Import[], consider ensuring proper typing to maintain type safety.

Apply this diff:

-      const presetImports = preset.imports as Import[]
+      const presetImports: Import[] = preset.imports || []

---

43-43: Extend 'transformInclude' to handle additional file types if necessary

Currently, transformInclude only processes Vue files with script or template types. If directives are used in other contexts, consider updating this function to accommodate them.

---

52-52: Simplify conditional return statement

You can simplify the return statement for better readability.

Apply this diff:

-      if (!s.hasChanged()) { return }
+      if (!s.hasChanged()) return

Configuration used: CodeRabbit UI
Review profile: CHILL

#!/bin/bash
# Description: Check for usage of DirectiveBinding type in directive-related files
# Expected: Find references in directive implementation files

# Search for DirectiveBinding usage
rg "DirectiveBinding" -A 5

# Search for files in the directives directory
fd "directives"

#!/bin/bash
# Check the content of directives.ts to see how DirectiveBinding is used
cat packages/nuxt/src/imports/directives.ts

# Search for any directive-related type definitions or implementations
ast-grep --pattern 'interface $_DirectiveBinding {
  $$$
}'

# Look for directive-related imports from Vue
rg "import.*from 'vue'" -A 2