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/
This commit is contained in:
Sébastien Chopin 2016-11-07 20:57:44 +01:00
parent 2956e73c3e
commit 749274d22a
12 changed files with 147 additions and 19 deletions

View File

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

View File

@ -1,7 +1,9 @@
#!/usr/bin/env node --harmony_proxies #!/usr/bin/env node --harmony_proxies
const http = require('http') const http = require('http')
const co = require('co')
const fs = require('fs') const fs = require('fs')
const pify = require('pify')
const serveStatic = require('serve-static') const serveStatic = require('serve-static')
const Nuxt = require('../') const Nuxt = require('../')
const { resolve } = require('path') const { resolve } = require('path')
@ -30,19 +32,27 @@ class Server {
constructor (nuxt) { constructor (nuxt) {
this.server = http.createServer(this.handle.bind(this)) this.server = http.createServer(this.handle.bind(this))
this.staticServer = serveStatic('static', { fallthrough: false }) this.serveStatic = pify(serveStatic(resolve(rootDir, 'static')))
this.nuxt = nuxt this.nuxt = nuxt
return this return this
} }
handle (req, res) { handle (req, res) {
const method = req.method.toUpperCase() const method = req.method.toUpperCase()
const self = this
if (method !== 'GET' && method !== 'HEAD') { if (method !== 'GET' && method !== 'HEAD') {
return this.nuxt.render(req, res) return this.nuxt.render(req, res)
} }
this._staticHandler(req, res) co(function * () {
.catch((e) => { 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 // File not found
this.nuxt.render(req, res) 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)
})
})
}
} }

View File

@ -1,3 +1,15 @@
<template> <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> </template>
<style scoped>
.container {
font-family: serif;
margin-top: 200px;
text-align: center;
}
</style>

View File

@ -1,3 +1,15 @@
<template> <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> </template>
<style scoped>
.container {
font-family: sans-serif;
margin-top: 200px;
text-align: center;
}
</style>

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

View File

@ -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>
```

View File

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

View File

@ -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>

View File

@ -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>

View File

@ -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

View File

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

View File

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