npm vuetify 2.0.0-beta.0
v2.0.0-beta.0
on Node.js NPM

latest releases: 3.7.4, 3.7.3, 3.7.2...
5 years ago

Version 2.0 Beta (Arcadia)

❗️ Notice

In the Frequently Asked Questions section below we have attempted to identify future changes planned during the beta release cycle. This is NOT a guaranteed list for the final release and is subject to change at anytime.

🆘 Frequently Asked Questions

Where is the documentation for the beta?

Documentation

Where can I get help with migration to the beta?

The Release Migration Channel on Discord.

Where can I report bugs or issues found in the beta?

The official Vuetify Issue Creator.

Is there an updated version of the vue-cli-plugin-vuetify for the beta?

Yes. 

# yarn
$ yarn add https://github.com/vuetifyjs/vue-cli-plugin-vuetify.git#dev -D
$ vue invoke vuetify

# npm
$ npm install https://github.com/vuetifyjs/vue-cli-plugin-vuetify.git#dev --save-dev
$ vue invoke vuetify

Will there be additional breaking changes introduced during the beta?

Yes. With that being said, the changes defined below are the only planned breaking changes for future betas.

  • The VGrid update is currently in the final stages of development. However, we do have plans to implement the current grid into a legacy-grid package that users can opt into.
  • While too late to make it into beta.0, all deprecations (backwards compatibility) added to v2.0 specifically will be removed in beta.1 beta.2 and designated as breaking changes.

Should I use the beta in a production environment?

We always recommend users not to use alpha and beta releases in a production environment.

Will there be new features added during the beta?

The only planned features are:

  • VGrid - update
  • VFeatureDiscovery - new component
  • VFileUpload - new component

Why do I get errors trying to compile my project?

If they look like Invalid CSS after " @content": expected "}", was "($material-light); ", you need to use sass instead of node-sass. See the setup guide for more information.

How do I use Vuetify 2.0 with nuxt?

Install @nuxtjs/vuetify@next. This comes with everything you need already, so you should not have VuetifyLoaderPlugin in your nuxt config.

🔧 Bug Fixes

