Specify a root path for imports? - vue.js

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?

Answer 1

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.

Answer 2

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'.

Answer 3

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')
},
},
});

Answer 4

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

Answer 5

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")
]
},
}
}

Answer 6

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'

Answer 7

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
},
}
}

Answer 8

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')