DISCLAIMER
⚠️ DO NOT USE IN PRODUCTION ⚠️
This is specifically for developers who want to play with the absolute latest and greatest that is coming up in the framework. With the exception of critical bugs, all issues pertaining to the alpha will be closed without question.
📖 Documentation
🚀 Features
- VGrid: add grow-shrink-0 (#6538) (2db5690), closes #6530
- restructure core, add services (#6464) (09c2617)
⚠️ BREAKING CHANGES
-
AlaCarte does not work until alpha 10
-
Bootstrap
Vuetify must now be instantiated and passed to the initial Vue instance. This is similar to howvue-routerandvuexare bootstrapped.
// v1.5
import Vue from 'vue'
import Vuetify from 'vuetify'
const opts = { ... }
Vue.use(Vuetify, opts)
new Vue(...).$mount('#app')// v2.0
import Vue from 'vue'
import Vuetify from 'vuetify'
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.
// 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',
icons: { ... }
}// v2.0
const opts = {
icons: {
iconfont: 'mdi',
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
Testing with Vuetify is now similar to vue-router and vuex.
import { createLocalVue, mount } from '@vue/test-utils'
import Vuetify from 'vuetify'
import Component from 'path/to/my/components'
const localVue = createLocalVue()
localVue.use(Vuetify)
describe('Component.vue', () => {
let vuetify
beforeEach(() => {
vuetify = new Vuetify(...)
})
it('should...', () => {
const wrapper = mount(Component, {
localVue,
vuetify
})
})
})