Add aliases and update examples

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

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>

examples/custom-loading/nuxt.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  loading: 'components/loading'
+  loading: '~components/loading'
 }

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

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

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: {

examples/nested-components/pages/index.vue

@@ -22,8 +22,8 @@
 </template>
 
 <script>
-import Post from '../components/post.vue'
+import Post from '~components/post.vue'
-import vP from '../components/paragraph.vue'
+import vP from '~components/paragraph.vue'
 const vHr = { render: (h) => h('hr', { class: 'hr' }) }
 
 export default {

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

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

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'

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.

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

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,

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",