Add vue/component-api-style rule (#1626)

* Add `vue/component-api-style` rule

* Update package.json

docs/rules/README.md

@@ -288,6 +288,7 @@ For example:
 |:--------|:------------|:---|
 | [vue/block-lang](./block-lang.md) | disallow use other than available `lang` |  |
 | [vue/block-tag-newline](./block-tag-newline.md) | enforce line breaks after opening and before closing block-level tags | :wrench: |
+| [vue/component-api-style](./component-api-style.md) | enforce component API style |  |
 | [vue/component-name-in-template-casing](./component-name-in-template-casing.md) | enforce specific casing for the component naming style in template | :wrench: |
 | [vue/custom-event-name-casing](./custom-event-name-casing.md) | enforce specific casing for custom event name |  |
 | [vue/html-button-has-type](./html-button-has-type.md) | disallow usage of button without an explicit type attribute |  |

docs/rules/component-api-style.md

@@ -0,0 +1,144 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/component-api-style
+description: enforce component API style
+---
+# vue/component-api-style
+
+> enforce component API style
+
+- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> ***This rule has not been released yet.*** </badge>
+
+## :book: Rule Details
+
+This rule aims to make the API style you use to define Vue components consistent in your project.
+
+For example, if you want to allow only `<script setup>` and Composition API.  
+(This is the default for this rule.)
+
+<eslint-code-block :rules="{'vue/component-api-style': ['error']}">
+
+```vue
+<!-- ✓ GOOD -->
+<script setup>
+import { ref } from 'vue'
+const msg = ref('Hello World!')
+</script>
+```
+
+</eslint-code-block>
+
+<eslint-code-block :rules="{'vue/component-api-style': ['error']}">
+
+```vue
+<script>
+import { ref } from 'vue'
+export default {
+  /* ✓ GOOD */
+  setup() {
+    const msg = ref('Hello World!')
+    // ...
+    return {
+      msg,
+      // ...
+    }
+  }
+}
+</script>
+```
+
+</eslint-code-block>
+
+<eslint-code-block :rules="{'vue/component-api-style': ['error']}">
+
+```vue
+<script>
+export default {
+  /* ✗ BAD */
+  data () {
+    return {
+      msg: 'Hello World!',
+      // ...
+    }
+  },
+  // ...
+}
+</script>
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+```json
+{
+  "vue/component-api-style": ["error",
+    ["script-setup", "composition"] // "script-setup", "composition", or "options"
+  ]
+}
+```
+
+- Array options ... Defines the API styles you want to allow. Default is `["script-setup", "composition"]`. You can use the following values.
+  - `"script-setup"` ... If set, allows `<script setup>`.
+  - `"composition"` ... If set, allows Composition API (not `<script setup>`).
+  - `"options"` ... If set, allows Options API.
+
+### `["options"]`
+
+<eslint-code-block :rules="{'vue/component-api-style': ['error', ['options']]}">
+
+```vue
+<script>
+export default {
+  /* ✓ GOOD */
+  data () {
+    return {
+      msg: 'Hello World!',
+      // ...
+    }
+  },
+  // ...
+}
+</script>
+```
+
+</eslint-code-block>
+
+<eslint-code-block :rules="{'vue/component-api-style': ['error', ['options']]}">
+
+```vue
+<!-- ✗ BAD -->
+<script setup>
+import { ref } from 'vue'
+const msg = ref('Hello World!')
+</script>
+```
+
+</eslint-code-block>
+
+<eslint-code-block :rules="{'vue/component-api-style': ['error', ['options']]}">
+
+```vue
+<script>
+import { ref } from 'vue'
+export default {
+  /* ✗ BAD */
+  setup() {
+    const msg = ref('Hello World!')
+    // ...
+    return {
+      msg,
+      // ...
+    }
+  }
+}
+</script>
+```
+
+</eslint-code-block>
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/component-api-style.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/component-api-style.js)

lib/index.js

@@ -21,6 +21,7 @@ module.exports = {
     'comma-spacing': require('./rules/comma-spacing'),
     'comma-style': require('./rules/comma-style'),
     'comment-directive': require('./rules/comment-directive'),
+    'component-api-style': require('./rules/component-api-style'),
     'component-definition-name-casing': require('./rules/component-definition-name-casing'),
     'component-name-in-template-casing': require('./rules/component-name-in-template-casing'),
     'component-tags-order': require('./rules/component-tags-order'),