vue-exports-component-directive.md

vue-exports-component-directive

Require defineComponent() calls or // @vue/component directives to trigger eslint-plugin-vue rules

📋 This rule is enabled in plugin:mediawiki/vue.

🔧 The --fix option on the command line can automatically fix some of the problems reported by this rule.

Rule details

❌ Examples of incorrect code:

<template>
    <p>Placeholder...</p>
</template>
<script>
module.exports = {};
</script>;

<template>
    <p>Placeholder...</p>
</template>
<script>
// @vue/component

module.exports = {};
</script>;

<template>
    <p>Placeholder...</p>
</template>
<script>
module.exports = {};
// @vue/component
</script>;

<template>
    <p>Placeholder...</p>
</template>
<script>
module.exports = notDefineComponent( {} );
</script>;

<template>
    <p>Placeholder...</p>
</template>
<script>
const { defineComponent } = require( 'vue' );
module.exports = {};
</script>;

<template>
    <p>Placeholder...</p>
</template>
<script>
const { ref } = require( 'vue' );
module.exports = {};
</script>

✔️ Examples of correct code:

<template>
    <p>Placeholder...</p>
</template>
<script>
// @vue/component
module.exports = {};
</script>;

<template>
    <p>Placeholder...</p>
</template>
<script>
/* @vue/component */
module.exports = {};
</script>;

<template>
    <p>Placeholder...</p>
</template>
<script>
module.exports = defineComponent( {} );
</script>;

<template>
    <p>Placeholder...</p>
</template>
<script>
// @vue/component
module.exports = exports = {};
</script>;

<template>
    <p>Placeholder...</p>
</template>
<script>
module.exports = exports = defineComponent( {} );
</script>;

<template>
    <p>Placeholder...</p>
</template>
<script>
module.exports += 5;
</script>;

<template>
    <p>Placeholder...</p>
</template>
<script>
module.imports = {};
</script>;

<template>
    <p>Placeholder...</p>
</template>
<script>
foo.exports = {};
</script>

🔧 Examples of code fixed by this rule:

<template>                                    /* → */ <template>
    <p>Placeholder...</p>                     /* → */     <p>Placeholder...</p>
</template>                                   /* → */ </template>
<script>                                      /* → */ <script>
module.exports = {};                          /* → */ const { defineComponent } = require( 'vue' );
</script>;                                    /* → */ module.exports = defineComponent( {} );
                                              /* → */ </script>;

<template>                                    /* → */ <template>
    <p>Placeholder...</p>                     /* → */     <p>Placeholder...</p>
</template>                                   /* → */ </template>
<script>                                      /* → */ <script>
// @vue/component                             /* → */ // @vue/component
                                              /* → */
module.exports = {};                          /* → */ const { defineComponent } = require( 'vue' );
</script>;                                    /* → */ module.exports = defineComponent( {} );
                                              /* → */ </script>;

<template>                                    /* → */ <template>
    <p>Placeholder...</p>                     /* → */     <p>Placeholder...</p>
</template>                                   /* → */ </template>
<script>                                      /* → */ <script>
module.exports = {};                          /* → */ const { defineComponent } = require( 'vue' );
// @vue/component                             /* → */ module.exports = defineComponent( {} );
</script>;                                    /* → */ // @vue/component
                                              /* → */ </script>;

<template>                                    /* → */ <template>
    <p>Placeholder...</p>                     /* → */     <p>Placeholder...</p>
</template>                                   /* → */ </template>
<script>                                      /* → */ <script>
const { defineComponent } = require( 'vue' ); /* → */ const { defineComponent } = require( 'vue' );
module.exports = {};                          /* → */ module.exports = defineComponent( {} );
</script>;                                    /* → */ </script>;

<template>                                    /* → */ <template>
    <p>Placeholder...</p>                     /* → */     <p>Placeholder...</p>
</template>                                   /* → */ </template>
<script>                                      /* → */ <script>
const { ref } = require( 'vue' );             /* → */ const { ref, defineComponent } = require( 'vue' );
module.exports = {};                          /* → */ module.exports = defineComponent( {} );
</script>                                     /* → */ </script>

Resources

• Rule source
• Test source