@gitlab/eslint-plugin
Version:
GitLab package for our custom eslint rules
93 lines (71 loc) • 1.83 kB
Markdown
# @gitlab/no-runtime-template-compiler
Disallow components which rely on a runtime template compiler.
This means the `template` component option is not allowed, and instead some form
of ahead-of-time compiled `render` function _must_ be specified. This can take
the form of a hand-written `render` function, or a top-level template tag in
a Vue single file component.
This rule is useful if you ship without the Vue template compiler, and/or want
to minimise the work the client needs to do to render your components.
## Rule Details
### Examples of **incorrect** code for this rule
```html
<script>
export default {
template: '<i></i>',
};
</script>
```
```js
Vue.component('FooBar', {
template: '<i></i>',
});
```
If the template string starts with `#` it will be used as a querySelector and
use the selected element’s innerHTML as the template string, and compiled at
runtime:
```js
Vue.component('FooBar', {
template: '#app',
});
```
If neither render function nor template option is present, the in-DOM HTML of
the mounting DOM element will be extracted as the template, and compiled at
runtime:
```html
<script>
export default {
el: '#app',
};
</script>
```
If a template option is present as well as a render function, Vue will ignore
the template. So, while this is harmless in that no runtime compilation takes
place, it's potentially confusing to see both:
```js
Vue.component('FooBar', {
template: '<i></i>',
render(h) {
return h('i');
},
});
```
### Examples of **correct** code for this rule
```html
<script>
export default {};
</script>
<template>
<i></i>
</template>
```
```js
Vue.component('FooBar', {
render(h) {
return h('i');
},
});
```
## Options
Nothing
## When Not To Use It
Do not use this rule if you rely on templates being compiled at runtime.