diff --git a/examples/custom-routes/README.md b/examples/custom-routes/README.md index a7804d3f52..36861851bd 100644 --- a/examples/custom-routes/README.md +++ b/examples/custom-routes/README.md @@ -7,9 +7,11 @@ Add your custom routes inside `nuxt.config.js`: ```js module.exports = { - routes: [ - { path: '/users/:id', component: 'pages/user' } - ] + router: { + routes: [ + { path: '/users/:id', component: 'pages/user' } + ] + } } ``` diff --git a/examples/custom-routes/nuxt.config.js b/examples/custom-routes/nuxt.config.js index bc4d11faf6..5a1789baab 100644 --- a/examples/custom-routes/nuxt.config.js +++ b/examples/custom-routes/nuxt.config.js @@ -1,5 +1,7 @@ module.exports = { - routes: [ - { name: 'user', path: '/users/:id', component: 'pages/_user' } - ] + router: { + routes: [ + { name: 'user', path: '/users/:id', component: 'pages/_user' } + ] + } } diff --git a/lib/app/router.js b/lib/app/router.js index 37a6061ba5..825d182a8d 100644 --- a/lib/app/router.js +++ b/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 ? '' : ',') %> <% }) %> ] }) diff --git a/lib/app/server.js b/lib/app/server.js index e74d9a1352..1198882244 100644 --- a/lib/app/server.js +++ b/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. diff --git a/lib/build/index.js b/lib/build/index.js index 0466d9d20b..1467974b97 100644 --- a/lib/build/index.js +++ b/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 diff --git a/lib/build/webpack/base.config.js b/lib/build/webpack/base.config.js index 2e09e5809a..7cb29a2575 100644 --- a/lib/build/webpack/base.config.js +++ b/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: [ diff --git a/lib/nuxt.js b/lib/nuxt.js index e63eacf973..2c828d63cc 100644 --- a/lib/nuxt.js +++ b/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), - vendor: join('/_nuxt/', self.options.build.filenames.vendor), - app: join('/_nuxt/', self.options.build.filenames.app) + css: join(self.options.router.base, '/_nuxt/', self.options.build.filenames.css), + vendor: join(self.options.router.base, '/_nuxt/', self.options.build.filenames.vendor), + app: join(self.options.router.base, '/_nuxt/', self.options.build.filenames.app) } }) return { html, error: context.nuxt.error } diff --git a/package.json b/package.json index 2dead94813..92f6fe1b21 100644 --- a/package.json +++ b/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",