🐉 Material Component Framework for Vue

Overview

Vuetify Logo

CI badge Coverage Downloads Downloads
License zenhub Chat
Version CDN

Supporting Vuetify

Vuetify is a MIT licensed project that is developed and maintained full-time by John Leider and Heather Leider; with support from the entire Core Team. Sponsor Vuetify and receive some awesome perks and support Open Source Software at the same time! 🎉

What's the difference between Patreon and OpenCollective

Funds donated via Patreon go directly to support John and Heather's full-time work on Vuetify. Funds donated via Open Collective are managed with transparent expenses and will be used for compensating work and expenses for Core team members. Your name/logo will receive proper recognition and exposure by donating on either platform.

Diamond Sponsors

Platinum Sponsors

Gold Sponsors


Sponsors via Open Collective


Introduction

Vuetify is a Vue UI Library with beautifully handcrafted Components using the Material Design specification. No design skills required — everything you need to create amazing applications is at your fingertips. Supercharge your development process with all of the tools that you need to succeed:

  • WCAG Accessibility (a11y) / WCAG / Section 508 / RTL support
  • 30+ supported languages
  • Smaller bundle sizes with automatic tree-shaking
  • A massive Discord community
  • 18 months Long-term support for Major releases
  • IE11 / Safari 9 support with polyfill
  • Extensive customization options with SASS/SCSS and Presets
  • Responsive support down to 320px width
  • Direct support support from Vuetify
Browser Support

Vuetify supports all modern browsers, including IE11 and Safari 9+ (using polyfills). Components are designed for a minimum width of 320px.

Vuetify Ecosystem

Plugins

Project Version Description
@vuetify/cli-plugin-utils Version A collection of helper utilities for creating Vue CLI plugins
eslint-config-vuetify Version An opinionated eslint-config for Vuetify
eslint-plugin-vuetify Version An opinionated eslint-plugin for Vuetify
vue-cli-plugin-vuetify Version A Vue CLI plugin for installing and configuring Vuetify
vue-cli-plugin-vuetify-cli Version A Vue CLI plugin for scaffolding Vue applications
vue-cli-plugin-vuetify-essentials Version A supplementary Vue CLI plugin used by @vuetify/preset
vue-cli-plugin-vuetify-storybook Version A Vue CLI plugin for using Storybook w/ Vuetify
@vuetify/preset n/a A Vue CLI preset for Vuetify
vuetify-loader Version A webpack plugin for treeshaking and progressive image support
vuex-cognito-module Version A Vuex module for AWS Cognito

Presets

Preset Version Study
vue-cli-plugin-vuetify-preset-basil Version Basil Material Study
vue-cli-plugin-vuetify-preset-crane Version Crane Material Study
vue-cli-plugin-vuetify-preset-fortnightly Version Fortnightly Material Study
vue-cli-plugin-vuetify-preset-owl Version Owl Material Study
vue-cli-plugin-vuetify-preset-rally Version Rally Material Study
vue-cli-plugin-vuetify-preset-reply Version Reply Material Study
vue-cli-plugin-vuetify-preset-shrine Version Shrine Material Study

Documentation

To check out the docs, visit vuetifyjs.com.

Crowdin Uploads

Questions

For help and support questions, please use our community chat. This issue list of this repo is exclusively for bug reports and feature requests.

Issues

Please make sure to read the Important Information before opening an issue. Issues not confirming to the guidelines may be closed immediately.

Changelog

Detailed changes for each release are documented in the release notes.

Contributing

Developers interested in contributing should read the Code of Conduct and the Contribution Guide.

Please do not ask general questions in an issue. Issues are only to report bugs, suggest enhancements, or request new features. For general questions and discussions, ask in the community chat.

To help you get you familiar with our contribution process, we have a list of good first issues that contain bugs which have a relatively limited scope. This is a great place to get started. If you have any questions, please join us on the community chat.

We also have a list of help wanted issues that you might want to check.

This project exists thanks to all the people who contribute 😍 !

Backers

Thank you to all our backers! 🙏 [Become a backer]

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]

📑 License

MIT

Copyright (c) 2016-present Vuetify LLC

