I get following error when I import *.vue files without .vue extension?

The problem is in Webpack configuration.

Make Webpack automatically resolve .vue extension by including extension array in Webpack resolve

 resolve: {
    extensions: ['.vue'],
   },

If you are following eslint and you getting this error, try to add the below lines in your eslint config

...
rules: {
    // other stuff
    "import/extensions": ["error", "always", {
      "js": "never",
      "mjs": "never",
      "jsx": "never",
      "ts": "never",
      "tsx": "never",
      "vue": "never"
    }]
  },
...

The problem is in your Webpack configuration. To make Webpack automatically resolve .vue extensions use the resolve.extensions option, and include the defaults.

resolve: {
    extensions: ['*', '.js', '.vue', '.json']
}