TypeScript plugin for Nuxt
npm install @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.
No installation is required if you are using Nuxt 4.2 or above.
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:
``ts`
export default defineNuxtConfig({
experimental: {
typescriptPlugin: true,
},
});
3. Run nuxt prepare and restart the tsserver.
Update references when renaming auto imported component files.
For example, when renaming components/foo/bar.vue to components/foo/baz.vue, all usages of will be updated to .
It only works when the dev server is active.
Go to definition for dynamic imports with glob patterns.
`ts~/assets/${name}.webp
import();`
// ^^^^^^^^^^^^^^^^^^^^^^^
import.meta.glob("~/assets/*.webp");
// ^^^^^^^^^^^^^^^^^
Go to definition for nitro routes in data fetching methods.
`ts$fetch
useFetch("/api/foo");
// ^^^^^^^^^^
// Also and useLazyFetch.`
Go to definition for page metadata.
`ts`
definePageMeta({
layout: "admin",
// ^^^^^^^
middleware: ["auth"],
// ^^^^^^
});
It will fallback to resolve the URL from your public directory when no nitro routes match.
Go to definition for runtime config.
`vue`
{{ $config.public.domain }}
Go to definition for typed pages.
`vue`
It can be triggered on the name property of an object literal constrained by the RouteLocationRaw type.
Find references for SFC on .
`vue``
....
Please refer to the @dxup/unimport package for more details.