mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-11 08:33:53 +00:00
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)
|
||
|
```
|