Update to Vue3?

[cpraas]

Hi there,

The newest version of vue is finally here
And I would like to know if there will be an update to this repo for the new version of vue.

[robcresswell]

Yeah, I've been thinking about how best to do this. The best approach seems to be to remove the functional keyword from the template. It'll be a minor perf regression in Vue 2, but will work with Vue 3.

I'm not in any huge rush though. Vue 3 has only been soft-launched, and nobody will be seriously using it until 2021.

[JoseGoncalves]

Any updates on this issue?
I'm starting a project with Vue 3 and would like to integrate these icons...

[robcresswell]

Ah I'll push something out this weekend. I sort of assumed people aren't using Vue3 yet, given there is no ecosystem

[ynte]

This is my local commit for Vue 3 compatibility: ynte@6063281

I haven't been able to get any test setup working yet, so couldn't really make an pull request.

[khari998]

Im using Vue 3. Here is an example of how I fixed one of the icons to work with Vue 3

Previous

<template functional>
  <span :aria-hidden="props.decorative"
        :aria-label="props.title"
        :class="[data.class, data.staticClass]"
        class="material-design-icon blur-linear-icon"
        role="img"
        v-bind="data.attrs"
        v-on="listeners">
    <svg :fill="props.fillColor"
         class="material-design-icon__svg"
         :width="props.size"
         :height="props.size"
         viewBox="0 0 24 24">
      <path d="M13,17A1,1 0 0,0 14,16A1,1 0 0,0 13,15A1,1 0 0,0 12,16A1,1 0 0,0 13,17M13,13A1,1 0 0,0 14,12A1,1 0 0,0 13,11A1,1 0 0,0 12,12A1,1 0 0,0 13,13M13,9A1,1 0 0,0 14,8A1,1 0 0,0 13,7A1,1 0 0,0 12,8A1,1 0 0,0 13,9M17,12.5A0.5,0.5 0 0,0 17.5,12A0.5,0.5 0 0,0 17,11.5A0.5,0.5 0 0,0 16.5,12A0.5,0.5 0 0,0 17,12.5M17,8.5A0.5,0.5 0 0,0 17.5,8A0.5,0.5 0 0,0 17,7.5A0.5,0.5 0 0,0 16.5,8A0.5,0.5 0 0,0 17,8.5M3,3V5H21V3M17,16.5A0.5,0.5 0 0,0 17.5,16A0.5,0.5 0 0,0 17,15.5A0.5,0.5 0 0,0 16.5,16A0.5,0.5 0 0,0 17,16.5M9,17A1,1 0 0,0 10,16A1,1 0 0,0 9,15A1,1 0 0,0 8,16A1,1 0 0,0 9,17M5,13.5A1.5,1.5 0 0,0 6.5,12A1.5,1.5 0 0,0 5,10.5A1.5,1.5 0 0,0 3.5,12A1.5,1.5 0 0,0 5,13.5M5,9.5A1.5,1.5 0 0,0 6.5,8A1.5,1.5 0 0,0 5,6.5A1.5,1.5 0 0,0 3.5,8A1.5,1.5 0 0,0 5,9.5M3,21H21V19H3M9,9A1,1 0 0,0 10,8A1,1 0 0,0 9,7A1,1 0 0,0 8,8A1,1 0 0,0 9,9M9,13A1,1 0 0,0 10,12A1,1 0 0,0 9,11A1,1 0 0,0 8,12A1,1 0 0,0 9,13M5,17.5A1.5,1.5 0 0,0 6.5,16A1.5,1.5 0 0,0 5,14.5A1.5,1.5 0 0,0 3.5,16A1.5,1.5 0 0,0 5,17.5Z">
        <title>{{ props.title }}</title>
      </path>
    </svg>
  </span>
</template>

<script>
export default {
  name: "BlurLinearIcon",
  props: {
    title: {
      type: String,
      default: "Blur Linear icon"
    },
    decorative: {
      type: Boolean,
      default: false
    },
    fillColor: {
      type: String,
      default: "currentColor"
    },
    size: {
      type: Number,
      default: 24
    }
  }
}
</script>

Vue 3 Compatible

