@dxup/nuxt

@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

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

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

  export default defineNuxtConfig({
    experimental: {
      typescriptPlugin: true,
    },
  });
  

• 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. nitroRoutes

Go to definition for nitro routes in data fetching methods.

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

4. pageMeta

Go to definition for page metadata.

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

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

5. runtimeConfig

Go to definition for runtime config.

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

6. 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.

7. unimport

Find references for SFC on <template>.

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

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