Skip to content
It automatically creates an alias for the components and page of the path
JavaScript Vue
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
lib
test
.editorconfig
.eslintignore
.eslintrc.js
.gitignore
CHANGELOG.md
LICENSE
README.md
babel.config.js
commitlint.config.js
husky.config.js
jest.config.js
package.json
renovate.json
yarn.lock

README.md

👽 Nuxt-Alias-Module

npm version npm downloads Circle CI Codecov Dependencies Standard JS License

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

Infos

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

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

You can’t perform that action at this time.