It automatically creates an alias for the components and page of the path

• 📖 Release Notes

⚠️ If you are using Nuxt older than v2.9 you have to install module as a dependency (No --dev or --save-dev flags) and also use modules section in nuxt.config.js instead of buildModules.

Install with npm:

npm i nuxt-alias

nuxt.config.js:

module.exports = { buildModules: [ 'nuxt-alias' ], nuxtAlias: { /* module options */ } }

Set the parent folder name to configure alias Setting rootDir creates an alias based on the structure of the set folder rootDir is a subfolder of srcDir, which is the setting of nuxt.config.js

• Type: Array
• Default: *
• Example:

nuxtAlias: { rootDir: ['components'] }

Set folder name to ignore alias configuration. For ignoreDir, enter the parent path folder name of .vue

• Type: Array
• Example:

nuxtAlias: { ignoreDir: ['folder-A'] }

Convert alias that are automatically created according to the folder structure. transformDir is a function and automatically generated alias is passed as a parameter.

• Type: Function
• Example:

nuxtAlias: { transformDir: orgAlias => orgAlias.replace('folder', 'transform-alias') }

Alias is designated by the name of the parent folder of the inserted component. However, no alias are specified if the folder set in rootDir or the very subfolder of the srcDir is alias.

Folder structure :

- components └ folder-A └ component-A.vue └ folder-B └ folder-C └ component-B.vue └ component-C.vue

nuxt.config.js :

module.exports = { buildModules: [{ 'nuxt-alias' }], nuxtAlias: { rootDir: ['components'], ignoreDir: ['folder-A'] } }

index.vue :

import ComponentA from 'folder-A/component-A' // An error is generated because it is a ignored folder. import ComponentB from 'folder-C/component-B' import ComponentC from '~/components/component-C' // If the srcDir immediate subfolder is alias, it does not specify alias. export default { name: 'index', components: { ComponentA, ComponentB, ComponentC } }

MIT License

Copyright (c) Dev.DY