Prettier formatting a Vue component when I don't want it to

Question

I've got Prettier configured to format on save.

I'm using a Vue component I got from npm to display data from an API.

<ExampleComponent 
    :aDynamicProp="foo"
    dataset="bar"
/>

The prop dataset is required by the component.

The issue is Prettier wants to change dataset to data-set every time I save. I imagine because it thinks i'm trying to create a HTML data attribute.

As per Prettier docs i've tried adding <!-- prettier-ignore-attribute --> above the component but this doesn't seem to work (perhaps because I'm triggering formatting on save, or because it's a Vue template and not HTML?).

Can anyone shed light as to how I can force Prettier to ignore the prop?

Many thanks!

Answer 1

Add colon : to :dataset and that should do the trick, if it's just static string that's doing inside dataset then do :dataset="`my string`" with backtick (`). If you are getting data from data(){}, computed or from methods as mentioned below then just do :dataset="yourData":

export default {
  data() {
    return {
      yourData: 'Your String'
    }
  },
  // or
  computed: {
    yourData() {
      return 'Your String'
    },
  },
  // or
  methods: {
    yourData() {
      return 'Your String'
    },
  },
};