Version 0.1.6

- Add example /custom-routes/
- Rename example/with-store/ to examples/vuex-store/
- Feature: Add .vue at the end of the component if not specified in
custom routes
- Feature: Add .params and .query in the context
- Feature: Add .name in route if given in custom routes

README.md

@@ -67,7 +67,6 @@ const options = {
   store: true // use vuex and require('./store')
   vendor: ['axios', 'public/plugin.js'], // Add vendors in vendor-bundle.js
   loading: false or { color: "blue", error: "red" } or 'components/loader'
-  getContent: function (req, res) { return { lol: true } }
 }
 
 // Launch nuxt build with given options

examples/custom-routes/nuxt.config.js

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

examples/custom-routes/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "custom-routes",
+  "description": "",
+  "dependencies": {
+    "axios": "^0.15.2",
+    "nuxt": "latest"
+  },
+  "scripts": {
+    "start": "nuxt"
+  }
+}

examples/custom-routes/pages/_user.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="user">
+    <h3>{{ name }}</h3>
+    <p>Email : {{ email }}</p>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+  data ({ params }) {
+    return axios.get(`http://jsonplaceholder.typicode.com/users/${params.id}`)
+    .then((res) => res.data)
+  }
+}
+</script>
+
+<style>
+</style>

examples/custom-routes/pages/index.vue

@@ -0,0 +1,25 @@
+<template>
+  <ul class="users">
+    <h2>Users</h2>
+    <li v-for="user in users">
+      <router-link :to="{ name: 'user', params: { id: user.id } }">{{ user.name }}</router-link>
+    </li>
+  </ul>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+  data () {
+    return axios.get('http://jsonplaceholder.typicode.com/users')
+    .then((res) => {
+      return { users: res.data }
+    })
+  }
+}
+</script>
+
+<style>
+
+</style>

examples/global-css/nuxt.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  // Nuxt.js configuration file
+  // Please look at https://nuxtjs.org/docs/config-file
+}

examples/global-css/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "global-css",
+  "description": "",
+  "dependencies": {
+    "nuxt": "latest"
+  },
+  "scripts": {
+    "start": "nuxt"
+  }
+}

examples/global-css/pages/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <p>Hello {{ name }}!</p>
+</template>
+
+<script>
+export default {
+  data () {
+    return { name: 'world' }
+  }
+}
+</script>
+
+<style>
+p {
+  font-size: 20px;
+  text-align: center;
+  padding: 100px;
+}
+</style>

lib/app/router.js

@@ -31,7 +31,8 @@ export default new Router({
     <% routes.forEach((route, i) => { %>
     {
       path: '<%= route.path %>',
-      component: <%= route._name %>
+      component: <%= route._name %><% if (route.name) { %>,
+      name: <%= route.name %><% } %>
     }<%= (i + 1 === routes.length ? '' : ',') %>
     <% }) %>
   ]

lib/app/utils.js

@@ -23,6 +23,8 @@ export function getContext (context) {
     <%= (store ? 'store: context.store,' : '') %>
     route: (context.to ? context.to : context.route)
   }
+  ctx.params = ctx.route.params || {}
+  ctx.query = ctx.route.query || {}
   if (context.req) ctx.req = context.req
   if (context.res) ctx.res = context.res
   return ctx

lib/build/index.js

@@ -54,6 +54,9 @@ module.exports = function * () {
     routes.push({ path: path, component: file })
   })
   this.options.routes.forEach((route) => {
+    if (route.component.slice(-4) !== '.vue') {
+      route.component = route.component + '.vue'
+    }
     route.component = r(this.dir, route.component)
   })
   this.options.routes = routes.concat(this.options.routes)

lib/nuxt.js

@@ -49,7 +49,6 @@ class Nuxt {
     })
     // renderer used by Vue.js (via createBundleRenderer)
     this.renderer = null
-    this.getContext = (this.options.getContext === 'function' ? this.options.getContext : getContext)
     // For serving .nuxt/dist/ files
     this.serveStatic = pify(serveStatic(resolve(this.dir, '.nuxt', 'dist')))
     // Add this.build
@@ -74,7 +73,7 @@ class Nuxt {
       return
     }
     const self = this
-    const context = this.getContext(req, res)
+    const context = getContext(req, res)
     co(function * () {
       if (self.isDev) {
         // Call webpack middlewares only in development

package.json

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