Specify a root path for imports?

Question

I'm converting my ongoing Vue.js app over to use vue-cli/Webpack and imported modules Something I'm finding rather tedious at the moment is specifying the relative paths for imports accurately. E.g. import bus from '../../bus', import Cell from '../Cell'. Easy to make a mistake.

I'm assuming it must be straightforward enough to specify a base or root directory and specify absolute paths from that, but I can't see where one would do that. For example, in the standard vue-cli webpack setup, the code I'm working on is all in the 'src' directory, inside which I have 'components', 'mixins', etc. It would be handy if I could use import xxx from 'components/xxx', import yyy from 'components/a/yyy'. How would I do that?

not sure how exactly you have to do that, but looks like you would need to do it in webpack conf and some 'solve' — Marek Urbanowicz, Jan 31 '17 at 10:45
It actually seems as if there is already provision for this using resolve.alias in the webpack.base.conf.js file. Aliases are defined for 'components' and 'src', which seem to work. — John Moore, Jan 31 '17 at 12:34

score 24 · Answer 1 · answered Oct 04 '18 at 13:55

24

With vue-cli, you put webpack settings in vue-config.js, in the same folder as package.json.

vue-config.js:

var path = require('path')
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        src: path.resolve(__dirname, 'src')
      }
    },
  }
}

This will allow you to do

import HelloWorld from 'src/components/HelloWorld.vue'

instead of

import HelloWorld from '../components/HelloWorld.vue'

See https://cli.vuejs.org/config/#vue-config-js for more info.

answered Oct 04 '18 at 13:55

Damian Helme

1,060
2
10
22

For your example you can create an alias directly to components as well. – bertusaurus Oct 22 '18 at 20:02
2

Please note that in the current iteration of Vue this file is `vue.config.js` not `vue-config.js` as suggested here :) – DrewT Nov 22 '18 at 20:38
how to make this work with assets?. For the src in – Community Mar 13 '20 at 07:46

score 21 · Answer 2 · edited Feb 20 '20 at 03:02

The solution is already in place, in fact, just not well-documented. In webpack.base.conf.js, there is this:

  resolve: {
    extensions: ['', '.js', '.vue', '.json'],
    fallback: [path.join(__dirname, '../node_modules')],
    alias: {
      'vue$': 'vue/dist/vue.common.js',
      'src': path.resolve(__dirname, '../src'),
      'assets': path.resolve(__dirname, '../src/assets'),
      'components': path.resolve(__dirname, '../src/components')
    }
  }

I've added my own alias, 'mixins': path.resolve(__dirname, '../src/mixins'). So I can now use e.g. import Field from 'mixins/Field', along with e.g. import ScrollableTable from 'components/ScrollableTable'.

I added this to the `webpack.config.js` file for anybody using one — NineToeNerd, Feb 28 '18 at 20:09

score 21 · Answer 3 · edited Apr 23 '20 at 12:13

21

I am using laravel and the laravel-mix package.

To make it work add this to your webpack.mix.js :

const path = require('path');

mix.webpackConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'resources/js')
    },
  },
});

edited Apr 23 '20 at 12:13

Sidney Gijzen

1,931
3
24
27

answered Mar 28 '19 at 12:56

Charles G

1,151
10
9

I think this is the best solution. – Armin Dec 20 '20 at 21:40
Work like a charm. What does `const path = require('path');` actually require? Thanks! – Andre W. Jun 19 '21 at 06:26
here is a link to the doc of 'path' module: https://nodejs.org/api/path.html – Charles G Jun 20 '21 at 07:57
I tried this and it didn't work (using Laravel 8.x). The docs suggest using `path.join` instead of `path.resolve`. That worked for me. https://laravel-mix.com/docs/6.0/aliases – mpemburn Sep 09 '21 at 13:50

score 15 · Answer 4 · answered Apr 17 '17 at 22:02

15

You can use something like this:

import { routes } from '@/router/routes'

where /router folder is on the root of my project and I can import my routes anywhere :)

Note: I'm using VueJS 2.0

answered Apr 17 '17 at 22:02

Sebastián Lara

5,355
2
28
21

4

Well this is not really the answer, as it does not magically work. See this: https://stackoverflow.com/questions/42749973/es6-import-using-at-sign-in-path-in-a-vue-js-project-using-webpack to setup the @ resolver – Borjante Jan 08 '18 at 17:03
1

This works but what about SCSS in a single file component? – Michael Giovanni Pumo Feb 19 '18 at 14:38

score 2 · Answer 5 · answered Sep 17 '18 at 09:35

2

Create a vue.config.js file at the project root that will contain

var path = require('path');
module.exports = {
 configureWebpack : {
  resolve: {
         modules : [
          path.resolve("./src"),
             path.resolve("./node_modules")
         ]
     },
 }
}

answered Sep 17 '18 at 09:35

Mamadou Hady Barry

619
4
11

You saved my life, Thanks. [I was looking for the answer here](https://stackoverflow.com/questions/70858847/import-dependency-from-child-folder-node-modules-doesnt-work) – ronaldtgi Jan 28 '22 at 15:49

Gennaro Maurizio Cataldo · Answer 6 · 2020-04-10T07:08:07.977

Just use @ symbol as root in the path for the import. For example, let's say you have a firebase folder under root and a firebaseConfig.js file like this

// Your web app's Firebase configuration

var firebaseConfig = {
  apiKey: "...somekey...",
  authDomain: "...someApp....firebaseapp.com",
  databaseURL: "https://...someApp....firebaseio.com",
  projectId: "...someProjId...",
  storageBucket: "",
  ...bla bla bla...  
};
export default firebaseConfig;

in the firebase folder.

You can import the config file anywhere using the following instruction:

import firebaseConfig from '@/firebase/firebaseConfig'

score 1 · Answer 7 · answered Jul 06 '22 at 14:37

Create vue.config.js file on the root directory

const path = require('path');
module.exports = defineConfig({
    configureWebpack: {
       resolve: {
          alias: {
             src: path.resolve(__dirname, 'src')
          }
       }
    }
})

Once after done with the configuration. We can now able to target the file inside src directory using below import statement.

import About from src/component/About.vue

If you have another main folder inside the src directory. You can achieve by using the below command.

package: path.resolve(__dirname, 'src/package')

score 0 · Answer 8 · answered Jun 14 '21 at 09:31

Late answer: To create an alias for all folders inside src. Uses Damian Helme solution. All credits should go to him.

Allows you to import:

import HelloWorld from 'components/HelloWorld.vue'

From:

import HelloWorld from '../components/HelloWorld.vue'

Create vue.config.js on the root folder of the project. Note: Doesn't automatically update when new folders are created, you will need to manually restart.

const path = require('path');
const fs = require('fs');
//Find all files in src and make alias

const dirs  = fs.readdirSync(path.resolve(__dirname, 'src'));

const alias = {
  src: path.resolve(__dirname, 'src')
}

dirs.forEach(name => {
  const filePath = path.resolve(__dirname, 'src', name);
  //Only add folders
  if (fs.statSync(filePath).isDirectory()) {
      alias[name] = filePath;
  }
  
});

module.exports = {
  configureWebpack: {
    resolve: {
      alias
    },
  }
}

Specify a root path for imports?

8 Answers8

Linked