<template functional>
  <span :aria-hidden="decorative.default"
        :aria-label="title.default"
        class="material-design-icon blur-linear-icon"
        role="img"
        v-on="listeners">
    <svg :fill="fillColor.default"
         class="material-design-icon__svg"
         :width="size.default"
         :height="size.default"
         viewBox="0 0 24 24">
      <path d="M13,17A1,1 0 0,0 14,16A1,1 0 0,0 13,15A1,1 0 0,0 12,16A1,1 0 0,0 13,17M13,13A1,1 0 0,0 14,12A1,1 0 0,0 13,11A1,1 0 0,0 12,12A1,1 0 0,0 13,13M13,9A1,1 0 0,0 14,8A1,1 0 0,0 13,7A1,1 0 0,0 12,8A1,1 0 0,0 13,9M17,12.5A0.5,0.5 0 0,0 17.5,12A0.5,0.5 0 0,0 17,11.5A0.5,0.5 0 0,0 16.5,12A0.5,0.5 0 0,0 17,12.5M17,8.5A0.5,0.5 0 0,0 17.5,8A0.5,0.5 0 0,0 17,7.5A0.5,0.5 0 0,0 16.5,8A0.5,0.5 0 0,0 17,8.5M3,3V5H21V3M17,16.5A0.5,0.5 0 0,0 17.5,16A0.5,0.5 0 0,0 17,15.5A0.5,0.5 0 0,0 16.5,16A0.5,0.5 0 0,0 17,16.5M9,17A1,1 0 0,0 10,16A1,1 0 0,0 9,15A1,1 0 0,0 8,16A1,1 0 0,0 9,17M5,13.5A1.5,1.5 0 0,0 6.5,12A1.5,1.5 0 0,0 5,10.5A1.5,1.5 0 0,0 3.5,12A1.5,1.5 0 0,0 5,13.5M5,9.5A1.5,1.5 0 0,0 6.5,8A1.5,1.5 0 0,0 5,6.5A1.5,1.5 0 0,0 3.5,8A1.5,1.5 0 0,0 5,9.5M3,21H21V19H3M9,9A1,1 0 0,0 10,8A1,1 0 0,0 9,7A1,1 0 0,0 8,8A1,1 0 0,0 9,9M9,13A1,1 0 0,0 10,12A1,1 0 0,0 9,11A1,1 0 0,0 8,12A1,1 0 0,0 9,13M5,17.5A1.5,1.5 0 0,0 6.5,16A1.5,1.5 0 0,0 5,14.5A1.5,1.5 0 0,0 3.5,16A1.5,1.5 0 0,0 5,17.5Z">
        <title>{{ title }}</title>
      </path>
    </svg>
  </span>
</template>

<script>
export default {
  name: "BlurLinearIcon",
  data () {
    return {
      title: {
        type: String,
        default: "Blur Linear icon"
      },
      decorative: {
        type: Boolean,
        default: false
      },
      fillColor: {
        type: String,
        default: "currentColor"
      },
      size: {
        type: Number,
        default: 24
      }
    }
  }
}
</script>

[robcresswell]

@khari998 Is the above compatible with 2 AND 3? Or are they mutually exclusive?

[shengslogar]

@robcresswell what @khari998 wrote for v3 compatibility doesn't make sense, since it's using data and not props.

My understanding is for v3 compatibility, you'd convert all functional components to standard components. This would be backwards compatible but not in terms of performance. Not a big deal imo, but I'd bump a major version.

https://v3.vuejs.org/guide/migration/functional-components.html

[trujic1000]

Any news about v3 compatibility?

[robcresswell]

I've not really looked into it. It sounds like a revert of 4a0dead might do it. I don't use Vue any more though, so the risk of me breaking things is quite high.

[safinazbg]

Recent versions of @vue/compiler-sfc fx. 3.2.11 reject the icon component templates purely based on the presence of the "functional' attribute / directive in the template header. Removing it made them compile for me.

[djcaesar9114]

Hi everyone, like @robcresswell wrote, he doesn't seem to use Vue anymore, so I think it's better to use this one: https://github.com/vyperium/mdue
Works like a charm for me.

[robcresswell]

Should be addressed by 5.0.0. If there are any bugs, please open a separate issue and I'll fix.