Template should not be defined redundantly for a Vue component

• VUE_REDUNDANT_TEMPLATE
• Error
• Medium
• vue

This rule applies when 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 render and template properties are declared in the same Vue option object. In this case, the render property has higher priority than template, so template property will be ignored.
2. Both <template> element and render property are declared in the same .vue file. In this case, the <template> element has higher priority than render property, so render property will be ignored.
3. Both <template> element and template property are declared in the same .vue file. In this case, the <template> element has higher priority than template property, so 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

• template

• render