Disallow the
<template> <script> <style> block to be empty JS-0704<style> is empty. Empty block is not allowed22 </v-dialog>
23</template>
24
25<style lang="sass" scoped></style>26
27<script>
28import Vue from "vue";<style> is empty. Empty block is not allowed143};
144</script>
145
146<style lang="scss" scoped></style><style> is empty. Empty block is not allowed74};
75</script>
76
77<style lang="scss" scoped></style><style> is empty. Empty block is not allowed25export default {};
26</script>
27
28<style lang="scss" scoped></style>
Description
If you prefer splitting up your *.vue components into multiple files, you can use the src attribute to import an external file for a language block.
Beware that src imports follow the same path resolution rules as webpack module requests, which means:
- Relative paths need to start with ./
- You can import resources from npm dependencies:
Bad Practice
<template></template>
<template />
<template src="" />
<script></script>
<script />
<script src="" />
<style></style>
<style />
<style src="" />
Recommended
<template>
<p>foo</p>
</template>
<script>
console.log('foo')
</script>
<style>
p {
display: inline;
}
</style>
<template src="./template.html"></template>
<template src="./template.html" />
<script src="./script.js"></script>
<script src="./script.js" />
<style src="./style.css"></style>
<style src="./style.css" />