[Feature Request] Update Vuetify to 2.0

[kinow]

What is your enhancement?

Vuetifyjs 2.0 has been released a few hours ago. This issue is just a placeholder for discussion/work on updating the theme to use this latest release.

https://github.com/vuetifyjs/vuetify/releases

A few backward incompatible changes (as expected from a major release) will require care when updating the theme and some of its components. Will start to familiarize myself with the new stuff in 2.0 and hopefully be able to help too.

Thanks Bruno

[JessePerry]

I just tried to do this myself with the vue UI. I could get the site building and presenting the home dashboard, but I had circular references in the console output which I couldn't figure out.

[Vue warn]: Unknown custom element: <v-list> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <CoreDrawer> at src/components/core/Drawer.vue

It seems to be a common issue regarding referencing components, but in vuetify 2.0, referencing and importing components has changed some how.

Hopefully someone with vue experience could help but for now we'll be sticking with vuetify 1.5.13

[koenrad]

I just tried to do this myself with the vue UI. I could get the site building and presenting the home dashboard, but I had circular references in the console output which I couldn't figure out.

[Vue warn]: Unknown custom element: <v-list> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <CoreDrawer> at src/components/core/Drawer.vue

It seems to be a common issue regarding referencing components, but in vuetify 2.0, referencing and importing components has changed some how.

Hopefully someone with vue experience could help but for now we'll be sticking with vuetify 1.5.13

The way that you load Vuetify has changed, so you will need to update /src/plugins/vuetify.js and /src/main.js.

for /src/plugins/vuetify.js change it to this:

Vue.use(Vuetify)

export default new Vuetify({
  icons: {
    iconfont: 'mdi',
  },
  theme: {
    themes: { theme }
  }
})

for /src/main.js change it to this:

import vuetify from './plugins/vuetify'

//...
new Vue({
  i18n,
  vuetify,
  router,
  store,
  render: h => h(App)
}).$mount('#app')

There are a few places where the activator slot for a <v-menu> and <v-tooltip> is used. You will need to use the new syntax. For example in /src/components/core/Filter.vue you will need to wrap the <v-btn> that has the slot="activator" property in a template like this:

<template #activator="{ on }">
  <v-btn
    v-on="on"
    class="elevation-0"
    color="grey"
    dark
    fab
    fixed
    style="top: 96px;"
    top
  >
    <v-icon>mdi-settings</v-icon>
  </v-btn>
</template>

This was the only unintuitive step for updating to 2.0 that I encountered (so far). The rest is a simple search and replace for updated component names that can easily be pinpointed by looking at your javascript console errors.

One more thing, make sure you install sass, not node-sass.

npm uninstall node-sass
npm install sass

[JessePerry]

The 2.0.0 Release notes show all changes/renames

Like how v-list-tile is v-list-item

v-list et al Many components have been renamed v-list-tile → v-list-item v-list-tile-action → v-list-item-action v-list-tile-avatar → v-list-item-avatar v-list-tile-content → v-list-item-content v-list-tile-title → v-list-item-title v-list-tile-sub-title → v-list-item-subtitle The avatar prop has been removed

The activator example by @koenrad is excellent, thanks so much! You have to apply it in Filter.vue and Toolbar.vue.

Data Tables have changed. EG: Templates for the item rows which were written like this: <template slot="items" slot-scope="{ item }"> Are now done like this:

<template v-slot:body="{ items }">
  <tbody>
    <tr v-for="item in items" :key="item.id">

[JessePerry]

One of the most confusing parts I dealt with was regarding the much simplified v-data-table which should be able to work without a header and body template. Eg: in the TableList.vue I should be able to just have:

          <v-data-table
            :headers="headers"
            :items="items"
            :items-per-page="5"
            hide-default-footer
            class="elevation-1"
          />

But when I try this I get the error: [Vue warn]: Error in nextTick: "TypeError: Cannot create property 'isRootInsert' on string 'Dakota Rice'"

If anyone has any ideas why, I'd really appreciate it.

[AndrewLamYW]

Is this issue solved yet? Because I see the vuetify version has already updated to v2 in release v2.0.0

[kinow]

I think it is @andrewlamyw , just upgraded an app to the latest release, and except for a few adjustments needed, it worked like a charm :tada:

[MrJmpl3]

This issue is open because the template need apply the Creative Tim styles .. like the version Pro

[MrJmpl3]

I made a pull request to upgrade to Vuetify v2: https://github.com/creativetimofficial/vuetify-material-dashboard/pull/42

You can see and comment about this.

[dragosct]

Hi, @MrJmpl3 ! It's already exist the v2 in a branch with the v2.0.0, but the style is not applied 100% and we must fix this.

Regards, Dragos

[MrJmpl3]

Hi, @MrJmpl3 ! It's already exist the v2 in a branch with the v2.0.0, but the style is not applied 100% and we must fix this.

Regards, Dragos

@dragosct10 I made the pull request in v2 branch , and apply the style same the Pro version (but without pro features, for logic reasons).

[peppeg85]

hello i'm trying to migrate to vuetify 2, i followed this discussion changing the main.js and the app.js file following the instructions and uninstalled node-sass and istalled sass, i have this error:

Module build failed (from ./node_modules/stylus-loader/index.js):
Error: C:\Users\Giu.Giancola\WebstormProjects\statistichevuetify2\node_modules\vuetify\src\styles\main.sass:3:9
   1| // Modeled after ITCSS https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/
   2|
   3| @import './tools/_index'
--------------^

inside the file default.styl i commented @import '~vuetify/src/stylus/main.styl'

and added

    @import '~vuetify/src/styles/main.sass'
    @import '~vuetify/src/styles/styles.sass'

is this wrong?

[MrJmpl3]

