Vuetify 2.7 NES Release Notes

Version 2.7.3 (NES)

Bug Fixes

• VCalendar: Patched XSS vulnerability in eventMoreText prop (CVE-2025-1461)

Breaking Changes

• VCalendar: HTML content in eventMoreText prop is now properly escaped
  • Scope: This affects VCalendar users who intentionally passed HTML into the eventMoreText prop for styling, third-party integrations, or event handling
  • Previously, HTML content in the eventMoreText prop was rendered directly to the DOM, allowing for potential XSS attacks
  • The fix now properly escapes HTML in the eventMoreText prop before rendering

  v2.7.3 VCalendar Migration Guide

  This section only affects consumers of the v-calendar component using HTML within the eventMoreText prop.

  Temporary Opt-out

  For users who need time to migrate, add the nes-unsafe-event-more-text prop

  UnsafeEventMoreText.vue

  <v-calendar
    :events="events"
    event-more
    event-more-text="<span style='background: lightblue;'>Custom Text</span>"
    nes-unsafe-event-more-text
  />
  

  nes-unsafe-event-more-textOptionalboolean

  Default: false

  Render HTML in eventMoreText prop (Legacy behavior)

  Styling Options

  Use unscoped styles with specific class selectors

  StyledEventMore.vue

  <template>
    <v-calendar
      class="my-calendar"
      :events="events"
      event-more
      event-more-text="Custom Text"
    />
  </template>
  
  <style>
  /* Unscoped style */
  .my-calendar .v-event-more {
    background-color: lightblue;
  }
  </style>
  

  Event Handling Options

  Use the @click:more handler instead of any onclick events. See the Vuetify Calendar API for usage.

  EventHandling.vue

  <v-calendar 
    :events="events" 
    event-more
    event-more-text="Custom Text"
    @click:more="handleMoreClick" 
  />
  

  Global i18n Fix (Advanced)

  The Vuetify internationalization system can also be used to customize the eventMoreText message, including rendering HTML. Read more in the Vuetify i18n documentation.

  You may also find guidance from vue-i18n on the risk of using HTML in translations.

  The default translation key is $vuetify.calendar.moreEvents.

  src/plugins/vuetify.js

  src/plugins/vuetify.ts

  // Translation provided by Vuetify (javascript)
  import en from 'vuetify/lib/locale/en'
  
  // Custom translation
  export default {
    ...en,
    calendar: {
      ...en.calendar,
      moreEvents: '<span style="background: lightblue;">{0} more events</span>'
    },
  }
  
  export default new Vuetify({
    lang: {
      locales: { en },
      current: 'en',
    },
  })
  

  // Translation provided by Vuetify (typescript)
  import en from 'vuetify/src/locale/en'
  
  // Custom translation
  export default {
    ...en,
    calendar: {
      moreEvents: '<span style="background: lightblue;">{0} more events</span>'
    },
  }
  
  export default new Vuetify({
    lang: {
      locales: { en },
      current: 'en',
    },
  })
  

Version 2.7.2 (NES)

Notes

• This release pulled in the final OSS Vuetify 2.7.2 release and contains no functional changes
• Only non-functional files (licensing, copyright, packaging, etc) required for NES distribution were changed

Bug Fixes

• None

Version 2.7.1 (NES)

Notes

• This release represents the NES forking point from OSS Vuetify 2.7.0 and contains no functional changes
• Only non-functional files (licensing, copyright, packaging, etc) required for NES distribution were changed

Bug Fixes

• None