Template should not be defined redundantly for a Vue component

• VUE_REDUNDANT_TEMPLATE
• Error
• Medium
• vue

This rule applies when the template or render function is defined multiple times in different ways for a Vue component.

It can be applied to the following cases:

1. Both <template> element and render property are declared in the same .vue file. In this case, the <template> element has higher priority and the render property will be ignored.
2. Both <template> element and template property are declared in the same .vue file. In this case, the <template> element has higher priority and the template property will be ignored.
3. Both render and template properties are declared in the same options object of a component. In this case, the render property has higher priority and the template property will be ignored.

Noncompliant Code Example

<template>
  <HelloWorld />
</template>

<script>
import HelloWorld from './components/HelloWorld';

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  template: '<HelloWorld />', // VUE_REDUNDANT_TEMPLATE alarm
  render(createElement) { // VUE_REDUNDANT_TEMPLATE alarm
    return createElement(HelloWorld);
  }
}
</script>

Compliant Code Example

<template>
  <HelloWorld />
</template>

<script>
import HelloWorld from './components/HelloWorld';

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

Version

This rule was introduced in DeepScan 1.18.0.

See

• Options API: render

• Options API: template