Version 0.1.5

- Add examples/with-store/ to show how to use Vuex with nuxt.js
- Fix fetch().then when fetch does not return a promise
- Map static folder to /static/

bin/nuxt-init

@@ -58,8 +58,7 @@ const baseConfig = `module.exports = {
 }
 `
 
-const basePage = `
-<template>
+const basePage = `<template>
   <p>Hello {{ name }}!</p>
 </template>
 

bin/nuxt-start

@@ -1,7 +1,9 @@
 #!/usr/bin/env node --harmony_proxies
 
 const http = require('http')
+const co = require('co')
 const fs = require('fs')
+const pify = require('pify')
 const serveStatic = require('serve-static')
 const Nuxt = require('../')
 const { resolve } = require('path')
@@ -30,19 +32,27 @@ class Server {
 
   constructor (nuxt) {
     this.server = http.createServer(this.handle.bind(this))
-    this.staticServer = serveStatic('static', { fallthrough: false })
+    this.serveStatic = pify(serveStatic(resolve(rootDir, 'static')))
     this.nuxt = nuxt
     return this
   }
 
   handle (req, res) {
     const method = req.method.toUpperCase()
+    const self = this
 
     if (method !== 'GET' && method !== 'HEAD') {
       return this.nuxt.render(req, res)
     }
-    this._staticHandler(req, res)
-    .catch((e) => {
+    co(function * () {
+      if (req.url.includes('/static/')) {
+        const url = req.url
+        req.url = req.url.replace('/static/', '/')
+        yield self.serveStatic(req, res)
+        req.url = url
+      }
+    })
+    .then(() => {
       // File not found
       this.nuxt.render(req, res)
     })
@@ -56,15 +66,4 @@ class Server {
     })
   }
 
-  _staticHandler (req, res) {
-    return new Promise((resolve, reject) => {
-      this.staticServer(req, res, (error) => {
-        if (!error) {
-          return resolve()
-        }
-        error.message = `Route ${error.message} while resolving ${req.url}`
-        reject(error)
-      })
-    })
-  }
 }

examples/hello-world/pages/about.vue

@@ -1,3 +1,15 @@
 <template>
-  <div>About us</div>
+  <div class="container">
+    <img src="/static/nuxt.png" />
+    <h2>About</h2>
+    <p><router-link to='/'>Home</router-link></p>
+  </div>
 </template>
+
+<style scoped>
+.container {
+  font-family: serif;
+  margin-top: 200px;
+  text-align: center;
+}
+</style>

examples/hello-world/pages/index.vue

@@ -1,3 +1,15 @@
 <template>
-  <div>Hello World. <router-link to='/about'>About</router-link></div>
+  <div class="container">
+    <img src="/static/nuxt.png" />
+    <h2>Hello World.</h2>
+    <p><router-link to='/about'>About</router-link></p>
+  </div>
 </template>
+
+<style scoped>
+.container {
+  font-family: sans-serif;
+  margin-top: 200px;
+  text-align: center;
+}
+</style>

examples/with-store/README.md

@@ -0,0 +1,51 @@
+# Nuxt.js with Vuex
+
+> Using a store to manage the state is important to every big application, that's why nuxt.js implement Vuex in its core.
+
+## Activate the store option
+
+First, we need to tell nuxt.js to activate the store, for this, we add a `nuxt.config.js` file:
+
+```js
+module.exports = {
+  store: true
+}
+```
+
+## Create the store folder
+
+When the store option is activated, nuxt will import it via `require('./store')`
+
+After creating the `store/` folder, we can create our `store/index.js` file:
+
+```js
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+const store = new Vuex.Store({
+  state: {
+    counter: 0
+  },
+  mutations: {
+    increment (state) {
+      state.counter++
+    }
+  }
+})
+
+export default store
+```
+
+> You don't need to install vuex since it's shipped with nuxt.js
+
+## Voilà !
+
+You're ready to use `this.$store` inside your `.vue` files :)
+
+```html
+<template>
+  <button @click="$store.commit('increment')">{{ $store.state.counter }}</button>
+</template>
+```

examples/with-store/nuxt.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  store: true
+}

examples/with-store/pages/about.vue

@@ -0,0 +1,8 @@
+<template>
+  <div>
+    <p>
+      <button @click="$store.commit('increment')">{{ $store.state.counter }}</button><br>
+      <router-link to="/">Home</router-link>
+    </p>
+  </div>
+</template>

examples/with-store/pages/index.vue

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <p>
+      <button @click="increment">{{ counter }}</button><br>
+      <router-link to="/about">About</router-link>
+    </p>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  // fetch(context) is called by the server-side
+  // and nuxt before instantiating the component
+  fetch ({ store }) {
+    store.commit('increment')
+  },
+  computed: mapState([
+    'counter'
+  ]),
+  methods: {
+    increment () { this.$store.commit('increment') }
+  }
+}
+</script>

examples/with-store/store/index.js

@@ -0,0 +1,17 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+const store = new Vuex.Store({
+  state: {
+    counter: 0
+  },
+  mutations: {
+    increment (state) {
+      state.counter++
+    }
+  }
+})
+
+export default store

lib/app/client.js

@@ -71,6 +71,7 @@ function render (to, from, next) {
     }
     if (Component.fetch) {
       var p = Component.fetch(context)
+      if (!(p instanceof Promise)) { p = Promise.resolve(p) }
       <%= (loading ? 'p.then(() => this.$loading.increase && this.$loading.increase(30))' : '') %>
       promises.push(p)
     }

package.json

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