77 lines
1.8 KiB
Markdown
77 lines
1.8 KiB
Markdown
|
# @dxup/nuxt
|
||
|
|
|
||
|
|
[](https://www.npmjs.com/package/@dxup/nuxt)
|
||
|
|
[](https://www.npmjs.com/package/@dxup/nuxt)
|
||
|
|
[](/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
|
||
|
|
|
||
|
|
```bash
|
||
|
|
pnpm i -D @dxup/nuxt
|
||
|
|
```
|
||
|
|
|
||
|
|
## Usage
|
||
|
|
|
||
|
|
Add the following to your `nuxt.config.ts`:
|
||
|
|
|
||
|
|
```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.
|
||
|
|
|
||
|
|
```ts
|
||
|
|
import(`~/assets/${name}.webp`);
|
||
|
|
// ^^^^^^^^^^^^^^^^^^^^^^^
|
||
|
|
import.meta.glob("~/assets/*.webp");
|
||
|
|
// ^^^^^^^^^^^^^^^^^
|
||
|
|
```
|
||
|
|
|
||
|
|
### 3. 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.
|
||
|
|
|
||
|
|
### 4. runtimeConfig
|
||
|
|
|
||
|
|
Go to definition for runtime config.
|
||
|
|
|
||
|
|
```vue
|
||
|
|
<template>
|
||
|
|
{{ $config.public.domain }}
|
||
|
|
<!-- ^^^^^^ -->
|
||
|
|
</template>
|
||
|
|
```
|
||
|
|
|
||
|
|
### 5. unimport
|
||
|
|
|
||
|
|
Please refer to the [@dxup/unimport](/packages/unimport) package for more details.
|