mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-23 06:05:11 +00:00
Merge remote-tracking branch 'Atinux/master'
This commit is contained in:
commit
a99d1f60b3
2
.npmignore
Normal file
2
.npmignore
Normal file
@ -0,0 +1,2 @@
|
||||
# Excludes examples
|
||||
examples
|
2
bin/nuxt
2
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')
|
||||
|
@ -1,4 +1,4 @@
|
||||
#!/usr/bin/env node --harmony_proxies
|
||||
#!/usr/bin/env node
|
||||
|
||||
const co = require('co')
|
||||
const mkdirp = require('mkdirp-then')
|
||||
|
@ -1,4 +1,4 @@
|
||||
#!/usr/bin/env node --harmony_proxies
|
||||
#!/usr/bin/env node
|
||||
|
||||
const http = require('http')
|
||||
const co = require('co')
|
||||
|
@ -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.
|
||||
|
||||
@ -28,6 +28,21 @@ And then, you can display the data inside your template:
|
||||
</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
|
||||
|
44
examples/custom-routes/README.md
Normal file
44
examples/custom-routes/README.md
Normal file
@ -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 `<router-link>`, 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.
|
@ -50,7 +50,7 @@ You're ready to use `this.$store` inside your `.vue` files :)
|
||||
</template>
|
||||
```
|
||||
|
||||
## 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).
|
||||
|
@ -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 ? '' : ',') %>
|
||||
<% }) %>
|
||||
]
|
||||
|
@ -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",
|
||||
|
Loading…
Reference in New Issue
Block a user