config.router + base + linkClassActive

examples/custom-routes/README.md

@@ -7,9 +7,11 @@
 Add your custom routes inside `nuxt.config.js`:
 ```js
 module.exports = {
-  routes: [
+  router: {
-    { path: '/users/:id', component: 'pages/user' }
+    routes: [
-  ]
+      { path: '/users/:id', component: 'pages/user' }
+    ]
+  }
 }
 ```
 

examples/custom-routes/nuxt.config.js

@@ -1,5 +1,7 @@
 module.exports = {
-  routes: [
+  router: {
-    { name: 'user', path: '/users/:id', component: 'pages/_user' }
+    routes: [
-  ]
+      { name: 'user', path: '/users/:id', component: 'pages/_user' }
+    ]
+  }
 }

lib/app/router.js

@@ -7,7 +7,7 @@ import Meta from 'vue-meta'
 Vue.use(Router)
 Vue.use(Meta)
 
-<% routes.forEach(function (route) { %>
+<% router.routes.forEach(function (route) { %>
 const <%= route._name %> = process.BROWSER ? () => System.import('<%= route._component %>') : require('<%= route._component %>')
 <% }) %>
 
@@ -28,15 +28,17 @@ const scrollBehavior = (to, from, savedPosition) => {
 
 export default new Router({
   mode: 'history',
+  base: '<%= router.base %>',
+  linkActiveClass: '<%= router.linkActiveClass %>',
   scrollBehavior,
   routes: [
-    <% routes.forEach((route, i) => { %>
+    <% router.routes.forEach((route, i) => { %>
     {
       path: '<%= route.path %>',
       component: <%= route._name %><% if (route.name) { %>,
       name: '<%= route.name %>'<% } %><% if (route.meta) { %>,
       meta: <%= JSON.stringify(route.meta) %><% } %>
-    }<%= (i + 1 === routes.length ? '' : ',') %>
+    }<%= (i + 1 === router.routes.length ? '' : ',') %>
     <% }) %>
   ]
 })

lib/app/server.js

@@ -9,6 +9,9 @@ import { getMatchedComponents, getContext } from './utils'
 const isDev = <%= isDev %>
 const _app = new Vue(app)
 
+// Fix issue from vue-router Abstract mode with base (use for server-side rendering)
+router.history.base = '<%= router.base %>'
+
 // This exported function will be called by `bundleRenderer`.
 // This is where we perform data-prefetching to determine the
 // state of our application before actually rendering it.

lib/build/index.js

@@ -93,7 +93,7 @@ module.exports = function * () {
     yield mkdirp(r(this.dir, '.nuxt/dist'))
   }
   // Resolve custom routes component path
-  this.options.routes.forEach((route) => {
+  this.options.router.routes.forEach((route) => {
     if (route.component.slice(-4) !== '.vue') {
       route.component = route.component + '.vue'
     }
@@ -131,7 +131,7 @@ function * generateRoutesAndFiles () {
     routes.push({ path: path, component: r(this.dir, file) })
   })
   // Concat pages routes and custom routes in this.routes
-  this.routes = routes.concat(this.options.routes)
+  this.routes = routes.concat(this.options.router.routes)
   /*
   ** Interpret and move template files to .nuxt/
   */
@@ -147,6 +147,11 @@ function * generateRoutesAndFiles () {
   ]
   let templateVars = {
     isDev: this.dev,
+    router: {
+      base: this.options.router.base,
+      linkActiveClass: this.options.router.linkActiveClass,
+      routes: this.routes
+    },
     store: this.options.store,
     css: this.options.css,
     plugins: this.options.plugins.map((p) => r(this.dir, p)),
@@ -154,12 +159,11 @@ function * generateRoutesAndFiles () {
     components: {
       Loading: r(__dirname, '..', 'app', 'components', 'Loading.vue'),
       ErrorPage: r(__dirname, '..', '..', 'pages', (this.dev ? '_error-debug.vue' : '_error.vue'))
-    },
+    }
-    routes: this.routes
   }
   // Format routes for the lib/app/router.js template
   // TODO: check .children
-  templateVars.routes.forEach((route) => {
+  templateVars.router.routes.forEach((route) => {
     route._component = route.component
     route._name = '_' + hash(route._component)
     route.component = route._name

lib/build/webpack/base.config.js

@@ -19,7 +19,7 @@ module.exports = function () {
       vendor: ['vue', 'vue-router', 'vue-meta', 'es6-promise', 'es6-object-assign']
     },
     output: {
-      publicPath: '/_nuxt/'
+      publicPath: join(this.options.router.base, '/_nuxt/')
     },
     resolve: {
       modules: [

lib/nuxt.js

@@ -19,7 +19,6 @@ class Nuxt {
   constructor (options = {}, cb) {
     var defaults = {
       dev: true,
-      routes: [],
       plugins: [],
       css: [],
       store: false,
@@ -29,6 +28,16 @@ class Nuxt {
         failedColor: 'red',
         height: '2px',
         duration: 5000
+      },
+      router: {
+        base: '/',
+        linkActiveClass: 'router-link-active',
+        routes: []
+      },
+      build: {
+        filenames: {
+          css: 'style.css'
+        }
       }
     }
     if (options.loading === true) delete options.loading
@@ -127,9 +136,9 @@ class Nuxt {
         APP: app,
         context: context,
         files: {
-          css: join('/_nuxt/', self.options.build.filenames.css),
+          css: join(self.options.router.base, '/_nuxt/', self.options.build.filenames.css),
-          vendor: join('/_nuxt/', self.options.build.filenames.vendor),
+          vendor: join(self.options.router.base, '/_nuxt/', self.options.build.filenames.vendor),
-          app: join('/_nuxt/', self.options.build.filenames.app)
+          app: join(self.options.router.base, '/_nuxt/', self.options.build.filenames.app)
         }
       })
       return { html, error: context.nuxt.error }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "description": "A minimalistic framework for server-rendered Vue.js applications (inspired by Next.js)",
   "main": "index.js",
   "license": "MIT",