Comments
  • The future of Vuetify

    The future of Vuetify

    The beginning

    When I created Vuetify, it was a personal project meant to help spec out prototypes more efficiently. Only after sharing it with a co-worker was I convinced to release it as an full open-source project. The amazing community and extremely talented developers that I have had the pleasure to be around are what make working on this project mean so much to me. But you cannot have the sweet without the sour. Maintaining the level of activity needed to accommodate the growing needs of the user-base has lead to many sleepless nights and time away from my family.

    The transition

    With v1.0 around the corner, the pressure is on and has no signs of letting up. After talking with my current employer, we both agree that this is a dream that should not be passed up. Starting on November 1st, I will officially transition my day job to Vuetify. Providing the best possible quality for developers and enterprise users will only be possible if I dedicate 100% of my time to building out the Vue and Vuetify ecosystem. I want to give developers and businesses from around the world a platform that they can use to succeed.

    The future

    If this project has enabled you or your organization to do great things, I'm calling for your support. In the coming months I will be expanding the reach of Vuetify's community and support network by working with project backers and community members to help fine-tune the underdeveloped areas of the framework. The documentation will be updated with new guides, better examples, more resources and better i18n support.

    become_a_patron_button

    Some other exciting features on the Roadmap:

    • Front-end component pack 10 new components catered towards enhancing the front-end capabilities of your application (from backers)
    • Back-end component pack 10 new components focused on providing solutions for common issues in dashboard based applications, CRUDs, etc (from backers)
    • Vue/Vuetify video course A video tutorial series for Vue and Vuetify (from backers)
    • Alpha theme A pre-built premium theme made for the front-end
    • Improved and additional free themes I will be improving the current offerings and adding additional templates that are, and will always be, free
    • Improved international support I will be working close with the community to ensure that Vuetify has the best possible support for all languages and locations
    • Improved enterprise support Many Vuetify developers are part of organizations that want to know their investment is going to be supported. We will reach stable version v1.0 in December with additional plans for LTS (long-term support) following

    Thank you

    These are just a few of the many features and enhancements in store. I cannot wait to share the rest with you in the near future. I want to personally thank you and everyone else for your unwavering support. By whatever means you ended up here, I cannot express to you how grateful I am that you gave Vuetify a chance.

    T: enhancement help wanted P: critical 
    opened by johnleider 93
  • [Bug Report] IOS: when long dialog scroll, background should not scroll issue

    [Bug Report] IOS: when long dialog scroll, background should not scroll issue

    Versions and Environment

    Vuetify: 1.0.15 Vue: 2.5.13 Browsers: Safari 11.1 OS: iOS

    Steps to reproduce

    show a dialog with very long height. (NOT a full screen dialog)

    Expected Behavior

    the background should not scroll on IOS

    Actual Behavior

    the background scrolls sometimes

    Reproduction Link

    https://github.com/

    Other comments

    To fix this issue:

    beforeCreate Dialog
        document.getElementsByTagName("body")[0].className="noscroll";
    
    beforeDestroy Dialog
        document.body.removeAttribute("class","noscroll");
    

    STYLUS: .noscroll position: fixed overflow-x: hidden overflow-y: hidden

    T: bug help wanted platform specific C: VNavigationDrawer C: VDialog 
    opened by Neo888888 77
  • [Enhancement] Fixed DataTable Headers

    [Enhancement] Fixed DataTable Headers

    What will it allow you to do that you can't do today

    It will allow you to have scrollable tables with fixed / sticky header, which is becoming more and more popular. It'll also give a polished feel to the application. See https://codepen.io/anon/pen/qbLaMb?editors=101

    How will it make current work-arounds straightforward?

    To fix the headers in datatables, some hacks are likely needed right now. This will reduce the need for hacks

    Something like a "fix-header' prop would be amazing: <v-data-table v-bind:headers="headers" :items="items" fix-header ></v-datatable>

    T: enhancement 
    opened by JacksMyth 68
  • [Bug Report] high performance impact when using a lot of v-text-field

    [Bug Report] high performance impact when using a lot of v-text-field

    Versions and Environment

    Vuetify: 1.4.2 Vue: 2.5.22 Browsers: Google Chrome OS: Mac OS 10.13.6

    Steps to reproduce

    just input one char in one of the field while doing performance recording in chrome devtools. Mesurement 1: with the exact codepen Mesurement 2: removing all text-field except one Mesurement 3 only one text-field but with @input="(value)=>this.field1=value" (for having just one half of the v-model behaviour) Mesurement 4: with the 20 text-field replaced by standard input

    Expected Behavior

    Only have one text-field updated on each keypress.

    Actual Behavior

    Mesurement 1: 21,54ms Mesurement 2: 2,98ms Mesurement 3: 0,98ms Mesurement 4: 1,94ms

    Reproduction Link

    https://codepen.io/stygmate/pen/zyVagj

    Other comments

    I test here with only 20 text-field but in my app i have 20 text-field by people concerned by the form and the mesurement are done on a macbook pro 2018. On my phone huawei p9lite typing on keyboard in a field can lag a lot.

    T: bug P: critical upstream C: VTextField performance 
    opened by stygmate 66
  • [Task] Vuetify 3 Release Checklist

    [Task] Vuetify 3 Release Checklist

    V3 Release Checklist

    The following is an in progress list of remaining tasks before we release the next version.

    This will be updated daily; so watch for changes.

    Discord, https://community.vuetifyjs.com/ and join channel #v3-discussion.

    Final review

    • [x] Framework Core #15139
    • [x] Documentation
    • [x] UI Components
    • [x] Tooling

    Documentation

    • [x] Introduction
    • [x] Getting started
    • [x] Features
    • [x] Styles and animations
    • [x] Directives
    • [x] Resources
    • [x] About

    Tooling

    • [x] CLI plugin
    • [x] Vite plugin
    • [x] Presets
    • [x] Eslint

    UI Components

    A component is considered complete when the following criteria is met:

    • Primary and child components reviewed
      • imports ordered with appropriate comments
      • converted to use grid css structure (if applicable)
      • unit tests
        • jest spec test (if applicable)
        • cypress e2e test
    • SASS/SCSS code reviewed
      • removes deprecated or unused code
      • abstracted explicit values to variables
      • verified sass variable usage
    • index.ts file export formatted
    • Documentation page
      • all examples working with no deprecated code
      • removed unused or deprecated examples
      • added all components page image
      • added quick bar and links
      • updated page entry and formatting
      • new sections added
        • accessibility (if applicable)
        • anatomy
        • grid (if applicable)
        • sass variables
        • theme (if applicable)
      • updated api section formatting
      • frontmatter information reviewed
    • [x] v-alert #14971
    • [x] v-app #15179
    • [x] v-app-bar #15192
    • [x] v-autocomplete #15355
    • [x] v-avatar #15112
    • [x] v-badge #15193
    • [x] v-banner #15109
    • [x] v-bottom-navigation #15194
    • [x] v-breadcrumbs #15181
    • [x] v-btn #15213
    • [x] v-btn-group #15195
    • [x] v-btn-toggle #15196
    • [x] v-card #15283
    • [x] v-carousel #15197
    • [x] v-checkbox #15264
    • [x] v-chip #14973
    • [x] v-chip-group #15198
    • [x] v-code #15182
    • [x] v-color-picker #15292
    • [x] v-combobox #15354
    • [x] v-counter #15183
    • [x] v-default-provider
    • [x] v-dialog #15289
    • [x] v-divider #15113
    • [x] v-expansion-panels #15295
    • [x] v-field #15251
    • [x] v-file-input #15288
    • [x] v-footer #15114
    • [x] v-form #15253
    • [x] v-grid #15296
    • [x] v-hover
    • [x] v-icon #15212
    • [x] v-img #15287
    • [x] v-input #15260
    • [x] v-kbd #15199
    • [x] v-label #15256
    • [x] v-lazy #15184
    • [x] v-list #15360
    • [x] v-locale-provider #15255
    • [x] v-main #15254
    • [x] v-menu 5e4992ffa
    • [x] v-messages #15200
    • [x] v-navigation-drawer #15263
    • [x] v-no-ssr #15185
    • [x] v-overlay #15284
    • [x] v-pagination #15286
    • [x] v-parallax #15226
    • [x] v-progress-circular #15266
    • [x] v-progress-linear #15265
    • [x] v-radio #15258
    • [x] v-radio-group #15259
    • [x] v-range-slider #15228
    • [x] v-rating #15285
    • [x] v-responsive #15249
    • [x] v-selection-control #15246
    • [x] v-selection-control-group #15250
    • [x] v-sheet #15115
    • [x] v-slide-group #15248
    • [x] v-slider #15227
    • [x] v-snackbar #15242
    • [x] v-switch #15247
    • [x] v-system-bar #15243
    • [x] v-table #15186
    • [x] v-tabs #15262
    • [x] v-text-field #15252
    • [x] v-textarea #15257
    • [x] v-theme-provider
    • [x] v-timeline #15230
    • [x] v-toolbar #15154
    • [x] v-tooltip #15245
    • [x] v-validation
    • [x] v-window #15244
    T: feature Epic 
    opened by johnleider 61
  • [Feature Request] How to improve lighthouse score with Vuetify

    [Feature Request] How to improve lighthouse score with Vuetify

    Problem to solve

    We have a number of web sites with Vuetify and Nuxt. Vuetify works great for us, only concern is performance. As soon as we add vuetify Lighthouse score tumbles down. Most probably we don't follow best practices.

    Here you can see lighthouse scores: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.sozler.im https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fkoran.center

    Proposed solution

    Would be great to have a realistic example (not a hello world) with a few components which would score high on LightHouse and which can be a point of reference. Maybe you will discover, indeed there is a performance issue with adding Vuetify to your website and no realistic app would score high with Vuetify on LightHouse. That will allow to identify issues and resolve them.

    Meanwhile, some tips and performance guidelines for Vuetify would be appreciated by everyone here.

    Thanks

    T: enhancement T: feature T: documentation performance 
    opened by husayt 56
  • [Bug Report] Cannot startup with Vuetify2.0 (Sass file error)

    [Bug Report] Cannot startup with Vuetify2.0 (Sass file error)

    Environment

    Vuetify Version: 2.0.0 Vue Version: 2.6.10 Browsers: Chrome 75.0.3770.142 OS: Windows 10

    Steps to reproduce

    We upgrade to Vuetify2.0 today, but cannot startup, because we got an error with each sass style file.

    The error is: basedir=$(dirname "$(echo "$0" | sed -e 's,\,/,g')") ^^^^^^^

    SyntaxError: missing ) after argument list at Module._compile (internal/modules/cjs/loader.js:718:23) at Object.Module._extensions..js (internal/modules/cjs/loader.js:785:10) at Module.load (internal/modules/cjs/loader.js:641:32) at Function.Module._load (internal/modules/cjs/loader.js:556:12) at Module.require (internal/modules/cjs/loader.js:681:19) at require (internal/modules/cjs/helpers.js:16:16) at Object.sassLoader (E:\Workspaces\Web\qian_rich_boat_web\node_modules\sass-loader\lib\loader.js:46:72)

    Note:

    We use stylus in project。

    Expected Behavior

    The sass file build success.

    Actual Behavior

    Build with error.

    Reproduction Link

    https://codepen.io/

    S: needs reproduction S: needs more information S: triage 
    opened by lanzze 46
  • [Feature Request] Date Range Picker

    [Feature Request] Date Range Picker

    A component that facilitates the selection of a pair of dates, which can be implemented as generic start and end dates.

    What will it allow you to do that you can't do today?

    The current v-date-picker only allows for selection of a single date at a time. A date range picker will facilitate the selection of a pair of dates.

    How will it make current work-arounds straightforward?

    Currently two separate v-date-pickers will have to be used with code to facilitate synchronising their dates. Here's an example of a crude workaround utilising v-date-picker that I have implemented for a recent project:

    screenshot_20170909_174819

    Inspiration

    Element UI's datepicker's functionality serves as inspiration:

    screenshot_20170909_173006

    Specific features requested:

    • Displaying more than one calendar month at a time
    • Synchronised paging of months
    • Scoped slots for save and cancel, and scoped slots for predefined actions and date ranges (eg to add action buttons to select "next 30 days", "last year", etc)
    help wanted T: feature C: New Component C: VDatepicker 
    opened by wernerm 46
  • [Documentation][3.0.0-beta.1] Unit testing

    [Documentation][3.0.0-beta.1] Unit testing

    Environment

    Vuetify Version: 3.0.0-alpha.12 Vue Version: 3.2.13 Browsers: Chrome 98.0.4758.102 OS: Windows 10

    Steps to reproduce

    git clone https://github.com/governance-foundation/template-electron-vuex-vuetify.git cd template-electron-vuex-vuetify npm install npm run test:unit

    Expected Behavior

    unit test pass

    Actual Behavior

     FAIL  src/components/__tests__/HelloWorld.spec.ts [ src/components/__tests__/HelloWorld.spec.ts ]
    ReferenceError: CSS is not defined
     ❯ node_modules/vuetify/lib/util/globals.mjs:7:52
          5| export const SUPPORTS_INTERSECTION = IN_BROWSER && 'IntersectionObserver' in window;
          6| export const SUPPORTS_TOUCH = IN_BROWSER && ('ontouchstart' in window || window.navigator.maxTouchPoints > 0);
          7| export const SUPPORTS_FOCUS_VISIBLE = IN_BROWSER && CSS.supports('selector(:focus-visible)');
           |                                                    ^
          8| //# sourceMappingURL=globals.mjs.map
     ❯ async node_modules/vuetify/lib/util/index.mjs:19:31
     ❯ async node_modules/vuetify/lib/composables/tag.mjs:2:31
     ❯ async node_modules/vuetify/lib/components/VGrid/VContainer.mjs:7:31
    

    Reproduction Link

    https://github.com/governance-foundation/template-electron-vuex-vuetify

    Other comments

    I have globals set, and setup files mocking global.CSS.

    testing T: documentation 
    opened by wildone 42
  • [Enhancement] v-text-field with decimal amount

    [Enhancement] v-text-field with decimal amount

    Displaying currency is often in a format of 3.50 but as a number it is displayed as 3.5.

    An option to choose the amount of decimals in a v-text-field that has type="number" would be nice here.

    Property: decimals as number

    If you choose 3, then it would always display contents of the text field as 3.500.

    Perhaps it will display 3.5 while typing and 3.500 after blur. I imagine this would make the implementation alot simpler.

    T: enhancement C: VTextField 
    opened by Christilut 42
  • [Bug Report] warning with VueJS 2.6.11

    [Bug Report] warning with VueJS 2.6.11

    Environment

    Vuetify Version: 2.1.15 Vue Version: 2.6.11 Browsers: Chrome 79.0.3945.79 OS: Linux x86_64

    Steps to reproduce

    Use a VCalendar

    https://codepen.io/pen/?&editable=true&editors=101

    Expected Behavior

    No warning expected

    Actual Behavior

    A warning is displayed:

    [Vue warn]: The .native modifier for v-on is only valid on components but it was used on <div>.
    
    found in
    
    ---> <VCalendarMonthly>
           <VCalendar>
             <VSheet>
               <VApp>
                 <Root>
    

    Reproduction Link

    https://codepen.io/sshenron/pen/povRRgj?&editable=true&editors=101#anon-signup

    Other comments

    No warning with VueJS in 2.6.10.

    T: bug upstream C: VCalendar C: VIcon 
    opened by tcastelly 41
  • [Bug Report][2.6.13] VCheckbox - v-model set with array, but multiple selection don't work

    [Bug Report][2.6.13] VCheckbox - v-model set with array, but multiple selection don't work

    Environment

    Vuetify Version: 2.6.13 Vue Version: 2.7.13 Browsers: Firefox 108.0 OS: Windows 10

    Steps to reproduce

    The example is two check box that share the same v-model that is a array. Their prop value are set to two distinct object. In the initial state, the multiple selection work.

    When the check box's prop value is updated with new object. The multiple selection don't work.

    <template>
      <v-app>
        <v-main>
          <v-btn @click="refresh">Refresh</v-btn>
          <v-checkbox
            v-model="selected"
            :value="item1"
            :label="item1.name"
            />
          <v-checkbox
            v-model="selected"
            :value="item2"
            :label="item2.name"
            />
          <div>{{ selected }}</div>
        </v-main>
      </v-app>
    </template>
    
    <script>
    export default {
      name: 'App',
      data: () => ({
        item1: { id: 1, name: 'User 1', email: '[email protected]' },
        item2: { id: 2, name: 'User 2', email: '[email protected]' },
        selected: [],
      }),
      methods: {
        refresh(){
          this.item1 = { id: 1, name: 'User 1', email: '[email protected]' };
          this.item2 = { id: 2, name: 'User 2', email: '[email protected]' };
        },
      }
    };
    </script>
    

    Expected Behavior

    With v-model to a array, I expect the selection act multiple.

    Actual Behavior

    With v-model to a array, the selection don't act multiple.

    Reproduction Link

    https://codepen.io/vernou/pen/gOjMeMo?editors=1111

    DON'T WORK I'm sorry, but I couldn't manage to use this tool, because it is based on a syntax that I don't know. I hope the example below will be enough.

    Other comments

    With the debugger, I see that update the prop value trigger the watch value. Then the lazyValue is updated with the value and lost the selection array.

    S: triage 
    opened by vernou 1
  • [Documentation] [Documentation][3.0.6] Need a Code example (Composition API) for Form Validation

    [Documentation] [Documentation][3.0.6] Need a Code example (Composition API) for Form Validation

    Problem to solve

    Code example (Composition API) for Form Validation

    Proposed solution

    Composition API does not contents this.$refs, if you can add an example, it helps users know how to use it in Composition API.

    S: triage 
    opened by rikyotei 0
  • [Bug Report][3.0.6] VBtn icon is not visible when used as parent of VTooltip

    [Bug Report][3.0.6] VBtn icon is not visible when used as parent of VTooltip

    Environment

    Vuetify Version: 3.0.6 Vue Version: 3.2.45 Browsers: Chrome 108.0.0.0 OS: Linux x86_64

    Steps to reproduce

    Copy this exact snippet which is from the official vuetify 3 docs: https://next.vuetifyjs.com/en/components/tooltips/#props

    <v-btn>
      Start
      <v-tooltip activator="parent" location="top">Tooltip</v-tooltip>
    </v-btn>
    

    which works fine, but when the button props are changed to the following:

    <v-btn variant="text" icon="mdi-account" color="primary" flat>
      <v-tooltip activator="parent" location="top">Tooltip</v-tooltip>
    </v-btn>
    

    The button breaks and no icon will be shown while the tooltip is visible.

    Expected Behavior

    To show an icon button with hover effect

    Actual Behavior

    There exists the hover effect but the button icon is not visible

    Reproduction Link

    https://play.vuetifyjs.com/#...

    S: triage 
    opened by peshanghiwa 2
  • [Bug Report][3.0.6] v-chip on vuetify 3 doe not have 100% opacity

    [Bug Report][3.0.6] v-chip on vuetify 3 doe not have 100% opacity

    Environment

    Vuetify Version: 3.0.6 Last working version: 2.6.13 Vue Version: 3.2.45 Browsers: Chrome 108.0.0.0 OS: Mac OS 10.15.7

    Steps to reproduce

    Use the v-chip component and the color is not opaque/solid and there doesn't seem to be a way to make it opaque/solid

    Expected Behavior

    The chip color to be opaque/solid

    Actual Behavior

    The chip color is not opaque/solid

    Reproduction Link

    https://github.com/ninjapanda47/app-log/blob/main/src/views/StatusChip.vue

    Other comments

    This also on the official vuetify 3 documentation. https://vuetifyjs.com/en/components/chips/ ( Vuetify 2 the chip color is solid/opaque) https://next.vuetifyjs.com/en/components/chips/ (Vuetify 3 the chip color is transparent)

    S: triage 
    opened by ninjapanda47 0
  • feat(VNavigationDrawer): add rail prop v-model support

    feat(VNavigationDrawer): add rail prop v-model support

    Description

    Add support for rail v-model. Allows the user to choose to have main content shift with or without the rail expand-on-hover.

    Motivation and Context

    resolves #16022

    How Has This Been Tested?

    e2e

    Markup:

    <template>
      <div class="ma-4 pa-4">
        <v-navigation-drawer
          id="drawer"
          v-model:rail="miniVariant"
          expand-on-hover
          app
          color="#8dca9d"
        >
          <v-list nav>
            <v-list-item>
              {{ myWidth }}
            </v-list-item>
          </v-list>
        </v-navigation-drawer>
    
        <v-main>
          <div>
            Mini: {{ miniVariant }}
          </div>
        </v-main>
      </div>
    </template>
    
    <script>
      export default {
        data: () => ({
          miniVariant: true,
          myWidth: 0,
          sidebar: null,
          observer: null,
        }),
        mounted () {
          this.sidebar = document.querySelector('#drawer')
          this.observer = new ResizeObserver(this.onResize)
          this.observer.observe(this.sidebar)
        },
        beforeUnmount () {
          if (this.observer) {
            this.observer.unobserve(this.sidebar)
          }
        },
        methods: {
          onResize () {
            if (this.sidebar.offsetWidth <= '56') {
              this.miniVariant = true
            } else {
              this.miniVariant = false
            }
          },
        },
      }
    </script>
    
    
    T: feature C: VNavigationDrawer 
    opened by johnleider 0
  • [Bug Report][3.0.6] VSelect with checkboxes (multiple) does not inherit color anymore

    [Bug Report][3.0.6] VSelect with checkboxes (multiple) does not inherit color anymore

    Environment

    Vuetify Version: 3.0.6 Last working version: 2.6.13 Vue Version: 3.2.45 Browsers: Edge 108.0.1462.54 OS: Windows 10

    Steps to reproduce

    Open the codepen link Open the second or the fourth select See that the checkboxes are black

    Expected Behavior

    The checkboxes should inherit the color specified in the v-select, as it was the case after #2189 was merged

    Actual Behavior

    The checkboxes are black

    Reproduction Link

    https://codepen.io/jeremyVignelles/pen/LYBNBpx

    Other comments

    See #2174 and #2189

    S: triage 
    opened by jeremyVignelles 0
