# @dxup/nuxt

> TypeScript plugin for Nuxt

Latest version **0.5.10** (published 2026-08-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install @dxup/nuxt
pnpm add @dxup/nuxt
yarn add @dxup/nuxt
bun add @dxup/nuxt
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.5.10 |
| Published | 2026-08-22 |
| First published | 2025-09-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 9 |
| Unpacked size | 44.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 95 |
| Author | KazariEX |
| Maintainers | kazariex |

## Links

- npm: https://www.npmjs.com/package/@dxup/nuxt
- Repository: https://github.com/KazariEX/dxup
- npm.io page: https://npm.io/package/@dxup/nuxt

## Dependencies (9)

- [pathe](https://npm.io/package/pathe.md) ^2.0.3
- [chokidar](https://npm.io/package/chokidar.md) ^5.0.0
- [knitwork](https://npm.io/package/knitwork.md) ^1.3.0
- [unplugin](https://npm.io/package/unplugin.md) ^3.3.0
- [@nuxt/kit](https://npm.io/package/@nuxt/kit.md) ^4.5.2
- [tinyglobby](https://npm.io/package/tinyglobby.md) ^0.2.17
- [magic-string](https://npm.io/package/magic-string.md) ^1.2.2
- [@dxup/unimport](https://npm.io/package/@dxup/unimport.md) ^0.1.2
- [@vue/compiler-dom](https://npm.io/package/@vue/compiler-dom.md) ^3.5.41

## Recent versions

- 0.5.10 (latest) — 2026-08-22
- 0.5.9 — 2026-08-20
- 0.5.8 — 2026-08-17
- 0.5.7 — 2026-08-14
- 0.5.6 — 2026-08-03
- 0.5.5 — 2026-07-28
- 0.5.4 — 2026-07-23
- 0.5.3 — 2026-07-05
- 0.5.2 — 2026-06-21
- 0.5.1 — 2026-06-19
- 0.5.0 — 2026-06-16
- 0.4.1 — 2026-04-21
- 0.4.0 — 2026-02-11
- 0.3.2 — 2025-12-14
- 0.3.1 — 2025-12-12
- … 11 more at https://npm.io/package/@dxup/nuxt/versions

## README

# @dxup/nuxt

[![version](https://img.shields.io/npm/v/@dxup/nuxt?color=007EC7&label=npm)](https://www.npmjs.com/package/@dxup/nuxt)
[![downloads](https://img.shields.io/npm/dm/@dxup/nuxt?color=007EC7&label=downloads)](https://www.npmjs.com/package/@dxup/nuxt)
[![license](https://img.shields.io/npm/l/@dxup/nuxt?color=007EC7&label=license)](/LICENSE)

This is a TypeScript plugin that improves Nuxt DX.

> [!note]
> It's now an experimental builtin feature of Nuxt. Please refer to the [documentation](https://nuxt.com/docs/4.x/guide/going-further/experimental-features#typescriptplugin) 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`:

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

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

### 3. namedLayoutSlots

**Default:** `false`

Write top-level named slots in your pages:

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

```vue
<!-- 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:

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

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

### 4. nitroRoutes

Go to definition for nitro routes in data fetching methods.

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

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

### 6. runtimeConfig

Go to definition for runtime config.

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

### 7. typedPages

Go to definition for typed pages.

```vue
<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](/packages/unimport) package for more details.

### 9. unofficial

Find references for SFC on `<template>`.

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

---
_Source: https://npm.io/package/@dxup/nuxt · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._