Vuetify 2.0 Breaking Changes

[zachjharris]

Information on the release here: https://github.com/vuetifyjs/vuetify/releases/tag/v2.0.0

v-btn

• "round" property changed to "rounded". This is easily fixed.
• "outline" property changed to "outlined". This is easily fixed.
• "flat" property changed to "text". This should be an easy fix, although it may be good to change the existing "text" property to "buttonText", or something similar.

v-dialog

• "lazy" property removed, as all menus and dialogs are lazy by default
• "eager" property added - if you want the dialog to have the old functionality (not lazy), the dialog needs this property.

I may have missed some, but these are the documented changes that immediately jump out as troublemakers.

Other Errors

• There seems to be an issue with the "dark" property. The release notes mention changes to the light/dark theme configuration, but I haven't had much of a chance to look into it.
• Something is going on with reading the property "smAndDown" in the "hideScroll" method.

[yariksav]

HI, @zachjharris! Thank you for detailed description.
I've tried to transpose dialogs to vuetify2
first next version is 1.0.0-alpha.1 or

npm i vuetify-dialog@next

This is new codesandbox test
https://codesandbox.io/s/vuetify-2-dialog-example-iwdcf

notice, that now you have to put vuetify instance into dialog context. If you use NUXT - you don't have to do nothing

// CREATE VUETIFY INSTANCE
const vuetify = new Vuetify({
  icons: {
    iconfont: "md"
  },
  theme: { dark: true }
});
Vue.config.productionTip = false;

// THIS IS IMPORTANT TO INSTALL DIALOGS
// YOU NEED TO SEND VUETIFY INSTANCE INTO DIALOG CONTEXT
Vue.use(VuetifyDialog, {
  context: {
    vuetify
  }
});

[dmoebius]

So far 1.0.0-alpha.3 runs fine with Vuetify 2.0, but there are some warnings on the console:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in getter for watcher "isDark": "TypeError: Cannot read property 'dark' of undefined"

found in

---> <ThemeProvider>
       <VDialog>
         <Root>

vue.runtime.esm.js?2b0e:1888 TypeError: Cannot read property 'dark' of undefined
    at VueComponent.appIsDark (index.js?7560:50)
    at Watcher.get (vue.runtime.esm.js?2b0e:4473)
    at Watcher.evaluate (vue.runtime.esm.js?2b0e:4578)
    at VueComponent.computedGetter [as appIsDark] (vue.runtime.esm.js?2b0e:4830)
    at VueComponent.rootIsDark (index.js?7560:83)
    at Watcher.get (vue.runtime.esm.js?2b0e:4473)
    at Watcher.evaluate (vue.runtime.esm.js?2b0e:4578)
    at VueComponent.computedGetter [as rootIsDark] (vue.runtime.esm.js?2b0e:4830)
    at VueComponent.isDark (ThemeProvider.js?bfc5:12)
    at Watcher.get (vue.runtime.esm.js?2b0e:4473)

[Vue warn]: Error in callback for watcher "isActive": "TypeError: Cannot read property 'smAndDown' of undefined"

found in

---> <VDialog>
       <Root>

vue.runtime.esm.js?2b0e:1888 TypeError: Cannot read property 'smAndDown' of undefined
    at VueComponent.hideScroll (index.js?e707:168)
    at VueComponent.hideScroll (VDialog.js?169a:162)
    at VueComponent.genOverlay (index.js?e707:47)
    at VueComponent.show (VDialog.js?169a:167)
    at VueComponent.isActive (VDialog.js?169a:92)
    at Watcher.run (vue.runtime.esm.js?2b0e:4562)
    at flushSchedulerQueue (vue.runtime.esm.js?2b0e:4304)
    at Array.eval (vue.runtime.esm.js?2b0e:1980)
    at flushCallbacks (vue.runtime.esm.js?2b0e:1906)

[dmoebius]

Solved! :)

I had to replace

Vue.use(VuetifyDialog)

with

Vue.use(VuetifyDialog, { context: { vuetify } })

in my main.js, where vuetify is the global instance of Vuetify which I'm using.

Now all errors are gone.

[dmoebius]

Just for reference: vuetifyjs/vuetify#6895 pointed me in the right direction.

[charliegilmanuk]

Did you not read the comment above yours before posting an issue and 3 separate replies? Quite clearly stated you needed to add the context...

[dmoebius]

Indeed, I completely overlooked that comment. My apologies!

[techlead1905]

This looks great!
But Let me know how to fix "dark" and "smAndDown" errors when using nuxt?

Here is my nuxt.js.config file
modules: ["vuetify-dialog/nuxt"]

[activeliang]

References：https://gist.github.com/eolant/ba0f8a5c9135d1a146e1db575276177d#gistcomment-3542722