Skip to content
This repository was archived by the owner on Sep 3, 2024. It is now read-only.

[WIP] Spanish translation #51

Closed
wants to merge 3 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 48 additions & 0 deletions es/api/components-nuxt-child.md
Original file line number Diff line number Diff line change
@@ -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 es/api/components-nuxt-link.md
Original file line number Diff line number Diff line change
@@ -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 es/api/components-nuxt.md
Original file line number Diff line number Diff line change
@@ -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).
241 changes: 241 additions & 0 deletions es/api/configuration-build.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,241 @@
---
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
{
presets: ['vue-app']
}
```

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.[hash].css',
vendor: 'vendor.bundle.[hash].js',
app: 'nuxt.bundle.[chunkhash].js'
}
```

Example (`nuxt.config.js`):
```js
module.exports = {
build: {
filenames: {
css: 'app.[hash].css',
vendor: 'vendor.[hash].js',
app: 'app.[chunkhash].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 es/api/configuration-cache.md
Original file line number Diff line number Diff line change
@@ -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. |
Loading