depricated ~ in flavour of @ for aliases

lib/app/components/nuxt.vue

@@ -6,7 +6,7 @@
 <script>
 import Vue from 'vue'
 import NuxtChild from './nuxt-child'
-import NuxtError from '<%= components.ErrorPage ? (components.ErrorPage.includes('~') ? components.ErrorPage : "../" + components.ErrorPage) : "./nuxt-error.vue" %>'
+import NuxtError from '<%= components.ErrorPage ? ((components.ErrorPage.includes('~') || components.ErrorPage.includes('@')) ? components.ErrorPage : "../" + components.ErrorPage) : "./nuxt-error.vue" %>'
 
 export default {
   name: 'nuxt',

lib/app/index.js

@@ -23,7 +23,7 @@ if (process.browser) {
 
 // Import SSR plugins
 <% plugins.forEach(function (plugin) { if (plugin.ssr)
-{ %>let <%= plugin.name %> = require('<%= relative(plugin.src) %>')
+{ %>let <%= plugin.name %> = require('<%= relativeToBuild(plugin.src) %>')
 <%= plugin.name %> = <%= plugin.name %>.default || <%= plugin.name %>
 <% }}) %>
 
@@ -132,7 +132,7 @@ async function createApp (ssrContext) {
   }
   <% } else { %>
   if (process.browser) {
-    let <%= plugin.name %> = require('<%= relative(plugin.src) %>')
+    let <%= plugin.name %> = require('<%= relativeToBuild(plugin.src) %>')
     <%= plugin.name %> = <%= plugin.name %>.default || <%= plugin.name %>
     if (typeof <%= plugin.name %> === 'function') {
       await <%= plugin.name %>(ctx)

lib/app/middleware.js

@@ -1,5 +1,5 @@
 <% if (middleware) { %>
-let files = require.context('~/middleware', false, /^\.\/.*\.(js|ts)$/)
+let files = require.context('@/middleware', false, /^\.\/.*\.(js|ts)$/)
 let filenames = files.keys()
 
 function getModule (filename) {

lib/app/router.js

@@ -23,7 +23,7 @@ function recursiveRoutes(routes, tab, components) {
 var _components = []
 var _routes = recursiveRoutes(router.routes, '\t\t', _components)
 uniqBy(_components, '_name').forEach((route) => { %>
-const <%= route._name %> = () => import('<%= relative(route.component) %>' /* webpackChunkName: "pages/<%= route.name %>" */)
+const <%= route._name %> = () => import('<%= relativeToBuild(route.component) %>' /* webpackChunkName: "pages/<%= route.name %>" */)
 <% }) %>
 
 <% if (router.scrollBehavior) { %>

lib/app/store.js

@@ -3,8 +3,8 @@ import Vuex from 'vuex'
 
 Vue.use(Vuex)
 
-// Recursive find files in ~/store
-const files = require.context('~/store', true, /^\.\/.*\.(js|ts)$/)
+// Recursive find files in {srcDir}/store
+const files = require.context('@/store', true, /^\.\/.*\.(js|ts)$/)
 const filenames = files.keys()
 
 // Store

lib/builder/builder.js

@@ -5,12 +5,12 @@ import hash from 'hash-sum'
 import pify from 'pify'
 import webpack from 'webpack'
 import serialize from 'serialize-javascript'
-import { join, resolve, basename, dirname, relative } from 'path'
+import { join, resolve, basename, dirname } from 'path'
 import Tapable from 'tappable'
 import MFS from 'memory-fs'
 import webpackDevMiddleware from 'webpack-dev-middleware'
 import webpackHotMiddleware from 'webpack-hot-middleware'
-import { r, wp, createRoutes, parallel } from 'utils'
+import { r, wp, createRoutes, parallel, relativeTo } from 'utils'
 import Debug from 'debug'
 import Glob from 'glob'
 import clientWebpackConfig from './webpack/client.config.js'
@@ -40,6 +40,9 @@ export default class Builder extends Tapable {
       colors: true
     }
 
+    // Helper to resolve build paths
+    this.relativeToBuild = (...args) => relativeTo(this.options.buildDir, ...args)
+
     this._buildStatus = STATUS.INITIAL
   }
 
@@ -134,10 +137,10 @@ export default class Builder extends Tapable {
       }),
       appPath: './App.vue',
       layouts: Object.assign({}, this.options.layouts),
-      loading: typeof this.options.loading === 'string' ? this.relative(r(this.options.srcDir, this.options.loading)) : this.options.loading,
+      loading: typeof this.options.loading === 'string' ? this.relativeToBuild(this.options.srcDir, this.options.loading) : this.options.loading,
       transition: this.options.transition,
       components: {
-        ErrorPage: this.options.ErrorPage ? this.relative(r(this.options.ErrorPage)) : null
+        ErrorPage: this.options.ErrorPage ? this.relativeToBuild(this.options.ErrorPage) : null
       }
     }
 
@@ -147,10 +150,10 @@ export default class Builder extends Tapable {
       layoutsFiles.forEach((file) => {
         let name = file.split('/').slice(-1)[0].replace('.vue', '')
         if (name === 'error') return
-        templateVars.layouts[name] = this.relative(r(this.options.srcDir, file))
+        templateVars.layouts[name] = this.relativeToBuild(this.options.srcDir, file)
       })
       if (layoutsFiles.includes('layouts/error.vue') && !templateVars.components.ErrorPage) {
-        templateVars.components.ErrorPage = this.relative(r(this.options.srcDir, 'layouts/error.vue'))
+        templateVars.components.ErrorPage = this.relativeToBuild(this.options.srcDir, 'layouts/error.vue')
       }
     }
     // If no default layout, create its folder and add the default folder
@@ -225,7 +228,7 @@ export default class Builder extends Tapable {
           hash,
           r,
           wp,
-          relative: this.relative.bind(this)
+          relativeToBuild: this.relativeToBuild
         }
       })
       const content = template(Object.assign({}, templateVars, {
@@ -408,17 +411,6 @@ export default class Builder extends Tapable {
       customFilesWatcher.close()
     })
   }
-
-  relative (dest) {
-    if (dest && dest.includes('~')) {
-      return dest
-    }
-    let rp = relative(this.options.buildDir, dest)
-    if (rp[0] !== '.') {
-      rp = './' + rp
-    }
-    return wp(rp)
-  }
 }
 
 const STATUS = {

lib/builder/webpack/base.config.js

@@ -46,8 +46,16 @@ export default function webpackBaseConfig ({ isClient, isServer }) {
     },
     resolve: {
       extensions: ['.js', '.json', '.vue', '.ts'],
-      // Disable for now
       alias: {
+        '@@': join(this.options.rootDir),
+        '@': join(this.options.srcDir),
+        '@static': join(this.options.srcDir, 'static'),
+        '@assets': join(this.options.srcDir, 'assets'),
+        '@plugins': join(this.options.srcDir, 'plugins'),
+        '@pages': join(this.options.srcDir, 'pages'),
+        '@components': join(this.options.srcDir, 'components'),
+        '@middleware': join(this.options.srcDir, 'middleware'),
+        // Legacy support
         '~': join(this.options.srcDir),
         'static': join(this.options.srcDir, 'static'), // use in template with <img src="~static/nuxt.png" />
         '~static': join(this.options.srcDir, 'static'),
@@ -55,7 +63,8 @@ export default function webpackBaseConfig ({ isClient, isServer }) {
         '~assets': join(this.options.srcDir, 'assets'),
         '~plugins': join(this.options.srcDir, 'plugins'),
         '~pages': join(this.options.srcDir, 'pages'),
-        '~components': join(this.options.srcDir, 'components')
+        '~components': join(this.options.srcDir, 'components'),
+        '~middleware': join(this.options.srcDir, 'middleware')
       },
       modules: [
         join(this.options.rootDir, 'node_modules'),

lib/common/utils.js

@@ -1,4 +1,4 @@
-import { resolve, sep } from 'path'
+import { resolve, relative, sep } from 'path'
 import _ from 'lodash'
 
 export function encodeHtml (str) {
@@ -94,12 +94,39 @@ const normalize = string => string.replace(reqSep, sysSep)
 
 export function r () {
   let args = Array.prototype.slice.apply(arguments)
+  let lastArg = _.last(args)
 
-  if (_.last(args).includes('~')) {
-    return wp(_.last(args))
+  if (lastArg.includes('@')) {
+    return wp(lastArg)
   }
-  args = args.map(normalize)
-  return wp(resolve.apply(null, args))
+
+  if (lastArg.includes('~')) {
+    // eslint-disable-next-line no-console
+    console.warn('[nuxt] Aliases using `~` are deprecated, please use `@` instead.', lastArg, '->', lastArg.replace('~', '@'))
+    return wp(lastArg)
+  }
+
+  return wp(resolve(...args.map(normalize)))
+}
+
+export function relativeTo () {
+  let args = Array.prototype.slice.apply(arguments)
+  let dir = args.shift()
+
+  // Resolve path
+  let path = r(...args)
+
+  // Check if path is an alias
+  if (path.includes('@') || path.includes('~')) {
+    return path
+  }
+
+  // Make correct relative path
+  let rp = relative(dir, path)
+  if (rp[0] !== '.') {
+    rp = './' + rp
+  }
+  return wp(rp)
 }
 
 export function flatRoutes (router, path = '', routes = []) {

lib/core/module.js

@@ -100,11 +100,7 @@ export default class ModuleContainer extends Tapable {
     let module = originalSrc
 
     if (typeof module === 'string') {
-      // Using ~ or ./ shorthand modules are resolved from project srcDir
-      if (module.indexOf('~') === 0 || module.indexOf('./') === 0) {
-        module = path.join(this.options.srcDir, module.substr(1))
-      }
-      module = require(module)
+      module = require(this.nuxt.resolvePath(module))
     }
 
     // Validate module

lib/core/nuxt.js

@@ -5,6 +5,7 @@ import Renderer from './renderer'
 import Options from './options'
 import Debug from 'debug'
 import enableDestroy from 'server-destroy'
+import { join, resolve } from 'path'
 
 const debug = Debug('nuxt:')
 debug.color = 5
@@ -92,6 +93,18 @@ export default class Nuxt extends Tapable {
     process.exit(1)
   }
 
+  resolvePath (path) {
+    // Shorthand to resolve from project srcDir
+    if (path.indexOf('@') === 0 || path.indexOf('~') === 0) {
+      if (path.indexOf('~') === 0) {
+        // eslint-disable-next-line no-console
+        console.warn('[nuxt] Aliases using `~` are deprecated, please use `@` instead.', path, '->', path.replace('~', '@'))
+      }
+      return join(this.options.srcDir, path.substr(1))
+    }
+    return resolve(this.options.srcDir, path)
+  }
+
   async close (callback) {
     await this.applyPluginsAsync('close')
 

lib/core/renderer.js

@@ -146,12 +146,7 @@ export default class Renderer extends Tapable {
   useMiddleware (m) {
     // Resolve
     if (typeof m === 'string') {
-      let src = m
-      // Using ~ or ./ shorthand to resolve from project srcDir
-      if (src.indexOf('~') === 0 || src.indexOf('./') === 0) {
-        src = join(this.nuxt.options.srcDir, src.substr(1))
-      }
-      m = require(src)
+      m = require(this.nuxt.resolvePath(m))
     }
     // Use middleware
     if (m instanceof Function) {