From d8036776de4f3ad2e11a25f8c1224b6477e6da23 Mon Sep 17 00:00:00 2001 From: Grigoriy Beziuk Date: Sun, 8 Jan 2017 09:05:21 +0300 Subject: [PATCH 01/56] ru initialized as a copy of en --- ru/api/configuration-build.md | 34 +++ ru/api/configuration-cache.md | 7 + ru/api/configuration-css.md | 32 +++ ru/api/configuration-env.md | 7 + ru/api/configuration-generate.md | 7 + ru/api/configuration-head.md | 7 + ru/api/configuration-loading.md | 7 + ru/api/configuration-plugins.md | 7 + ru/api/configuration-router.md | 7 + ru/api/index.md | 27 +++ ru/api/menu.json | 31 +++ ru/api/nuxt-render-and-get-window.md | 7 + ru/api/nuxt-render-route.md | 7 + ru/api/nuxt-render.md | 24 ++ ru/api/pages-context.md | 23 ++ ru/examples/async-datas.md | 102 ++++++++ ru/examples/auth-routes.md | 210 +++++++++++++++++ ru/examples/cached-components.md | 27 +++ ru/examples/custom-loading.md | 103 ++++++++ ru/examples/custom-routes.md | 44 ++++ ru/examples/global-css.md | 42 ++++ ru/examples/hello-world.md | 12 + ru/examples/layouts.md | 9 + ru/examples/menu.json | 30 +++ ru/examples/plugins.md | 73 ++++++ ru/examples/routes-transitions.md | 111 +++++++++ ru/examples/seo-html-head.md | 82 +++++++ ru/examples/testing.md | 26 +++ ru/examples/vuex-store.md | 89 +++++++ ru/guide/assets.md | 78 +++++++ ru/guide/async-data.md | 114 +++++++++ ru/guide/basic-routes.md | 40 ++++ ru/guide/commands.md | 108 +++++++++ ru/guide/configuration.md | 60 +++++ ru/guide/contribution-guide.md | 19 ++ ru/guide/custom-loading.md | 99 ++++++++ ru/guide/directory-structure.md | 88 +++++++ ru/guide/dynamic-routes.md | 60 +++++ ru/guide/eslint.md | 8 + ru/guide/html-head.md | 94 ++++++++ ru/guide/index.md | 97 ++++++++ ru/guide/installation.md | 92 ++++++++ ru/guide/layouts.md | 71 ++++++ ru/guide/menu.json | 337 +++++++++++++++++++++++++++ ru/guide/nested-routes.md | 134 +++++++++++ ru/guide/pages.md | 115 +++++++++ ru/guide/plugins.md | 98 ++++++++ ru/guide/routes-middleware.md | 6 + ru/guide/routes-transitions.md | 149 ++++++++++++ ru/guide/static.md | 22 ++ ru/guide/unit-testing.md | 107 +++++++++ ru/guide/vuex-store.md | 193 +++++++++++++++ ru/lang.json | 32 +++ 53 files changed, 3415 insertions(+) create mode 100644 ru/api/configuration-build.md create mode 100644 ru/api/configuration-cache.md create mode 100644 ru/api/configuration-css.md create mode 100644 ru/api/configuration-env.md create mode 100644 ru/api/configuration-generate.md create mode 100644 ru/api/configuration-head.md create mode 100644 ru/api/configuration-loading.md create mode 100644 ru/api/configuration-plugins.md create mode 100644 ru/api/configuration-router.md create mode 100644 ru/api/index.md create mode 100644 ru/api/menu.json create mode 100644 ru/api/nuxt-render-and-get-window.md create mode 100644 ru/api/nuxt-render-route.md create mode 100644 ru/api/nuxt-render.md create mode 100644 ru/api/pages-context.md create mode 100644 ru/examples/async-datas.md create mode 100644 ru/examples/auth-routes.md create mode 100644 ru/examples/cached-components.md create mode 100644 ru/examples/custom-loading.md create mode 100644 ru/examples/custom-routes.md create mode 100644 ru/examples/global-css.md create mode 100644 ru/examples/hello-world.md create mode 100644 ru/examples/layouts.md create mode 100644 ru/examples/menu.json create mode 100644 ru/examples/plugins.md create mode 100644 ru/examples/routes-transitions.md create mode 100644 ru/examples/seo-html-head.md create mode 100644 ru/examples/testing.md create mode 100644 ru/examples/vuex-store.md create mode 100644 ru/guide/assets.md create mode 100644 ru/guide/async-data.md create mode 100644 ru/guide/basic-routes.md create mode 100644 ru/guide/commands.md create mode 100644 ru/guide/configuration.md create mode 100644 ru/guide/contribution-guide.md create mode 100644 ru/guide/custom-loading.md create mode 100644 ru/guide/directory-structure.md create mode 100644 ru/guide/dynamic-routes.md create mode 100644 ru/guide/eslint.md create mode 100644 ru/guide/html-head.md create mode 100644 ru/guide/index.md create mode 100644 ru/guide/installation.md create mode 100644 ru/guide/layouts.md create mode 100644 ru/guide/menu.json create mode 100644 ru/guide/nested-routes.md create mode 100644 ru/guide/pages.md create mode 100644 ru/guide/plugins.md create mode 100644 ru/guide/routes-middleware.md create mode 100644 ru/guide/routes-transitions.md create mode 100644 ru/guide/static.md create mode 100644 ru/guide/unit-testing.md create mode 100644 ru/guide/vuex-store.md create mode 100644 ru/lang.json diff --git a/ru/api/configuration-build.md b/ru/api/configuration-build.md new file mode 100644 index 000000000..510fbfb0d --- /dev/null +++ b/ru/api/configuration-build.md @@ -0,0 +1,34 @@ +--- +title: Configuration BUILD +description: Nuxt.js lets you configure the webpack options for building for you web application as you want. +--- + +# Build + +> Nuxt.js lets you configure the webpack options for building for you web application as you want. + +## build.vendor + +> Nuxt.js lets you add modules inside the `vendor.bundle.js` file generated to reduce the size of the app bundle. It's really useful when using external modules (like `axios` for example) + +To add a module/file inside the vendor bundle, add the `build.vendor` key inside `nuxt.config.js`: + +```js +module.exports = { + build: { + vendor: ['axios'] + } +} +``` + +You can also give a path to a file, like a custom lib you created: +```js +module.exports = { + build: { + vendor: [ + 'axios', + '~plugins/my-lib.js' + ] + } +} +``` diff --git a/ru/api/configuration-cache.md b/ru/api/configuration-cache.md new file mode 100644 index 000000000..14e9a79a8 --- /dev/null +++ b/ru/api/configuration-cache.md @@ -0,0 +1,7 @@ +--- +title: Configuration CACHE +--- + +# Cache + +> Documentation is coming soon diff --git a/ru/api/configuration-css.md b/ru/api/configuration-css.md new file mode 100644 index 000000000..e9c98ec21 --- /dev/null +++ b/ru/api/configuration-css.md @@ -0,0 +1,32 @@ +--- +title: Configuration CSS +description: Nuxt.js lets you define the CSS files/modules/libraries you want to set globally (included in every pages). +--- + +# Css + +> Nuxt.js lets you define the CSS files/modules/libraries you want to set globally (included in every pages). + +- Type: `Array` + - `String | Object` + +If the item is an object, the properties are: +- src: `String` (path of the file) +- lang: `String` ([pre-processor used](/guide/pages#using-pre-processors)) + +In `nuxt.config.js`, add the CSS resources: + +```js +module.exports = { + css: [ + // Load a node.js module + 'hover.css/css/hover-min.css', + // node.js module but we specify the pre-processor + { src: 'bulma', lang: 'sass' }, + // Css file in the project + '~assets/css/main.css' + ] +} +``` + +

**In production**, all CSS will be minified and extracted in a file named `styles.css` and added in the `` of the page.

