Rule Proposal: Prevent accessing props directly in the template

[nasvillanueva]

Please describe what the rule should do:
When using <script setup>, local variables declared with the same name as the props takes precedence over the props. To avoid potential issues where a locally declared variable has different values or type than the props, I think it would be nice to have a rule to enforce accessing props from a variable.

For instance, enforce accessing props from const props = defineProps(...), so in the template it will be {{ props.propsValue }}.

What category should the rule belong to?

[ ] Enforces code style (layout)
[x] Warns about a potential error (problem)
[ ] Suggests an alternate way of doing something (suggestion)
[ ] Other (please specify:)

Provide 2-3 code examples that this rule should warn about:

WARN

<script setup lang="ts">
defineProps<{
  msg: string;
}>()

const msg = "override props";
</script>

<template>
  <div>{{ msg }}</div> <!-- vague reference? are you referencing the one from props or local? -->
</template>

WARN

<script lang="ts">
import { defineComponent, computed } from "vue";

export default defineComponent({
  props: {
    msg: String
  },
  setup: (props) => {
    const msg = computed(() => `Message: ${props.msg}`);
    
    return {
      msg
    };
  }
})
</script>

<template>
    <div>{{ msg }}</div> <!-- vague reference? are you referencing the one from props or local? -->
</template>

OK

<script setup lang="ts">
const props = defineProps<{
  msg: string;
}>()

const msg = "override props";
</script>

<template>
  <div>From local: {{ msg }}</div>
  <div>From props: {{ props.msg }}</div>
</template>

Additional context

I understand that there are cases where a component's <script setup> is basically calling defineProps with no local variable declaration, so maybe we should be able to allow that? But I'm not sure if it's feasible.

<script setup lang="ts">
defineProps<{
  msg: string;
}>()
</script>

<template>
  <div>{{ msg }}</div> <!-- Maybe Okay? -->
</template>

(Possibly) Related Issues

• A same name prop and variable will show wrong type in template language-tools#1142
• A same name prop and variable will show wrong type core#5694

[FloEdelmann]

I think it would make more sense to add a rule similar to core ESLint's no-shadow rule that disallows variables with the same name as props, to avoid confusion right from the start.

Possible name for that rule: vue/no-prop-shadow. What do you think?

[nasvillanueva]

@FloEdelmann Oh, that sounds even better. I was thinking about this in a different perspective so no-shadow didn't cross my mind, but a vue/no-prop-shadow would be great!

[FloEdelmann]

Would you open a new issue for vue/no-prop-shadow then and close this one, please?

[FloEdelmann]

Note also the similar rule: https://eslint.vuejs.org/rules/no-template-shadow.html

[nasvillanueva]

Closing in favor of #2096

[M-jerez]

Is there a rule or vue config enforce the use of props const in the template?

Think enforcing the user to use the props constant in templates is a less magic way of doing things. ie:

<script setup lang="ts">
const props = defineProps<{
  msg: string;
}>()
</script>

<template>
  <div>{{ props.msg }}</div> <!-- this will work -->
  <div>{{ msg }}</div> <!-- this will fail -->
</template>

[FloEdelmann]

No, there is none. Please open a new issue for this request and link to this issue here for reference.