How to import index.vue by just mentioning the parent directory name rather than filename?

Question

I've been building my Vue application by using Vue Cli 3.

If I need to import an index.js which is in directory named Dir1, I can import it using import file1 from '@/components/Dir1/ but somehow it doesn't work with .vue extension files.

I have to expicitly mention the file name such as import Title from @/components/Title/index.vue.

What changes do I have to make in the settings in order to import the .vue extension file without mentioning the filename?

Answer 1

This is how I would do it with Vue.

You may need to tweak the config a little bit to suit your dev environment needs. Note that this is not a full config but a guideline on what should be done based on NPM directory-named-webpack-plugin documentation.

In your webpack.config.js you should have the following (Webpack 3):

const DirectoryNamedWebpackPlugin = require('directory-named-webpack-plugin');
// ...
let config = {
  // ...
  module: {
    rules: [
      {
        test: /\.(js|vue)$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  },
  resolve: {
    modules: ['components', 'node_modules'],
    extensions: ['.js', '.vue'],
    plugins: [
      new DirectoryNamedWebpackPlugin(true)
    ]
  }
  // ...
}
modules.exports = config;

taken and modified for Vue from: Recursive import of components using webpack in React