Some bug fixes may be absent from this list due to being part of a components update for v2.

  • stackable: move stack classes to explicit values (7dad5e9), closes #5141
  • VDatePicker: fixed disabled styles (1f66831)
  • VDatePicker: updated button classes (cb3bbcf)
  • VGrid: apply !important to helper classes (4893523)
  • VListItemTitle: don't cut badge (#7161) (f20cc01), closes #7117
  • VParallax: show image if no translation is available (#7042) (c6f3a2c), closes #7010
  • VSlider: make sure stars do not wrap (c92e569), closes #6481
  • VWindow: select first non-disabled window-item when using touch swipe (1938ee7), closes #5000

🚀 Features

  • What does update to md2 mean?

    • The component has been updated to match the Material Design 2 specification
    • Unit tests were moved from the root test folder to the updated component/mixin folder and switched from avoriaz to vue-test-utils
    • Styles were converted from stylus to sass and moved to the updated component folder

  • locale:

  • core: restructure, add services for bootstrapping functionality (#6464) (09c2617)

  • typography: added new classes

    • subtitle-1
    • subtitle-2
    • overline

  • VAppBar:

    • add new component (#6701)
    • update application state on scrolling effects change (358c62c), closes #3820
    • all scrolling techniques moved from <v-toolbar>
    • added new props (that did not exist as scrolling techniques from <v-toolbar>
      • fade-img-on-scroll
      • collapse-on-scroll
      • elevate-on-scroll
      • shrink-on-scroll

  • VBanner: add new component (#6520) (043fff0)

  • VBottomNavigation:

  • VBtn: update to md2 (#6037) (18c8355)

  • VBtnToggle: update to md2 (#6037) (18c8355)

  • VCard:

    • update to md2 (#6788) (a63b300), closes #3925
    • added new props
      • link
      • outlined
    • now implements the loadable mixin
    • when used as a link can now be focused

  • VChip:

    • update to md2 (#6303) closes (#3817) #3925 #2562 #4687)
    • now implements the routable mixin
    • added new props
      • filter
      • filter-icon
      • link
      • pill
      • tag

  • VChipGroup: add new component (#6303)

  • VColorPicker: add new component (#6988) (a5a1102)

  • VData: add new component (#5737)

  • VDivider: update to md2 (#6582) (5adf0ea)

  • VIcon:

  • VList:

  • VNavigationDrawer:

    • update to md2 (f8a6c20)
    • added new props
      • expand-on-hover
      • src

  • VOverlay: add new component (#6768) (69b15cf)

  • VProgressLinear:

    • update to md2 (#7057) (fa69676), closes #5147
    • added new props
      • rounded
      • stream
      • striped

  • VSlideGroup: add new component (#6240) (7026f34)

  • VSlider:

  • VSnackbar: update to md2 (94705a3) (94705a3)

  • VSwitch: update to md2 (#6851) (72b5895)

  • VSystemBar: update to md2 (#6701)

  • VTabs: update to md2 (#6606) (f22d754), closes #3617, #3631, #3633, #3971, #4204, #4420, #4735, #5398, #5515, #5762, #6014, #6278, #6505, #6527, #6575

  • VTextField:

    • update to md2 (#7157) (32c77ee)
    • added new props
      • filled
      • rounded
      • shaped

  • VToolbar: update to md2 (#6701) (fc8c2ed), closes #3373 #3938 #3985 #4985 #5369

  • VTooltip: update to md2 (#6111) (2d2312a)

📑 Upgrade Guide

Bootstrap

Vuetify must now be instantiated and passed to the initial Vue instance. This is similar to how vue-router and vuex are bootstrapped.

Full Install 

// v1.5
import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/src/stylus/main.styl'

const opts = { ... }
Vue.use(Vuetify, opts)

new Vue(...).$mount('#app')
// v2.0
import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

const opts = { ... }
Vue.use(Vuetify)

new Vue({
  vuetify: new Vuetify(opts)
}).$mount('#app')

A-La-Carte Install (vuetify-loader) 

// v1.5
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import 'vuetify/src/stylus/main.styl'

const opts = { ... }
Vue.use(Vuetify, opts)

new Vue(...).$mount('#app')
// v2.0
import Vue from 'vue'
import Vuetify from 'vuetify/lib'

const opts = { ... }
Vue.use(Vuetify)

new Vue({
  vuetify: new Vuetify(opts)
}).$mount('#app')

Theme

Now supports dark/light theme variants. The dark property has been moved into the theme property. Will dynamically change when toggling $vuetify.theme.dark. If only using one variant, you only need to define its colors.

What is the difference between light and dark theme variants?

In the past, you could change your application to light or dark by toggling the dark value on the $vuetify object. Generally, light theme color palettes do not look good in a dark theme and the new functionality allows you to specify a set of colors for each variant.

If I don't plan to use one or the other variants, can I omit defining that specific one?

Yes.

Will the light and dark variants apply to individual components? (e.g. a light theme application with a dark <v-card>)

No. Variants only apply from designation of $vuetify.theme.dark being boolean true or false. 

// v1.5
const opts = {
  dark: true,
  theme: {
    primary: '...',
    ...
  }
}
// v2.0
const opts = {
  theme: {
    dark: true,
    themes: {
      light: {
        primary: '...',
        ...
      },
      dark: {
        primary: '...',
        ...
      }
    }
  }
}

Icons

Icon and iconfont declaration is now scoped under the icons property 

// v1.5
const opts = {
  iconfont: 'mdi', // default
  icons: { ... }
}
// v2.0
const opts = {
  icons: {
    iconfont: 'mdi', // default
    values: { ... }
  }
}

If you want to opt into the previous default: 

// v2.0
const opts = {
  icons: {
    iconfont: 'md',
    values: { ... }
  }
}

Goto

Import location has changed. Must be explicitly bootstrapped with the Vuetify instance to use in vue-router scroll-behavior. Example of how to do this here. Reference documentation for scroll-behavior usage here. 

// v1.5
import goTo from 'vuetify/es5/components/Vuetify/goTo'
// v2.0
import goTo from 'vuetify/es5/services/goto'

Lang

The translator function t is now nested under the lang property 

// v1.5
this.$vuetify.t(...)
// v2.0
this.$vuetify.lang.t(...)

Unit tests

// setup.js
import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify)
// Component.spec.js
import { createLocalVue, mount } from '@vue/test-utils'
import Vuetify from 'vuetify'
import Component from 'path/to/my/component'

const localVue = createLocalVue()

describe('Component.vue', () => {
  let vuetify

  beforeEach(() => {
    vuetify = new Vuetify(...)
  })

  it('should...', () => {
    const wrapper = mount(Component, {
      localVue,
      vuetify
    })
  })
})

Framework

  • activatable: all activator slots must be bound with new Vue v-slot
    • We understand this is considerably more verbose than the v1.5 counterpart. We are still exploring ways to support the new v-slot in a more concise manner. The upside to this change is it is easier to support nested activators.
    • You can find more information on the official Vue documentation for Destructuring Slot Props.
    • You can find more information on the official Vue documentation for v-slot.

Regular activator 

// v1.5
<v-dialog>
  <v-btn slot="activator">...</v-btn>
</v-dialog>
// v2.0
<v-dialog>
  <template v-slot:activator="{ on }"
    <v-btn v-on="on">...</v-btn>
  </template>
</v-dialog>

Nested activator 

// v2.0
<v-menu>
  <template v-slot:activator="{ on: menu }">
    <v-tooltip bottom>
      <template v-slot:activator="{ on: tooltip }">
        <v-btn
          color="primary"
          dark
          v-on="{ ...tooltip, ...menu }"
        >
          Dropdown w/ Tooltip
        </v-btn>
      </template>
      <span>Im A ToolTip</span>
    </v-tooltip>
  </template>
</v-menu>
  • icons: Now defaults to use mdi icons. For information on how to install please navigate here
  • routable:
    • can (and should) now use the color prop to designate active color instead of active-class on <v-list-group>
    • items now always have an active-class that pertains to their state e.g.
      • <v-btn class="v-btn--active">
      • <v-chip class="v-chip--active">
  • styles: stylus has been removed in favor of sass
  • typography: root font-size has been updated from 14px to 16px to match the md2 specification
    • The following typography classes have been replaced:
      • .subheading -> .subtitle-1

Components

  • <v-bottom-sheet-transition> has been removed
  • VBottomNavigation:
    • the color prop is now background-color
    • the color prop now affects the active <v-btn> color
  • VBtn:
    • The flat prop is now text
    • The round prop is now rounded
    • No longer has explicit margin
  • VBottomNavigation:
    • <v-bottom-nav> -> <v-bottom-navigation>
  • VCarousel: The cycle prop is no longer implicit, must be defined in order to have screens
    switch
  • VChip:
    • value no longer controls visibility. input event emitted when clicking
    • the selected prop is now input-value or v-model
      close is now click:close
  • VDataIterator/VDataTable:
    • disable-initial-sort has been removed. Neither component initially sorts data anymore. Use sort-by or options props to sort.
    • filter prop has been removed. Instead use custom-filter. This was done in an effort to make custom filtering less confusing.
    • pagination prop has been removed. Instead use options prop.
    • total-items prop has been renamed to server-items-length
    • hide-actions prop has been renamed to hide-default-footer. Also it no longer changes the visible items per page
    • Props related to the default footer have been move to the footer-props prop. These are:
      • prev-icon
      • next-icon
      • rows-per-page-items now renamed to items-per-page-options
      • rows-per-page-text now renamed to items-per-page-text
    • expand prop has been removed.
  • VDataIterator
    • The content-tag, content-props, content-class props have been removed. Instead simply use the default scoped slot to implement your intended markup.
  • VDataTable:
    • hide-header has been renamed to hide-default-header
    • select-all has been renamed to show-select. This will also render a checkbox on each item row as long as you are not defining your own scoped item row.
    • Props related to the default header have been moved to the header-props prop. These are:
      • sort-icon
  • VExpansionPanel:
    • many components have been renamed and props moved
    • <v-expansion-panel> -> <v-expansion-panels>
    • <v-expansion-panel-content> -> <v-expansion-panel>
    • new component -> <v-expansion-panel-header>
    • new component -> <v-expansion-panel-content>
  • VFooter:
    • Now has explicit padding to match other similar MD components. Can be removed with the padless prop or a helper class, class="pa-0"
  • VList:
    • many components have been renamed
    • <v-list-tile> -> <v-list-item> et al (anything -tile is now -item)
    • <v-list-tile-sub-title> -> <v-list-item-subtitle>
    • The avatar prop has been removed
  • VListGroup:
    • Can no longer use <v-list-item>'s in the activator slot
      • listeners on <v-list-group> are now passed through to the internal v-list-item for activators
      • use <v-list-item-content> and <v-list-item-title> instead
  • VTabs:
    • The color prop is now background-color. color now affects the active <v-tab> and <v-slider> color
    • v-tabs-items no longer implicitly inherits the <v-tabs> model when nested. Must have bound :value or v-model
    • Various class names have been changed throughout
      • v-tab__div removed, use v-tab
      • v-tab__item -> v-tab
      • v-tabs__slider -> v-tabs-slider
      • v-tabs__bar -> v-tabs-bar
  • VTextField:
    • The box prop is now filled

Mixins

  • bootable: The following components are now lazy by default. This means they will not render their content until they are explicitly activated. This drastically improves performance but may not be wanted depending upon your application's needs (i.e. For SEO purposes). To return to the previous behavior, use the eager prop.
    • <v-badge>
    • <v-menu>
    • <v-tooltip>
    • <v-dialog>
    • <v-bottom-sheet>

🚗 Changes

  • What does refactored for v2 mean?

    • Functionality may have received new features or functionality which will be outlined below
    • Unit tests were moved from the root test folder to the updated component/mixin folder and switched from avoriaz to vue-test-utils
    • Styles were converted from stylus to sass and moved to the updated component folder

  • bootable:

    • refactored for v2 (#6735) (5cc2d07)
    • the lazy prop is now the default behavior

  • VAlert: refactored for v2 (#6107) (c889973)

  • VApp: refactored for v2 (9d7e22)

  • VAutocomplete: refactored for v2

  • VAvatar: refactored for v2 (#6433) (b19947e))

  • VBadge:

  • VBottomSheet: refactored for v2 (#6786) (568216b)

  • VBreadcrumbs: refactored for v2 (e5ccf37)

  • VCalendar: refactored for v2

  • VCarousel:

  • VCheckbox: refactored for v2

  • VCombobox: refactored for v2

  • VContent: refactored for v2 (f206b02)

  • VCounter: refactored for v2 (f1245f7)

  • VDataIterator: refactored for v2 (#5737)

  • VDataTable:

    • refactored for v2 (#5737)
    • add horizontal overflow scroll (bde7c8f)

  • VDatePicker: refactored for v2 (#6160) (d7a74a4)

  • VDialog:

  • VExpansionPanel: refactored for v2 (now properly matches md1 spec) (#6720) (f891304), closes #6663 #6290

  • VFooter: refactored for v2 (#6711)

  • VForm: refactored for v2 (540e968) (d9b744e)

  • VGrid:

  • VHover: refactored for v2 (30fdd3e)

  • VImg:

  • VInput: refactored for v2 (3ee530d) (da2e601)

  • VItemGroup: refactored for v2 (#6631) (2d6d90c)

  • VLabel: refactored for v2 (#6584) (4dd4c9b)

  • VMenu: refactored for v2 (2509ed8) (7f6c369)

  • VMessages: refactored for v2 (#6585) (30a174f)

  • VOverflowBtn: refactored for v2 (7a45d90) (7a45d90)

  • VPagination: refactored for v2 (e80918c) (e80918c)

  • VParallax: refactored for v2 (d339c88) (d339c88)

  • VPicker: refactored for v2 (1098de6) (1098de6)

  • VProgressCircular: refactored for v2 (#7710)

  • VRadioGroup: refactored for v2 (#6913) (4717436)

  • VRangeSlider: refactored for v2 (a47689a) (a47689a)

  • VRating: refactored for v2 (bc91c41)

  • VResponsive: refactored for v2 (e501b80)

  • VSelect: refactored for v2 (d34412c) (d34412c)

  • VSheet: refactored for v2 (d0176c3)

  • VSparkline: refactored for v2 (8e90e9f)

  • VSpeedDial: refactored for v2 (ea99685) (ea99685)

  • VSubheader: refactored for v2 (#6713)

  • VStepper: refactored for v2 (0d92edd)

  • VTextarea: refactored for v2 (2839518) (2839518)

  • VTimeline: refactor for v2 (#6656) (deb3e3d), closes #5437

  • VTimePicker:

    • refactored for v2 (#6869) (da54462)
    • don't allow 0 hour/minute when it's not allowed (c49ff47)

  • VTreeview: refactored for v2 (#6849)

  • VWindow: refactored for v2 (#6661)

⚡️ Performance Improvements

  • ripple: only warn about inline element in dev build (52ef1af)

⌨️ Typescript

The entire framework has been converted to Typescript. However, some types are still in progress

⚠️ Deprecations

Added

These are deprecations that have been added as of v2.0. As per a discussion with the Core Team we have decided to make these BREAKING in beta.1 beta.2. This decision was not in time for beta.0. This means that you will still receive warning messages of the changes but it will NOT be backwards compatible.

  • easing-patterns: The path to import easing patterns has changed from vuetify/es5/util/easing-patterns to vuetify/es5/Vuetify/goTo/easing-patterns
  • <v-alert>
    • the outline prop is now outlined
  • <v-bottom-nav>
    • is now named <v-bottom-navigation>
    • active is now value
    • active.sync can now be achieved with v-model
  • <v-btn>
    • the flat prop is now text
    • the round prop is now rounded
    • the outline prop is now outlined
  • <v-carousel>
    • the hide-controls prop is now :show-arrows="false"
  • <v-chip>
    • the outline prop is now outlined
    • the selected prop is now value
  • <v-list>
    • <v-list-tile> -> <v-list-item>
    • <v-list-tile-title> -> <v-list-item-title>
    • <v-list-tile-sub-title> -> <v-list-item-subtitle>
    • <v-list-tile-action> -> <v-list-item-action>
    • <v-list-tile-action-text> -> <v-list-item-action-text>
    • <v-list-tile-avatar> -> <v-list-item-avatar>
    • <v-list-tile-icon> -> <v-list-item-icon>
  • <v-stepper>
    • the input event is now change
  • <v-text-field>
    • the box prop is now filled
  • <v-toolbar>
    • if using the app prop, should now use <v-app-bar>
    • the card prop has been removed, use flat instead
    • the manual-scroll prop has been removed, control visible state with value
    • the following props have been moved to <v-app-bar>
      • clipped-left
      • clipped-right
      • inverted-scroll
      • scroll-off-screen
      • scroll-target
      • scroll-threshold
  • <v-toolbar-side-icon> -> <v-app-bar-nav-icon>

Removed Components/Properties

These are previous deprecations from earlier versions that have now been removed

  • <v-jumbotron> has been removed
  • <v-text-field textarea> will no longer render <v-textarea>
  • <v-select autocomplete> will no longer render <v-autocomplete>
  • <v-select combobox> will no longer render <v-combobox>
  • <v-select overflow> will no longer render <v-overflow-btn>
  • <v-select segmented> will no longer render <v-overflow-btn segmented>
  • <v-select editable> will no longer render <v-overflow-btn editable>
Check out latest releases or
releases around vuetify 2.0.0-beta.0

Don't miss a new vuetify release

NewReleases is sending notifications on new releases.

Get notifications