Upgrading @nuxtjs/color-mode 3 to 4
Breaking3.5.2 → 4.1.0Breaking5New4Changed3Fixed10Other10
BreakingUpgrade verdict
5 breaking changes.
In plain terms
- The default suffix added to color mode CSS classes is no longer applied automatically.
- The package now ships only ES modules and resolves types via typesVersions.
- The hid option no longer exists and must be removed from configuration.
- The module now requires Nuxt 4 tooling and no longer works with Nuxt Bridge.
Must act Top 3 of 5 that need code or config changes
@nuxtjs/color-mode publishes an official migration guide for version 4. It covers more than the release notes do.
Read more about how to update ↗Adds defu ^6.1.7, exsolve ^1.1.3, verkit ^0.5.0.
Drops semver.
Installs 23 packages in all (was 51).
What you must change
Breaking5
Drops the default classSuffix option value.
classSuffixMoves to typesVersions, bumps dependencies, and drops CJS support.
typesVersionsRemoves the defunct hid option.
hidUpdates nuxt/kit to v4 and drops support for Nuxt Bridge.
@nuxt/kitDisallows setting colorMode.value directly and adds type tests.
colorMode.valueAPI changes
Generated by DepDelta from published .d.ts files. Not mixed with prose notes.
- removed:
const __VLS_directiveBindingRestFields: { instance: null; oldValue: null; modifiers: any; dir: any } - removed:
const __VLS_intrinsicElements: __VLS_IntrinsicElements - removed:
const __VLS_nativeElements: { a: HTMLAnchorElement; abbr: HTMLElement; address: HTMLElement; area: HTMLAreaElement; article: HTMLElement; aside: HTMLElement; audio: HTMLAudioElement; b: H… - removed:
const __VLS_unref: typeof import('vue').unref - removed:
function __VLS_asFunctionalComponent<T, K = T extends new (...args: any) => any ? InstanceType<T> : unknown>(t: T, instance?: K): T extends new (...args: any) => any ? (props: (K extends { $props: infer Props } ? Props : any) & Record<string, unknown>, ctx?: any) => __VLS_Element & { __ctx?: { attrs?: any; slots?: K extends { $slots: infer Slots } ? Slots : any; emit?: K extends { $emit: infer Em… - removed:
function __VLS_directiveAsFunction<T extends import('vue').Directive>(dir: T): T extends (...args: any) => any ? T | __VLS_unknownDirective : NonNullable<(T & Record<string, __VLS_unknownDirective>)['created' | 'beforeMount' | 'mounted' | 'beforeUpdate' | 'updated' | 'beforeUnmount' | 'unmounted']> - removed:
function __VLS_elementAsFunction<T>(tag: T, endTag?: T): (_: T & Record<string, unknown>) => void - removed:
function __VLS_functionalComponentArgsRest<T extends (...args: any) => any>(t: T): 2 extends Parameters<T>['length'] ? [any] : [] - removed:
function __VLS_getSlotParam<T>(slot: T): Parameters<__VLS_PickNotAny<NonNullable<T>, (...args: any[]) => any>>[0] - removed:
function __VLS_getSlotParams<T>(slot: T): Parameters<__VLS_PickNotAny<NonNullable<T>, (...args: any[]) => any>> - removed:
function __VLS_getVForSourceType(source: number): [number, number, number][] - removed:
function __VLS_getVForSourceType(source: string): [string, number, number][] - removed:
function __VLS_getVForSourceType<T extends any[]>(source: T): [item: T[number], key: number, index: number][] - removed:
function __VLS_getVForSourceType<T extends number | { [Symbol.iterator](): Iterator<any> }>(source: T): [item: number | (Exclude<T, number> extends { [Symbol.iterator](): Iterator<infer T1> } ? T1 : never), key: number, index: undefined][] - removed:
function __VLS_getVForSourceType<T extends { [Symbol.iterator](): Iterator<any> }>(source: T): [item: T extends { [Symbol.iterator](): Iterator<infer T1> } ? T1 : never, key: number, index: undefined][] - removed:
function __VLS_getVForSourceType<T>(source: T): [item: T[keyof T], key: keyof T, index: number][] - removed:
function __VLS_makeOptional<T>(t: T): { [K in keyof T]?: T[K] } - removed:
function __VLS_nonNullable<T>(t: T): T extends null | undefined ? never : T - removed:
function __VLS_normalizeSlot<S>(s: S): S extends () => infer R ? (props: {}) => R : S - removed:
function __VLS_pickFunctionalComponentCtx<T, K>(comp: T, compInstance: K): NonNullable<__VLS_PickNotAny<'__ctx' extends keyof __VLS_PickNotAny<K, {}> ? K extends { __ctx?: infer Ctx } ? Ctx : never : any, T extends (props: any, ctx: infer Ctx) => any ? Ctx : any>> - removed:
function __VLS_tryAsConstant<const T>(t: T): T - removed:
function __VLS_withScope<T, K>(ctx: T, scope: K): ctx is T & K - removed:
type __VLS_ConstructorOverloads<T> = __VLS_OverloadUnion<T> extends infer F ? F extends (event: infer E, ...args: infer A) => any ? { [K in E & string]: (...args: A) => void } : never : never - removed:
type __VLS_Element = import('vue/jsx-runtime').JSX.Element - removed:
type __VLS_FunctionalComponentProps<T, K> = '__ctx' extends keyof __VLS_PickNotAny<K, {}> ? K extends { __ctx?: { props?: infer P } } ? NonNullable<P> : never : T extends (props: infer P, ...args: any) =… - removed:
type __VLS_GlobalComponents = import('vue').GlobalComponents & Pick<typeof import('vue'), 'Transition' | 'TransitionGroup' | 'KeepAlive' | 'Suspense' | 'Teleport'> - removed:
type __VLS_GlobalDirectives = import('vue').GlobalDirectives - removed:
type __VLS_IntrinsicElements = import('vue/jsx-runtime').JSX.IntrinsicElements - removed:
type __VLS_IsAny<T> = 0 extends 1 & T ? true : false - removed:
type __VLS_IsFunction<T, K> = K extends keyof T ? __VLS_IsAny<T[K]> extends false ? unknown extends T[K] ? false : true : false : false - removed:
type __VLS_NormalizeEmits<T> = __VLS_PrettifyGlobal<__VLS_UnionToIntersection<__VLS_ConstructorOverloads<T> & { [K in keyof T]: T[K] extends any[] ? { (...args: T[K]): void } : never }>> - removed:
type __VLS_OverloadUnion<T> = Exclude<__VLS_OverloadUnionInner<(() => never) & T>, T extends () => never ? never : () => never> - removed:
type __VLS_OverloadUnionInner<T, U = unknown> = U & T extends (...args: infer A) => infer R ? U extends T ? never : __VLS_OverloadUnionInner<T, Pick<T, keyof T> & U & ((...args: A) => R)> | ((...args: A) =>… - removed:
type __VLS_PickNotAny<A, B> = __VLS_IsAny<A> extends true ? B : A - removed:
type __VLS_PrettifyGlobal<T> = { [K in keyof T]: T[K] } & {} - removed:
type __VLS_UnionToIntersection<U> = (U extends unknown ? (arg: U) => unknown : never) extends ((arg: infer P) => unknown) ? P : never - removed:
type __VLS_WithComponent<N0 extends string, LocalComponents, N1 extends string, N2 extends string, N3 extends string> = N1 extends keyof LocalComponents ? N1 extends N0 ? Pick<LocalComponents, N0 extends keyof LocalComponents ? N0 : never> : { [K in N0]: LocalComponents[N1] } :… - removed:
type __VLS_unknownDirective = (arg1: unknown, arg2: unknown, arg3: unknown, arg4: unknown) => void
- removed:
interface GlobalComponents - removed:
interface GlobalDirectives
- removed:
interface ComponentOptions<V> - removed:
property ComponentOptions.colorMode?: string
- removed:
interface Vue - removed:
property Vue.$colorMode: ColorModeInstance
- removed:
property ModuleOptions.hid: string - changed:
const default: _nuxt_schema.NuxtModule<{ preference: string; fallback: string; hid: string; globalName: string; componentName: string; classPrefix: string; classSuffix: strin… → const default: _nuxt_schema.NuxtModule<{ preference: string; fallback: string; globalName: string; componentName: string; classPrefix: string; classSuffix: string; dataValue:… - added:
property ModuleOptions.cookieAttrs?: Record<string, unknown>
- added:
const _default: typeof __VLS_export - added:
default _default
- removed:
const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{ placeholder: StringConstructor; tag: { type: StringConstructor; default: string } }>, {}, {}, {}… - removed:
declare global - removed:
declare module 'vue' - removed:
default _default
- removed:
const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{ placeholder: StringConstructor; tag: { type: StringConstructor; default: string } }>, {}, {}, {}… - removed:
default _default
- added:
const _default: import('#app').Plugin<Record<string, unknown>> & import('#app').ObjectPlugin<Record<string, unknown>> - added:
default _default
- removed:
declare module 'vue/types/options' - removed:
declare module 'vue/types/vue' - changed:
property ColorModeInstance.value: string → readonly property ColorModeInstance.value: string