Nuxt.js: How to add custom resolve.alias in nuxt.config.js

Created on 12 Jan 2017  路  6Comments  路  Source: nuxt/nuxt.js

like as webpack config setting:

resolve: {
    alias: {
      '~src': projectSrc,
      '~utils': path.join(projectSrc, 'utils'),
    }
}
question

Most helpful comment

Hi @chuanxd

You can do it with the extend method in the build property of your nuxt.config.js file:

module.exports = {
  build: {
    extend (config) {
      config.resolve.alias['~src'] = projectSrc
      config.resolve.alias['~utils'] = path.join(projectSrc, 'utils')
    }
  }
}

You might want to check the srcDir option as well (see https://github.com/nuxt/nuxt.js/pull/44).

Then, you can use the ~ alias and do ~/utils to link to your utils/ folder.

All 6 comments

Hi @chuanxd

You can do it with the extend method in the build property of your nuxt.config.js file:

module.exports = {
  build: {
    extend (config) {
      config.resolve.alias['~src'] = projectSrc
      config.resolve.alias['~utils'] = path.join(projectSrc, 'utils')
    }
  }
}

You might want to check the srcDir option as well (see https://github.com/nuxt/nuxt.js/pull/44).

Then, you can use the ~ alias and do ~/utils to link to your utils/ folder.

@Atinux thank you for your reply.

@Atinux I'm trying to use your solution but the console says that alias is not defined:
(node:887) PromiseRejectionHandledWarning: Promise rejection was handled asynchronously (rejection id: 34) ReferenceError: alias is not defined

The way I wrote the alias:

config.resolve.alias['hammerjs$'] = 'vue-touch/dist/hammer-ssr.js'

I'm using Nuxt 1.0.0 RC

@baztypetrucci did you get the hammer.js alias working? If yes can you share?

@randyhoulahan I think this worked:

build: {
    /*
    ** Run ESLint on save
    */
    vendor: [
      '@nuxtjs/axios',
      '@nuxtjs/bootstrap-vue'
    ],
    extend(config, ctx) {
      //if (ctx.dev && ctx.isClient) {
      config.module.rules.push({
        enforce: 'pre',
        test: /\.(js|vue)$/,
        //loader: 'eslint-loader',
        exclude: /(node_modules)/
      })
      //}
      config.plugins = config.plugins.filter((plugin) => plugin.constructor.name !== 'UglifyJs')
      config.plugins = config.plugins.filter((plugin) => plugin.constructor.name !== 'UglifyJsPlugin')

      if (ctx.isServer) {
        config.resolve.alias['hammerjs$'] = this.options.rootDir + 'node_modules/vue-touch/dist/hammer-ssr.js'
      }

    }
  }

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

vadimsg picture vadimsg  路  3Comments

gary149 picture gary149  路  3Comments

maicong picture maicong  路  3Comments

jaredreich picture jaredreich  路  3Comments

msudgh picture msudgh  路  3Comments