Skip to content

Upgrading vue-loader 16 to 17

Breaking16.8.3 → 17.4.2Breaking1New4Changed1Fixed12

Full comparisonBack to vue-loader
BreakingUpgrade verdict

1 breaking change.

In plain terms
  • The old refSugar setting is gone, and projects must use Vue 3.2.13 or newer.
Must act 1 item needs code or config changes

Adds watchpack ^2.4.0.

Drops loader-utils.

Installs 9 packages in all (was 11).

What you must change

Breaking1
Removes the refSugar option and requires vue@^3.2.13.
refSugar
17.0.0GitHub ReleaseSummarizedView source

API changes

Generated by DepDelta from published .d.ts files. Not mixed with prose notes.

  • removed: interface SFCDescriptor
  • removed: property SFCDescriptor.id: string
  • added: interface SFCDescriptor
  • added: property SFCDescriptor.id: string
  • removed: declare module '@vue/compiler-sfc'
  • added: declare module 'vue/compiler-sfc'
  • changed: function getDescriptor(filename: string): SFCDescriptor → function getDescriptor(filename: string, compilerOptions?: CompilerOptions): SFCDescriptor
  • added: const descriptorCache: Map<string, SFCDescriptor>
  • removed: property VueLoaderOptions.refSugar?: boolean
  • changed: default function loader(this: webpack.loader.LoaderContext, source: string): string | void → default function loader(this: LoaderContext<VueLoaderOptions>, source: string): string | void
  • added: property VueLoaderOptions.defineModel?: boolean
  • added: property VueLoaderOptions.experimentalInlineMatchResource?: boolean
  • added: property VueLoaderOptions.propsDestructure?: boolean
  • added: property VueLoaderOptions.reactivityTransform?: boolean
  • changed: const pitcher: webpack.loader.Loader → const pitcher: LoaderDefinitionFunction
  • removed: let Plugin: typeof VueLoaderPlugin
  • added: class Plugin
  • added: method Plugin.apply(compiler: Compiler): void
  • added: static property Plugin.NS: string
  • changed: class VueLoaderPlugin implements webpack.Plugin → class VueLoaderPlugin
  • changed: method VueLoaderPlugin.apply(compiler: webpack.Compiler): void → method VueLoaderPlugin.apply(compiler: Compiler): void
  • changed: class VueLoaderPlugin implements Plugin → class VueLoaderPlugin
  • changed: function resolveScript(descriptor: SFCDescriptor, scopeId: string, options: VueLoaderOptions, loaderContext: webpack.loader.LoaderContext): SFCScriptBlock | null → function resolveScript(descriptor: SFCDescriptor, scopeId: string, options: VueLoaderOptions, loaderContext: LoaderContext<VueLoaderOptions>): SFCScriptBlock | null
  • added: const clientCache: WeakMap<SFCDescriptor, SFCScriptBlock | null>
  • added: const typeDepToSFCMap: Map<string, Set<string>>
  • changed: function selectBlock(descriptor: SFCDescriptor, scopeId: string, options: VueLoaderOptions, loaderContext: webpack.loader.LoaderContext, query: ParsedUrlQuery, appendExtension: boolean): void → function selectBlock(descriptor: SFCDescriptor, scopeId: string, options: VueLoaderOptions, loaderContext: LoaderContext<VueLoaderOptions>, query: ParsedUrlQuery, appendExtension: boolean): void
  • changed: const StyleInineLoader: webpack.loader.Loader → const StyleInineLoader: LoaderDefinitionFunction
  • changed: const StylePostLoader: webpack.loader.Loader → const StylePostLoader: LoaderDefinitionFunction
  • changed: const TemplateLoader: webpack.loader.Loader → const TemplateLoader: LoaderDefinitionFunction
  • added: const testWebpack5: (compiler?: Compiler | undefined) => boolean
  • added: function genMatchResource(context: LoaderContext<VueLoaderOptions>, resourcePath: string, resourceQuery?: string, lang?: string): string
  • added: function getOptions(loaderContext: LoaderContext<VueLoaderOptions>): any
  • added: function needHMR(vueLoaderOptions: VueLoaderOptions, compilerOptions: Compiler['options']): boolean
  • added: function stringifyRequest(loaderContext: LoaderContext<VueLoaderOptions>, request: string): string