From b1546682ef7ce3f9ead26f328417d2589875ef46 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= <seb@chopin.io>
Date: Wed, 16 Nov 2016 17:55:15 +0100
Subject: [PATCH] Add aliases and update examples

---
 examples/custom-build/nuxt.config.js       |  2 +-
 examples/custom-build/pages/index.vue      |  2 +-
 examples/custom-loading/nuxt.config.js     |  2 +-
 examples/custom-routes/nuxt.config.js      |  2 +-
 examples/global-css/nuxt.config.js         |  4 ++--
 examples/head-elements/pages/about.vue     |  2 +-
 examples/nested-components/pages/index.vue |  4 ++--
 examples/plugins-vendor/README.md          |  4 +++-
 examples/plugins-vendor/nuxt.config.js     |  6 +++---
 lib/app/client.js                          |  2 +-
 lib/app/index.js                           |  2 +-
 lib/build/index.js                         |  8 ++++----
 lib/build/webpack/base.config.js           | 10 +++++++++-
 package.json                               |  2 +-
 14 files changed, 31 insertions(+), 21 deletions(-)

diff --git a/examples/custom-build/nuxt.config.js b/examples/custom-build/nuxt.config.js
index 9625400c40..4ec63dc64a 100644
--- a/examples/custom-build/nuxt.config.js
+++ b/examples/custom-build/nuxt.config.js
@@ -10,7 +10,7 @@ module.exports = {
     loaders: [
       {
         test: /\.(png|jpg|gif|svg)$/,
-        loader: 'url',
+        loader: 'url-loader',
         options: {
           limit: 100000, // 100KO
           name: 'img/[name].[ext]?[hash]'
diff --git a/examples/custom-build/pages/index.vue b/examples/custom-build/pages/index.vue
index 421cbb3a07..5be0248820 100644
--- a/examples/custom-build/pages/index.vue
+++ b/examples/custom-build/pages/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-    <p><img src="../assets/nuxt.png" /></p>
+    <p><img src="~assets/nuxt.png" /></p>
     <p>This image is included as data:image/png;base64...</p>
     <p>In the source code, the files generated are based on the build.filenames data.</p>
     <p>If you look at the <a href="/_nuxt/vendor.js">vendor.js</a>, lodash has been included (cmd/ctrl + F "lodash").</p>
diff --git a/examples/custom-loading/nuxt.config.js b/examples/custom-loading/nuxt.config.js
index 1cf6423015..61eb9bd4fa 100644
--- a/examples/custom-loading/nuxt.config.js
+++ b/examples/custom-loading/nuxt.config.js
@@ -1,3 +1,3 @@
 module.exports = {
-  loading: 'components/loading'
+  loading: '~components/loading'
 }
diff --git a/examples/custom-routes/nuxt.config.js b/examples/custom-routes/nuxt.config.js
index 5a1789baab..2bba54c06f 100644
--- a/examples/custom-routes/nuxt.config.js
+++ b/examples/custom-routes/nuxt.config.js
@@ -1,7 +1,7 @@
 module.exports = {
   router: {
     routes: [
-      { name: 'user', path: '/users/:id', component: 'pages/_user' }
+      { name: 'user', path: '/users/:id', component: '~pages/_user' }
     ]
   }
 }
diff --git a/examples/global-css/nuxt.config.js b/examples/global-css/nuxt.config.js
index 15a9c10b9a..2670e946b0 100644
--- a/examples/global-css/nuxt.config.js
+++ b/examples/global-css/nuxt.config.js
@@ -1,9 +1,9 @@
-const { resolve } = require('path')
+const { join } = require('path')
 
 module.exports = {
   css: [
     'hover.css/css/hover-min.css',
     { src: 'bulma', lang: 'sass' },
-    resolve(__dirname, 'css/main.css')
+    join(__dirname, 'css/main.css')
   ]
 }
diff --git a/examples/head-elements/pages/about.vue b/examples/head-elements/pages/about.vue
index 0986cdca53..a070ea228e 100644
--- a/examples/head-elements/pages/about.vue
+++ b/examples/head-elements/pages/about.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import TwitterHead from '../components/twitter-head.vue'
+import TwitterHead from '~components/twitter-head.vue'
 
 export default {
   head: {
diff --git a/examples/nested-components/pages/index.vue b/examples/nested-components/pages/index.vue
index 534bef5d85..ef1f8b42bd 100755
--- a/examples/nested-components/pages/index.vue
+++ b/examples/nested-components/pages/index.vue
@@ -22,8 +22,8 @@
 </template>
 
 <script>
-import Post from '../components/post.vue'
-import vP from '../components/paragraph.vue'
+import Post from '~components/post.vue'
+import vP from '~components/paragraph.vue'
 const vHr = { render: (h) => h('hr', { class: 'hr' }) }
 
 export default {
diff --git a/examples/plugins-vendor/README.md b/examples/plugins-vendor/README.md
index 1dd6c7bcda..0c268b0d5c 100644
--- a/examples/plugins-vendor/README.md
+++ b/examples/plugins-vendor/README.md
@@ -40,10 +40,12 @@ module.exports = {
   build: {
     vendor: ['vue-notifications']
   },
-  plugins: [ join(__dirname, './plugins/vue-notifications') ]
+  plugins: [ '~plugins/vue-notifications') ]
 }
 ```
 
+I use `~plugins` here because nuxt.js create an alias for the `plugins/` folder, it's equivalent to: `join(__dirname, './plugins/vue-notifications.js')`
+
 I added `vue-notifications` in the `vendor` key to make sure that it won't be included in any other build if I call `require('vue-notifications')` in a component.
 
 ### Only in browser build
diff --git a/examples/plugins-vendor/nuxt.config.js b/examples/plugins-vendor/nuxt.config.js
index fa08ade53c..61389f23e5 100644
--- a/examples/plugins-vendor/nuxt.config.js
+++ b/examples/plugins-vendor/nuxt.config.js
@@ -1,8 +1,8 @@
-const { join } = require('path')
-
 module.exports = {
   build: {
     vendor: ['axios', 'mini-toastr', 'vue-notifications']
   },
-  plugins: [ join(__dirname, './plugins/vue-notifications.js') ]
+  plugins: [
+    '~plugins/vue-notifications.js'
+  ]
 }
diff --git a/lib/app/client.js b/lib/app/client.js
index 9bf7ca06ca..dea6096c49 100644
--- a/lib/app/client.js
+++ b/lib/app/client.js
@@ -1,7 +1,7 @@
 'use strict'
 
-require('es6-promise').polyfill()
 require('es6-object-assign').polyfill()
+import 'es6-promise/auto'
 import Vue from 'vue'
 import { app, router<%= (store ? ', store' : '') %> } from './index'
 import { getMatchedComponents, flatMapComponents, getContext, getLocation } from './utils'
diff --git a/lib/app/index.js b/lib/app/index.js
index 516e9e715f..1327152430 100644
--- a/lib/app/index.js
+++ b/lib/app/index.js
@@ -5,7 +5,7 @@
 import Vue from 'vue'
 import Meta from 'vue-meta/lib/vue-meta.js' // require the ES2015 lib
 import router from './router'
-<% if (store && storePath) { %>import store from '<%= storePath %>'<% } %>
+<% if (store) { %>import store from '~store'<% } %>
 
 Vue.use(Meta, {
   keyName: 'head', // the component option name that vue-meta looks for meta info on.
diff --git a/lib/build/index.js b/lib/build/index.js
index 89ccf7a446..e8bd9d369d 100644
--- a/lib/build/index.js
+++ b/lib/build/index.js
@@ -100,7 +100,10 @@ module.exports = function * () {
     if (route.component.slice(-4) !== '.vue') {
       route.component = route.component + '.vue'
     }
-    route.component = r(this.dir, route.component)
+    // If not using an alias
+    if (route.component.indexOf('~') === -1) {
+      route.component = r(this.dir, route.component)
+    }
   })
   // Generate routes and interpret the template files
   yield generateRoutesAndFiles.call(this)
@@ -175,9 +178,6 @@ function * generateRoutesAndFiles () {
     route._name = '_' + hash(route._component)
     route.component = route._name
   })
-  if (this.options.store) {
-    templateVars.storePath = r(this.dir, 'store')
-  }
   if (this.dev && files.includes('pages/_error-debug.vue')) {
     templateVars.components.ErrorPage = r(this.dir, 'pages/_error-debug.vue')
   }
diff --git a/lib/build/webpack/base.config.js b/lib/build/webpack/base.config.js
index 2a15479a54..743af5387b 100644
--- a/lib/build/webpack/base.config.js
+++ b/lib/build/webpack/base.config.js
@@ -23,8 +23,16 @@ module.exports = function () {
       publicPath: urlJoin(this.options.router.base, '/_nuxt/')
     },
     resolve: {
+      // Disable for now
       alias: {
-        'static': join(this.dir, 'static')
+        'static': join(this.dir, 'static'), // use in template with <img src="~static/nuxt.png" />
+        '~static': join(this.dir, 'static'),
+        'assets': join(this.dir, 'assets'), // use in template with <img src="~static/nuxt.png" />
+        '~assets': join(this.dir, 'assets'),
+        '~plugins': join(this.dir, 'plugins'),
+        '~store': join(this.dir, 'store'),
+        '~pages': join(this.dir, 'pages'),
+        '~components': join(this.dir, 'components')
       },
       modules: [
         nodeModulesDir,
diff --git a/package.json b/package.json
index 4c7cb5d011..dcc9fecf01 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nuxt",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "A minimalistic framework for server-rendered Vue.js applications (inspired by Next.js)",
   "main": "index.js",
   "license": "MIT",