Vetur: Support CSS modules: Property '$style' does not exist on type

[tomitrescak]

• [x] I have searched through existing issues

Feature Request

It would be amazing if Vetur would support CSS modules using following syntax:

<template>
  <div :class="[$style.button]">
   Hello
  </div>
</template>

<style module>
.button {
  color: green;
}
</style>

[yoyo930021]

Add a new file in your project.
You can get basic support.

// shims-css-module-vue.d.ts
import Vue from 'vue'

declare module 'vue/types/vue' {
  interface Vue {
    $style: Record<string, string>
  }
}

[yoyo930021]

Advanced Support:
Please follow #1372

[octref]

You can follow the shim suggestion above to make Vetur recognize $style. For more advanced features follow #1372.

[totkeks]

Add a new file in your project.
You can get basic support.

// shims-css-module-vue.d.ts
import Vue from 'vue'

declare module 'vue/types/vue' {
  interface Vue {
    $style: Record<string, string>
  }
}

Unfortunately, this doesn't work anymore with vue3 since the component type is the return type of the defineComponent function and you can't augment a type with a new property like you can with an interface.
Any ideas?

[iqingting]

Add a new file in your project.
You can get basic support.

// shims-css-module-vue.d.ts
import Vue from 'vue'

declare module 'vue/types/vue' {
  interface Vue {
    $style: Record<string, string>
  }
}

Unfortunately, this doesn't work anymore with vue3 since the component type is the return type of the defineComponent function and you can't augment a type with a new property like you can with an interface.
Any ideas?

this worked to me

import { ComponentCustomProperties } from 'vue'

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $style: {
      [key: string]: string
    }
  }
}