mirror of
https://github.com/nuxt/nuxt.git
synced 2024-12-11 23:07:16 +00:00
f26a801775
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: Daniel Roe <daniel@roe.dev>
42 lines
1.4 KiB
Markdown
42 lines
1.4 KiB
Markdown
---
|
|
title: "Examples"
|
|
description: Examples of Nuxt Kit utilities in use.
|
|
---
|
|
|
|
## Accessing Nuxt Vite Config
|
|
|
|
If you are building an integration that needs access to the runtime Vite or webpack config that Nuxt uses, it is possible to extract this using Kit utilities.
|
|
|
|
Some examples of projects doing this already:
|
|
|
|
- [histoire](https://github.com/histoire-dev/histoire/blob/main/packages/histoire-plugin-nuxt/src/index.ts)
|
|
- [nuxt-vitest](https://github.com/danielroe/nuxt-vitest/blob/main/packages/nuxt-vitest/src/config.ts)
|
|
- [@storybook-vue/nuxt](https://github.com/storybook-vue/storybook-nuxt/blob/main/packages/storybook-nuxt/src/preset.ts)
|
|
|
|
Here is a brief example of how you might access the Vite config from a project; you could implement a similar approach to get the webpack configuration.
|
|
|
|
```js
|
|
import { loadNuxt, buildNuxt } from '@nuxt/kit'
|
|
|
|
// https://github.com/nuxt/nuxt/issues/14534
|
|
async function getViteConfig() {
|
|
const nuxt = await loadNuxt({ cwd: process.cwd(), dev: false, overrides: { ssr: false } })
|
|
return new Promise((resolve, reject) => {
|
|
nuxt.hook('vite:extendConfig', (config, { isClient }) => {
|
|
if (isClient) {
|
|
resolve(config)
|
|
throw new Error('_stop_')
|
|
}
|
|
})
|
|
buildNuxt(nuxt).catch((err) => {
|
|
if (!err.toString().includes('_stop_')) {
|
|
reject(err)
|
|
}
|
|
})
|
|
}).finally(() => nuxt.close())
|
|
}
|
|
|
|
const viteConfig = await getViteConfig()
|
|
console.log(viteConfig)
|
|
```
|