How to resolve "Adjacent JSX elements must be wrapped in an enclosing tag" issue in Vue.js

Question

I'm running a Vue.js project in WebStorm. For some reason I'm getting this ESLint error:

ESLint: Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag

for the following code:

<template>
    <div>

    </div>

</template>

<script>

As you can see in the screenshot, this happens on the <script> opening tag.

There are duplicate questions on React projects, but their answers don't apply to my Vue project.

Can anyone please help? Any help will be very appreciated.

Here is my .eslintrc.js:

module.exports = {
    "extends": ["vue", "standard"],
    "plugins": [
      "import",
      "vue"
    ],
};

Answer 1

Adding 'plugin:vue/recommended' to the .eslintrc.js solved my issue. Now my .eslintrc.js looks like this:

module.exports = {
    "extends": ["vue", "standard", "plugin:vue/recommended"],
    "plugins": ["import", "vue"],
};