diff --git a/ru/api/configuration-env.md b/ru/api/configuration-env.md new file mode 100644 index 000000000..b99ef868c --- /dev/null +++ b/ru/api/configuration-env.md @@ -0,0 +1,7 @@ +--- +title: Configuration ENV +--- + +# Env + +> Documentation is coming soon diff --git a/ru/api/configuration-generate.md b/ru/api/configuration-generate.md new file mode 100644 index 000000000..bc27eeb70 --- /dev/null +++ b/ru/api/configuration-generate.md @@ -0,0 +1,7 @@ +--- +title: Configuration GENERATE +--- + +# Generate + +> Documentation is coming soon diff --git a/ru/api/configuration-head.md b/ru/api/configuration-head.md new file mode 100644 index 000000000..2b0ab4375 --- /dev/null +++ b/ru/api/configuration-head.md @@ -0,0 +1,7 @@ +--- +title: Configuration HEAD +--- + +# Head + +> Documentation is coming soon diff --git a/ru/api/configuration-loading.md b/ru/api/configuration-loading.md new file mode 100644 index 000000000..3f0cfcbc1 --- /dev/null +++ b/ru/api/configuration-loading.md @@ -0,0 +1,7 @@ +--- +title: Configuration LOADING +--- + +# Loading + +> Documentation is coming soon diff --git a/ru/api/configuration-plugins.md b/ru/api/configuration-plugins.md new file mode 100644 index 000000000..352a1c91b --- /dev/null +++ b/ru/api/configuration-plugins.md @@ -0,0 +1,7 @@ +--- +title: Configuration PLUGINS +--- + +# Plugins + +> Documentation is coming soon diff --git a/ru/api/configuration-router.md b/ru/api/configuration-router.md new file mode 100644 index 000000000..98b2cf0d2 --- /dev/null +++ b/ru/api/configuration-router.md @@ -0,0 +1,7 @@ +--- +title: Configuration ROUTER +--- + +# Router + +> Documentation is coming soon diff --git a/ru/api/index.md b/ru/api/index.md new file mode 100644 index 000000000..4b19a87c8 --- /dev/null +++ b/ru/api/index.md @@ -0,0 +1,27 @@ +--- +title: Nuxt.js Module +--- + +# Using Nuxt.js Programmaticaly + +You might want to use your own server with your middlewares and your API. That's why you can use Nuxt.js programmaticaly. +Nuxt.js is built on the top of ES2015, which makes the code more enjoyable and cleaner to read. It doesn't make use of any transpilers and depends upon Core V8 implemented features. For these reasons, Nuxt.js targets Node.js `4.0` or higher. + +You can require Nuxt.js like this: +```js +const Nuxt = require('nuxt') +``` + +### Nuxt(options) + +To see the list of options to give to Nuxt.js, see the configuration section. + +```js +const options = {} + +const nuxt = new Nuxt(options) +nuxt.build() +.then(() => { + // We can use nuxt.render(req, res) or nuxt.renderRoute(route, context) +}) +``` diff --git a/ru/api/menu.json b/ru/api/menu.json new file mode 100644 index 000000000..02519329b --- /dev/null +++ b/ru/api/menu.json @@ -0,0 +1,31 @@ +[ + { + "title": "Nuxt Module", + "links": [ + { "name": "Usage", "to": "" }, + { "name": "Render", "to": "/nuxt-render" }, + { "name": "RenderRoute", "to": "/nuxt-render-route" }, + { "name": "RenderAndGetWindow", "to": "/nuxt-render-and-get-window" } + ] + }, + { + "title": "Configuration", + "links": [ + { "name": "Build", "to": "/configuration-build" }, + { "name": "Cache", "to": "/configuration-cache" }, + { "name": "CSS", "to": "/configuration-css" }, + { "name": "Env", "to": "/configuration-env" }, + { "name": "Generate", "to": "/configuration-generate" }, + { "name": "Head", "to": "/configuration-head" }, + { "name": "Loading", "to": "/configuration-loading" }, + { "name": "Plugins", "to": "/configuration-plugins" }, + { "name": "Router", "to": "/configuration-router" } + ] + }, + { + "title": "Pages", + "links": [ + { "name": "Context", "to": "/pages-context" } + ] + } +] diff --git a/ru/api/nuxt-render-and-get-window.md b/ru/api/nuxt-render-and-get-window.md new file mode 100644 index 000000000..8e67bf5e5 --- /dev/null +++ b/ru/api/nuxt-render-and-get-window.md @@ -0,0 +1,7 @@ +--- +title: Nuxt.js Module +--- + +# nuxt.renderAndGetWindow() + +> Documentation is coming soon diff --git a/ru/api/nuxt-render-route.md b/ru/api/nuxt-render-route.md new file mode 100644 index 000000000..55d1f47c7 --- /dev/null +++ b/ru/api/nuxt-render-route.md @@ -0,0 +1,7 @@ +--- +title: Nuxt.js Module +--- + +# nuxt.renderRoute() + +> Documentation is coming soon diff --git a/ru/api/nuxt-render.md b/ru/api/nuxt-render.md new file mode 100644 index 000000000..741584ed6 --- /dev/null +++ b/ru/api/nuxt-render.md @@ -0,0 +1,24 @@ +--- +title: Nuxt.js Module +--- + +# nuxt.render(req, res) + +You can use Nuxt.js as a middleware with `nuxt.render` for you node.js server. + +Example with Express.js: +```js +const app = require('express')() +const Nuxt = require('nuxt') + +const nuxt = new Nuxt() +nuxt.build() +.then(() => { + // Render every route with Nuxt.js + app.use(nuxt.render) + // Server listening + app.listen(3000) +}) +``` + +

It's recommended to call **nuxt.render** at the end of your middlewares since it will handle the rendering of your web application and won't call next()

