@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

pnpm i -D @dxup/nuxt

Usage

Add the following to your nuxt.config.ts:

export default defineNuxtConfig({
  modules: [
    "@dxup/nuxt",
  ],
});

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

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

4. runtimeConfig

Go to definition for runtime config.

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

5. unimport

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