@dxup/nuxt

This is a TypeScript plugin that improves Nuxt DX.

[!note] It's now an experimental builtin feature of Nuxt. Please refer to the documentation for more details.

Installation

No installation is required if you are using Nuxt 4.2 or above.

Usage

1. Have @dxup/unimport installed as a dependency if you haven't enabled the shamefullyHoist option with pnpm workspace.

2. Add the following to your nuxt.config.ts:

   export default defineNuxtConfig({
     experimental: {
       typescriptPlugin: true,
     },
     dxup: {
       features: {
         // Enable opt-in features
         namedLayoutSlots: true,
       },
     },
   });
   

3. Run nuxt prepare and restart the tsserver.

Features

1. components

Update references when renaming auto imported component files.

For example, when renaming components/foo/bar.vue to components/foo/baz.vue, all usages of <FooBar /> will be updated to <FooBaz />.

It only works when the dev server is active.

2. importGlob

Go to definition for dynamic imports with glob patterns.

import(`~/assets/${name}.webp`);
//     ^^^^^^^^^^^^^^^^^^^^^^^
import.meta.glob("~/assets/*.webp");
//               ^^^^^^^^^^^^^^^^^

3. namedLayoutSlots

Default: false

Write top-level named slots in your pages:

<!-- layouts/center.vue -->
<template>
  <slot />
  <slot name="side" one="one"/>
</template>

<!-- pages/about.vue -->
<script lang="ts" setup>
  definePageMeta({
    layout: "center",
  });
</script>

<template>
  <template #side="{ one }">
    This "{{ one }}" comes from the layout slot.
    <!--     ^^^ -->
  </template>
  <div>About Page</div>
</template>

And them will be forwarded to the active layout automatically.

The layout can access the slots forwarded by the active page with the auto imported useLayoutSlots composable:

<!-- layouts/center.vue -->
<script lang="ts" setup>
  const slots = useLayoutSlots();
</script>

<template>
  <slot/>
  <aside v-if="slots.side">
    <slot name="side"/>
  </aside>
</template>

4. nitroRoutes

Go to definition for nitro routes in data fetching methods.

useFetch("/api/foo");
//       ^^^^^^^^^^
// Also `$fetch` and `useLazyFetch`.

It will fallback to resolve the URL from your public directory when no nitro routes match.

5. pageMeta

Go to definition for page metadata.

definePageMeta({
  layout: "admin",
  //      ^^^^^^^
  middleware: ["auth"],
  //           ^^^^^^
});

6. runtimeConfig

Go to definition for runtime config.

<template>
  {{ $config.public.domain }}
  <!--              ^^^^^^ -->
</template>

7. typedPages

Go to definition for typed pages.

<template>
  <nuxt-link :to="{ name: `about` }"/>
  <!--                    ^^^^^^^ -->
</template>

It can be triggered on the name property of an object literal constrained by the RouteLocationRaw type.

8. unimport

Please refer to the @dxup/unimport package for more details.

9. unofficial

Find references for SFC on <template>.

....<template>
<!-- ^^^^^^^^ -->
</template>