Import multiple components in vue using ES6 syntax doesn't work

Question

So I am trying to create a vue instance that needs other components from folder "views/"

Here is the file structure:

Project
- build/
- config/
- node_modules/
- src/
  - views/
  - components/
- App.vue

If I do this in App.vue, the server will run with no error:

import Navbar from 'layouts/Navbar'
import Topbar from 'layouts/Topbar'
import AppMain from 'layouts/AppMain'

But if I try this instead:

import { AppMain, Navbar, Topbar } from 'layouts/'

The server won't run and will return:

This dependency was not found:
* views/ in ./src/router/index.js

Here is the webpack.base.config.js

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

module.exports = {
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: ['.js', '.vue', '.json', '.scss'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'layouts': resolve('src/layouts'),
      'views': resolve('src/views'),
      'components': resolve('src/components'),
      'variables': path.resolve(__dirname, '../src/assets/common/variables.scss'),
    },
  },

I really have no idea what's wrong, plz help, thx

Please post the `router/index.js` as well. Also the file imports you mention, does `/layouts` have an index.js which exports all components? — Amresh Venugopal, Mar 28 '17 at 05:34
I don't have a index.js file in the /layouts folder, I guess that is the problem, but I don't understand why you need that, are you not exporting your vue instance in — Hansen W, Mar 28 '17 at 14:02
Since the `NavBar` and `TopBar` component code is not shared in the question I can't directly pin it. But what I can say is, you are quite likely exporting a default object in `layouts/Navbar.vue` so `import Navbar from 'layouts/Navbar'` works, but when you `import { AppMain, Navbar, Topbar } from 'layouts/'` these components are not exported from `/layouts.` — Amresh Venugopal, Mar 28 '17 at 14:09

aks · Accepted Answer · 2017-03-31T18:01:39.070

31

This is not the right way to do it.

import { something } from 'some_file';

is about importing something which is not exported by default! This is helpful in case when one file exposes a lot of things.

import Something from 'some_file';

is about importing the default exported item from your file.

What you write is not possible with the current setup. You'll have to write it like:

import { AppMain, Navbar, Topbar } from 'layouts';

then create a index.js file in layouts and then following will be the content for that file:

import Navbar from 'layouts/Navbar'
import Topbar from 'layouts/Topbar'
import AppMain from 'layouts/AppMain'

export {
  Navbar,
  Topbar,
  AppMain
}

This should work now, try reading more about ES6 imports on https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

edited Mar 31 '17 at 18:01

answered Mar 28 '17 at 15:23

aks

8,796
11
50
78

2

it should be `export` in the `index.js` file but not `export default`, don't know why but I tested it out – Hansen W Mar 31 '17 at 13:39
Ok! Sorry but I don't understand why export default will not work? Can you please tell me. – aks Mar 31 '17 at 14:29
2

I don't know either, but it will give errors as `dependency not found`, but when I changed to export, it works – Hansen W Mar 31 '17 at 14:31

Import multiple components in vue using ES6 syntax doesn't work

1 Answers1

Linked