From 1bd8a63f9e8efd78047e868601d4a0c4ef40eb9d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= Date: Tue, 8 Nov 2016 01:04:26 +0100 Subject: [PATCH 1/3] npm ignore, route meta and documentation --- .npmignore | 2 ++ examples/async-data/README.md | 15 +++++++++++ examples/custom-routes/README.md | 44 ++++++++++++++++++++++++++++++++ lib/app/router.js | 3 ++- 4 files changed, 63 insertions(+), 1 deletion(-) create mode 100644 .npmignore create mode 100644 examples/custom-routes/README.md diff --git a/.npmignore b/.npmignore new file mode 100644 index 0000000000..647ea035d9 --- /dev/null +++ b/.npmignore @@ -0,0 +1,2 @@ +# Excludes examples +examples diff --git a/examples/async-data/README.md b/examples/async-data/README.md index e2f4bd15bd..62a4db2db2 100644 --- a/examples/async-data/README.md +++ b/examples/async-data/README.md @@ -28,6 +28,21 @@ And then, you can display the data inside your template: ``` +## Context + +List of all the available keys in `context`: + +| Key | Type | Available | Description | +|-----|------|--------------|-------------| +| `isClient` | Boolean | Client & Server | Boolean to let you know if you're actually renderer from the client-side | +| `isServer` | Boolean | Client & Server | Boolean to let you know if you're actually renderer from the server-side | +| `route` | [vue-router route](https://router.vuejs.org/en/api/route-object.html) | Client & Server | `vue-router` route instance [see documentation](https://router.vuejs.org/en/api/route-object.html) | +| `store` | [vuex store](http://vuex.vuejs.org/en/api.html#vuexstore-instance-properties) | Client & Server | `Vuex.Store` instance. **Available only if `store: true` is set in `nuxt.config.js`** | +| `params` | Object | Client & Server | Alias of route.params | +| `query` | Object | Client & Server | Alias of route.query | +| `req` | [http.Request](https://nodejs.org/api/http.html#http_class_http_incomingmessage) | Server | Request from the node.js server. If nuxt is used as a middleware, the req object might be different depending of the framework you're using. | +| `res` | [http.Response](https://nodejs.org/api/http.html#http_class_http_serverresponse) | Server | Response from the node.js server. If nuxt is used as a middleware, the res object might be different depending of the framework you're using. | + ## Demo ```bash diff --git a/examples/custom-routes/README.md b/examples/custom-routes/README.md new file mode 100644 index 0000000000..a7804d3f52 --- /dev/null +++ b/examples/custom-routes/README.md @@ -0,0 +1,44 @@ +# Defining custom routes with Nuxt.js + +> Nuxt.js is based on vue-router and allows you to defined custom routes :rocket: + +## Usage + +Add your custom routes inside `nuxt.config.js`: +```js +module.exports = { + routes: [ + { path: '/users/:id', component: 'pages/user' } + ] +} +``` + +| key | Optional? | definition | +|------|------------| +| `path` | **Required** | Route path, it can have dynamic mapping, look at [vue-router documentation](https://router.vuejs.org/en/essentials/dynamic-matching.html) about it. | +| `component` | **Required** | Path to the `.vue` component, if relative, it has to be from the app folder. | +| `name` | Optional | Route name, useful for linking to it with ``, see [vue-router documentation](https://router.vuejs.org/en/essentials/named-routes.html) about it. | +| `meta` | Optional | Let you add custom fields to get back inside your component (available in the context via `route.meta` inside `data` and `fetch` methods). See [vue-router documentation](https://router.vuejs.org/en/advanced/meta.html) about it. | +| `children` | Optional | *Not supported* | + +## Hidden pages + +>If you want don't want nuxt.js to generate a route for a specific page, you just have to **rename it with _ at the beginning**. + +Let's say I have a component `pages/user.vue` and I don't want nuxt.js to create the `/user`. I can rename it to `pages/_user.vue` and voilà! + +You can then change the component path in the `nuxt.config.js`: +```js +// ... + { path: '/users/:id', component: 'pages/_user' } +// ... +``` + +## Demo + +```bash +npm install +npm start +``` + +Go to [http://localhost:3000](http://localhost:3000) and navigate through the pages. diff --git a/lib/app/router.js b/lib/app/router.js index dcf3b5feed..2812bb4df9 100644 --- a/lib/app/router.js +++ b/lib/app/router.js @@ -32,7 +32,8 @@ export default new Router({ { path: '<%= route.path %>', component: <%= route._name %><% if (route.name) { %>, - name: '<%= route.name %>'<% } %> + name: '<%= route.name %>'<% } %><% if (route.meta) { %>, + meta: <%= JSON.stringify(route.meta) %><% } %> }<%= (i + 1 === routes.length ? '' : ',') %> <% }) %> ] From 37341ee4ef9cbe35f114dc423e27f862ca61743f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= Date: Tue, 8 Nov 2016 01:07:04 +0100 Subject: [PATCH 2/3] Update README --- examples/async-data/README.md | 2 +- examples/vuex-store/README.md | 6 +++++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/examples/async-data/README.md b/examples/async-data/README.md index 62a4db2db2..a28eee32c5 100644 --- a/examples/async-data/README.md +++ b/examples/async-data/README.md @@ -1,6 +1,6 @@ # Async data with Nuxt.js -## data(context) +## data (context) > Nuxt.js *supercharges* the `data` method from vue.js to let you handle async operation before setting the real component data. diff --git a/examples/vuex-store/README.md b/examples/vuex-store/README.md index 14144a331a..4b68b5dfee 100644 --- a/examples/vuex-store/README.md +++ b/examples/vuex-store/README.md @@ -50,7 +50,7 @@ You're ready to use `this.$store` inside your `.vue` files :) ``` -## fetch(context) +## fetch (context) > Used to fill the store before rendering the page @@ -69,3 +69,7 @@ export default { } } ``` + +## Context + +To see the list of available keys in `context`, take a look at [this documentation](https://github.com/Atinux/nuxt.js/tree/master/examples/async-data#context). From 876054ed48764ef11278c27d1884d94c3153b05d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= Date: Tue, 8 Nov 2016 01:18:26 +0100 Subject: [PATCH 3/3] remove harmony-proxies --- bin/nuxt | 2 +- bin/nuxt-init | 2 +- bin/nuxt-start | 2 +- package.json | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/bin/nuxt b/bin/nuxt index 276b42ba89..df3cb08691 100755 --- a/bin/nuxt +++ b/bin/nuxt @@ -1,4 +1,4 @@ -#!/usr/bin/env node --harmony_proxies +#!/usr/bin/env node const { join } = require('path') const { spawn } = require('cross-spawn') diff --git a/bin/nuxt-init b/bin/nuxt-init index d48a255d76..02b9f56043 100755 --- a/bin/nuxt-init +++ b/bin/nuxt-init @@ -1,4 +1,4 @@ -#!/usr/bin/env node --harmony_proxies +#!/usr/bin/env node const co = require('co') const mkdirp = require('mkdirp-then') diff --git a/bin/nuxt-start b/bin/nuxt-start index 1b60554bbc..5f4faa4ffe 100755 --- a/bin/nuxt-start +++ b/bin/nuxt-start @@ -1,4 +1,4 @@ -#!/usr/bin/env node --harmony_proxies +#!/usr/bin/env node const http = require('http') const co = require('co') diff --git a/package.json b/package.json index 3a5d48cc27..1c8a3f35a5 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "nuxt", - "version": "0.2.0", + "version": "0.2.1", "description": "A minimalistic framework for server-rendered Vue.js applications (inspired by Next.js)", "main": "index.js", "license": "MIT",