Skip to content

Commit

Permalink
ja initialized as a copy of en
Browse files Browse the repository at this point in the history
  • Loading branch information
inouetakuya committed Feb 19, 2017
1 parent 532e528 commit 0baf127
Show file tree
Hide file tree
Showing 78 changed files with 4,289 additions and 0 deletions.
48 changes: 48 additions & 0 deletions ja/api/components-nuxt-child.md
@@ -0,0 +1,48 @@
---
title: "API: The <nuxt-child> Component"
description: Display the current page
---

# The &lt;nuxt-child&gt; Component

> This component is used for displaying the children components in a [nested route](/guide/routing#nested-routes).
Example:

```bash
-| pages/
---| parent/
------| child.vue
---| parent.vue
```

This file tree will generate these routes:
```js
[
{
path: '/parent',
component: '~pages/parent.vue',
name: 'parent',
children: [
{
path: 'child',
component: '~pages/parent/child.vue',
name: 'parent-child'
}
]
}
]
```

To display the `child.vue` component, I have to insert `<nuxt-child/>` inside `pages/parent.vue`:

```html
<template>
<div>
<h1>I am the parent view</h1>
<nuxt-child/>
</div>
</template>
```

To see an example, take a look at the [nested-routes example](/examples/nested-routes).
23 changes: 23 additions & 0 deletions ja/api/components-nuxt-link.md
@@ -0,0 +1,23 @@
---
title: "API: The <nuxt-link> Component"
description: Link the pages between them with nuxt-link.
---

# The &lt;nuxt-link&gt; Component

> This component is used to link the page components between them.
At the moment, `<nuxt-link>` is the same as [`<router-link>`](https://router.vuejs.org/en/api/router-link.html), so we recommend you to see how to use it on the [vue-router documentation](https://router.vuejs.org/en/api/router-link.html).

Example (`pages/index.vue`):

```html
<template>
<div>
<h1>Home page</h1>
<nuxt-link to="/about">About</nuxt-link>
</div>
</template>
```

In the future, we will add features to the nuxt-link component, like pre-fetching on the background for improving the responsiveness of nuxt.js applications.
22 changes: 22 additions & 0 deletions ja/api/components-nuxt.md
@@ -0,0 +1,22 @@
---
title: "API: The <nuxt> Component"
description: Display the page components inside a layout.
---

# The &lt;nuxt&gt; Component

> This component is used only in [layouts](/guide/views#layouts) to display the page components.
Example (`layouts/default.vue`):

```html
<template>
<div>
<div>My nav bar</div>
<nuxt/>
<div>My footer</div>
</div>
</template>
```

To see an example, take a look at the [layouts example](/examples/layouts).
248 changes: 248 additions & 0 deletions ja/api/configuration-build.md
@@ -0,0 +1,248 @@
---
title: "API: The build Property"
description: Nuxt.js lets you customize the webpack configuration for building your web application as you want.
---

# The build Property

> Nuxt.js lets you customize the webpack configuration for building your web application as you want.
## analyze

> Nuxt.js use [webpack-bundle-analyzer](https://github.com/th0r/webpack-bundle-analyzer) to let you visualize your bundles and how to optimize them.
- Type: `Boolean` or `Object`
- Default: `false`

If an object, see available properties [here](https://github.com/th0r/webpack-bundle-analyzer#as-plugin).

Example (`nuxt.config.js`):
```js
module.exports = {
build: {
analyze: true
// or
analyze: {
analyzerMode: 'static'
}
}
}
```

<p class="Alert Alert--teal">**INFO:** You can use the command `nuxt build --analyzer` or `nuxt build -a` to build your application and launch the bundle analyzer on [http://localhost:8888](http://localhost:8888)</p>

## babel

- Type: `Object`

> Customize babel configuration for JS and Vue files.
Default:
```js
{
plugins: [
'transform-async-to-generator',
'transform-runtime'
],
presets: [
['es2015', { modules: false }],
'stage-2'
]
}
```

Example (`nuxt.config.js`):
```js
module.exports = {
build: {
babel: {
presets: ['es2015', 'stage-0']
}
}
}
```

## extend

- Type: `Function`

> Extend the webpack configuration manually for the client & server bundles.
The extend is called twice, one time for the server bundle, and one time for the client bundle. The arguments of the method are:
1. Webpack config object
2. Object with the folowing keys (all boolean): `dev`, `isClient`, `isServer`

Example (`nuxt.config.js`):
```js
module.exports = {
build: {
extend (config, { isClient }) {
// Extend only webpack config for client-bundle
if (isClient) {
config.devtool = 'eval-source-map'
}
}
}
}
```

If you want to see more about our default webpack configuration, take a look at our [webpack directory](https://github.com/nuxt/nuxt.js/tree/master/lib/webpack).

## filenames

- Type: `Object`

> Customize bundle filenames
Default:
```js
{
css: 'style.css',
vendor: 'vendor.bundle.js',
app: 'nuxt.bundle.js'
}
```

Example (`nuxt.config.js`):
```js
module.exports = {
build: {
filenames: {
css: 'app.css',
vendor: 'vendor.js',
app: 'app.js'
}
}
}
```

## loaders

- Type: `Array`
- Items: `Object`

> Cusomize webpack loaders
Default:
```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]'
}
}
]
```

Example (`nuxt.config.js`):
```js
module.exports = {
build: {
loaders: [
{
test: /\.(png|jpe?g|gif|svg)$/,
loader: 'url-loader',
query: {
limit: 10000, // 10KO
name: 'img/[name].[hash].[ext]'
}
}
]
}
}
```

<p class="Alert Alert--orange">When the loaders are defined in the `nuxt.config.js`, the default loaders will be overwritten.</p>

## plugins

- Type: `Array`
- Default: `[]`

> Add Webpack plugins
Example (`nuxt.config.js`):
```js
const webpack = require('webpack')

module.exports = {
build: {
plugins: [
new webpack.DefinePlugin({
'process.VERSION': require('./package.json').version
})
]
}
}
```

## postcss

- **Type:** `Array`

> Customize [postcss](https://github.com/postcss/postcss) options
Default:
```js
[
require('autoprefixer')({
browsers: ['last 3 versions']
})
]
```

Example (`nuxt.config.js`):
```js
module.exports = {
build: {
postcss: [
require('postcss-nested')(),
require('postcss-responsive-type')(),
require('postcss-hexrgba')(),
require('autoprefixer')({
browsers: ['last 3 versions']
})
]
}
}
```

## 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)
- **Type:** `Array`
- **Items:** `String`

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'
]
}
}
```
33 changes: 33 additions & 0 deletions ja/api/configuration-cache.md
@@ -0,0 +1,33 @@
---
title: "API: The cache Property"
description: Nuxt.js use lru-cache to allow cached components for better render performances
---

# The cache Property

> Nuxt.js use [lru-cache](https://github.com/isaacs/node-lru-cache) to allow cached components for better render performances
## Usage

- **Type:** `Boolean` or `Object` (Default: `false`)

If an object, see [lru-cache options](https://github.com/isaacs/node-lru-cache#options).

Use the `cache` key in your `nuxt.config.js`:
```js
module.exports = {
cache: true
// or
cache: {
max: 1000,
maxAge: 900000
}
}
```

If `cache` is set to `true` the default keys given are:

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

0 comments on commit 0baf127

Please sign in to comment.