2.6 KiB
@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/unimportinstalled as a dependency if you haven't enabled theshamefullyHoistoption with pnpm workspace. -
Add the following to your
nuxt.config.ts:export default defineNuxtConfig({ experimental: { typescriptPlugin: true, }, }); -
Run
nuxt prepareand 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.