nuxt-alias

👽 Nuxt-Alias-Module

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

Infos

• 📖 Release Notes

Install

⚠️ 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 innuxt.config.js instead of buildModules.

Install with npm:

npm i nuxt-alias

nuxt.config.js:

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

Options

rootDir

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']
}

ignoreDir

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

• Type: Array
• Example:

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

transformDir

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

Usage

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

License

MIT License

Copyright (c) Dev.DY