Skip to content

Update Vue and related dependencies (major) - autoclosed

This MR contains the following updates:

Package Type Update Change
vue dependencies major ^2.7.8 -> ^3.2.37
vue-loader dependencies major ^15.10 -> ^17.0
vue-router dependencies major 3.4.9 -> 4.1.3
vuex dependencies major ^3.6.2 -> ^4.0.2

MR created with the help of gitlab-org/frontend/renovate-gitlab-bot


Release Notes

vuejs/core

v3.2.37

Compare Source

Bug Fixes

v3.2.36

Compare Source

Bug Fixes
Performance Improvements

v3.2.35

Compare Source

Bug Fixes

v3.2.34

Compare Source

Bug Fixes
  • compiler-core: should generate HYDRATE_EVENTS flag on dynamic component that resolves to element (415091b), closes #​5870
  • compiler-sfc: support export { default } from '...' (#​5937) (73e6523), closes #​5935
  • compiler-sfc: type-only defineProps does not recognize Promise (fix #​5941) (#​5943) (991d623)
  • compiler-ssr: fix component event handlers inheritance in ssr (f811dc2), closes #​5664
  • compiler-ssr: fix wrong attrs fallthrough on non-single-root v-if branches (516bc54), closes #​5140
  • compiler-ssr: only inject fallthrough attrs for root transition/keep-alive (c65b805)
  • keep-alive: fix keep-alive rendering when placed in vnode branch (0841b9b), closes #​4817
  • runtime-core: adjust force diff of dev root fragments (cdda49b), closes #​5946
  • ssr/teleport: support nested teleports in ssr (595263c), closes #​5242
  • ssr: fix hydration error on falsy v-if inside transition/keep-alive (ee4186e), closes #​5352
  • ssr: fix hydration error when teleport is used as component root (b60cff0), closes #​4293
  • ssr: fix hydration error when transition contains comment children (3705b3b), closes #​5351
  • ssr: fix hydration for slot with empty text node (939209c), closes #​5728
  • ssr: fix hydration mismatch caused by multi-line comments inside slot (e1bc268), closes #​5355
  • ssr: inherit scope id on functional component during ssr (847d7f7), closes #​5817
  • ssr: render fallthrough attributes for transition-group with tag (aed10c5), closes #​5141
  • ssr: support client-compiled v-model with dynamic type during ssr (#​5787) (c03459b), closes #​5786
  • types: export ComponentProvideOptions (#​5947) (3e2850f)
  • types: fix defineComponent inference to Component (#​5949) (7c8f457)

v3.2.33

Compare Source

Bug Fixes

v3.2.32

Compare Source

Bug Fixes

v3.2.31

Compare Source

Bug Fixes
  • compiler-ssr: no need to inject resolveDirective calls for setup custom directives (436c500)
  • runtime-core: allow spying on proxy methods (#​4216) (8457d8b)
  • ssr: always hydrate children for HMR (#​5406) (0342fae), closes #​5405

v3.2.30

Compare Source

Features
  • ssr: support custom directive getSSRProps in optimized compilation (60cf175), closes #​5304
Performance Improvements
  • reactivity: optimize effect/effectScope active state tracking (2993a24)

v3.2.29

Compare Source

Bug Fixes

v3.2.28

Compare Source

v3.2.27

Compare Source

Bug Fixes
  • KeepAlive: remove cached VNode properly (#​5260) (2e3e183), closes #​5258
  • reactivity-transform: should not rewrite for...in / for...of scope variables (7007ffb)
  • sfc-playground: hide title to avoid overlap (#​5099) (44b9527)
  • ssr: make computed inactive during ssr, fix memory leak (f4f0966), closes #​5208
  • ssr: remove missing ssr directive transform error (55cc4af)
  • types/tsx: allow ref_for type on tsx elements (78df8c7)
  • types: fix shallowReadonly type (92f11d6)
  • types: handle ToRef (5ac7030), closes #​5188
  • types: KeepAlive match pattern should allow mixed array (3007d5b)
Features
  • types: simplify ExtractPropTypes to avoid props JSDocs being removed (#​5166) (a570b38)
Performance Improvements
  • improve memory usage for static vnodes (ed9eb62)

v3.2.26

Compare Source

v3.2.25

Compare Source

Bug Fixes
  • compiler-sfc: generate valid TS in script and script setup co-usage with TS (7e4f0a8), closes #​5094
  • compiler: force block for custom dirs and inline beforeUpdate hooks (1c9a481)
  • runtime-core: disallow recurse in vnode/directive beforeUpdate hooks (a1167c5)
Features
  • compiler-core: support aliasing vue: prefixed events to inline vnode hooks (4b0ca87)
  • experimental: allow const for ref sugar declarations (9823bd9)
  • reactivity-transform/types: restructure macro types + export types for all shorthand methods (db729ce)
  • reactivity-transform: $$() escape for destructured prop bindings (198ca14)
  • reactivity-transform: rename @​vue/ref-transform to @​vue/reactivity-transform (d70fd8d)
  • reactivity-transform: support $-shorthands for all ref-creating APIs (179fc05)
  • reactivity-transform: support optionally importing macros (fbd0fe9)
  • reactivity-transform: use toRef() for $() destructure codegen (93ba6b9)
  • reactivity: support default value in toRef() (2db9c90)
  • sfc-playground: add github link (#​5067) (9ac0dde)
  • sfc-playground: prevent ctrl+s default behavior (#​5066) (b027507)
  • support ref in v-for, remove compat deprecation warnings (41c18ef)

v3.2.24

Compare Source

Bug Fixes
  • compat: maintain compatConfig option in legacy functional comp (#​4974) (ee97cf5)
  • compiler-dom: avoid bailing stringification on setup const bindings (29beda7)
  • compiler-sfc: make asset url imports stringifiable (87c73e9)
  • package: ensure ref-macros export is recognized by vue-tsc (#​5003) (f855269)
  • runtime-core: handle initial undefined attrs (#​5017) (6d887aa), closes #​5016
  • types/reactivity: export ShallowRef type (#​5026) (523b4b7), closes #​5205
Features
  • types/script-setup: add generic type to defineExpose (#​5035) (34985fe)

v3.2.23

Compare Source

Bug Fixes
  • reactivity: retain readonly proxies when setting as reactive property (d145128), closes #​4986
  • runtime-core: fix component public instance has check for accessed non-existent properties (aac0466), closes #​4962
  • runtime-core: handle error in async KeepAlive hooks (#​4978) (820a143)
  • runtime-dom: fix option element value patching edge case (#​4959) (89b2f92), closes #​4956
  • runtime-dom: patchDOMProps should not set _value if element is custom element (#​4839) (1701bf3)
  • types: export ref-macros.d.ts (1245709)
  • types: fix propType type inference (#​4985) (3c449cd), closes #​4983
  • types: scrip-setup+ts: ensure proper handling of null as default prop value. (#​4979) (f2d2d7b), closes #​4868
Features

v3.2.22

Compare Source

Bug Fixes

v3.2.21

Compare Source

Bug Fixes
  • custom-element: fix custom element props access on initial render (4b7f76e), closes #​4792
  • custom-element: fix initial attr type casting for programmtically created elements (3ca8317), closes #​4772
  • devtools: avoid open handle in non-browser env (6916d72), closes #​4815
  • devtools: fix memory leak when devtools is not installed (#​4833) (6b32f0d), closes #​4829
  • runtime-core: add v-memo to built-in directives check (#​4787) (5eb7263)
  • runtime-dom: fix behavior regression for v-show + style display binding (3f38d59), closes #​4768
  • types: fix ref unwrapping type inference for nested shallowReactive & shallowRef (20a3615), closes #​4771

v3.2.20

Compare Source

Bug Fixes
Features
  • compiler-sfc: <script setup> defineProps destructure transform (#​4690) (467e113)

v3.2.19

Compare Source

Bug Fixes
  • compiler-core: should treat attribute key as expression (#​4658) (7aa0ea0)
  • server-renderer: respect compilerOptions during runtime template compilation (#​4631) (50d9d34)

v3.2.18

Compare Source

v3.2.17

Compare Source

Bug Fixes

v3.2.16

Compare Source

Bug Fixes
  • ssr: fix ssr runtime helper import in module mode (8e05b7f)

v3.2.15

Compare Source

Bug Fixes
  • compiler-ssr: import ssr helpers from updated path (d74f21a)

v3.2.14

Compare Source

Bug Fixes
  • compiler-core: generate TS-cast safe assignment code for v-model (686d014), closes #​4655
  • compiler-core: more robust member expression check in Node (6257ade)
  • compiler-sfc: fix local var access check for bindings in normal script (6d6cc90), closes #​4644
  • devtools: fix prod devtools detection + handle late devtools hook injection (#​4653) (2476eaa)

v3.2.13

Compare Source

Bug Fixes
  • compiler-core: add check when v-else-if is behind v-else (#​4603) (5addef8)
  • compiler-core: dedupe renderSlot's default props (#​4557) (0448125)
  • compiler-core: ensure hoisted scopeId code can be treeshaken (cb2d7c0)
  • compiler-core: more robust member expression check when running in node (d23fde3), closes #​4640
  • compiler-core: only merge true handlers (#​4577) (d8a36d0)
  • compiler-core: support ts syntax in expressions when isTS is true (0dc521b)
  • compiler-dom: fix transition children check for whitespace nodes (ed6470c), closes #​4637
  • hydration: ensure hydrated event listeners have bound instance (#​4529) (58b1fa5), closes #​4479
  • runtime-core: return the exposeProxy from mount (#​4606) (5aa4255)
  • types: incorrect type inference of array (#​4578) (140f089)
  • watch: remove redundant parameter default value (#​4565) (11a2098)
Features
  • compiler-sfc: allow disabling sourcemap when not needed (585615b)

v3.2.12

Compare Source

Bug Fixes

v3.2.11

Compare Source

Bug Fixes
  • hmr: handle possible duplicate component definitions with same id (aa8908a)

v3.2.10

Compare Source

Bug Fixes

v3.2.9

Compare Source

Bug Fixes

v3.2.8

Compare Source

Bug Fixes

v3.2.7

Compare Source

Bug Fixes
  • compiler-core: remove no longer necessary withScopeId import in generated code (935b4e2)
  • compiler-sfc: ensure script setup lang=ts output is tree-shakable (b89ff92)
  • compiler: only generate non-static ref for script setup if the binding exists (3628991), closes #​4431
  • ref-transform: should transform $ref when used with generic arguments (#​4446) (33cf6c8), closes #​4442
  • runtime-core: properly merge unmounted and beforeUnmount options (#​4447) (741d3b3)
  • suspense: misusing DOM Comment element constructor as a vnode type (#​4451) (ef5b731)

v3.2.6

Compare Source

Bug Fixes

v3.2.5

Compare Source

Bug Fixes
Features
  • experimental: expose ref macro types using separate d.ts file (b408451)
  • experimental: shouldTransform for ref-transform (e565831)
  • experimental: standalone ref transform (db8dc75)
  • experimental: support ref transform for sfc normal <script> (06051c4)
  • ref-transform: auto infer parser plugins (6453359)

v3.2.4

Compare Source

Bug Fixes
  • compiler-sfc: fix import usage check for lowercase imported components (57f1081), closes #​4358
  • runtime-core: ensure consistent arguments for tempalte and render funtion slot usage (644971e), closes #​4367
  • runtime-core: fix child component double update on props change (c1f564e), closes #​4365
Reverts

v3.2.3

Compare Source

Bug Fixes

v3.2.2

Compare Source

Bug Fixes

v3.2.1

Compare Source

Bug Fixes
  • compiler-core: should treat attribute key as expression (#​4658) (7aa0ea0)
  • server-renderer: respect compilerOptions during runtime template compilation (#​4631) (50d9d34)

v3.2.0

Compare Source

Compatibility Notes

This release contains no public API breakage. However, there are a few compatibility related notes:

  • Due to usage of new runtime helpers, code generated by the template compiler in >= 3.2 will not be compatible with runtime < 3.2.

    This only affects cases where there is a version mismatch between the compiler and the runtime. The most common case is libraries that ship pre-compiled Vue components. If you are a library author and ship code pre-compiled by Vue >= 3.2, your library will be only compatible Vue >= 3.2.

  • This release ships TypeScript typings that rely on Template Literal Types and requires TS >= 4.1.

Features
SFC
  • remove experimental status of <script setup> (27104ea) (Docs) (RFC)
  • remove experimental status for sfc <style> v-bind (3b38c9a) (Docs) (RFC)
  • support non-explicit type imports in <script setup> by avoiding exposing unused imports to template during dev (5a3ccfd), closes #​3183
  • support namespaced component tags when using <script setup> (e5a4412)
  • (experimental) new ref sugar (562bddb) (RFC)
Custom Elements
Reactivity
SSR
Generic
Types
  • map declared emits to onXXX props in inferred prop types (#​3926) (69344ff)
Performance Improvements
  • reactivity: improve reactive effect memory usage (#​4001) (87f69fd), closes #​2345
  • reactivity: ref-specific track/trigger and miscellaneous optimizations (#​3995) (6431040)
  • reactivity: use bitwise dep markers to optimize re-tracking (#​4017) (6cf2377)
  • compiler-core/runtime-core: improve VNode creation performance with compiler hints (#​3334) (ceff899)
  • compiler-core: also hoist all-static children array (b7ea7c1)
  • compiler-core: hoist dynamic props lists (02339b6)
  • compiler-sfc: ignore empty blocks (#​3520) (b771fdb)
Bug Fixes

Please refer to changelogs of previous beta releases for bug fixes included in this release.

v3.1.5

Compare Source

Bug Fixes

v3.1.4

Compare Source

Bug Fixes
  • build: avoid using async/await syntax (438754a)
  • build: fix generated code containing unprocessed class field syntax (2788154), closes #​4052 vuejs/vue-cli#​6562
  • codegen: ensure valid types in genreated code when using global directives (a44d528), closes #​4054
  • compiler-sfc: fix parse-only mode when there is no script setup block (253ca27)
  • runtime-core: add useAttrs and useSlots export (#​4053) (735ada1)
  • runtime-core: fix instance accessed via $parent chain when using expose() (#​4048) (12cf9f4)

v3.1.3

Compare Source

Bug Fixes
  • compiler-core: properly exit self-closing pre tag (d2df28d), closes #​4030
  • compiler-sfc: avoid script setup marker showing up in devtools (211793d)
  • compiler-sfc: fix defineProps() call on imported identifier (691d354)
  • compiler-sfc: fix defineProps/defineEmits usage in multi-variable declarations (62c1b2f), closes #​3739
  • compiler-sfc: fix script setup hidden flag codegen (a5a66c5)
  • compiler-sfc: support method signature in defineProps (afdd2f2), closes #​2983
  • compiler-sfc: support TS runtime enum in <script setup> (1ffd48a)
  • runtime-core: add missing serverPrefetch hook error string (#​4014) (d069796)
  • runtime-core: fix mouting of detached static vnode (fded1e8), closes #​4023
  • runtime-dom: fix static node content caching edge cases (ba89ca9), closes #​4023 #​4031 #​4037
  • sfc: allow variables that start with _ or $ in <script setup> (0b8b576)
  • ssr: ensure behavior consistency between prod/dev when mounting SSR app to empty containers (33708e8), closes #​4034
  • ssr: properly hydrate non-string value bindings (34d4991), closes #​4006
  • types: improve type of unref() (127ed1b), closes #​3954
  • defineExpose type definition and runtime warning (1675b6d)
  • prevent withAsyncContext currentInstance leak in edge cases (9ee41e1)
Features
  • compiler-sfc: compileScript parseOnly mode (601a290)
  • expose: always expose $ instance properties on child refs (b0203a3)
  • sfc: add defineEmits and deprecate defineEmit (#​3725) (a137da8)
  • sfc: auto restore current instance after await statements in async setup() (0240e82)
  • sfc: change <script setup> directive resolution to require v prefix (d35e0b1), closes #​3543
  • sfc: defineExpose (be2b1d3)
  • sfc: make ref sugar disabled by default (96cc335)
  • sfc: remove <template inherit-attrs> support (6f6f0cf)
  • sfc: support referenced types for defineEmits (2973b6c)
  • sfc: support using declared interface or type alias with defineProps() (2f91db3)
  • sfc: useAttrs + useSlots (63e9e2e)
  • sfc: withDefaults helper (4c5844a)
  • sfc-playground: support lang=ts (be0f614)
  • sfc/types: make <script setup> helper types available globally (004bd18)
  • types: support IDE renaming for props (#​3656) (81e69b2)
  • types/ide: support find definition for jsx tags, events (#​3570) (8ed3ed6)

v3.1.2

Compare Source

Bug Fixes
Performance Improvements

v3.1.1

Compare Source

Bug Fixes

v3.1.0

Compare Source

Features
  • Migration Build
  • compiler-core: whitespace handling strategy (dee3d6a)
  • support component-level compilerOptions when using runtime compiler (ce0bbe0)
  • config: support configuring runtime compiler via app.config.compilerOptions (091e6d6)
  • support casting plain element to component via is="vue:xxx" (af9e699)
  • devtools: improved KeepAlive support (03ae300)
  • devtools: performance events (f7c54ca)
  • onServerPrefetch (#​3070) (349eb0f)
Performance Improvements
  • only trigger $attrs update when it has actually changed (5566d39)
  • compiler: skip unncessary checks when parsing end tag (048ac29)
  • avoid deopt for props/emits normalization when global mixins are used (51d2be2)
Deprecations
  • app.config.isCustomElement has been deprecated and should be now nested under app.config.compilerOptions. [Docs]
  • delimiters component option has been deprecated and should now be nested under the compilerOptions component option. [Docs]
  • v-is has been deprecated in favor of is="vue:xxx" [Docs]
Minor Breaking Changes
  • this.$props and the props object passed to setup() now always contain all the keys for declared props, even for props that are absent (4fe4de0). This has always been the behavior in Vue 2 and is therefore considered a fix (see reasoning in #​3288). However, this could break Vue 3 code that relied on the keys for prop absence checks. The workaround is to use a Symbol default value for props that need absence checks:

    const isAbsent = Symbol()
    
    export default {
      props: {
        foo: { default: isAbsent }
      },
      setup(props) {
        if (props.foo === isAbsent) {
          // foo is absent
        }
      }
    }
  • optionMergeStrategies functions no longer receive the component instance as the 3rd argument. The argument was technically internal in Vue 2 and only used for generating warnings, and should not be needed in userland code. This removal enables much more efficient caching of option merging.

Bug Fixes
  • compat: revert private properties on $options in comapt mode (ad844cf), closes #​3883
  • runtime-core: fix fragment update inside de-opt slots (5bce2ae), closes #​3881
  • compat: fix deep data merge with extended constructor (c7efb96), closes #​3852
  • compiler-sfc: fix style injection when using normal script + setup (8b94464), closes #​3688
  • compiler-sfc: fix template expression assignment codegen for script setup let refs (#​3626) (2c7bd42), closes #​3625
  • runtime-core: align option merge behavior with Vue 2 (e2ca67b), closes #​3566 #​2791
  • runtime-dom/v-model: only set selectedIndex when the value changes (#​3845) (ecd97ee)
  • suspense: fix suspense regression for errored template component (44996d1), closes #​3857
  • watch: avoid traversing objects that are marked non-reactive (9acc9a1)
  • compiler-core: improve the isMemberExpression function (#​3675) (9b2e894)
  • compiler-dom: fix in-browser attribute value decoding w/ html tags (6690372), closes #​3001
  • compiler-sfc: correctly remove parens used for wrapping (#​3582) (6bfb50a), closes #​3581
  • reactivity: ensure computed always expose value (03a7a73), closes #​3099 #​910
  • runtime-core: fix cases of reused children arrays in render functions (#​3670) (a641eb2), closes #​3666
  • runtime-core: fix resolving inheritAttrs from mixins (#​3742) (d6607c9), closes #​3741
  • runtime-core: should disable tracking inside directive lifecycle hooks (#​3699) (ff50e8d)
  • runtime-core: stricter compat root mount check (32e2133)
  • runtime-dom: should remove attribute when binding null to value (#​3564) (e3f5dcb)
  • suspense: fix suspense patching in optimized mode (9f24195), closes #​3828
  • transition: fix higher order transition components with merged listeners (071986a), closes #​3227
  • keep-alive: include/exclude should work with async component (#​3531) (9e3708c), closes #​3529
  • runtime-core: properly check forwarded slots type (#​3781) (e8ddf86), closes #​3779
  • runtime-core: should not track dynamic children when the user calls a compiled slot inside template expression (#​3554) (2010607), closes #​3548 #​3569
  • runtime-core/teleport: ensure the nested teleport can be unmounted correctly (#​3629) (4e3f82f), closes #​3623
  • scheduler: handle preFlush cb queued inside postFlush cb (b57e995), closes #​3806
  • ssr: handle hydrated async component unmounted before resolve (b46a4dc), closes #​3787
  • watch: should not leak this context to setup watch getters (1526f94), closes #​3603
  • compat: avoid accidentally delete the modelValue prop (#​3772) (4f17be7)
  • compat: enum coercion warning (#​3755) (f01aadf)
  • compiler-core: fix whitespace management for slots with whitespace: 'preserve' (#​3767) (47da921), closes #​3766
  • compiler-dom: comments in the v-if branchs should be ignored when used in Transition (#​3622) (7c74feb), closes #​3619
  • compiler-sfc: support tsx in setup script (#​3825) (01e8ba8), closes #​3808
  • compiler-ssr: disable hoisting in compiler-ssr (3ef1fcc), closes #​3536
  • devtools: send update to component owning the slot (1355ee2)
  • runtime-core: avoid double-setting props when casting (0255be2), closes #​3371 #​3384
  • runtime-core: avoid the proxy object polluting the slots of the internal instance (#​3698) (4ce0df6), closes #​3695
  • types: declared prop keys should always exist in props argument (#​3726) (9b160b9)
  • types/reactivity: error TS4058 caused by RefSymbol (#​2548) (90aa835)
  • compat: correctly merge lifecycle hooks when using Vue.extend (#​3762) (2bfb8b5), closes #​3761
  • compiler-core: bail out to array children when the element has custom directives + only one text child node (#​3757) (a56ab14)
  • compat: handle and warn config.optionMergeStrategies (94e69fd)
  • compiler-core: preserve comment content in production when comments option is enabled (e486254)
  • hmr: don't remove __file key from component type (9db3cbb)
  • hydration: fix update before async component is hydrated (#​3563) (c8d9683), closes #​3560
  • reactivity: fix tracking for readonly + reactive Map (#​3604) (5036c51), closes #​3602
  • runtime-core: ensure declare prop keys are always present (4fe4de0), closes #​3288
  • runtime-core: watching multiple sources: computed (#​3066) (e7300eb), closes #​3068
  • Teleport: avoid changing the reference of vnode.dynamicChildren (#​3642) (43f7815), closes #​3641
  • watch: avoid traversing non-plain objects (62b8f4a)
  • watch: this.$watch should support watching keypath (870f2a7)

v3.0.11

Compare Source

Bug Fixes
  • compiler-sfc: fix wrong scopeId for nested <script setup> components (7f7dcc9)
  • runtime-core: fix render function + optimized slot edge case (#​3523) (995d76b), closes #​2893
  • runtime-core: fix v-on object kebab-case event emit matching (c1cd42e), closes #​3527

v3.0.10

Compare Source

Bug Fixes
Performance Improvements
  • compiler-sfc: skip srcset transform if all candidates are external (b39208c)
  • runtime-core: optimize the performance of getTypeIndex (#​3206) (2e50acf)

v3.0.9

Compare Source

Bug Fixes

v3.0.8

Compare Source

Bug Fixes
Performance Improvements
  • support only attaching slot scope ids when necessary (02cbbb7)

v3.0.7

Compare Source

Bug Fixes
Performance Improvements
  • reactivity: only call Set.add if doesn't already have value (#​3307) (9cd9883)

v3.0.6

Compare Source

Bug Fixes
  • compiler-core: do not mark v-for as stable on const bindings (734c65b), closes vitejs/vite#​1956
  • compiler-dom: ensure global build filename matches the one defined in package.json (close #​3181) (#​3185) (96b6433)
  • compiler-dom: fix cdn entries (fcb6c89), closes #​3181 #​3185
  • compiler-sfc: compiler blank srcset (#​3005) (9dc816d)
  • compiler-sfc: removeSpecifier issue when removing initial imports (script-setup) (#​2729) (6d762a8)
  • compiler-sfc: the empty lang attribute should be treated as no lang specified (#​3051) (6d5b623)
  • compiler-sfc: transformAssetUrls.base should not affect known module requests (2ea9867)
  • compiler-sfc: treat const reactive() bindings as mutable (03360ce)
  • compiler-ssr: avoid duplicated asset imports merged from component slot client branch (c69f4ea), closes vitejs/vite#​2034
  • devtools: init devtools in production (#​2906) (4d9bcb7)
  • devtools: send instance to devtools when it's mounted instead of created (4fecb27)
  • docs: change reference to passed deadline (#​2930) (de7f9d1)
  • hmr: deep clone reused hoisted trees during dev (5a7a1b8), closes vitejs/vite#​2022
  • runtime-core: align parent/root with the template ref when using expose (#​3158) (f43a3b0)
  • runtime-core: allow overriding properties other than props (#​3105) (73117f6)
  • runtime-core: check the DEV_ROOT_FRAGMENT flag correctly in the dev environment (#​2750) (347a879)
  • runtime-core: component methods should override global properties in DEV (#​3074) (2587f36)
  • runtime-core: ensure app instance can be garbage collected after unmount (close #​2907) (#​2909) (60e05ef)
  • runtime-core: instanceWatch should pass this.proxy to source as the first argument (#​2753) (ec8fd10)
  • runtime-dom: ensure readonly type prop on textarea is handled patched as attribute (#​2888) (c5d147c), closes #​2766
  • kebab-case events are attached correctly on web components, see #​2841 (#​2847) (b302cbb)
  • types: extract the correct props type for the DateConstructor (#​2676) (48f0d29)
  • ensure all published packages contan a LICENCE file (close #​2650) (#​2857) (6a48d23)
  • remove superfluous spaces when normalizing class (#​3083) (4b55142)
  • runtime-dom: enable set form attr to null on form-elements (#​2840) (#​2849) (f262438)
  • toRef: ref created from union typed prop can't be used in watch (#​3048) (4ca4666)
  • should prefix ShadowRoot with window. (#​2943) (97d6f1a)
Features
Performance Improvements

v3.0.5

Compare Source

Note: this release contains a type-only change that requires TypeScript 4.0+, which may cause build issues in projects still using TS 3.x.

Bug Fixes
Features
  • devtools: send instance (3626ff0)

v3.0.4

Compare Source

Bug Fixes
  • async-component: forward refs on async component wrapper (64d4681), closes #​2671
  • attr-fallthrough: ensure consistent attr fallthrough for root fragments with comments (3bc2914), closes #​2549
  • build: enable safari10 option for terser (#​2472) (20a704f), closes #​2470
  • compiler-core: fix scope var reference check for v-on expressions (9db7095), closes #​2564
  • compiler-core: fix unintended imports in esm-bundler builds (55d99d7), closes #​2258 #​2515
  • compiler-core: transform kebab case props to camelcase on slots (#​2490) (ef59a30), closes #​2488
  • compiler-core/v-on: handle falsy values when caching v-on handlers (e4f09c1), closes #​2605
  • compiler-sfc: fix parsing error when lang="" is used on plain element (#​2569) (5f2a853), closes #​2566
  • compiler-sfc: named imports from .vue file should not be treated as constant (085bbd5), closes #​2699
  • compiler-sfc: should not remove import statements with no specifier when compiling script setup (43eab92)
  • compiler-ssr: generate correct children for transition-group (a5d6f80), closes #​2510
  • compiler-ssr: handle v-model checkbox with true-value binding (fe5428d)
  • compiler-ssr: should not render key/ref bindings in ssr (5b62662)
  • provide: support symbols in applyOptions (#​2616) (7a1a782), closes #​2615
  • reactivity: ensure readonly on plain arrays doesn't track array methods. (#​2506) (3470308), closes #​2493
  • reactivity: ensure add/set on reactive collections return the proxy (#​2534) (6e46a57), closes #​2530
  • runtime-core: ensure keep-alive deep-watches include/explude props (#​2551) (421205d), closes #​2550
  • runtime-core: ensure watchers are always registered to correct instance owner (#​2495) (735af1c), closes #​2381
  • runtime-core: fix emit listener check on kebab-case events (#​2542) (3532b2b), closes #​2540
  • runtime-core: handle static node move in production (bf16a57)
  • runtime-core: remove static node in production mode (#​2556) (2a9ba0c), closes #​2553
  • runtime-core: should pause tracking when initializing legacy options (#​2524) (0ff2a4f), closes #​2521
  • runtime-core: skip functional components in public $parent chain traversal (53f4885), closes #​2437
  • runtime-dom: attribute should be removed with nullish values (#​2679) (fb6b9f8), closes #​2677
  • script-setup: ensure useContext() return valid context (73cdb9d)
  • slots: dynamically named slots should be keyed by name (2ab8c41), closes #​2535
  • slots: should render fallback content when slot content contains no valid nodes (#​2485) (ce4915d), closes #​2347 #​2461
  • suspense: fix nested async child toggle inside already resovled suspense (cf7f1db), closes #​2215
  • teleport: Teleport into SVG elements (#​2648) (cd92836), closes #​2652
  • transition: avoid invoking stale transition end callbacks (eaf8a67), closes #​2482
  • transition: respect rules in *-leave-from transition class (#​2597) (e2618a6), closes #​2593
  • types: fix ToRefs type on union value types (e315d84), closes #​2687
  • v-model: avoid mutation when using Set models + fix multi select Set model update (f2b0a8e)
  • v-model: respect checkbox true-value/false-value on initial render (48f00c0), closes #​2694
  • v-show: ensure v-show conflict with inline string style binding (3cd30c5), closes #​2583
  • allow hmr in all builds (46d80f4), closes #​2571
Features
  • sfc: allow sfcs to recursively self-reference in template via name inferred from filename (67d1aac)

v3.0.3

Compare Source

Bug Fixes
  • compiler-core/compiler-sfc: handle destructure assignment expressions (4c6078c)
  • compiler-sfc: fix script setup ts helpers (6e3abc8)
  • hmr: fix updates for imported but not yet rendered components (9c23ddf)
  • runtime-core: components with static props and slots should not be force updated (51e43e0)
  • runtime-core: ensure scheduler queue is always non-null (#​2567) (af95604)
  • runtime-dom: use correct import source (f28ca55)
  • style-vars: apply css vars in post flush effect (3a6b120)
  • handle case of ref declaration without initial value (8485cd4)
  • types: ensure correct type for toRef and toRefs on existing refs (8e20375)
Experimental Features

Note: support for experimental features in SFCs have been updated according to changes in ongoing RFCs. This release may break existing usage of such experimental features.

  • compiler-sfc: compileScript inline render function mode (886ed76)
  • compiler-sfc: new script setup implementation (556560f)
  • compiler-sfc: new SFC css varaible injection implementation (41bb7fa)
  • compiler-sfc: support kebab-case components in <script setup> sfc template (3f99e23)
  • runtime-core: explicit expose API (0e59770)
Reverts
  • Revert "wip: allow scriptCompiled to be cached on sfc descriptor" (9db4288)

v3.0.2

Compare Source

Bug Fixes
Features

v3.0.1

Compare Source

Bug Fixes
  • compiler-sfc: fix wrong scopeId for nested <script setup> components (7f7dcc9)
  • runtime-core: fix render function + optimized slot edge case (#​3523) (995d76b), closes #​2893
  • runtime-core: fix v-on object kebab-case event emit matching (c1cd42e), closes #​3527

v3.0.0

vuejs/router

v4.1.3

Compare Source

Please refer to CHANGELOG.md for details.

v4.1.2

Compare Source

Please refer to CHANGELOG.md for details.

v4.1.1

Compare Source

Please refer to CHANGELOG.md for details.

v4.1.0

Compare Source

Vue Router 4.1

We are excited to announce the release of Vue Router 4.1 with a few new interesting features, better support for Node ESM and no breaking changes.

Omitting the component/components option in routes

It's now possible to completely omit the component option when defining routes with children. While nested routes are about defining layouts, they are also directly connected to a path and users often found themselves defining a pass through component that would just render a <RouterView> component to reuse the path structure. You can now simplify this to:

- import { RouterView } from 'vue-router'
- import { h } from 'vue'
-
 const routes = [
   {
     path: '/admin',
-     component: () => h(RouterView),
     children: [
       { path: 'users', component: AdminUserList },
       { path: 'users/:id', component: AdminUserDetails },
     ],
   },
 ]

In other words, you can now nest paths without having to define a component.

Passing History State in navigations

Passing History State through router.push() has been implemented and used by the router since its version 4.0 but hasn't been exposed as a public API until now. This enables passing a state property when calling router.push() or router.replace(). This is useful to pass global state to be associated with the history entry that cannot be shared by copying the URL. One common example of this are Modals:

// go to /users/24 but show a modal instead
router.push({ name: 'UserDetail', params: { id: 24 } state: { backgroundView: ... } })

To see a full example, check the modal e2e test, it has been updated to use the state property.

It's worth noting this shouldn't be used to pass fetched data or complex objects such as classes because of type and size limitations. Check the History State documentation for more information about the state property.

Given the nature of the <RouterView>'s route prop, there is also a new function loadRouteLocation() that can be used on a resolved route location to load a route with lazy loading:

import { loadRouteLocation } from 'vue-router'

const loadedRoute = await loadRouteLocation(router.resolve('/users/24'))

Typed Routes

RouterLink to autocomplete

In v4.1 we were initially planning to introduce types to automatically detect the params from a path property, creating autocomplete and type safety in router.push() and <RouterLink>'s to prop. It was implemented but also turned out to be extremely slow after ~50 routes due to the nature of the types relying on nesting and complex unions. Instead, we are introducing a build plugin to generate the types of the routes for you based your file structure. This is similar to Nuxt and Vite Plugin Pages but with full type support (similar to nuxt-typed-router) while allowing you to keep using the exact same API, just with Autocompletion and typing hints 😄. The plugin currently supports Vite, Webpack (with some caveats), and rollup and it's currently experimental to gather feedback from the community and build a flexible solution. We hope to release a stable version in the following months.

Check out the plugin GitHub repository for installation instructions and documentation.

Here are some other examples of how much this plugin can improves your developer experience:

params validation in RouterLink Route infer from if condition Typed routes in navigation guards

CJS/MJS support for Node

We now expose a few extra entry points for Node but kept the old ones as well to prevent any disruption to the existing users. You can find more information about this in the corresponding pull request.


Please refer to CHANGELOG.md for details.

v4.0.16

Compare Source

Please refer to CHANGELOG.md for details.

v4.0.15

Compare Source

Please refer to CHANGELOG.md for details.

v4.0.14

Compare Source

Please refer to CHANGELOG.md for details.

v4.0.13

Compare Source

Please refer to CHANGELOG.md for details.

v4.0.12

Compare Source

Please refer to CHANGELOG.md for details.

v4.0.11

Compare Source

Please refer to CHANGELOG.md for details.

v4.0.10

Compare Source

Please refer to CHANGELOG.md for details.

v4.0.9

Compare Source

Please refer to CHANGELOG.md for details.

v4.0.8

Compare Source

Please refer to CHANGELOG.md for details.

v4.0.7

Compare Source

Please refer to CHANGELOG.md for details.

v4.0.6

Compare Source

Please refer to CHANGELOG.md for details.

v4.0.5

Compare Source

Please refer to CHANGELOG.md for details.

v4.0.4

Compare Source

Please refer to CHANGELOG.md for details.

v4.0.3

Compare Source

Please refer to CHANGELOG.md for details.

v4.0.2

Compare Source

Please refer to CHANGELOG.md for details.

v4.0.1

Compare Source

Please refer to CHANGELOG.md for details.

v4.0.0

Compare Source

Vue logo

#### A more complete but lighter Router

Today Vue Router 4 is officially released as stable. After 14 alphas, 13 betas and 6 release candidates, Vue Router v4 is ready to bring the best of routing to your Vue 3 applications with improved bundle size, TypeScript integration, new features and consistency improvements for modern apps.

It has taken almost 2 years of work, around 1500 commits, 15 RFCs, and the help of many users and their bug reports and feature requests to get here. Thank you all for your very much appreciated help!

Project Organization improvements

Vue Router is now divided in three modules:

  • History implementation: handles the address bar and is specific to the environment Vue Router runs on (Node, Browser, Mobile, etc)
  • Router Matcher: handles the parsing of routes /users/:id and its ranking
  • Router: connects everything together and handle routing specific features like navigation guards
Dynamic Routing

One the most wanted features on Vue Router is Dynamic Routing. It makes the router more flexible and powerful and open possibilities for applications that were not possible before! This is possible thanks to an advanced path parsing with automatic ranking, allowing the router to guess what route should be matched based on the URL string representation, allowing user to define routes in any order.

Improved Navigation system

The new navigation system is more consistent and improves the experience of Scroll Behavior to match native browser behavior. It also gives users almost more information about the status of a navigation and allow using that information to improve user experience through global UI elements like progress bars and modals.

More powerful Devtools

Thanks to the new Vue Devtools, Vue Router is able to create more advanced integrations: navigation in the timeline and a complete route directory that helps you debug routes.

Better Navigation guards

Say good bye to next and avoid easy-to-make mistakes inside navigation guards: return any value you were passing to next. The previous version is still supported to ease migration!

More information on the updated documentation.

Consistent encoding in routes

Encoding has been adapted to make it consistent across different browsers and route location properties (params, query and hash). You don't need to encode these properties when passing them to router.push() and they will always appear decoded in the route locations (e.g. $route and useRoute()).

Small migration path

Vue Router 4 focus on improving the existing Router while keeping a very similar API, migration should be short and almost limited to a few renames if you were using the basics of Vue Router. You can check the full migration guide on the documentation

The future of the Router

Vue Router has been effectively stable for the past couple of months and makes it possible to now focus on:

  • Better Developer experience with existing tooling (Vetur, Vite, Devtools, etc)
  • Better integration with modern features like Suspense
  • RFCs to improve the existing API or bring new ones
  • Lighter versions of the router

Trying It Out

If you want to give Vue Router 4 a quick try, you can check this CodeSandbox, this Vite template with Tailwind CSS, or use the CLI to get started.

To Learn more about Vue Router 4, check out our new documentation. If you are an existing Vue 2.x user, go directly to the Migration Guide.

Supporting Vue Router Development

If your company uses Vue Router, please consider supporting its development by supporting me 🙏 . It will mean a lot and really help me to keep working on improving the Vue Ecosystem.


If you were already using the release candidate version of vue router, you can find the list of improvements on the CHANGELOG.md.

v3.5.4

Compare Source

v3.5.3

Compare Source

v3.5.2

Compare Source

v3.5.1

Compare Source

v3.5.0

Compare Source

vuejs/vuex

v4.0.2

Compare Source

Bug Fixes
  • devtools: fix no getters displayed on root module + better getters inspector (#​1986) (bc20295)
  • build: cjs build failing due to __VUE_MROD_DEVTOOLS__ defined (#​1991) (#​1992) (7151622)

v4.0.1

Compare Source

Features
  • dx: add devtools integration (#​1949)

v4.0.0

Compare Source

This is the official Vuex 4 release.

The focus for Vuex 4 is compatibility. Vuex 4 supports Vue 3, and it provides the exact same API as Vuex 3, so users can reuse their existing Vuex code with Vue 3.

There are a few breaking changes described in a later section, so please check them out.

You can find basic usage with both Option and Composition API in the example directory.

It's still released under next tag in NPM package as same as Vue 3. We're planning to remove next tag once Vue 3 is ready to remove it.

There have been a lot of contribution to make Vuex 4 stable. Thank you all for your very much appreciated help. It wouldn't have been possible without this wonderful Vue community!

Documentation

To check out docs, visit next.vuex.vuejs.org.

Breaking changes

Installation process has changed

To align with the new Vue 3 initialization process, the installation process of Vuex has changed.

To create a new store instance, users are now encouraged to use the newly introduced createStore function.

import { createStore } from 'vuex'

export const store = createStore({
  state() {
    return {
      count: 1
    }
  }
})

Whilst this is not technically a breaking change, you may still use the new Store(...) syntax, we recommend this approach to align with Vue 3 and Vue Router Next.

To install Vuex to a Vue instance, pass the store instance instead of Vuex.

import { createApp } from 'vue'
import { store } from './store'
import App from './App.vue'

const app = createApp(App)

app.use(store)

app.mount('#app')
Bundles are now aligned with Vue 3

The following bundles are generated to align with Vue 3 bundles:

  • vuex.global(.prod).js
    • For direct use with <script src="..."> in the browser. Exposes the Vuex global.
    • Global build is built as IIFE, and not UMD, and is only meant for direct use with <script src="...">.
    • Contains hard-coded prod/dev branches and the prod build is pre-minified. Use the .prod.js files for production.
  • vuex.esm-browser(.prod).js
    • For use with native ES module imports (including module supporting browsers via <script type="module">.
  • vuex.esm-bundler.js
    • For use with bundlers such as webpack, rollup and parcel.
    • Leaves prod/dev branches with process.env.NODE_ENV guards (must be replaced by bundler).
    • Does not ship minified builds (to be done together with the rest of the code after bundling).
  • vuex.cjs.js
    • For use in Node.js server-side rendering with require().
Typings for ComponentCustomProperties

Vuex 4 removes its global typings for this.$store within Vue Component to solve issue #​994. When used with TypeScript, you must declare your own module augmentation.

Place the following code in your project to allow this.$store to be typed correctly:

// vuex-shim.d.ts

import { ComponentCustomProperties } from 'vue'
import { Store } from 'vuex'

declare module '@&#8203;vue/runtime-core' {
  // Declare your own store states.
  interface State {
    count: number
  }

  interface ComponentCustomProperties {
    $store: Store<State>
  }
}
createLogger function is exported from the core module

In Vuex 3, createLogger function was exported from vuex/dist/logger but it's now included in the core package. You should import the function directly from vuex package.

import { createLogger } from 'vuex'
Bug Fixes Included Since 4.0.0-rc.2

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

Rebasing: Whenever MR becomes conflicted, or you tick the rebase/retry checkbox.

👻 Immortal: This MR will be recreated if closed unmerged. Get config help if that's undesired.


  • If you want to rebase/retry this MR, click this checkbox.

This MR has been generated by Renovate Bot.

Edited by GitLab Dependency Bot

Merge request reports

Loading