@peppeg85 try to follow this branch: https://github.com/MrJmpl3/vuetify-material-dashboard/tree/modified-version

The update is not only change stylus per sass, this update need others changes

[peppeg85]

ok, thank you, the better solution is clone it and port all the job i've done over it. sorry, but on the old template, i had the folder

src/theme/default.styl

that imports

@import '~vuetify/src/stylus/main.styl'

now to import these styles how can i do with this new template?

edit: i'm trying to convert the styl file to scss but i have stylus parsing error

[sneko]

Hi,

Any plan to merge the other branch?

[cdu-bitville]

One of the most confusing parts I dealt with was regarding the much simplified v-data-table which should be able to work without a header and body template. Eg: in the TableList.vue I should be able to just have:

          <v-data-table
            :headers="headers"
            :items="items"
            :items-per-page="5"
            hide-default-footer
            class="elevation-1"
          />

But when I try this I get the error: [Vue warn]: Error in nextTick: "TypeError: Cannot create property 'isRootInsert' on string 'Dakota Rice'"

If anyone has any ideas why, I'd really appreciate it.

Hey I'm having the exact same issue. Have you found the answer yet? Thanks!

[oesile]

One of the most confusing parts I dealt with was regarding the much simplified v-data-table which should be able to work without a header and body template. Eg: in the TableList.vue I should be able to just have:

          <v-data-table
            :headers="headers"
            :items="items"
            :items-per-page="5"
            hide-default-footer
            class="elevation-1"
          />

But when I try this I get the error: [Vue warn]: Error in nextTick: "TypeError: Cannot create property 'isRootInsert' on string 'Dakota Rice'" If anyone has any ideas why, I'd really appreciate it.

Hey I'm having the exact same issue. Have you found the answer yet? Thanks!

Same issue, someone?

[JessePerry]

I can explain what helped me but it was a complex dependency issue and I doubt it will be exactly the same fix for you. First I setup a vanilla setup with no extra components to assert that this repo on it's v2.0.0 branch DOES support the normal v-data-table and it does. So then I had to examine the dependency differences between this working setup, and mine, which were numerous. After lots of trial and error I reduced the differences down to use of vuex (state management), and also use of Typescript and the packages commonly used with that and vue:

• "vuex-class": "^0.3.2”
• "vue-class-component": "^6.0.0",
• "vue-property-decorator": "^8.4.0",

In simpler solutions I was getting these kinds of errors trying v-data-table in a vue file with lang="ts" or lang="js": Trying Typescript: [Vue warn]: Error in nextTick: "TypeError: Cannot read property 'key' of undefined" Trying Javascript: [Vue warn]: Error in nextTick: "TypeError: Cannot create property 'isRootInsert' on string '1'"

So this is a bit of a hint because it indicates both ts and js having an issue, but not caused by the vue file using v-data-table itself, but elsewhere in my solution.

So I started converting my whole solution back to JS to reduce differences further and saw that my App.vue was also lang="ts" and many others. I had some .vue files in ts but not using vue component decorators properly or consistently. So I just started guessing that it's a component loading bug which is only being presented elsewhere in the solution and it was. When I added empty component decorators to all the .vue files using typescript like this:

@Component({
  components: { },
})

Then suddenly the v-data-table began loading as advertised.

So unfortunately it was a mix of dependency juggling and other stuff, and perhaps a bug in the vue-class-component or vue-property-decorator packages, I have no idea.

I suggest you follow the same troubleshooting steps I did. Checkout this repo at it's v.2.0.0 branch and add a vue component with the v-data-table working. Then add your npm packages one by one, to see when the v-data-table starts failing to load. It takes a long time. Good luck.

[oesile]

I can explain what helped me but it was a complex dependency issue and I doubt it will be exactly the same fix for you. First I setup a vanilla setup with no extra components to assert that this repo on it's v2.0.0 branch DOES support the normal v-data-table and it does. So then I had to examine the dependency differences between this working setup, and mine, which were numerous. After lots of trial and error I reduced the differences down to use of vuex (state management), and also use of Typescript and the packages commonly used with that and vue:

• "vuex-class": "^0.3.2”
• "vue-class-component": "^6.0.0",
• "vue-property-decorator": "^8.4.0",

In simpler solutions I was getting these kinds of errors trying v-data-table in a vue file with lang="ts" or lang="js": Trying Typescript: [Vue warn]: Error in nextTick: "TypeError: Cannot read property 'key' of undefined" Trying Javascript: [Vue warn]: Error in nextTick: "TypeError: Cannot create property 'isRootInsert' on string '1'"

So this is a bit of a hint because it indicates both ts and js having an issue, but not caused by the vue file using v-data-table itself, but elsewhere in my solution.

So I started converting my whole solution back to JS to reduce differences further and saw that my App.vue was also lang="ts" and many others. I had some .vue files in ts but not using vue component decorators properly or consistently. So I just started guessing that it's a component loading bug which is only being presented elsewhere in the solution and it was. When I added empty component decorators to all the .vue files using typescript like this:

@Component({
  components: { },
})

Then suddenly the v-data-table began loading as advertised.

So unfortunately it was a mix of dependency juggling and other stuff, and perhaps a bug in the vue-class-component or vue-property-decorator packages, I have no idea.

I suggest you follow the same troubleshooting steps I did. Checkout this repo at it's v.2.0.0 branch and add a vue component with the v-data-table working. Then add your npm packages one by one, to see when the v-data-table starts failing to load. It takes a long time. Good luck.

Thank you for your reply! Actually it was something simillar (or problably same issue), I had in another file

export default class ComponentX extends Vue { }   

So, not body. It was really hard to find what was the problem, I recreate my project adding pieces of code until I get the error and then I found the file with the problem. So, if someone else has this problem try to find unconsistencies in files.