Validation of props in Vue can be quite a challenge, as errors only appear during runtime in the browser console.
However, I am determined to implement props validation during the static code analysis phase (linting).
Consider the scenario where I am using the default Vue 2 project template:
HelloWorld.vue is a component with a required prop named msg:
<template>
<h1>Message: {{ msg }}</h1>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: {
type: String,
required: true,
},
},
};
</script>
App.vue includes the HelloWorld component but erroneously uses a non-existent prop named something:
<template>
<HelloWorld :something="somewhat" />
</template>
<script>
import HelloWorld from './components/HelloWorld.vue';
export default {
name: 'App',
components: {
HelloWorld,
},
};
</script>
When running npm run lint, my expectations are clear:
- It should flag an
Error: required "msg" prop not found - It should provide a
Warning: unknown "something" prop has been used - If a non-String value is assigned to the
msgprop, it should trigger anError: prop "msg" should be a String, but received *NotString*
In essence, I desire Vue templates to be as lintable as JSX templates in React. Is there a feasible solution for implementing this in either Vue 2 or Vue 3? Could leveraging TypeScript offer a super awesome resolution?