Releases(v3.0.6)
  • v3.0.6(Dec 21, 2022)

    :wrench: Bug Fixes

    • VApp: rename variables.scss (f22e141), closes #16295
    • VAvatar: apply theme classes (9005732), closes #16291
    • VFileInput: accept null modelValue (f505f7f), closes #16053
    • VImg: fetch nativeWidth if aspectRatio changes to null (0298384)
    • VImg: NaN value for normalized src (2589e94)
    • VListItem: add maximum width for flex containers (4b5d140)
    • VRadioGroup: correct margin definitions (#16209) (1e0e197), closes #16207
    • VSlider: correct first and last ticks position when vertical (61d6cdb)
    • VSlider: don't use logical inset to position thumb (a681c88), closes #16282 #16283
    • VSnackbar: apply theme classes (3aaaa15)
    Source code(tar.gz)
    Source code(zip)
    vuetify-v3.0.6.zip(1.44 MB)
  • v3.0.5(Dec 13, 2022)

    :wrench: Bug Fixes

    Source code(tar.gz)
    Source code(zip)
    vuetify-v3.0.5.zip(1.44 MB)
  • v2.6.13(Dec 13, 2022)

  • v3.0.4(Dec 7, 2022)

    :wrench: Bug Fixes

    Source code(tar.gz)
    Source code(zip)
    vuetify-v3.0.4.zip(1.44 MB)
  • v3.0.3(Nov 29, 2022)

  • v3.0.2(Nov 22, 2022)

    :wrench: Bug Fixes

    Source code(tar.gz)
    Source code(zip)
    vuetify-v3.0.2.zip(1.43 MB)
  • v3.0.1(Nov 10, 2022)

    Documentation: https://next.vuetifyjs.com/ Install vuetify@next

    :wrench: Bug Fixes

    Source code(tar.gz)
    Source code(zip)
    vuetify-v3.0.1.zip(1.43 MB)
  • v3.0.0(Oct 31, 2022)

    v3.0.0 Titan

    Vuetify 3 will be remaining on https://next.vuetifyjs.com/ and npm i vuetify@next until the documentation is complete.

    Supporting Vuetify

    Vuetify is an open source MIT project that has been made possible due to the generous contributions by sponsors and backers. If you are interested in supporting this project, please consider:

    Vuetify Store Documentation Report a Bug Community Discord Twitter

    💯 Release notes

    :rocket: Features

    • theme: rename code/kbd variables to match conventions (18537d3)
    • VList: add keyboard navigation (#15998) (48ef134), closes #15428

    :wrench: Bug Fixes

    Source code(tar.gz)
    Source code(zip)
    vuetify-v3.0.0.zip(1.42 MB)
  • v3.0.0-beta.15(Oct 25, 2022)

    :rocket: Features

    • layout: expose raw values (#15960) (bcc737c)
    • VTabs: expose mandatory prop, remove optional (#15926) (e150366)
    • VTabs: replace align-with-title, centered, end props with align-tabs (191de2e)

    :wrench: Bug Fixes

    • framework: build web-types and vetur attributes in CI (44cd4ca), closes #15942
    • framework: make props reactive even if not initially defined (8a87af1)
    • display: correctly update after SSR mount (64f909c), closes #15951
    • locale: always provide en messages (0dd1f16)
    • types: use generic prop type in slots (1238948)
    • types: don't omit properties from forwarded DOM elements (f164fbf), closes #15930
    • VBreadcrumbs: update slot types (19bde58)
    • VChip: highlight overlay on hover (#15909) (f6cf894), closes #15853
    • VCombobox: set correct model values when items are objects (dcc1fcc), closes #15151
    • VCombobox: render append/prepend-item slots (75c29a2)
    • VList: set all value types to unknown (cf1487e), closes #15873
    • VParallax: update scale on container resize (038ce0f), closes #15935
    • VSelect: remove readonly from non-array model type (d679bc6), closes #15868
    • VSelectionControlGroup: provided props & defaults target (#15958) (358cada)
    • VSlideGroup: specify slot types (1488424)
    • VSwitch: set active thumb color when using style colors (6ce2264)
    • VTable: table hover not working (#15962) (cc9773b), closes #15950
    • VTextField: update value using IME (#15907) (c5a2f58), closes #15901
    Source code(tar.gz)
    Source code(zip)
    vuetify-v3.0.0-beta.15.zip(1.41 MB)
  • v3.0.0-beta.14(Oct 18, 2022)

    :wrench: Bug Fixes

    :rocket: Features

    BREAKING CHANGES

    • locale: Removed vue-intl adapter
    • locale: Replace locale: createVueI18nAdapter({ i18n, useI18n }) with locale: { adapter: createVueI18nAdapter({ i18n, useI18n }) }
    • locale: Replace locale: { defaultLocale, fallbackLocale } with locale: { locale, fallback }
    Source code(tar.gz)
    Source code(zip)
    vuetify-v3.0.0-beta.14.zip(1.39 MB)
  • v2.6.12(Oct 18, 2022)

  • v3.0.0-beta.13(Oct 5, 2022)

  • v3.0.0-beta.12(Oct 4, 2022)

    :wrench: Bug Fixes

    • colors: use perceptual foregrounds for material palette (2b56895)
    • framework: make destructComputed reactive (ad0db0a)
    • types: inherit parent component prop types (1a33712)
    • VAvatar: make v-img children full size (4e1a42d)
    • VAvatar: set default variant to flat (cb62489)
    • VBtn: allow non-string icons (29c260f)
    • VFooter: add missing border functionality (b2619ff)
    • VSlider: add label (#15791) (c6996ac), closes #15732
    • VTabs: remove active tab overlay (578fd0b)

    :rocket: Features

    • VParallax: scale controls scroll speed instead of size (1c25fbc)
    Source code(tar.gz)
    Source code(zip)
    vuetify-v3.0.0-beta.12.zip(1.44 MB)
  • v2.6.11(Oct 4, 2022)

  • v3.0.0-beta.11(Sep 15, 2022)

    :rocket: Features

    • proxiedModel: require event binding for controlled model (#15776) a01de65, closes #15776
    • routing: add exact prop to routable components 50733a3
    • VAvatar: add variant support (#15717) a6fc62b, closes #15717
    • VBtn: inherit active route state b1b1740, closes #8172
    • VTimeline: add justify prop (#15715) ea5a7eb, closes #15715 #15681

    :wrench: Bug Fixes

    • aliases: store original name for use in getCurrentInstance e265b01
    • VBtn: use sizeStyles 4cefc67, closes #15746
    • VCarousel: add index to delimiters aria-label 06e3943
    • VCarousel: use correct active class 6ea4348, closes #15769
    • reset prop defaults scope to root in VDialog and VMenu 26c6a37, closes #15777
    • VDialog: default to 100% width 6468859, closes #14766 #15403
    • VDialog: don't try to focus tabindex="-1" or hidden inputs b8369a9, closes #15745
    • VField: center input when singleLine or no label (#15750) 53d5d7e, closes #15750 #15610
    • VField: increase specificity for prepended start padding 0632063
    • VField: input placeholder opacity (#15739) ef5bb3e, closes #15739
    • VFileInput: always render dummy input element 011aa46, closes #15484
    • VImg: don't reuse vnodes 3c071db, closes #15724
    • VOverlay: don't close openOnHover+scrim until content is hovered 63130d0, closes #15738
    • VPagination: ignore transform when calculating item width 299b164, closes #15773
    • VPagination: prevent duplicate keys warning a105dd2
    • VRadioGroup: correct label location 6d1a0df, closes #15680
    • VSelect: don't pass internal model to validation rules (#15766) 4a1589d, closes #15766 #15765
    • VSlider: support fractional ticks c3233e1, closes #15751
    • VTextarea: align hint text with VTextField 428d6f3, closes #15618
    • VToolbar: only apply scrollbar offset padding to fixed app-bar 5c02627
    • generate types for all components ca76c4f, closes #15699

    :microscope: Code Refactoring

    • VImg: replace h() with jsx 8230319

    BREAKING CHANGES

    • routing: to is now matched with isActive instead of isExactActive, use exact to restore previous behaviour
    • proxiedModel: model props will now simply set an initial value if the corresponding update: event is not also bound. To have a readonly value you can use an empty event handler like model-value="foo" @update:model-value=""
    • VDialog: default width is now 100% like in v2, use width="auto" to restore previous behaviour
    • VBtn: to will now be highlighted if the route is active, use :active="false" to prevent this
    Source code(tar.gz)
    Source code(zip)
    vuetify-v3.0.0-beta.11.zip(1.42 MB)
  • v2.6.10(Sep 12, 2022)

    :wrench: Bug Fixes

    • VCalendar: prevent XSS from eventName function (ade1434), closes #15757
    • VDialog: don't try to focus tabindex="-1" or hidden inputs (89e3850), closes #15745
    • VMenu: disable activatorFixed when attach is enabled (#15709) (464529a), closes #14922
    • VTextField: only show clear icon on hover or when focused (7a51ad0)
    • VTextField: prevent tabbing to clear button (f8ee680), closes #11202
    • web-types: add support for VDataTable pattern slots (#15694) (ac45c98)

    :microscope: Code Refactoring

    • VSelect: render highlight with vnodes instead of innerHTML (4468e3c)

    BREAKING CHANGES

    • VCalendar: eventName function can no longer render arbitrary HTML, convert to VNodes instead. eventSummary can no longer be used with v-html, replace with <component :is="{ render: eventSummary }" />
    Source code(tar.gz)
    Source code(zip)
    vuetify-v2.6.10.zip(1.14 MB)
  • v3.0.0-beta.10(Sep 1, 2022)

    :wrench: Bug Fixes

    • items: convert title for generated items to a string d70ca02
    • items: only filter children when item is an object 2744c0e
    • styles: remove firefox print overrides c88ad92
    • utilities: change text emphasis classes from opacity to color 527895c
    • VAvatar: don't allow to grow or shrink 118cc81, closes #15702
    • VCard: remove opacity transition from underlay (#15582) 9e3003f, closes #15582
    • VCombobox: float label when dirty without bound model de15c89, closes #15693
    • VDialog: remove applied v-toolbar padding for scrollbar offset 5af95df
    • VField: animate label color ade0ba8
    • VListItem: trigger openStrategy select on route change (#15703) 8a2d14e, closes #15703
    • VOverlay: don't block scroll past offsetParent when contained 27622e5, closes #15653
    • VPagination: handle total-visible larger than length (#15707) 2959a4f, closes #15707 #15705
    • VSelect: display placeholder text (#15619) 97c08af, closes #15619
    • VSelect: support readonly 6d6c1dc, closes #15655
    • VSlider: properly trigger touchend event (#15672) 8f41782, closes #15672
    • VTabs: rtl buttons and scroll behaviour (#15701) b3eae14, closes #15701 #15400
    • VTimeline: remove start/end padding with truncate-line (#15710) cac6626, closes #15710 #15695
    • check if CSS.supports exists 59370b0, closes #14749
    • wrap Element.animate 7a0b04c, closes #15544
    • VToolbar: don't allow toolbar to grow in flex column (#15663) fa30d77, closes #15663

    :rocket: Features

    • elevation: allow CSS variables for shadow opacities (#15567) 9263746, closes #15567
    • add vuetify/settings and vuetify/styles sass exports fc5302e
    • inputs: add aria roles to clickable icons (#15641) f627eb1, closes #15641 #12582
    • VNavigationDrawer: add scrim opacity variable (#15584) 4ef7238, closes #15584
    • VTabs: rename backgroundColor to bgColor dfa85e5
    Source code(tar.gz)
    Source code(zip)
    vuetify-v3.0.0-beta.10.zip(1.42 MB)
  • v3.0.0-beta.9(Aug 23, 2022)

    :wrench: Bug Fixes

    :rocket: Features

    Source code(tar.gz)
    Source code(zip)
    vuetify-v3.0.0-beta.9.zip(1.42 MB)
  • v3.0.0-beta.8(Aug 16, 2022)

    :wrench: Bug Fixes

    :rocket: Features

    Source code(tar.gz)
    Source code(zip)
    vuetify-v3.0.0-beta.8.zip(1.41 MB)
  • v3.0.0-beta.7(Aug 9, 2022)

    :wrench: Bug Fixes

    • defaults: merge scoped defaults with global config (#15599) 9cc2c57, closes #15599 #15595
    • forwardRefs: check setupState for requested key fae7a42, closes #15591
    • forwardRefs: deep search forwarded proxies dd8d600, closes #15479
    • forwardRefs: don't forward internal types c579e62
    • inputs: textarea auto-grow, consistent padding (#14683) 8962d6b, closes #14683 #15375 #15409 #15411 #15508
    • rtl: remove defaultRtl option (#15549) f786b7c, closes #15549 #15534
    • validation: broaden ValidationResult type ce4bd33, closes #15443
    • VBtn: display stacked button as a column with correct margins d686fab
    • VBtn: use correct base opacity for disabled buttons (#15575) 992e2d2, closes #15575 #15566
    • VCombobox: make input element full width in firefox 127da96, closes #15317
    • VField: use disabled as placeholder color (#15570) 8d5c9a7, closes #15570
    • VField: use fallback transition duration 6570691
    • VImg: add an empty alt to VImg generated img element (#15569) 5fbe07c, closes #15569
    • VInput: reduce vertical height caused by details d938634
    • VListChildren: add missing divider and subheader slots 1b6b6e1
    • VListSubheader: use color instead of opacity fbc60d6
    • VOverlay: use tree-based stack to determine hover/focus state eaa922c, closes #15475 #15276
    • VPagination: disable overlay transition for pagination btns 29786cb, closes #15576
    • VPagination: ignore invalid length values a0f135b, closes #15499
    • VRadio: use makeSelectionControlProps() (#15389) 76bd10a, closes #15389 #15037
    • VRadioGroup: add missing provideDefaults for v-radio a110ae2
    • VRadioGroup: allow use without defined model 48015a9
    • VSelect: toggle menu when clicking control (#15603) acfc3c4, closes #15603 #15522
    • VSelect: truncate when single-line (#15536) 82d1ce9, closes #15536 #15521
    • VSelect: add top margin for chip containers (#15495) eb9f4c5, closes #15495 #15482
    • VSelectionControl: set internal model from input.checked (#15605) 0c3a798, closes #15605 #15601
    • VSnackbar: use theme surface variant as background (#15550) 2b85020, closes #15550 #15473
    • VTable: export instance type 8de6966, closes #15548
    • VTimeline: line-inset issues (#15574) 460c0fa, closes #15574 #15571
    • VToolbar: remove content padding (#15598) 9604318, closes #15598 #15597
    • export useLocale composable 16035f3, closes #15441

    :rocket: Features

    • VBtn: add global config for colored disabled buttons (#15580) 895e742, closes #15580
    • VNavigationDrawer: add scrim prop 36785c7, closes #15565
    Source code(tar.gz)
    Source code(zip)
    vuetify-v3.0.0-beta.7.zip(1.41 MB)
  • v2.6.9(Aug 9, 2022)

  • v3.0.0-beta.6(Jul 29, 2022)

    :wrench: Bug Fixes

    • framework: declare group:selected emits (b897800), closes #15187
    • framework: forward overlay ref (cf420ff)
    • framework: specify MINIMUM vite/webpack plugin versions (e9ab916)
    • proxiedModel: count undefined prop value as present (7bbbe04), closes #15203
    • theme: allow a csp nonce to be specified (#15359) (0a3d070), closes #15358
    • transitions: apply default transition to component transitions (#15385) (c59ec9a), closes #14440
    • VBreadcrumbs: only render one icon (#15447) (3c68cd8), closes #15430
    • VBtn: display as inline-grid (7434d21), closes #15369
    • VBtn: make disabled color consistent across all variants (#15156) (9abf709), closes #15147
    • VBtn: override v-btn icon size for default icon buttons (#15492) (569b75d), closes #15486
    • VBtn: remove underlay from grid flow (4f5795b)
    • VBtn: restore original density values (#15382) (1da0b42)
    • VBtn: use inside of html buttons (4ee21dc), closes #15029
    • VCard: add overflow-wrap (#15450) (bd48eaa), closes #15486
    • VCard: apply disabled opacity to all direct children (45b1621)
    • VCard: set explicit z-index (5e57395)
    • VCardText: remove transition css properties (81dd8a9), closes #15111
    • VCombobox: make search work when multiple prop missing (#15271) (6ebdfd6)
    • VExpansionPanel: align title to the start (b54f0ec), closes #15365
    • VField: allow input to shrink (5e05dc5), closes #15377
    • VField: remove explicit v-field__input align-self (#15494) (004a74b), closes #15483
    • VFileInput: allow native drag and drop (#15208) (68b9797)
    • VListGroup: respect initial opened prop (9cb7ca5), closes #15388
    • VListItem: add default min-height when lines is not used (c48db3a)
    • VOverlay: compare uid instead of object reference in isTop (63a2c6c), closes #15380 #15412
    • VOverlay: prevent "expects a reactive object" warning (bf2c54d)
    • VPagination: remove VBtn defaults, add activeColor prop (#15449) (b0df2d0), closes #15424
    • VSelect: add prepend-item and append-item slots (#15448) (07131a8), closes #15426
    • VSelect: don't show checkboxes if hideSelected is set (11b6dea)
    • VSwitch: hide default thumb when true/false-icon is present (8e8715e), closes #15318
    • VSystemBar: use height prop (0ba754e)
    • VTable: position fixed header above tbody content (#15502) (fd8df05), closes #15297
    • VTabs: force inherit tabs height (86b2cf1), closes #15376
    • VTabs: proxy modelValue to VSlideGroup (0f30a42)
    • VTextField: show counter if using hide-details="auto" (#15268) (a63a838), closes #15231
    • VTextField: update model value immediately on input event (0ea08f8), closes #11243
    • VTimeline: render icon slot if provided (034fcfd), closes #15511

    :microscope: Code Refactoring

    • VListItem: implement grid, normalize usage w/ v-card-item (#15452) (8334f67)
    Source code(tar.gz)
    Source code(zip)
    vuetify-v3.0.0-beta.6.zip(1.41 MB)
  • v2.6.8(Jul 29, 2022)

  • v3.0.0-beta.5(Jul 1, 2022)

    :wrench: Bug Fixes

    • border: only apply --border class when true or '' (baa4a9b)
    • display: prevent SSR hydration mismatch (ab633b4)
    • framework: more lenient peer dependency (197e776)
    • framework: add keys to conditional elements (afc3893)
    • framework: generate consistent ids (#15189) (01d5e1e)
    • inputs: remove unused variables imports (b27c532)
    • styles: separate duplicate forwards into separate files (310947c), closes #14446
    • theme: reuse existing style element (2da647a)
    • validation: set input to invalid using error/errorMessages (#15269) (2d91603), closes #15209
    • validation: validate selected items instead of search (#15304) (4eec1d9), closes #15142
    • VAvatar: includes -> include (fb7c541)
    • VChipGroup: @import -> @use (d0ccb81)
    • VListGroup: prevent initial transition (ca29cae)
    • VNavigationDrawer: prevent initial transition (e56de52)
    • VSelect: don't close menu on no-data mousedown (2db6c84), closes #15206
    • VSelect: show checkboxes in list when multiple (38a505d)
    • VSlideGroup: add key to prevent unnecessary unmount (#15267) (6ad0dc1)
    • VSlideGroup: debounce size updates, scroll to active item on resize (6682129)
    • VToolbar: v-btn location in and outside of prepend/append elements (#15350) (1335939)
    • VToolbar: extend full available width in flex elements (ecdfcab)
    • VWindow: prevent initial transition (8fa1a51)

    :rocket: Features

    :microscope: Code Refactoring

    Other Commmits

    • chore: fix vite-plugin-vuetify requirement (ea426e9)
    • chore: update to cypress 10 (b702b5c)
    • chore(ci): only rename selected files for zip release (f7141ee)
    • chore(ci): run cypress tests in parallel (a2d4675)
    • chore(cypress): limit unnecessary imports (f909eac)
    • chore(dev): import all components (ef1b63f)
    • chore(docs): deploy prebuilt static files to vercel (6c34ccb)
    • chore(docs): fix build errors (f0e68b1)
    • chore(docs): set cache-control headers (9655be4)
    • chore(docs): set cache-control headers on .map files (8121eef)
    • chore(release): publish v3.0.0-beta.4 (c27b525)
    Source code(tar.gz)
    Source code(zip)
    vuetify-v3.0.0-beta.5.zip(1.40 MB)
  • v2.6.7(Jun 29, 2022)

    :wrench: Bug Fixes

    Source code(tar.gz)
    Source code(zip)
    vuetify-v2.6.7.zip(1.14 MB)
  • v3.0.0-beta.4(Jun 17, 2022)

    If your app broke start here:

    • #15240
    • #15311
    • 4f168f3 / ea426e9

    :rocket: Features

    • rename variants (#15311) fdf1c33, closes #15311
    • styles: move component variables imports to single file e9df4dc, closes #14446
    • theme: add global values (#15240) e07d052, closes #15240
    • VBtn: add loading prop (#15132) a0f88fd, closes #15132 #15056
    • VCheckboxBtn: create new component (#15081) fb1523d, closes #15081
    • VForm: rename errorMessages to errors (#15190) c5dfa97, closes #15190
    • VSelect: expose menu model 2185fe7
    • VSelect: implement item slot 9537787
    • specify required webpack/vite plugin versions 4f168f3

    :wrench: Bug Fixes

    • VSelect: don't close menu on no-data mousedown 2db6c84, closes #15206
    • VSelect: show checkboxes in list when multiple 38a505d
    • validate selected items instead of search (#15304) 4eec1d9, closes #15304 #15142
    • display: prevent SSR hydration mismatch ab633b4
    • theme: reuse existing style element 2da647a
    • VAvatar: includes -> include fb7c541
    • generate consistent ids (#15189) 01d5e1e, closes #15189
    • more lenient vue peer dependency 197e776
    • VListGroup: prevent initial transition ca29cae
    • VNavigationDrawer: prevent initial transition e56de52
    • VWindow: prevent initial transition 8fa1a51

    :microscope: Code Refactoring

    • VCode: tuning pass (#15182) 912d396, closes #15182
    • VKbd: tuning pass (#15199) 6dfcf51, closes #15199
    Source code(tar.gz)
    Source code(zip)
    vuetify-v3.0.0-beta.4.zip(1.38 MB)
  • v3.0.0-beta.3(Jun 1, 2022)

    :rocket: Features

    • consolidate all position and location props (#15152) f11dc93, closes #15152 #14952
    • items: add item-props="props" and :item-props="true" (#15160) 14c83cf, closes #15160 #15159
    • layout: rename priority to order (#15153) 0f07b27, closes #15153
    • theme: redesign public interface (#15175) c2f6146, closes #15175 #15169
    • theme: set color-scheme a664b3d, closes #14039
    • VOverlay: add closeOnBack prop 883ba1a, closes #15130
    • VOverlay: add disabled prop 30dbd9b
    • VOverlay: improve default transition a8bae5e
    • VSelect: implement generic props and slots 2980589, closes #14962

    :wrench: Bug Fixes

    • sass: interpolate value for css properties (#15137) 21b140f, closes #15137 #14958
    • states: use direct child selector 4c45cbd
    • validation: input without rules is always valid (#15144) fb30f47, closes #15144 #15143
    • VBadge: correct icon size and padding bc7d409, closes #14991
    • VBadge: re-implement offsets 92fcc26
    • VBottomNavigation: use flex-grow instead of 100% width cb1cea5
    • VBtn: add missing content div (#15138) 9701649, closes #15138
    • VBtn: don't hide overflow, allow stacked to wrap 0095e6e
    • VListItem: less strict prop types 0e49930
    • VOverlay: allow skipping elements with activator="parent" 52647af
    • VOverlay: passthrough scopeId 796a99b, closes #4282
    • VSelectionControl: apply color styles to correct element ce7df0e
    • allow component icons in all icon props a4ef229, closes #15162
    • set tab height in px instead of 100% 67b2516, closes #14849
    • VOverlay: increment zIndex on open 05290fe, closes #15134
    • VTextField: update onClick:appendInner event name check c612aa9
    • VToolbar: allow extension slot conditional rendering ea87a04, closes #14993
    • remove unused globals aba697b

    :microscope: Code Refactoring

    • framework: tuning pass (#15139) 569eeff, closes #15139
    • items: make it work with v-list (#15108) 9f22ab3, closes #15108
    Source code(tar.gz)
    Source code(zip)
    vuetify-v3.0.0-beta.3.zip(1.36 MB)
  • v3.0.0-beta.2(May 18, 2022)

    :wrench: Bug Fixes

    • recursive search prototypes of forwarded refs 5ebea27
    • locale: update catalan translations (#15012) 56fe5ea, closes #15012
    • VAlert: adjust grid / component locations 8c80623
    • validation: respect number 0 when calculating isDirty (#14943) 9477804, closes #14943 #14942
    • VAutocomplete: update search on every character on android (#15025) 664aa8d, closes #15025
    • VCard: show correct text color per background 1e642a2
    • VCombobox: use no-data slot 19e9ee0, closes #15046
    • VDialog: only trap focus in top dialog 6bb9302, closes #15041
    • VExpansionPanels: add missing readonly prop cee7539, closes #15057
    • VFileInput: show counter when using prop dfc46c3
    • VFooter: add application layout support (#14995) 31ec8ad, closes #14995
    • VForm: should update valid state reactively (#14945) cbbbe03, closes #14945 #14901
    • VIcon: use pointer cursor on clickable icons (#14994) e76dabe, closes #14994 #14896
    • VInput: set specific font size and weight 9860646, closes #15090
    • VList: remove useItems usage from #15079 d9d33b4, closes #15079
    • VListGroup: add active state to activator props c144f31
    • VListItem: apply nav prop styling when not inside v-list 6ccc092
    • VOverlay: apply fixed scroll workaround in every browser 8738703
    • VOverlay: only use a single timeout checking for back button dfc6e17, closes #15022
    • VOverlay: reset scroll after close on iOS eaa78b2
    • VSelect: set model value to trigger emit (#15020) 0ad9d7f, closes #15020 #15008
    • VSelectionControl: respect readonly prop bf8d34e, closes #15100
    • VSlideGroup: revert to using two resize observers c3da5c2, closes #15035
    • VSnackbar: add missing rounded functionality 0c25580
    • VTextField: pass name prop to input element (#15044) 78c2446, closes #15044 #15026
    • VTextField: show placeholder when label is undefined 62ecf7e, closes #15075
    • VTextField: shrink to fit available width 0abd00c, closes #15086
    • VToolbar: add missing border functionality (#14996) ea0bca0, closes #14996 #14985
    • VToolbar: apply transition-property correctly 24ebae3
    • specify required nodejs version 127a7ee, closes #14967

    :rocket: Features

    • items: add new composable (#15079) e982615, closes #14783
    • nested: add new open-strategy for lists b631b96
    • ripple: add .stop modifier (#15004) 240914c, closes #15004
    • utilities: rename border left/right to start/end (#15103) 0132e9d, closes #15103
    • VForm: emit custom SubmitEventPromise event on submit (#14979) 48656ae, closes #14979
    • VMenu: support nested submenus (#15018) 1c879a7, closes #15018 #1877 #8674 #14978
    • VSlider: add $slider-track-active-size-offset variable (#15107) fe3c2f6, closes #15107
    • VTabs: right prop renamed to end (#15031) 143aba9, closes #15031

    :microscope: Code Refactoring

    • colors: remove border-color declaration (#14997) ce465b4, closes #14997
    • VAlert: tuning pass (#14971) e9c2d88, closes #14971
    • VTimeline: updated css, added align prop (#14888) 41e9f70, closes #14888
    Source code(tar.gz)
    Source code(zip)
    vuetify-v3.0.0-beta.2.zip(1.35 MB)
  • v2.6.6(May 17, 2022)

  • v2.6.5(May 2, 2022)

Owner
vuetify
Material Component Framework for Vue
vuetify
Material design for Vue.js

Material Design for Vue.js Vue Material is Simple, lightweight and built exactly according to the Google Material Design specs Build well-designed app

Vue Material 9.7k Dec 30, 2022
A lightweight Vue.js UI library with a simple API, inspired by Google's Material Design.

Keen UI Keen UI is a Vue.js UI library with a simple API, inspired by Google's Material Design. Keen UI is not a CSS framework. Therefore, it doesn't

Josephus Paye II 4.1k Jan 2, 2023
:tada: A magical vue admin https://panjiachen.github.io/vue-element-admin

English | 简体中文 | 日本語 | Spanish SPONSORED BY 活动服务销售平台 客户消息直达工作群 Introduction vue-element-admin is a production-ready front-end solution for admin inter

花裤衩 80.1k Dec 31, 2022
:eyes: Vue in React, React in Vue. Seamless integration of the two. :dancers:

vuera NOTE: This project is looking for a maintainer! Use Vue components in your React app: import React from 'react' import MyVueComponent from './My

Aleksandr Komarov 4k Dec 30, 2022
🎉 基于 vite 2.0 + vue 3.0 + vue-router 4.0 + vuex 4.0 + element-plus 的后台管理系统vue3-element-admin

vue3-element-admin ?? 基于 Vite 2.0 + Vue3.0 + Vue-Router 4.0 + Vuex 4.0 + element-plus 的后台管理系统 简介 vue3-element-admin 是一个后台前端解决方案,它基于 vue3 和 element-plu

雪月欧巴 84 Nov 28, 2022
Jenesius vue modal is simple library for Vue 3 only

Jenesius Vue Modal Jenesius vue modal is simple library for Vue 3 only . Site Documentation Installation npm i jenesius-vue-modal For add modals in yo

Архипцев Евгений 63 Dec 30, 2022
A template repository / quick start to build Azure Static Web Apps with a Node.js function. It uses Vue.js v3, Vue Router, Vuex, and Vite.js.

Azure Static Web App Template with Node.js API This is a template repository for creating Azure Static Web Apps that comes pre-configured with: Vue.js

Marc Duiker 6 Jun 25, 2022
Mosha-vue-toastify - A light weight and fun Vue 3 toast or notification or snack bar or however you wanna call it library.

Mosha Vue Toastify A lightweight and fun Vue 3 toast or notification or snack bar or however you wanna call it library. English | 简体中文 Talk is cheap,

Baidi Liu 187 Jan 2, 2023
A plugin that can help you create project friendly with Vue for @vue/cli 4.5

vue-cli-plugin-patch A plugin that can help you create project friendly with Vue for @vue/cli 4.5. Install First you need to install @vue/cli globally

null 2 Jan 6, 2022
Veloce: Starter template that uses Vue 3, Vite, TypeScript, SSR, Pinia, Vue Router, Express and Docker

Veloce Lightning-fast cold server start Instant hot module replacement (HMR) and dev SSR True on-demand compilation Tech Stack Vue 3: UI Rendering lib

Alan Morel 10 Oct 7, 2022
📓 The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!

Build bulletproof UI components faster Storybook is a development environment for UI components. It allows you to browse a component library, view the

Storybook 75.9k Jan 9, 2023
Universal select/multiselect/tagging component for Vue.js

vue-multiselect Probably the most complete selecting solution for Vue.js 2.0, without jQuery. Documentation Visit: vue-multiselect.js.org Sponsors Gol

Damian Dulisz 6.3k Jan 6, 2023
Everything you wish the HTML