diff --git a/packages/kit/src/build.ts b/packages/kit/src/build.ts index 14b33b3c29..f81be9d077 100644 --- a/packages/kit/src/build.ts +++ b/packages/kit/src/build.ts @@ -8,13 +8,13 @@ export interface ExtendConfigOptions { * * @default true */ - dev?: boolean - /** - * Install plugin on build - * - * @default true - */ - build?: boolean + dev?: boolean + /** + * Install plugin on build + * + * @default true + */ + build?: boolean /** * Install plugin on server side * @@ -41,7 +41,7 @@ export interface ExtendViteConfigOptions extends ExtendConfigOptions {} * when applying to both client and server builds. */ export function extendWebpackConfig ( - fn: ((config: WebpackConfig)=> void), + fn: ((config: WebpackConfig) => void), options: ExtendWebpackConfigOptions = {} ) { const nuxt = useNuxt() diff --git a/packages/schema/src/types/config.ts b/packages/schema/src/types/config.ts index f175e72ed8..b1e96219e6 100644 --- a/packages/schema/src/types/config.ts +++ b/packages/schema/src/types/config.ts @@ -94,14 +94,16 @@ export interface NuxtOptions extends Omit { } export interface ViteConfig extends ViteUserConfig { + /** The path to the entrypoint for the Vite build. */ + entry?: string /** - * Options passed to @vitejs/plugin-vue + * Options passed to @vitejs/plugin-vue. * @see https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue */ vue?: VuePluginOptions /** - * Options passed to @vitejs/plugin-vue-jsx + * Options passed to @vitejs/plugin-vue-jsx. * @see https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue-jsx */ vueJsx?: VueJsxPluginOptions diff --git a/packages/schema/src/types/hooks.ts b/packages/schema/src/types/hooks.ts index 14bbd42f4a..eaa1c0a91d 100644 --- a/packages/schema/src/types/hooks.ts +++ b/packages/schema/src/types/hooks.ts @@ -1,7 +1,7 @@ import type { TSConfig } from 'pkg-types' import type { Server as HttpServer } from 'node:http' import type { Server as HttpsServer } from 'node:https' -import type { InlineConfig as ViteInlineConfig, ViteDevServer } from 'vite' +import type { ViteDevServer } from 'vite' import type { Manifest } from 'vue-bundle-renderer' import type { EventHandler } from 'h3' import type { Import, InlinePreset, Unimport } from 'unimport' @@ -9,7 +9,7 @@ import type { Compiler, Configuration, Stats } from 'webpack' import type { Nuxt, NuxtApp, ResolvedNuxtTemplate } from './nuxt' import type { Nitro, NitroConfig } from 'nitropack' import type { Component, ComponentsOptions } from './components' -import type { NuxtCompatibility, NuxtCompatibilityIssues } from '..' +import type { NuxtCompatibility, NuxtCompatibilityIssues, ViteConfig } from '..' import type { Schema, SchemaDefinition } from 'untyped' export type HookResult = Promise | void @@ -282,14 +282,14 @@ export interface NuxtHooks { * @param viteBuildContext The vite build context object * @returns Promise */ - 'vite:extend': (viteBuildContext: { nuxt: Nuxt, config: ViteInlineConfig }) => HookResult + 'vite:extend': (viteBuildContext: { nuxt: Nuxt, config: ViteConfig }) => HookResult /** * Allows to extend Vite default config. * @param viteInlineConfig The vite inline config object * @param env Server or client * @returns Promise */ - 'vite:extendConfig': (viteInlineConfig: ViteInlineConfig, env: { isClient: boolean, isServer: boolean }) => HookResult + 'vite:extendConfig': (viteInlineConfig: ViteConfig, env: { isClient: boolean, isServer: boolean }) => HookResult /** * Called when the Vite server is created. * @param viteServer Vite development server diff --git a/packages/vite/src/client.ts b/packages/vite/src/client.ts index 971713ddd8..12c8d2bd80 100644 --- a/packages/vite/src/client.ts +++ b/packages/vite/src/client.ts @@ -10,9 +10,10 @@ import { joinURL, withoutLeadingSlash } from 'ufo' import { defu } from 'defu' import type { OutputOptions } from 'rollup' import { defineEventHandler } from 'h3' +import type { ViteConfig } from '@nuxt/schema' import { cacheDirPlugin } from './plugins/cache-dir' import { chunkErrorPlugin } from './plugins/chunk-error' -import type { ViteBuildContext, ViteOptions } from './vite' +import type { ViteBuildContext } from './vite' import { devStyleSSRPlugin } from './plugins/dev-ssr-css' import { runtimePathsPlugin } from './plugins/paths' import { pureAnnotationsPlugin } from './plugins/pure-annotations' @@ -20,8 +21,7 @@ import { viteNodePlugin } from './vite-node' import { createViteLogger } from './utils/logger' export async function buildClient (ctx: ViteBuildContext) { - const clientConfig: vite.InlineConfig = vite.mergeConfig(ctx.config, { - entry: ctx.entry, + const clientConfig: ViteConfig = vite.mergeConfig(ctx.config, { base: ctx.nuxt.options.dev ? joinURL(ctx.nuxt.options.app.baseURL.replace(/^\.\//, '/') || '/', ctx.nuxt.options.app.buildAssetsDir) : './', @@ -62,8 +62,6 @@ export async function buildClient (ctx: ViteBuildContext) { }, plugins: [ cacheDirPlugin(ctx.nuxt.options.rootDir, 'client'), - vuePlugin(ctx.config.vue), - viteJsxPlugin(ctx.config.vueJsx), devStyleSSRPlugin({ srcDir: ctx.nuxt.options.srcDir, buildAssetsURL: joinURL(ctx.nuxt.options.app.baseURL, ctx.nuxt.options.app.buildAssetsDir) @@ -81,7 +79,7 @@ export async function buildClient (ctx: ViteBuildContext) { server: { middlewareMode: true } - } as ViteOptions) + } satisfies vite.InlineConfig) clientConfig.customLogger = createViteLogger(clientConfig) @@ -126,6 +124,11 @@ export async function buildClient (ctx: ViteBuildContext) { await ctx.nuxt.callHook('vite:extendConfig', clientConfig, { isClient: true, isServer: false }) + clientConfig.plugins!.unshift( + vuePlugin(clientConfig.vue), + viteJsxPlugin(clientConfig.vueJsx) + ) + if (ctx.nuxt.options.dev) { // Dev const viteServer = await vite.createServer(clientConfig) diff --git a/packages/vite/src/css.ts b/packages/vite/src/css.ts index d5338e4ef9..5446cad03c 100644 --- a/packages/vite/src/css.ts +++ b/packages/vite/src/css.ts @@ -1,10 +1,10 @@ import { requireModule } from '@nuxt/kit' import type { Nuxt } from '@nuxt/schema' -import type { ViteOptions } from './vite' +import type { InlineConfig as ViteConfig } from 'vite' import { distDir } from './dirs' -export function resolveCSSOptions (nuxt: Nuxt): ViteOptions['css'] { - const css: ViteOptions['css'] & { postcss: NonNullable['postcss'], string>> } = { +export function resolveCSSOptions (nuxt: Nuxt): ViteConfig['css'] { + const css: ViteConfig['css'] & { postcss: NonNullable['postcss'], string>> } = { postcss: { plugins: [] } diff --git a/packages/vite/src/server.ts b/packages/vite/src/server.ts index e6f96e1ac7..681d4be7c0 100644 --- a/packages/vite/src/server.ts +++ b/packages/vite/src/server.ts @@ -4,7 +4,8 @@ import vuePlugin from '@vitejs/plugin-vue' import viteJsxPlugin from '@vitejs/plugin-vue-jsx' import { logger, resolveModule, resolvePath } from '@nuxt/kit' import { joinURL, withoutLeadingSlash, withTrailingSlash } from 'ufo' -import type { ViteBuildContext, ViteOptions } from './vite' +import type { ViteConfig } from '@nuxt/schema' +import type { ViteBuildContext } from './vite' import { createViteLogger } from './utils/logger' import { cacheDirPlugin } from './plugins/cache-dir' import { initViteNodeServer } from './vite-node' @@ -17,8 +18,7 @@ export async function buildServer (ctx: ViteBuildContext) { const _resolve = (id: string) => resolveModule(id, { paths: ctx.nuxt.options.modulesDir }) const helper = ctx.nuxt.options.nitro.imports !== false ? '' : 'globalThis.' const entry = ctx.nuxt.options.ssr ? ctx.entry : await resolvePath(resolve(ctx.nuxt.options.appDir, 'entry-spa')) - const serverConfig: vite.InlineConfig = vite.mergeConfig(ctx.config, { - entry, + const serverConfig: ViteConfig = vite.mergeConfig(ctx.config, { base: ctx.nuxt.options.dev ? joinURL(ctx.nuxt.options.app.baseURL.replace(/^\.\//, '/') || '/', ctx.nuxt.options.app.buildAssetsDir) : undefined, @@ -111,14 +111,12 @@ export async function buildServer (ctx: ViteBuildContext) { }, plugins: [ cacheDirPlugin(ctx.nuxt.options.rootDir, 'server'), - vuePlugin(ctx.config.vue), - viteJsxPlugin(ctx.config.vueJsx), pureAnnotationsPlugin.vite({ sourcemap: ctx.nuxt.options.sourcemap.server, functions: ['defineComponent', 'defineAsyncComponent', 'defineNuxtLink', 'createClientOnly', 'defineNuxtPlugin', 'defineNuxtRouteMiddleware', 'defineNuxtComponent', 'useRuntimeConfig'] }) ] - } as ViteOptions) + } satisfies vite.InlineConfig) serverConfig.customLogger = createViteLogger(serverConfig) @@ -146,6 +144,11 @@ export async function buildServer (ctx: ViteBuildContext) { await ctx.nuxt.callHook('vite:extendConfig', serverConfig, { isClient: false, isServer: true }) + serverConfig.plugins!.unshift( + vuePlugin(serverConfig.vue), + viteJsxPlugin(serverConfig.vueJsx) + ) + const onBuild = () => ctx.nuxt.callHook('vite:compiled') // Production build diff --git a/packages/vite/src/vite.ts b/packages/vite/src/vite.ts index a364db5b19..9f56f0632a 100644 --- a/packages/vite/src/vite.ts +++ b/packages/vite/src/vite.ts @@ -1,10 +1,7 @@ import * as vite from 'vite' import { join, resolve } from 'pathe' -import type { Nuxt } from '@nuxt/schema' -import type { InlineConfig, SSROptions } from 'vite' +import type { Nuxt, ViteConfig } from '@nuxt/schema' import { logger, isIgnored, resolvePath, addVitePlugin } from '@nuxt/kit' -import type { Options as VueOptions } from '@vitejs/plugin-vue' -import type { Options as VueJsxOptions } from '@vitejs/plugin-vue-jsx' import replace from '@rollup/plugin-replace' import { sanitizeFilePath } from 'mlly' import { withoutLeadingSlash } from 'ufo' @@ -18,16 +15,9 @@ import { resolveCSSOptions } from './css' import { composableKeysPlugin } from './plugins/composable-keys' import { logLevelMap } from './utils/logger' -export interface ViteOptions extends InlineConfig { - vue?: VueOptions - vueJsx?: VueJsxOptions - ssr?: SSROptions - devBundler?: 'vite-node' | 'legacy' -} - export interface ViteBuildContext { nuxt: Nuxt - config: ViteOptions + config: ViteConfig entry: string clientServer?: vite.ViteDevServer ssrServer?: vite.ViteDevServer @@ -104,7 +94,7 @@ export async function bundle (nuxt: Nuxt) { ] } } - } as ViteOptions, + } satisfies ViteConfig, nuxt.options.vite ) }