Add transition option and package.json next config

bin/nuxt-dev

@@ -26,7 +26,7 @@ options.dev = true // Add hot reloading and watching changes
 new Nuxt(options)
 .then((nuxt) => {
   const server = new Server(nuxt)
-  .listen(process.env.PORT, process.env.HOST)
+  .listen(process.env.PORT || process.env.npm_package_config_nuxt_port, process.env.HOST || process.env.npm_package_config_nuxt_host)
   listenOnConfigChanges(nuxt, server)
 })
 .catch((err) => {

bin/nuxt-start

@@ -21,7 +21,7 @@ options.dev = false // Force production mode (no webpack middlewares called)
 new Nuxt(options)
 .then((nuxt) => {
   new Server(nuxt)
-  .listen(process.env.PORT, process.env.HOST)
+  .listen(process.env.PORT || process.env.npm_package_config_nuxt_port, process.env.HOST || process.env.npm_package_config_nuxt_host)
 })
 .catch((err) => {
   console.error(err)

examples/routes-transition/README.md

@@ -0,0 +1,115 @@
+# Routes transitions with Nuxt.js
+
+> Nuxt.js uses the  [`<transition>`](http://vuejs.org/v2/guide/transitions.html#Transitioning-Single-Elements-Components) component to allow you to create amazing transitions between your routes.
+
+## Usage
+
+🎬 [Demonstration video]()
+
+The default transition name Nuxt.js uses is `page`.
+
+To add a fade transition to every page of your application, we need a CSS file that is shared across all our routes, so we start by creating a file in the `assets/` folder.
+
+`assets/main.css`:
+```css
+.page-enter-active, .page-leave-active {
+  transition: opacity .5s
+}
+.page-enter, .page-leave-active {
+  opacity: 0
+}
+```
+
+We add it in our `nuxt.config.js` file:
+```js
+module.exports = {
+  css: [
+    'assets/main.css'
+  ]
+}
+```
+
+And voilà! A nice fade animation will be shown between every routes.
+
+## The `transition` key
+
+You can update the defaults transition settings by adding the `transition` key in you `nuxt.config.js` file.
+
+```js
+module.exports = {
+  transition: 'test'
+  // or
+  transition: {
+    name: 'test',
+    mode: 'out-in'
+  }
+}
+```
+
+Nuxt.js will use these settings to set the component as follows:
+```html
+<transition name="test" mode="out-in">
+```
+
+To learn more about the Vue.js `<transition>` component: http://vuejs.org/v2/guide/transitions.html
+
+The following properties that the `transition` key can have:
+
+| key  | Default | definition |
+|------|------------|-----------|
+| `name` | `page` | The transition name applied on all the routes transitions. |
+| `mode` | `out-in` | The transition mode applied on all routes, see [Vue.js documentation](http://vuejs.org/v2/guide/transitions.html#Transition-Modes). |
+
+*Note: if the `transition` key is set as a string, it will be used as the `transition.name`.*
+
+## Custom transition on a specific route
+
+To define a custom transition for a specific route, simply add the `transition` key to the page component:
+
+`pages/about.vue`:
+```html
+<template>
+  <div class="container">
+    <h1>About page</h1>
+    <router-link to="/">Home page</router-link>
+  </div>
+</template>
+
+<script>
+export default {
+  transition: 'bounce'
+}
+</script>
+```
+
+And then we add the CSS animation for this custom transition:
+```css
+/* assets/main.css */
+.bounce-enter-active {
+  animation: bounce-in .8s;
+}
+.bounce-leave-active {
+  animation: bounce-out .5s;
+}
+@keyframes bounce-in {
+  0% { transform: scale(0) }
+  50% { transform: scale(1.5) }
+  100% { transform: scale(1) }
+}
+@keyframes bounce-out {
+  0% { transform: scale(1) }
+  50% { transform: scale(1.5) }
+  100% { transform: scale(0) }
+}
+```
+
+*Note: you can also the set `transition` key as an object in page components*
+
+## Demo
+
+```bash
+npm install
+npm start
+```
+
+Go to [http://localhost:3000](http://localhost:3000) and navigate through the pages.

examples/routes-transition/assets/main.css

@@ -0,0 +1,29 @@
+.container {
+  text-align: center;
+  padding-top: 200px;
+  font-size: 20px;
+}
+
+.page-enter-active, .page-leave-active {
+  transition: opacity .5s
+}
+.page-enter, .page-leave-active {
+  opacity: 0
+}
+
+.bounce-enter-active {
+  animation: bounce-in .8s;
+}
+.bounce-leave-active {
+  animation: bounce-out .5s;
+}
+@keyframes bounce-in {
+  0% { transform: scale(0) }
+  50% { transform: scale(1.5) }
+  100% { transform: scale(1) }
+}
+@keyframes bounce-out {
+  0% { transform: scale(1) }
+  50% { transform: scale(1.5) }
+  100% { transform: scale(0) }
+}

examples/routes-transition/nuxt.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  css: [
+    'assets/main.css'
+  ]
+}

examples/routes-transition/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "routes-transition",
+  "description": "",
+  "dependencies": {
+    "nuxt": "latest"
+  },
+  "scripts": {
+    "start": "../../bin/nuxt"
+  },
+  "config": {
+    "nuxt": {
+      "port": 4000
+    }
+  }
+}

examples/routes-transition/pages/about.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="container">
+    <h1>About page</h1>
+    <router-link to="/">Home page</router-link>
+  </div>
+</template>
+
+<script>
+export default {
+  transition: 'bounce'
+}
+</script>

examples/routes-transition/pages/index.vue

@@ -0,0 +1,6 @@
+<template>
+  <div class="container">
+    <h1>Home page</h1>
+    <router-link to="/about">About page</router-link>
+  </div>
+</template>

lib/app/client.js

@@ -67,6 +67,7 @@ function render (to, ___, next) {
       }
     }
   })
+  this.setTransition(Components[0].options.transition)
   this.error()
   let nextCalled = false
   Promise.all(Components.map((Component) => {
@@ -220,6 +221,8 @@ Promise.all(resolveComponents)
       window.onNuxtReady(_app)
     }
   }
+  _app.setTransition = _app.$options._nuxt.setTransition.bind(_app)
+  if (Components.length) _app.setTransition(Components[0].options.transition)
   _app.error = _app.$options._nuxt.error.bind(_app)
   _app.$loading = {} // to avoid error while _app.$nuxt does not exist
   if (NUXT.error) _app.error(NUXT.error)

lib/app/components/nuxt.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <% if (loading) { %><nuxt-loading ref="loading"></nuxt-loading><% } %>
-    <transition mode="out-in">
+    <transition :name="nuxt.transition.name" :mode="nuxt.transition.mode">
       <router-view v-if="!nuxt.err"></router-view>
       <nuxt-error v-if="nuxt.err" :error="nuxt.err"></nuxt-error>
     </transition>

lib/app/index.js

@@ -29,10 +29,22 @@ require('<%= pluginPath %>')
 // root instance
 // here we inject the router and store to all child components,
 // making them available everywhere as `this.$router` and `this.$store`.
+const defaultTransition = <%= JSON.stringify(transition) %>
 const app = {
   router,
   <%= (store ? 'store,' : '') %>
   _nuxt: {
+    transition: Object.assign({}, defaultTransition),
+    setTransition (transition) {
+      if (!transition) {
+        transition = defaultTransition
+      } else if (typeof transition === 'string') {
+        transition = Object.assign({}, defaultTransition, { name: transition })
+      }
+      this.$options._nuxt.transition.name = transition.name
+      this.$options._nuxt.transition.mode = transition.mode
+      return transition
+    },
     err: null,
     error (err) {
       err = err || null

lib/build/index.js

@@ -175,6 +175,7 @@ function * generateRoutesAndFiles () {
     plugins: this.options.plugins.map((p) => r(this.dir, p)),
     appPath: './App.vue',
     loading: (typeof this.options.loading === 'string' ? r(this.dir, this.options.loading) : this.options.loading),
+    transition: this.options.transition,
     components: {
       Loading: r(__dirname, '..', 'app', 'components', 'nuxt-loading.vue'),
       ErrorPage: r(__dirname, '..', 'app', 'components', (this.dev ? 'nuxt-error-debug.vue' : 'nuxt-error.vue'))

lib/nuxt.js

@@ -34,6 +34,10 @@ class Nuxt {
         height: '2px',
         duration: 5000
       },
+      transition: {
+        name: 'page',
+        mode: 'out-in'
+      },
       router: {
         base: '/',
         linkActiveClass: 'router-link-active',
@@ -46,6 +50,7 @@ class Nuxt {
       }
     }
     if (options.loading === true) delete options.loading
+    if (typeof options.transition === 'string') options.transition = { name: options.transition }
     this.options = _.defaultsDeep(options, defaults)
     // Env variables
     this.dev = this.options.dev

package.json

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