diff --git a/ru/api/pages-context.md b/ru/api/pages-context.md new file mode 100644 index 000000000..d7bb809dc --- /dev/null +++ b/ru/api/pages-context.md @@ -0,0 +1,23 @@ +--- +title: Pages Context +description: The context is an helpful object given to methods for abstracting the client/server difference. +--- + +# 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 | +| `isDev` | Boolean | Client & Server | Boolean to let you know if you're in dev mode, can be useful for caching some data in production | +| `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`** | +| `env` | Object | Client & Server | Environment variables set in `nuxt.config.js`, see [env api](/api/configuration-env) | +| `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. *Not available via `nuxt generate`*. | +| `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. *Not available via `nuxt generate`*. | +| `redirect` | Function | Client & Server | Use this method to redirect the user to another route, the status code is used on the server-side, default to 302. `redirect([status,] path [, query])` | +| `error` | Function | Client & Server | Use this method to show the error page: `error(params)`. The `params` should have the fields `statusCode` and `message`. | diff --git a/ru/examples/async-datas.md b/ru/examples/async-datas.md new file mode 100644 index 000000000..a703f0eee --- /dev/null +++ b/ru/examples/async-datas.md @@ -0,0 +1,102 @@ +--- +title: Async Datas +description: Async Datas example with Nuxt.js +github: async-data +--- + +## Documentation + +### data (context) + +> Nuxt.js *supercharges* the `data` method from vue.js to let you handle async operation before setting the component data. + +`data` is called every time before loading the component (*only if attached to a route*). It can be called from the server-side or before navigating to the corresponding route. + +The `data` method receives the context as the first argument, you can use it to fetch some data and return the component data. To make the data method asynchronous, Nuxt.js offers you 2 ways, choose the one you're the most familiar with: + +1. returning a `Promise`, Nuxt.js will wait for the promise to be resolved before rendering the Component +2. Define a second argument which is a callback method to be called like this: `callback(err, data)` + +Example with returning a `Promise`: +```js +export default { + data ({ params }) { + return axios.get(`https://my-api/posts/${params.id}`) + .then((res) => { + return { title: res.data.title } + }) + } +} +``` + +Example with using the `callback` argument: +```js +export default { + data ({ params }, callback) { + axios.get(`https://my-api/posts/${params.id}`) + .then((res) => { + callback(null, { title: res.data.title }) + }) + } +} +``` + +And then, you can display the data inside your template: + +```html + +``` + +### 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 | +| `isDev` | Boolean | Client & Server | Boolean to let you know if you're in dev mode, can be useful for caching some data in production | +| `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. | +| `redirect` | Function | Client & Server | Use this method to redirect the user to another route, the status code is used on the server-side, default to 302. `redirect([status,] path [, query])` | +| `error` | Function | Client & Server | Use this method to show the error page: `error(params)`. The `params` should have the fields `statusCode` and `message`. | + +### Handling errors + +Nuxt.js add the `error(params)` method in the `context`, you can call it to display the error page. `params.statusCode` will be also used to render the proper status code form the server-side. + +Example with a `Promise`: +```js +export default { + data ({ params, error }) { + return axios.get(`https://my-api/posts/${params.id}`) + .then((res) => { + return { title: res.data.title } + }) + .catch((e) => { + error({ statusCode: 404, message: 'Post not found' }) + }) + } +} +``` + +If you're using the `callback` argument, you can call it directly with the error, Nuxt.js will call the `error` method for you: +```js +export default { + data ({ params }, callback) { + axios.get(`https://my-api/posts/${params.id}`) + .then((res) => { + callback(null, { title: res.data.title }) + }) + .catch((e) => { + callback({ statusCode: 404, message: 'Post not found' }) + }) + } +} +``` diff --git a/ru/examples/auth-routes.md b/ru/examples/auth-routes.md new file mode 100644 index 000000000..799a468ec --- /dev/null +++ b/ru/examples/auth-routes.md @@ -0,0 +1,210 @@ +--- +title: Auth Routes +description: Authenticated routes example with Nuxt.js +github: auth-routes +livedemo: https://auth-routes.nuxtjs.org +liveedit: https://gomix.com/#!/project/nuxt-auth-routes +--- + +# Documentation + +> Nuxt.js can be used to create authenticated routes easily. + +## Using Express and Sessions + +To add the sessions feature in our application, we will use `express` and `express-session`, for this, we need to use Nuxt.js programmatically. + +First, we install the depedencies: +```bash +yarn add express express-session body-parser whatwg-fetch +``` + +*We will talk about `whatwg-fetch` later.* + +Then we create our `server.js`: +```js +const Nuxt = require('nuxt') +const bodyParser = require('body-parser') +const session = require('express-session') +const app = require('express')() + +// Body parser, to access req.body +app.use(bodyParser.json()) + +// Sessions to create req.session +app.use(session({ + secret: 'super-secret-key', + resave: false, + saveUninitialized: false, + cookie: { maxAge: 60000 } +})) + +// POST /api/login to log in the user and add him to the req.session.authUser +app.post('/api/login', function (req, res) { + if (req.body.username === 'demo' && req.body.password === 'demo') { + req.session.authUser = { username: 'demo' } + return res.json({ username: 'demo' }) + } + res.status(401).json({ error: 'Bad credentials' }) +}) + +// POST /api/logout to log out the user and remove it from the req.session +app.post('/api/logout', function (req, res) { + delete req.session.authUser + res.json({ ok: true }) +}) + +// We instantiate Nuxt.js with the options +const isProd = process.env.NODE_ENV === 'production' +const nuxt = new Nuxt({ dev: !isProd }) +// No build in production +const promise = (isProd ? Promise.resolve() : nuxt.build()) +promise.then(() => { + app.use(nuxt.render) + app.listen(3000) + console.log('Server is listening on http://localhost:3000') +}) +.catch((error) => { + console.error(error) + process.exit(1) +}) +``` + +And we update our `package.json` scripts: +```json +// ... +"scripts": { + "dev": "node server.js", + "build": "nuxt build", + "start": "NODE_ENV=production node server.js" +} +// ... +``` + +## Using the store + +We need a global state to let our application if the user is connected **across the pages**. + +To let Nuxt.js use Vuex, we create a `store/index.js` file: + +```js +import Vue from 'vue' +import Vuex from 'vuex' + +Vue.use(Vuex) + +// Polyfill for window.fetch() +require('whatwg-fetch') + +const store = new Vuex.Store({ + + state: { + authUser: null + }, + + mutations: { + SET_USER: function (state, user) { + state.authUser = user + } + }, + + actions: { + // ... + } + +}) + +export default store +``` + +1. We import `Vue` and `Vuex` (included in Nuxt.js) and we tell Vue to use Vuex to let us use `$store` in our components +2. We `require('whatwg-fetch')` to polyfill the `fetch()` method across all browsers (see [fetch repo](https://github.com/github/fetch)) +3. We create our `SET_USER` mutation which will set the `state.authUser` to the conntected user +4. We export our store instance to Nuxt.js can inject it to our main application + +### nuxtServerInit() action + +Nuxt.js will call a specific action called `nuxtServerInit` with the context in argument, so when the app will be loaded, the store will be already filled with some data we can get from the server. + +In our `store/index.js`, we can add the `nuxtServerInit` action: +```js +nuxtServerInit ({ commit }, { req }) { + if (req.session && req.session.authUser) { + commit('SET_USER', req.session.authUser) + } +} +``` + +### login() action + +We add a `login` action which will be called from our pages component to log in the user: +```js +login ({ commit }, { username, password }) { + return fetch('/api/login', { + // Send the client cookies to the server + credentials: 'same-origin', + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ + username, + password + }) + }) + .then((res) => { + if (res.status === 401) { + throw new Error('Bad credentials') + } else { + return res.json() + } + }) + .then((authUser) => { + commit('SET_USER', authUser) + }) +} +``` + +### logout() method + +```js +logout ({ commit }) { + return fetch('/api/logout', { + // Send the client cookies to the server + credentials: 'same-origin', + method: 'POST' + }) + .then(() => { + commit('SET_USER', null) + }) +} +``` + +## Pages components + +Then we can use `$store.state.authUser` in our pages components to check if the user is connected in our application or not. + +### Redirect user if not connected + +Let's add a `/secret` route where only the connected user can see its content: +```html + + + +``` + +We can see in the `fetch` method that we call `redirect('/')` when our user is not connected. diff --git a/ru/examples/cached-components.md b/ru/examples/cached-components.md new file mode 100644 index 000000000..4babc0685 --- /dev/null +++ b/ru/examples/cached-components.md @@ -0,0 +1,27 @@ +--- +title: Cached Components +description: Cached Components example with Nuxt.js +github: cached-components +--- + +## Documentation + +> Nuxt.js use [lru-cache](https://github.com/isaacs/node-lru-cache) to allows cached components for better render performances + +### Usage + +Use the `cache` key in your `nuxt.config.js`: +```js +module.exports = { + cache: true +} +``` + +`cache` can be a Boolean of an Object, if an object, you can use theses keys: + +| key | Optional? | Type | Default | definition | +|------|------------|-----|---------|------------| +| `max` | Optional | Integer | 1000 | The maximum size of the cached components, when the 1001 is added, the first one added will be removed from the cache to let space for the new one. | +| `maxAge` | Optional | Integer | 900000 | Maximum age in ms, default to 15 minutes. | + +Other options: https://github.com/isaacs/node-lru-cache#options diff --git a/ru/examples/custom-loading.md b/ru/examples/custom-loading.md new file mode 100644 index 000000000..5d65d17e9 --- /dev/null +++ b/ru/examples/custom-loading.md @@ -0,0 +1,103 @@ +--- +title: Custom Loading Component +description: Custom Loading Component example with Nuxt.js +github: custom-loading +--- + +## Documentation + +> Nuxt.js uses it's own component to show a progress bar between the routes. You can customize it, disable it or create your own component. + +### Disable Nuxt.js progress bar + +If you don't want to display the progress bar between the routes, just add `loading: false` in your `nuxt.config.js` file: +```js +// nuxt.config.js +module.exports = { + loading: false +} +``` + +### Customize Nuxt.js progress bar + +Here are the properties you can customize for Nuxt.js progress bar. + +| Key | Type | Default | Description | +|-----|------|---------|-------------| +| `color` | String | `'black'` | CSS color of the progress bar | +| `failedColor` | String | `'red'` | CSS color of the progress bar when an error appended during rendering the route (if `data` or `fetch` sent back an error for example). | +| `height` | String | `'2px'` | Height of the progress bar (used in the `style` property of the progress bar) | +| `duration` | Number | `5000` | In ms, the maximum duration of the progress bar, Nuxt.js assumes that the route will be rendered before 5 seconds. | + +Example: +```js +// nuxt.config.js +module.exports = { + loading: { + color: 'blue', + height: '5px' + } +} +``` + +### Create a custom loading component + +You can create your own component that Nuxt.js will call instead of its default component. To do so, you need to give a path to your component in the `loading` option. + +Your custom component will be called by Nuxt.js, so make sure your component exposes some of theses methods: + +| Method | Required | Description | +|--------|-------------| +| `start()` | Required | Called when a route changes, this is here where you should show your component. | +| `finish()` | Required | Called when a route is loaded (and data fetched), this is here where you should hide your component. | +| `fail()` | *Optional* | Called when a route could not be loaded (failed to fetch data for example). | +| `increase(num)` | *Optional* | Called during loading the route component, `num` is an Integer < 100. | + + +Example: +```js +// nuxt.config.js +module.exports = { + loading: 'components/loading.vue' +} +``` + +And then, in `components/loading.vue`: +```html + + + + + +``` diff --git a/ru/examples/custom-routes.md b/ru/examples/custom-routes.md new file mode 100644 index 000000000..fc1f53eb7 --- /dev/null +++ b/ru/examples/custom-routes.md @@ -0,0 +1,44 @@ +--- +title: Custom Routes +description: Custom Routes example with Nuxt.js +github: custom-routes +livedemo: https://custom-routes.nuxtjs.org +--- + +## Documentation + +> 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 = { + router: { + 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' } +// ... +``` diff --git a/ru/examples/global-css.md b/ru/examples/global-css.md new file mode 100644 index 000000000..77582e930 --- /dev/null +++ b/ru/examples/global-css.md @@ -0,0 +1,42 @@ +--- +title: Global CSS +description: Global CSS example with Nuxt.js +github: global-css +--- + +## Documentation + +> Nuxt.js let you define the CSS files/modules/libraries you want to set as globals (included in every pages). + +### Usage + +In `nuxt.config.js` file, add the CSS resources: + +```js +const { resolve } = require('path') + +module.exports = { + css: [ + // Load a node.js module + 'hover.css/css/hover-min.css', + // node.js module but we specify the lang + { src: 'bulma', lang: 'sass' }, + // Css file in the project + // It is important to give an absolute path + resolve(__dirname, 'css/main.css') + ] +} +``` + +### Production + +In production, they will be minified and extracted in a file named `styles.css` and added in the `` of the page. + +To launch the demo in production mode so you can see the `` populated with the `` tag: + +```bash +npm run build +npm start +``` + +Go to [http://localhost:3000](http://localhost:3000) and check the source code. diff --git a/ru/examples/hello-world.md b/ru/examples/hello-world.md new file mode 100644 index 000000000..d32fb20e5 --- /dev/null +++ b/ru/examples/hello-world.md @@ -0,0 +1,12 @@ +--- +title: Hello World +description: Hello World example with Nuxt.js +github: hello-world +youtube: https://www.youtube.com/embed/kmf-p-pTi40 +livedemo: https://hello-world.nuxtjs.org +liveedit: https://gomix.com/#!/project/nuxt-hello-world +--- + +## Documentation + +> Documentation is coming soon diff --git a/ru/examples/layouts.md b/ru/examples/layouts.md new file mode 100644 index 000000000..7f97ed47d --- /dev/null +++ b/ru/examples/layouts.md @@ -0,0 +1,9 @@ +--- +title: Layouts +description: Layouts example with Nuxt.js +github: custom-layouts +livedemo: https://nuxt-custom-layouts.gomix.me/ +liveedit: https://gomix.com/#!/project/nuxt-custom-layouts +--- + +[Layouts documentation](/guide/layouts) diff --git a/ru/examples/menu.json b/ru/examples/menu.json new file mode 100644 index 000000000..fa28ecfb2 --- /dev/null +++ b/ru/examples/menu.json @@ -0,0 +1,30 @@ +[ + { + "title": "Essentials", + "links": [ + { "name": "Hello world", "to": "" }, + { "name": "SEO HTML Head", "to": "/seo-html-head" } + ] + }, + { + "title": "Customization", + "links": [ + { "name": "Cached Components", "to": "/cached-components" }, + { "name": "Custom Loading", "to": "/custom-loading" }, + { "name": "Custom Routes", "to": "/custom-routes" }, + { "name": "Global CSS", "to": "/global-css" }, + { "name": "Layouts", "to": "/layouts" }, + { "name": "Plugins", "to": "/plugins" }, + { "name": "Routes transitions", "to": "/routes-transitions" } + ] + }, + { + "title": "Advanced", + "links": [ + { "name": "Async Datas", "to": "/async-datas" }, + { "name": "Auth Routes", "to": "/auth-routes" }, + { "name": "Vuex Store", "to": "/vuex-store" }, + { "name": "Testing", "to": "/testing" } + ] + } +] diff --git a/ru/examples/plugins.md b/ru/examples/plugins.md new file mode 100644 index 000000000..953403598 --- /dev/null +++ b/ru/examples/plugins.md @@ -0,0 +1,73 @@ +--- +title: Plugins +description: Using external modules and plugins with nuxt.js +github: plugins-vendor +--- + +## Documentation + +### Configuration: `build.vendor` + +> Nuxt.js allows you to add modules inside the `vendor.bundle.js` file generated to reduce the size of the app bundle. It's really useful when using external modules (like `axios` for example) + +To add a module/file inside the vendor bundle, add the `build.vendor` key inside `nuxt.config.js`: +```js +const { join } = require('path') + +module.exports = { + build: { + vendor: [ + 'axios', // node module + join(__dirname, './js/my-library.js') // custom file + ] + } +} +``` + +### Configuration: `plugins` + +> Nuxt.js allows you to define js plugins to be ran before instantiating the root vue.js application + +I want to use [vue-notifications](https://github.com/se-panfilov/vue-notifications) to validate the data in my inputs, I need to setup the plugin before launching the app. + +File `plugins/vue-notifications.js`: +```js +import Vue from 'vue' +import VueNotifications from 'vue-notifications' + +Vue.use(VueNotifications) +``` + +Then, I add my file inside the `plugins` key of `nuxt.config.js`: +```js +const { join } = require('path') + +module.exports = { + build: { + vendor: ['vue-notifications'] + }, + plugins: [ '~plugins/vue-notifications') ] +} +``` + +I use `~plugins` here because nuxt.js create an alias for the `plugins/` folder, it's equivalent to: `join(__dirname, './plugins/vue-notifications.js')` + +I added `vue-notifications` in the `vendor` key to make sure that it won't be included in any other build if I call `require('vue-notifications')` in a component. + +#### Only in browser build + +Some plugins might work only in the browser, for this, you can use the `process.BROWSER_BUILD` variable to check if the plugin will run from the server or from the client. + +Example: +```js +import Vue from 'vue' +import VueNotifications from 'vue-notifications' + +if (process.BROWSER_BUILD) { + Vue.use(VueNotifications) +} +``` + +#### Only in server build + +In case you need to require some libraries only for the server, you can use the `process.SERVER_BUILD` variable set to `true` when webpack is creating the `server.bundle.js` file. diff --git a/ru/examples/routes-transitions.md b/ru/examples/routes-transitions.md new file mode 100644 index 000000000..ad9877aba --- /dev/null +++ b/ru/examples/routes-transitions.md @@ -0,0 +1,111 @@ +--- +title: Routes transitions +description: Routes transitions example with Nuxt.js +github: routes-transitions +youtube: https://www.youtube.com/embed/RIXOzJWFfc8 +--- + +## Documentation + +> Nuxt.js uses the [``](http://vuejs.org/v2/guide/transitions.html#Transitioning-Single-Elements-Components) component to allow you to create amazing transitions between your routes. + +### Usage + +The default transition name Nuxt.js uses is `page`. + +To add a fade transition to every page of your application, we need a CSS file that is shared across all our routes, so we start by creating a file in the `assets/` folder. + +`assets/main.css`: +```css +.page-enter-active, .page-leave-active { + transition: opacity .5s +} +.page-enter, .page-leave-active { + opacity: 0 +} +``` + +We add it in our `nuxt.config.js` file: +```js +module.exports = { + css: [ + 'assets/main.css' + ] +} +``` + +And voilà! A nice fade animation will be shown between every routes. + +### The `transition` key + +You can update the defaults transition settings by adding the `transition` key in you `nuxt.config.js` file. + +```js +module.exports = { + transition: 'test' + // or + transition: { + name: 'test', + mode: 'out-in' + } +} +``` + +Nuxt.js will use these settings to set the component as follows: +```html + +``` + +To learn more about the Vue.js `` component: http://vuejs.org/v2/guide/transitions.html + +The following properties that the `transition` key can have: + +| key | Default | definition | +|------|------------|-----------| +| `name` | `page` | The transition name applied on all the routes transitions. | +| `mode` | `out-in` | The transition mode applied on all routes, see [Vue.js documentation](http://vuejs.org/v2/guide/transitions.html#Transition-Modes). | + +*Note: if the `transition` key is set as a string, it will be used as the `transition.name`.* + +### Custom transition on a specific route + +To define a custom transition for a specific route, simply add the `transition` key to the page component: + +`pages/about.vue`: +```html + + + +``` + +And then we add the CSS animation for this custom transition: +```css +/* assets/main.css */ +.bounce-enter-active { + animation: bounce-in .8s; +} +.bounce-leave-active { + animation: bounce-out .5s; +} +@keyframes bounce-in { + 0% { transform: scale(0) } + 50% { transform: scale(1.5) } + 100% { transform: scale(1) } +} +@keyframes bounce-out { + 0% { transform: scale(1) } + 50% { transform: scale(1.5) } + 100% { transform: scale(0) } +} +``` + +*Note: you can also the set `transition` key as an object in page components* diff --git a/ru/examples/seo-html-head.md b/ru/examples/seo-html-head.md new file mode 100644 index 000000000..2737259c6 --- /dev/null +++ b/ru/examples/seo-html-head.md @@ -0,0 +1,82 @@ +--- +title: SEO HTML Head +description: SEO HTML Head example with Nuxt.js +github: head-elements +--- + +## Documentation + +Nuxt.js uses [`vue-meta`](https://github.com/declandewet/vue-meta) to update the `headers` and `html attributes` of your applications. + +Nuxt.js configures `vue-meta` with these options: +```js +{ + keyName: 'head', // the component option name that vue-meta looks for meta info on. + attribute: 'n-head', // the attribute name vue-meta adds to the tags it observes + ssrAttribute: 'n-head-ssr', // the attribute name that lets vue-meta know that meta info has already been server-rendered + tagIDKeyName: 'hid' // the property name that vue-meta uses to determine whether to overwrite or append a tag +} +``` + +### Updating the title + +To update the title of the page, just add `head.title` in your page component. + +`pages/index.vue` +```html + + + +``` + +### Meta tags and more + +To know the list of options you can give to `head`, take a look at [`vue-meta` documentation](https://github.com/declandewet/vue-meta#recognized-metainfo-properties). + +### Using `data` values inside `head` + +You might want to use the component data to display different headers, like a post title for example. Just use `head` as a function and you can use `this` inside to access your component data. + +Example of displaying the post title: +```html + +``` + +### Defaults metas + +Nuxt.js let you define all the defaults metas for your application inside the `nuxt.config.js`, use the same field `head`: +```js +module.exports = { + head: { + titleTemplate: '%s - Nuxt.js', + meta: [ + { charset: 'utf-8' }, + { name: 'viewport', content: 'width=device-width, initial-scale=1' }, + { hid: 'description', name: 'description', content: 'Meta description' } + ] + } +} +``` diff --git a/ru/examples/testing.md b/ru/examples/testing.md new file mode 100644 index 000000000..e9cf8757f --- /dev/null +++ b/ru/examples/testing.md @@ -0,0 +1,26 @@ +--- +title: Testing +description: Testing example with Nuxt.js +github: with-ava +--- + +## Documentation + +[`ava`](https://github.com/avajs/ava) is a powerful JavaScript testing framework, mixed with [`jsdom`](https://github.com/tmpvar/jsdom), we can use them to do end-to-end testing easily for `nuxt` applications. + +```bash +npm install --save-dev ava jsdom +``` + +Add test script to the `package.json` + +__package.json__ + +```javascript +// ... +"scripts": { + "test": "ava", +} +// ... + +``` diff --git a/ru/examples/vuex-store.md b/ru/examples/vuex-store.md new file mode 100644 index 000000000..49445cc9f --- /dev/null +++ b/ru/examples/vuex-store.md @@ -0,0 +1,89 @@ +--- +title: Vuex Store +description: Vuex Store example with Nuxt.js +github: vuex-store +--- + +## Documentation + +> Using a store to manage the state is important to every big application, that's why nuxt.js implement Vuex in its core. + +### Activating the store + +Nuxt.js will try to `require('./store/index.js')`, if exists, it will import `Vuex`, add it to the vendors and add the `store` option to the root `Vue` instance. + +### Create the store folder + +Let's create a file `store/index.js`: + +```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 +``` + +> We don't need to install `Vuex` since it's shipped with nuxt.js + +### Voilà ! + +We can now use `this.$store` inside our `.vue` files. + +```html + +``` + +### fetch (context) + +> Used to fill the store before rendering the page + +The `fetch` method, *if set*, is called every time before loading the component (*only if attached to a route*). It can be called from the server-side or before navigating to the corresponding route. + +The `fetch` method receives the context as the first argument, we can use it to fetch some data and fill the store. To make the fetch method asynchronous, **return a Promise**, nuxt.js will wait for the promise to be resolved before rendering the Component. + +For example: +```js +export default { + fetch ({ store, params }) { + return axios.get('http://my-url') + .then((res) => { + store.commit('setUser', res.data) + }) + } +} +``` + +### Context + +To see the list of available keys in `context`, take a look at [this example](examples/async-datas). + +### Action `nuxtServerInit` + +If we define the action `nuxtServerInit` in our store, Nuxt.js will call it with the context. It can be useful when having some data on the server we want to give directly to the client-side, for example, the authenticated user: +```js +// store/index.js +actions: { + nuxtServerInit ({ commit }, { req }) { + if (req.authUser) { + commit('user', req.authUser) + } + } +} +``` + +The context given to `nuxtServerInit` is the same as the `data` of `fetch` method except `context.redirect()` and `context.error()` are omitted. diff --git a/ru/guide/assets.md b/ru/guide/assets.md new file mode 100644 index 000000000..7510783e7 --- /dev/null +++ b/ru/guide/assets.md @@ -0,0 +1,78 @@ +--- +title: Assets +description: Nuxt uses vue-loader, file-loader and url-loader for Webpack by default for strong assets serving. +--- + +> Nuxt uses Webpack file-loader and url-loader by default for strong assets serving. + +By default, [vue-loader](http://vue-loader.vuejs.org/en/) automatically processes your style and template files with `css-loader` and the Vue template compiler. In this compilation process, all asset URLs such as ``, `background: url(...)` and CSS `@import` are resolved as module dependencies. + +For example, we have this file tree: + +```bash +-| assets/ +----| image.png +-| pages/ +----| index.vue +``` + +In my CSS, if I use `url('~assets/image.png')`, it will be translated into `require('~assets/image.png')`. + +Or if in my `pages/index.vue`, I use: +```html + +``` + +It will be compiled into: + +```js +createElement('img', { attrs: { src: require('~assets/image.png') }}) +``` + +Because `.png` is not a JavaScript file, nuxt.js configures Webpack to use [file-loader](https://github.com/webpack/file-loader) and [url-loader](https://github.com/webpack/url-loader) to handle them for you. + +The benefits of them are: +- `file-loader` lets you designate where to copy and place the asset file, and how to name it using version hashes for better caching. +- `url-loader` allows you to conditionally inline a file as base-64 data URL if they are smaller than a given threshold. This can reduce the amount of HTTP requests for trivial files. If the file is larger than the threshold, it automatically falls back to `file-loader`. + +Actually, Nuxt.js default loaders configuration is: + +```js +[ + { + test: /\.(png|jpe?g|gif|svg)$/, + loader: 'url-loader', + query: { + limit: 1000, // 1KO + name: 'img/[name].[hash:7].[ext]' + } + }, + { + test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, + loader: 'url-loader', + query: { + limit: 1000, // 1 KO + name: 'fonts/[name].[hash:7].[ext]' + } + } +] +``` + +Which means that every file below 1 KO will be inlined as base-64 data URL. Otherwise, the image/font will be copied in its corresponding folder (under the `.nuxt` directory) with a name containing a version hashes for better caching. + +When launching our application with `nuxt`, our template in `pages/index.vue`: + +```html + +``` + +Will be generated into: +```html + +``` + +If you want to update these loaders or disable them, please take a look at the [loaders configuration](/api/configuration-build). diff --git a/ru/guide/async-data.md b/ru/guide/async-data.md new file mode 100644 index 000000000..1ed07997e --- /dev/null +++ b/ru/guide/async-data.md @@ -0,0 +1,114 @@ +--- +title: Async Data +description: Nuxt.js supercharges the data method from vue.js to let you handle async operation before setting the component data. +--- + +> Nuxt.js *supercharges* the `data` method from vue.js to let you handle async operation before setting the component data. + +## The data Method + +`data` is called every time before loading the component (**only for pages components**). It can be called from the server-side or before navigating to the corresponding route. This method receives [the context](/api/pages-context) as the first argument, you can use it to fetch some data and return the component data. + +
You do **NOT** have access of the component instance trough `this` inside `data` because it is called **before initiating** the component.
+ +To make the data method asynchronous, nuxt.js offers you different ways, choose the one you're the most familiar with: + +1. returning a `Promise`, nuxt.js will wait for the promise to be resolved before rendering the component. +2. Using the [async/await proposal](https://github.com/lukehoban/ecmascript-asyncawait) ([learn more about it](https://zeit.co/blog/async-and-await)) +3. Define a callback as second argument. It has to be called like this: `callback(err, data)` + +### Returning a Promise +```js +export default { + data ({ params }) { + return axios.get(`https://my-api/posts/${params.id}`) + .then((res) => { + return { title: res.data.title } + }) + } +} +``` + +### Using async/await +```js +export default { + async data ({ params }) { + let { data } = await axios.get(`https://my-api/posts/${params.id}`) + return { title: data.title } + } +} +``` + +### Using a callback +```js +export default { + data ({ params }, callback) { + axios.get(`https://my-api/posts/${params.id}`) + .then((res) => { + callback(null, { title: res.data.title }) + }) + } +} +``` + +### Returning an Object + +If you don't need to do any asynchronous call, you can simply return an object: + +```js +export default { + data (context) { + return { foo: 'bar' } + } +} +``` + +### Displaying the data + +When the data method set, you can display the data inside your template like you used to do: + +```html + +``` + +## The Context + +To see the list of available keys in `context`, take a look at the [pages context api](/api/pages-context). + +## Handling Errors + +Nuxt.js add the `error(params)` method in the `context`, you can call it to display the error page. `params.statusCode` will be also used to render the proper status code form the server-side. + +Example with a `Promise`: +```js +export default { + data ({ params, error }) { + return axios.get(`https://my-api/posts/${params.id}`) + .then((res) => { + return { title: res.data.title } + }) + .catch((e) => { + error({ statusCode: 404, message: 'Post not found' }) + }) + } +} +``` + +If you're using the `callback` argument, you can call it directly with the error, nuxt.js will call the `error` method for you: +```js +export default { + data ({ params }, callback) { + axios.get(`https://my-api/posts/${params.id}`) + .then((res) => { + callback(null, { title: res.data.title }) + }) + .catch((e) => { + callback({ statusCode: 404, message: 'Post not found' }) + }) + } +} +``` + +To customize the error page, take a look at the [layout section](/guide/layouts#error-page). diff --git a/ru/guide/basic-routes.md b/ru/guide/basic-routes.md new file mode 100644 index 000000000..d83fd8d1c --- /dev/null +++ b/ru/guide/basic-routes.md @@ -0,0 +1,40 @@ +--- +title: Basic Routes +description: Nuxt.js use the file-system to generate the routes of your web applications, it's as simple as PHP to create routes. +--- + +Nuxt.js generates automatically the [vue-router](https://github.com/vuejs/vue-router) configuration according to your file tree of Vue files inside the `pages` directory. + +This file tree: + +```bash +pages/ +--| team/ +-----| index.vue +-----| about.vue +--| index.vue +``` + +will automatically generate: + +```js +router: { + routes: [ + { + name: 'index', + path: '/', + component: 'pages/index.vue' + }, + { + name: 'team', + path: '/team', + component: 'pages/team/index.vue' + }, + { + name: 'team-about', + path: '/team/about', + component: 'pages/team/about.vue' + } + ] +} +``` diff --git a/ru/guide/commands.md b/ru/guide/commands.md new file mode 100644 index 000000000..2da8e5a18 --- /dev/null +++ b/ru/guide/commands.md @@ -0,0 +1,108 @@ +--- +title: Commands +description: Nuxt.js comes with a set of useful commands, both for development and production purpose. +--- + +> Nuxt.js comes with a set of useful commands, both for development and production purpose. + +## List of Commands + +| Command | Description | +|---------|-------------| +| nuxt | Launch a development server on [localhost:3000](http://localhost:3000) with hot-reloading. | +| nuxt build | Build your application with webpack and minify the JS & CSS (for production). | +| nuxt start | Start the server in production mode (`nuxt build` has to be ran before). | +| nuxt generate | Build the application and generate every route as a HTML file (used for static hosting). | + +You should put these commands in the `package.json`: + +```json +"scripts": { + "dev": "nuxt", + "build": "nuxt build", + "start": "nuxt start", + "generate" "nuxt generate" +} +``` + +Then, you can launch your commands via `npm run ` (example: `npm run dev`). + +## Production Deployment + +To deploy, instead of running nuxt, you probably want to build ahead of time. Therefore, building and starting are separate commands: + +```bash +nuxt build +nuxt start +``` + +For example, to deploy with [now.sh](https://zeit.co/now) a `package.json` like follows is recommended: +```json +{ + "name": "my-app", + "dependencies": { + "nuxt": "latest" + }, + "scripts": { + "dev": "nuxt", + "build": "nuxt build", + "start": "nuxt start" + } +} +``` + +Then run `now` and enjoy! + +Note: we recommend putting `.nuxt` in `.npmignore` or `.gitignore`. + +### Heroku Deployment + +We recommend you to read the [Heroku documentation for node.js](https://devcenter.heroku.com/articles/nodejs-support). + +First, we need to tell Heroku to install the `devDependencies` of the project (to be able to launch `npm run build`): +```bash +heroku config:set NPM_CONFIG_PRODUCTION=false +``` + +Then, we tell Heroku to launch `npm run build` via the `postinstall` script in our `package.json`: +```js +"scripts": { + "dev": "nuxt", + "postinstall": "nuxt build", + "start": "nuxt start", +} +``` + +Finally, we can push the app on Heroku with: +```bash +git push heroku master +``` + +## Static Hosting Deployment + +Nuxt.js gives you the possibility to host your web application on any static hosting like [surge.sh](https://surge.sh/) for example. + +To deploy on surge.sh, first install it on your computer: +```bash +npm install -g surge +``` + +Then, we tell nuxt.js to generate our web application: + +```bash +npm run generate +``` + +It will create a `dist` folder with everything inside ready to be deployed on a static hosting. + +We can then deploy it to surge.sh: + +```bash +surge dist/ +``` + +Voilà :) + +If you have a project with [dynamic routes](/guide/dynamic-routes), take a look at the [generate configuration](/api/configuration-generate) to tell nuxt.js how to generate these dynamic routes. + +
When generating your web application with `nuxt generate`, [the context](/api/pages-context) given to [data()](/guide/async-data#the-data-method) and [fetch()](/guide/vuex-store#the-fetch-method) will not have `req` and `res`.
diff --git a/ru/guide/configuration.md b/ru/guide/configuration.md new file mode 100644 index 000000000..18423e463 --- /dev/null +++ b/ru/guide/configuration.md @@ -0,0 +1,60 @@ +--- +title: Configuration +description: The Nuxt.js default configuration covers most of usages. However, the nuxt.config.js file lets you overwrite it. +--- + +> The Nuxt.js default configuration covers most of usages. However, the nuxt.config.js file lets you overwrite it. + +### build + +This option lets you add modules inside the vendor.bundle.js file generated to reduce the size of the app bundle. It's really useful when using external modules + +[Documentation about build integration](/api/configuration-build) + +### cache + +This option lets you enable cached components for better render performances. + +[Documentation about cache integration](/api/configuration-cache) + +### css + +This option lets you define the CSS files/modules/libraries you want to set as globals (included in every pages). + +[Documentation about css integration](/api/configuration-css) + +### env + +This option lets you define environment variables available both client and server side. + +[Documentation about env integration](/api/configuration-env) + +### generate + +This option lets you to define each params value for every dynamic routes in your application that Nuxt.js transforms into HTML files. + +[Documentation about generate integration](/api/configuration-generate) + +### head + +This option lets you to define all the defaults metas for your application. + +[Documentation about head integration](/api/configuration-head) + +### loading + +This option lets you to customize the loading component load by default with Nuxt.js. + +[Documentation about loading integration](/api/configuration-loading) + +### plugins + +This option lets you to define Javascript plugins to be ran before instantiating the root vue.js application. + +[Documentation about plugins integration](/api/configuration-plugins) + +### router + +This option lets you to overwrite the default Nuxt.js configuration of vue-router. + +[Documentation about router integration](/api/configuration-router) diff --git a/ru/guide/contribution-guide.md b/ru/guide/contribution-guide.md new file mode 100644 index 000000000..556b9f490 --- /dev/null +++ b/ru/guide/contribution-guide.md @@ -0,0 +1,19 @@ +--- +title: Contribution Guide +description: Any contribution to Nuxt.js is more than welcome! +--- + +> Any contribution to Nuxt.js is more than welcome! + +## Reporting Issues + +A great way to contribute to the project is to send a detailed report when you encounter an issue. We always appreciate a well-written bug report, and will thank you for it! Before reporting an issue, please read carefully the documentation and search if any issue for your problem doesn't already exist: https://github.com/nuxt/nuxt.js/issues + +## Pull Requests + +We'd love to see your pull requests, even if it's just to fix a typo. Any significant improvement should be documented as [a GitHub issue](https://github.com/nuxt/nuxt.js/issues) before anybody starts working on it. + +### Convention + +- For a fix, the branch name should be `fix-XXX` where XXX is the issue number or the name of what your fix does +- For a feature, the branch name should be `feature-XXX` where XXX is the issue number associated to this feature request diff --git a/ru/guide/custom-loading.md b/ru/guide/custom-loading.md new file mode 100644 index 000000000..c26b6f208 --- /dev/null +++ b/ru/guide/custom-loading.md @@ -0,0 +1,99 @@ +--- +title: Custom Loading +description: Nuxt.js uses it's own component to show a progress bar between the routes. You can customize it, disable it or create your own component. +--- + +> Nuxt.js uses it's own component to show a progress bar between the routes. You can customize it, disable it or create your own component. + +## Disable the Progress Bar + +If you don't want to display the progress bar between the routes, simply add `loading: false` in your `nuxt.config.js` file: + +```js +module.exports = { + loading: false +} +``` + +## Customize the Progress Bar + +List of properties to customize the progress bar. + +| Key | Type | Default | Description | +|-----|------|---------|-------------| +| `color` | String | `'black'` | CSS color of the progress bar | +| `failedColor` | String | `'red'` | CSS color of the progress bar when an error appended while rendering the route (if `data` or `fetch` sent back an error for example). | +| `height` | String | `'2px'` | Height of the progress bar (used in the `style` property of the progress bar) | +| `duration` | Number | `5000` | In ms, the maximum duration of the progress bar, Nuxt.js assumes that the route will be rendered before 5 seconds. | + +For a blue progress bar with 5px of height, we update the `nuxt.config.js` to the following: + +```js +module.exports = { + loading: { + color: 'blue', + height: '5px' + } +} +``` + +## Use a Custom Loading Component + +You can create your own component that Nuxt.js will call instead of its default component. To do so, you need to give a path to your component in the `loading` option. Then, your component will be called directly by Nuxt.js. + +**Your component has to expose some of theses methods:** + +| Method | Required | Description | +|--------|----------|-------------| +| `start()` | Required | Called when a route changes, this is here where you display your component. | +| `finish()` | Required | Called when a route is loaded (and data fetched), this is here where you hide your component. | +| `fail()` | *Optional* | Called when a route couldn't be loaded (failed to fetch data for example). | +| `increase(num)` | *Optional* | Called during loading the route component, `num` is an Integer < 100. | + +We can create our custom component in `components/loading.vue`: +```html + + + + + +``` + +Then, we update our `nuxt.config.js` to tell Nuxt.js to use our component: + +```js +module.exports = { + loading: 'components/loading.vue' +} +``` diff --git a/ru/guide/directory-structure.md b/ru/guide/directory-structure.md new file mode 100644 index 000000000..98420cc7b --- /dev/null +++ b/ru/guide/directory-structure.md @@ -0,0 +1,88 @@ +--- +title: Directory Structure +description: The default Nuxt.js application structure is intended to provide a great starting point for both large and small applications. +--- + +> The default Nuxt.js application structure is intended to provide a great starting point for both small and large applications. Of course, you are free to organize your application however you like. + +## Directories + +### The Assets Directory + +The `assets` directory contains your un-compiled assets such as LESS, SASS, or JavaScript. + +[More documentation about Assets integration](/guide/assets) + +### The Components Directory + +The `components` directory contains your Vue.js Components. Nuxt.js doesn't supercharge the data method on these components. + +### The Layouts Directory + +The `layouts` directory contains your Application Layouts. + +_This directory can not be renamed._ + +[More documentation about Layouts integration](/guide/layouts) + +### The Middleware Directory + +_Coming soon_ + +### The Pages Directory + +The `pages` directory contains your Application Views and Routes. The framework reads all the `.vue` files inside this directory and create the router of your application. + +_This directory can not be renamed._ + +[More documentation about Pages integration](/guide/pages) + +### The Plugins Directory + +The `plugins` directory contains your Javascript plugins that you want to run before instantiating the root vue.js application. + +[More documentation about Plugins integration](/guide/plugins) + +### The Static Directory + +The `static` directory contains your static files. Each files inside this directory is mapped to /. + +**Example:** /static/robots.txt is mapped as /robots.txt + +_This directory can not be renamed._ + +[More documentation about Static integration](/guide/static) + +### The Store Directory + +The `store` directory contains your [Vuex Store](http://vuex.vuejs.org) files. Vuex Store option is implemented in the Nuxt.js framework. Creating a `index.js` file in this directory activate the option in the framework automatically. + +_This directory can not be renamed._ + +[More documentation about Store integration](/guide/vuex-store) + +### The nuxt.config.js File + +The `nuxt.config.js` file contains your Nuxt.js custom configuration. + +_This file can not be renamed._ + +[More documentation about nuxt.config.js integration](/guide/configuration) + +### The package.json File + +The `package.json` file contains your Application dependencies and scripts. + +_This file can not be renamed._ + +## Aliases + +| Alias | Directory | +|-----|------| +| ~ | / | +| ~assets | /assets | +| ~components | /components | +| ~pages | /pages | +| ~plugins | /plugins | +| ~static | /static | +| ~store | /store | diff --git a/ru/guide/dynamic-routes.md b/ru/guide/dynamic-routes.md new file mode 100644 index 000000000..080820dd9 --- /dev/null +++ b/ru/guide/dynamic-routes.md @@ -0,0 +1,60 @@ +--- +title: Dynamic Routes +description: To define a dynamic route with a param in Nuxt.js, you need to define a Vue file prefixed by an underscore. +--- + +> To define a dynamic route with a param, you need to define a Vue file **prefixed by an underscore**. + +## Directory Structure + +This file tree: + +```bash +pages/ +--| users/ +-----| _id.vue +-----| index.vue +``` + +will automatically generate: + +```js +router: { + routes: [ + { + name: 'users', + path: '/users', + component: 'pages/users/index.vue' + }, + { + name: 'users-id', + path: '/users/:id', + component: 'pages/users/_id.vue' + } + ] +} +``` + +## Validate Route Params + +```js +validate({ params, query }) { + return true // if the params are valid + return false // will stop Nuxt.js to render the route and display the error page +} +``` + +Nuxt.js lets you define a validator method inside your dynamic route component (In this example: `pages/users/_id.vue`). + +If the validate method does not return `true`, Nuxt.js will automatically load the 404 error page. + +```js + +``` diff --git a/ru/guide/eslint.md b/ru/guide/eslint.md new file mode 100644 index 000000000..5b9eb9934 --- /dev/null +++ b/ru/guide/eslint.md @@ -0,0 +1,8 @@ +--- +title: ESLint +description: Nuxt.js integrates ESLint to maintains your web application code quality with ease. +--- + +> Nuxt.js integrates ESLint to maintains your web application code quality with ease. + +*Feature coming soon.* diff --git a/ru/guide/html-head.md b/ru/guide/html-head.md new file mode 100644 index 000000000..18312937e --- /dev/null +++ b/ru/guide/html-head.md @@ -0,0 +1,94 @@ +--- +title: HTML Head +description: Nuxt.js uses vue-meta to update the headers and html attributes of your applications. +--- + +Nuxt.js uses [vue-meta](https://github.com/declandewet/vue-meta) to update the `headers` and `html attributes` of your application. + +Nuxt.js configures `vue-meta` with these options: +```js +{ + keyName: 'head', // the component option name that vue-meta looks for meta info on. + attribute: 'n-head', // the attribute name vue-meta adds to the tags it observes + ssrAttribute: 'n-head-ssr', // the attribute name that lets vue-meta know that meta info has already been server-rendered + tagIDKeyName: 'hid' // the property name that vue-meta uses to determine whether to overwrite or append a tag +} +``` + +## Title + +To update the title of the page, just add `head.title` in your page component. + +To set the page title of `pages/index.vue`: + +```html + + + +``` + +## Meta Tags + +To know the list of options you can give to `head`, take a look at [vue-meta documentation](https://github.com/declandewet/vue-meta#recognized-metainfo-properties). + +Example of a custom viewport with a custom Google font: +```js +head: { + meta: [ + { charset: 'utf-8' }, + { name: 'viewport', content: 'width=device-width, initial-scale=1' } + ], + link: [ + { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto' } + ] +} +``` + +## Using Page Data + +You might want to use the component data to display different headers, like a post title for example. Just use `head` as a function and you can use `this` inside to access your component data. + +Example of displaying the post title: +```html + +``` + +## Defaults Meta + +Nuxt.js let you define all default meta for your application inside `nuxt.config.js`, use the same `head` property: + +```js +module.exports = { + head: { + titleTemplate: '%s - Nuxt.js', + meta: [ + { charset: 'utf-8' }, + { name: 'viewport', content: 'width=device-width, initial-scale=1' }, + { hid: 'description', name: 'description', content: 'Meta description' } + ] + } +} +``` + +

To avoid any duplication when used in child component, please give a unique identifier with the `hid` key, please [read more about it](https://github.com/declandewet/vue-meta#lists-of-tags).

diff --git a/ru/guide/index.md b/ru/guide/index.md new file mode 100644 index 000000000..9bb9f81b7 --- /dev/null +++ b/ru/guide/index.md @@ -0,0 +1,97 @@ +--- +title: Introduction +description: "The 25th of October 2016, the team behind zeit.co, announced Next.js, a framework for server-rendered React applications. Few hours after the announcement, the idea of creating server-rendered Vue.js applications the same way as Next.js was obvious: Nuxt.js was born." +--- + +> The 25th of October 2016, the team behind [zeit.co](https://zeit.co/), announced [Next.js](https://zeit.co/blog/next), a framework for server-rendered React applications. Few hours after the announcement, the idea of creating server-rendered [Vue.js](https://vuejs.org) applications the same way as Next.js was obvious: **Nuxt.js** was born. + +## What is Nuxt.js ? + +Nuxt.js is a framework for creating Universal Vue.js Applications. + +Its main scope is **UI rendering** while abstracting away the client/server distribution. + +Our goal is to create a framework flexible that you can use as a main project base or in addition to your current project based on Node.js. + +Nuxt.js presets all the configuration needed to make your development of a Vue.js Application **Server Rendered** more enjoyable. + +In addition, we also provide an other deployment option called: *nuxt generate*. It will build a **Static Generated** Vue.js Application. +We believe that option could be the next big step in the development of Web Application with microservices. + +As a framework, Nuxt.js comes will a lot of features to help you in your development between the client side and the server side such as Asynchronous Data, Middleware, Layouts, etc. + +## How it Works + +![Vue with Webpack and Babel](https://i.imgur.com/avEUftE.png) + +Nuxt.js includes theses following to create a rich web application development: +- [Vue 2](https://github.com/vuejs/vue) +- [Vue-Router](https://github.com/vuejs/vue-router) +- [Vuex](https://github.com/vuejs/vuex) (included only when using the [store option](/guide/vuex-store)) +- [Vue-Meta](https://github.com/declandewet/vue-meta) + +A total of only **28kb min+gzip** (31kb with vuex). + +Under the hood we use [Webpack](https://github.com/webpack/webpack) with [vue-Loader](https://github.com/vuejs/vue-loader) and [babel-loader](https://github.com/babel/babel-loader) to bundle, code-split and minify your code. + +## Features + +- Write Vue Files +- Automatic Code Splitting +- Server-Side Rendering +- Powerful Routing System with Asynchronous Data +- Static File Serving +- ES6/ES7 Transpilation +- Bundling and minifying of your JS & CSS +- Managing Head Elements +- Hot reloading in Development +- ESLint Integration +- Pre-processor: SASS, LESS, Stylus, etc + +## Server Rendered + +You can use nuxt.js as a framework to handle all the UI rendering of your project. + +When launching `nuxt`, it will start a development server with hot-reloading and vue-server-renderer configured to automatically server-render your application. + +Take a look at [the commands](/guide/commands) to learn more about it. + +If you already have a server, you can plug nuxt.js by using it as a middleware, there is no restriction at all when using nuxt.js for developing your Universal Web Applications, see the [Using Nuxt.js Programmatically](/api) guide. + +## Static Generated + +The big innovation of nuxt.js comes here: `nuxt generate` + +When building your application it will generate the HTML of every of your routes to store it in a file. + +Example: + +```bash +-| pages/ +----| about.vue +----| index.vue +``` + +Will generate: +``` +-| dist/ +----| about/ +------| index.html +----| index.html +``` + +This way, you can host you generated web application on any static hosting! + +The best example is this website, it's generated and hosted on Github Pages: +- [Source code](https://github.com/nuxt/nuxtjs.org) +- [Generated code](https://github.com/nuxt/nuxtjs.org/tree/gh-pages) + +We don't want to generate manually the application every time we update the [docs repository](https://github.com/nuxt/docs), so each push made calls an AWS Lambda function which: +1. Clone the [nuxtjs.org repository](https://github.com/nuxt/nuxtjs.org) +2. Install the dependencies via `npm install` +3. Run `nuxt generate` +4. Push the `dist` folder to the `gh-pages` branch + +We now have a **Serverless Static Generated Web Application** :) + +We can go further by thinking of an e-commerce web application made with `nuxt generate` and hosted on a CDN, and every time a product is out of stock or back in stock, we regenerate the web app, but if the user navigate trough the web app in the meantime, it will be up to date thanks to the API calls made to the e-commerce API. No need to have multiple instances of a server + a cache anymore! diff --git a/ru/guide/installation.md b/ru/guide/installation.md new file mode 100644 index 000000000..306d3685c --- /dev/null +++ b/ru/guide/installation.md @@ -0,0 +1,92 @@ +--- +title: Installation +description: Nuxt.js is really easy to get started with. A simple project only need the nuxt dependency in your package.json file. +--- + +> Nuxt.js is really easy to get started with. A simple project only need the `nuxt` dependency. + +## Using Nuxt.js starter template + +To start quickly, the Nuxt.js team has created [starter template](https://github.com/nuxt/starter). + +[Download the .zip](https://github.com/nuxt/starter/archive/source.zip) starter template or install it with vue-cli: + +```bash +$ vue init nuxt/starter +``` + +> If [vue-cli](https://github.com/vuejs/vue-cli) is not installed, please install it with `npm install -g vue-cli` + +then install the dependencies: + +```bash +$ cd +$ npm install +``` + +and launch the project with: +```bash +$ npm run dev +``` +The application is now running on http://localhost:3000 + +

Nuxt.js will listen on the files changes inside the `pages` directory, so no need to restart the application when adding new pages

+ +To discover more about the directory structure of the project: [Directory Structure Documentation](/guide/directory-structure). + +## Starting from scratch + +Creating a Nuxt.js application from scratch is also really easy, it only needs *1 file and 1 directory*. Let's create an empty directory to start working on the application: + +```bash +$ mkdir +$ cd +``` + +*Info: replace project-name by the name of the project.* + +### The package.json + +The project needs a `package.json` file to specify how to start `nuxt`: +```json +{ + "name": "my-app", + "scripts": { + "dev": "nuxt" + } +} +``` +`scripts` will launch Nuxt.js via `npm run dev`. + +### Installing `nuxt` + +Once the `package.json` has been created, add `nuxt` to the project via NPM: +```bash +npm install --save nuxt +``` + +### The `pages` directory + +Nuxt.js will transform every `*.vue` file inside the `pages` directory as a route for the application. + +Create the `pages` directory: +```bash +$ mkdir pages +``` + +then create the first page in `pages/index.vue`: +```html + +``` + +and launch the project with: +```bash +$ npm run dev +``` +The application is now running on http://localhost:3000 + +

Nuxt.js will listen on the files changes inside the `pages` directory, so no need to restart the application when adding new pages

+ +To discover more about the directory structure of the project: [Directory Structure Documentation](/guide/directory-structure). diff --git a/ru/guide/layouts.md b/ru/guide/layouts.md new file mode 100644 index 000000000..d7370791c --- /dev/null +++ b/ru/guide/layouts.md @@ -0,0 +1,71 @@ +--- +title: Layouts +description: Nuxt.js lets you extend the main layout or create custom layouts by adding them in the layouts directory. +--- + +> Nuxt.js lets you extend the main layout or create custom layouts by adding them in the `layouts` directory. + +## Default Layout + +> You can extend the main layout by adding a `layouts/default.vue` file. + +*Make sure to add the `` component when creating a layout to display the page component.* + +The default layout source code is: +```html + +``` + +## Error Page + +> You can customize the error page by adding a `layouts/error.vue` file. + +This layout is special since you should not include `` inside its template. You must see this layout as a component displayed when an error occurs (404, 500, etc). + +The default error page source code is [available on Github](https://github.com/nuxt/nuxt.js/blob/master/lib/app/components/nuxt-error.vue). + +Example of a custom error page in `layouts/error.vue`: +```html + + + +``` + +## Custom Layout + +> Every file (*first level*) in the `layouts` directory will create a custom layout accessible with the `layout` property in the page component. + +*Make sure to add the `` component when creating a layout to display the page component.* + +Example of `layouts/blog.vue`: +```html + +``` + +And then in `pages/posts.vue`, you can tell Nuxt.js to use your custom layout: +```html + +``` + +Check the [demonstration video](https://www.youtube.com/watch?v=YOKnSTp7d38) to see it in action. diff --git a/ru/guide/menu.json b/ru/guide/menu.json new file mode 100644 index 000000000..503dacc67 --- /dev/null +++ b/ru/guide/menu.json @@ -0,0 +1,337 @@ +[ + { + "title": "Getting Started", + "links": [ + { + "name": "Introduction", + "to": "", + "contents": [ + { + "name": "What is Nuxt.js ?", + "to": "#what-is-nuxt-js-" + }, + { + "name": "How it Works", + "to": "#how-it-works" + }, + { + "name": "Features", + "to": "#features" + }, + { + "name": "Server Rendered", + "to": "#server-rendered" + }, + { + "name": "Static Generated", + "to": "#static-generated" + } + ] + }, + { + "name": "Installation", + "to": "/installation", + "contents": [ + { + "name": "Using Nuxt.js starter template", + "to": "#using-nuxt-js-starter-template" + }, + { + "name": "Starting from scratch", + "to": "#starting-from-scratch" + } + ] + }, + { + "name": "Directory structure", + "to": "/directory-structure", + "contents": [ + { + "name": "Directories", + "to": "#directories" + }, + { + "name": "Aliases", + "to": "#aliases" + } + ] + }, + { + "name": "Configuration", + "to": "/configuration" + }, + { + "name": "Commands", + "to": "/commands", + "contents": [ + { + "name": "List of Commands", + "to": "#list-of-commands" + }, + { + "name": "Production Deployment", + "to": "#production-deployment" + }, + { + "name": "Static Hosting Deployment", + "to": "#static-hosting-deployment" + } + ] + } + ] + }, + { + "title": "Router", + "links": [ + { + "name": "Basic Routes", + "to": "/basic-routes" + }, + { + "name": "Dynamic Routes", + "to": "/dynamic-routes", + "contents": [ + { + "name": "Directory Structure", + "to": "#directory-structure" + }, + { + "name": "Validate Route Params", + "to": "#validate-route-params" + } + ] + }, + { + "name": "Nested Routes", + "to": "/nested-routes", + "contents": [ + { + "name": "Directory Structure", + "to": "#directory-structure" + }, + { + "name": "Dynamic Nested Routes", + "to": "#dynamic-nested-routes" + } + ] + }, + { + "name": "Transitions", + "to": "/routes-transitions", + "contents": [ + { + "name": "Usage", + "to": "#usage" + }, + { + "name": "The transition Key", + "to": "#the-transition-key" + }, + { + "name": "Transition for a Specific Page", + "to": "#transition-for-a-specific-page" + }, + { + "name": "Dynamic Transition", + "to": "#dynamic-transition" + } + ] + }, + { + "name": "Middleware", + "to": "/routes-middleware" + } + ] + }, + { + "title": "Views", + "links": [ + { + "name": "Pages", + "to": "/pages", + "contents": [ + { + "name": "Special Keys", + "to": "#special-keys" + }, + { + "name": "A Simple Page", + "to": "#a-simple-page" + }, + { + "name": "Using Pre-Processors", + "to": "#using-pre-processors" + }, + { + "name": "Using JSX", + "to": "#using-jsx" + } + ] + }, + { + "name": "Layouts", + "to": "/layouts", + "contents": [ + { + "name": "Default Layout", + "to": "#default-layout" + }, + { + "name": "Error Page", + "to": "#error-page" + }, + { + "name": "Custom Layout", + "to": "#custom-layout" + } + ] + }, + { + "name": "Custom Loading", + "to": "/custom-loading", + "contents": [ + { + "name": "Disable the Progress Bar", + "to": "#disable-the-progress-bar" + }, + { + "name": "Customize the Progress Bar", + "to": "#customize-the-progress-bar" + }, + { + "name": "Use a Custom Loading Component", + "to": "#use-a-custom-loading-component" + } + ] + }, + { + "name": "HTML Head", + "to": "/html-head", + "contents": [ + { + "name": "Title", + "to": "#title" + }, + { + "name": "Meta Tags", + "to": "#meta-tags" + }, + { + "name": "Using Page Data", + "to": "#using-page-data" + }, + { + "name": "Defaults Meta", + "to": "#defaults-meta" + } + ] + } + ] + }, + { + "title": "Data", + "links": [ + { + "name": "Async data", + "to": "/async-data", + "contents": [ + { + "name": "The data Method", + "to": "#the-data-method" + }, + { + "name": "The Context", + "to": "#the-context" + }, + { + "name": "Handling Errors", + "to": "#handling-errors" + } + ] + }, + { + "name": "Vuex store", + "to": "/vuex-store", + "contents": [ + { + "name": "Activate the Store", + "to": "#activate-the-store" + }, + { + "name": "Modules Files", + "to": "#modules-files" + }, + { + "name": "The fetch Method", + "to": "#the-fetch-method" + }, + { + "name": "The Context", + "to": "#the-context" + }, + { + "name": "The nuxtServerInit Action", + "to": "#the-nuxtserverinit-action" + } + ] + } + ] + }, + { + "title": "Resources", + "links": [ + { + "name": "Assets", + "to": "/assets" + }, + { + "name": "Static", + "to": "/static" + }, + { + "name": "Plugins", + "to": "/plugins", + "contents": [ + { + "name": "Use External Modules", + "to": "#use-external-modules" + }, + { + "name": "Use Vue Plugins", + "to": "#use-vue-plugins" + }, + { + "name": "Only for Browsers", + "to": "#only-for-browsers" + } + ] + } + ] + }, + { + "title": "Dev Tools", + "links": [ + { + "name": "ESLint", + "to": "/eslint" + }, + { + "name": "Unit Testing", + "to": "/unit-testing" + } + ] + }, + { + "title": "Miscellaneous", + "links": [ + { + "name": "Contribution Guide", + "to": "/contribution-guide" + }, + { + "name": "Release Notes", + "to": "/release-notes" + } + ] + } +] diff --git a/ru/guide/nested-routes.md b/ru/guide/nested-routes.md new file mode 100644 index 000000000..00a117877 --- /dev/null +++ b/ru/guide/nested-routes.md @@ -0,0 +1,134 @@ +--- +title: Nested Routes +description: Nuxt.js lets you create nested route by using the children routes of vue-router. +--- + +> Nuxt.js lets you create nested route by using the children routes of vue-router. + +## Directory Structure + +To define a nested route, you need to create a Vue file with the **same name as the directory** which contain your children views. +> Don't forget to write `` inside your parent Vue file. + +This file tree: + +```bash +pages/ +--| users/ +-----| _id.vue +--| users.vue +``` + +will automatically generate: + +```js +router: { + routes: [ + { + path: '/users', + component: 'pages/users.vue', + children: [ + { + path: ':id?', + component: 'pages/users/_id.vue', + name: 'users-id' + } + ] + } + ] +} +``` + +As you can see the children has the path `:id?` which makes it optional, if you want to make it required, create an `index.vue` file in the `users` directory: + +```bash +pages/ +--| users/ +-----| _id.vue +-----| index.vue +--| users.vue +``` + +Nuxt.js will generate: + +```js +router: { + routes: [ + { + path: '/users', + component: 'pages/users.vue', + children: [ + { + path: '', + component: 'pages/users/index.vue', + name: 'users' + }, + { + path: ':id', + component: 'pages/users/_id.vue', + name: 'users-id' + } + ] + } + ] +} +``` + +## Dynamic Nested Routes + +> This scenario should not often append, but it is possible with Nuxt.js: having dynamic children inside dynamic parents. + +This file tree: + +```bash +pages/ +--| _category/ +-----| _subCategory/ +--------| _id.vue +--------| index.vue +-----| _subCategory.vue +-----| index.vue +--| _category.vue +--| index.vue +``` + +will automatically generate: + +```js +router: { + routes: [ + { + path: '/', + component: 'pages/index.vue', + name: 'index' + }, + { + path: '/:category', + component: 'pages/_category.vue', + children: [ + { + path: '', + component: 'pages/_category/index.vue', + name: 'category' + }, + { + path: ':subCategory', + component: 'pages/_category/_subCategory.vue', + children: [ + { + path: '', + component: 'pages/_category/_subCategory/index.vue', + name: 'category-subCategory' + }, + { + path: ':id', + component: 'pages/_category/_subCategory/_id.vue', + name: 'category-subCategory-id' + } + ] + } + ] + } + ] +} +``` diff --git a/ru/guide/pages.md b/ru/guide/pages.md new file mode 100644 index 000000000..ee914aa2c --- /dev/null +++ b/ru/guide/pages.md @@ -0,0 +1,115 @@ +--- +title: Pages +description: The pages directory lets you create every kind of routes simply by creating Vue files. These components comes with a set of features to let you bootstrap and maintain your application with ease. +--- + +> The `pages` directory lets you create every kind of routes simply by creating Vue files. These components comes with a set of features to let you bootsrap and maintain your isomorphic application with ease. + +## Special Keys + +Every page component is a Vue component, but nuxt.js adds special keys to make the development of your universal application the easiest way possible. + +List of all the available keys + +| Attribute | Description | +|-----------|-------------| +| data | The most important key, it has the same purpose as [Vue data](https://vuejs.org/v2/api/#Options-Data) but it can be asynchronous and receives the context as argument, please read the [async data documentation](/guide/async-data) to learn how it works. | +| fetch | Used to fill the store before rendering the page, it's like the data method except it doesn't set the component data. See the [fetch method documentation](/guide/vuex-store#the-fetch-method). | +| layout | Specify a layout defined in the `layouts` directory, see [layouts documentation](/guide/layouts). | +| transition | Set a specific transition for the page, see [routes transitions](/guide/routes-transitions). | +| scrollToTop | Boolean, by default: `false`. Specify if you want the page to scroll to the top before rendering the page, it's used for [nested routes](/guide/nested-routes). | +| validate | Validator function for a [dynamic route](/guide/dynamic-routes#validate-route-params). | +| middleware | Set a middleware for this page, the middleware will be called before rendering the page, see [routes middleware](/guide/routes-middleware). | + + +## A Simple Page + +A page component is a Vue component with some superpowers, first, let's have a simple component displaying a red title "Hello World!". + +We create our first page `pages/index.vue`: + +```html + + + + + +``` + +## Using Pre-Processors + +Thanks to [vue-loader](http://vue-loader.vuejs.org/en/configurations/pre-processors.html), you can use any kind of pre-processors for your `