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

Commit 949850b

Browse files
committed
Translate api/pages-validation
1 parent fc76735 commit 949850b

24 files changed

+1499
-0
lines changed

Diff for: fr/api/components-nuxt-child.md

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
---
2+
title: "API: The <nuxt-child> Component"
3+
description: Display the current page
4+
---
5+
6+
# The &lt;nuxt-child&gt; Component
7+
8+
> This component is used for displaying the children components in a [nested route](/guide/routing#nested-routes).
9+
10+
Example:
11+
12+
```bash
13+
-| pages/
14+
---| parent/
15+
------| child.vue
16+
---| parent.vue
17+
```
18+
19+
This file tree will generate these routes:
20+
```js
21+
[
22+
{
23+
path: '/parent',
24+
component: '~pages/parent.vue',
25+
name: 'parent',
26+
children: [
27+
{
28+
path: 'child',
29+
component: '~pages/parent/child.vue',
30+
name: 'parent-child'
31+
}
32+
]
33+
}
34+
]
35+
```
36+
37+
To display the `child.vue` component, I have to insert `<nuxt-child/>` inside `pages/parent.vue`:
38+
39+
```html
40+
<template>
41+
<div>
42+
<h1>I am the parent view</h1>
43+
<nuxt-child/>
44+
</div>
45+
</template>
46+
```
47+
48+
To see an example, take a look at the [nested-routes example](/examples/nested-routes).

Diff for: fr/api/components-nuxt-link.md

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
---
2+
title: "API: The <nuxt-link> Component"
3+
description: Link the pages between them with nuxt-link.
4+
---
5+
6+
# The &lt;nuxt-link&gt; Component
7+
8+
> This component is used to link the page components between them.
9+
10+
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).
11+
12+
Example (`pages/index.vue`):
13+
14+
```html
15+
<template>
16+
<div>
17+
<h1>Home page</h1>
18+
<nuxt-link to="/about">About</nuxt-link>
19+
</div>
20+
</template>
21+
```
22+
23+
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.

Diff for: fr/api/components-nuxt.md

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
---
2+
title: "API: The <nuxt> Component"
3+
description: Display the page components inside a layout.
4+
---
5+
6+
# The &lt;nuxt&gt; Component
7+
8+
> This component is used only in [layouts](/guide/views#layouts) to display the page components.
9+
10+
Example (`layouts/default.vue`):
11+
12+
```html
13+
<template>
14+
<div>
15+
<div>My nav bar</div>
16+
<nuxt/>
17+
<div>My footer</div>
18+
</div>
19+
</template>
20+
```
21+
22+
To see an example, take a look at the [layouts example](/examples/layouts).

Diff for: fr/api/configuration-build.md

+258
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,258 @@
1+
---
2+
title: "API: The build Property"
3+
description: Nuxt.js lets you customize the webpack configuration for building your web application as you want.
4+
---
5+
6+
# The build Property
7+
8+
> Nuxt.js lets you customize the webpack configuration for building your web application as you want.
9+
10+
## analyze
11+
12+
> Nuxt.js use [webpack-bundle-analyzer](https://github.com/th0r/webpack-bundle-analyzer) to let you visualize your bundles and how to optimize them.
13+
14+
- Type: `Boolean` or `Object`
15+
- Default: `false`
16+
17+
If an object, see available properties [here](https://github.com/th0r/webpack-bundle-analyzer#as-plugin).
18+
19+
Example (`nuxt.config.js`):
20+
```js
21+
module.exports = {
22+
build: {
23+
analyze: true
24+
// or
25+
analyze: {
26+
analyzerMode: 'static'
27+
}
28+
}
29+
}
30+
```
31+
32+
<p class="Alert Alert--teal">**INFO:** You can use the command `nuxt build --analyze` or `nuxt build -a` to build your application and launch the bundle analyzer on [http://localhost:8888](http://localhost:8888)</p>
33+
34+
## babel
35+
36+
- Type: `Object`
37+
38+
> Customize babel configuration for JS and Vue files.
39+
40+
Default:
41+
```js
42+
{
43+
presets: ['vue-app']
44+
}
45+
```
46+
47+
Example (`nuxt.config.js`):
48+
```js
49+
module.exports = {
50+
build: {
51+
babel: {
52+
presets: ['es2015', 'stage-0']
53+
}
54+
}
55+
}
56+
```
57+
58+
## extend
59+
60+
- Type: `Function`
61+
62+
> Extend the webpack configuration manually for the client & server bundles.
63+
64+
The extend is called twice, one time for the server bundle, and one time for the client bundle. The arguments of the method are:
65+
1. Webpack config object
66+
2. Object with the folowing keys (all boolean): `dev`, `isClient`, `isServer`
67+
68+
Example (`nuxt.config.js`):
69+
```js
70+
module.exports = {
71+
build: {
72+
extend (config, { isClient }) {
73+
// Extend only webpack config for client-bundle
74+
if (isClient) {
75+
config.devtool = 'eval-source-map'
76+
}
77+
}
78+
}
79+
}
80+
```
81+
82+
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).
83+
84+
## filenames
85+
86+
- Type: `Object`
87+
88+
> Customize bundle filenames
89+
90+
Default:
91+
```js
92+
{
93+
vendor: 'vendor.bundle.[hash].js',
94+
app: 'nuxt.bundle.[chunkhash].js'
95+
}
96+
```
97+
98+
Example (`nuxt.config.js`):
99+
```js
100+
module.exports = {
101+
build: {
102+
filenames: {
103+
vendor: 'vendor.[hash].js',
104+
app: 'app.[chunkhash].js'
105+
}
106+
}
107+
}
108+
```
109+
110+
## loaders
111+
112+
- Type: `Array`
113+
- Items: `Object`
114+
115+
> Customize webpack loaders
116+
117+
Default:
118+
```js
119+
[
120+
{
121+
test: /\.(png|jpe?g|gif|svg)$/,
122+
loader: 'url-loader',
123+
query: {
124+
limit: 1000, // 1KO
125+
name: 'img/[name].[hash:7].[ext]'
126+
}
127+
},
128+
{
129+
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
130+
loader: 'url-loader',
131+
query: {
132+
limit: 1000, // 1 KO
133+
name: 'fonts/[name].[hash:7].[ext]'
134+
}
135+
}
136+
]
137+
```
138+
139+
Example (`nuxt.config.js`):
140+
```js
141+
module.exports = {
142+
build: {
143+
loaders: [
144+
{
145+
test: /\.(png|jpe?g|gif|svg)$/,
146+
loader: 'url-loader',
147+
query: {
148+
limit: 10000, // 10KO
149+
name: 'img/[name].[hash].[ext]'
150+
}
151+
}
152+
]
153+
}
154+
}
155+
```
156+
157+
<p class="Alert Alert--orange">When the loaders are defined in the `nuxt.config.js`, the default loaders will be overwritten.</p>
158+
159+
## plugins
160+
161+
- Type: `Array`
162+
- Default: `[]`
163+
164+
> Add Webpack plugins
165+
166+
Example (`nuxt.config.js`):
167+
```js
168+
const webpack = require('webpack')
169+
170+
module.exports = {
171+
build: {
172+
plugins: [
173+
new webpack.DefinePlugin({
174+
'process.VERSION': require('./package.json').version
175+
})
176+
]
177+
}
178+
}
179+
```
180+
181+
## postcss
182+
183+
- Type: `Array`
184+
185+
> Customize [postcss](https://github.com/postcss/postcss) options
186+
187+
Default:
188+
```js
189+
[
190+
require('autoprefixer')({
191+
browsers: ['last 3 versions']
192+
})
193+
]
194+
```
195+
196+
Example (`nuxt.config.js`):
197+
```js
198+
module.exports = {
199+
build: {
200+
postcss: [
201+
require('postcss-nested')(),
202+
require('postcss-responsive-type')(),
203+
require('postcss-hexrgba')(),
204+
require('autoprefixer')({
205+
browsers: ['last 3 versions']
206+
})
207+
]
208+
}
209+
}
210+
```
211+
212+
## publicPath
213+
214+
- Type: `String`
215+
- Default: `'/_nuxt/'`
216+
217+
> Nuxt.js lets you upload your dist files to your CDN for maximum performances, simply set the `publicPath` to your CDN.
218+
219+
Example (`nuxt.config.js`):
220+
221+
```js
222+
module.exports = {
223+
build: {
224+
publicPath: 'https://cdn.nuxtjs.org'
225+
}
226+
}
227+
```
228+
229+
Then, when launching `nuxt build`, upload the content of `.nuxt/dist/` directory to your CDN and voilà!
230+
231+
## vendor
232+
233+
> 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)
234+
235+
- Type: `Array`
236+
- Items: `String`
237+
238+
To add a module/file inside the vendor bundle, add the `build.vendor` key inside `nuxt.config.js`:
239+
240+
```js
241+
module.exports = {
242+
build: {
243+
vendor: ['axios']
244+
}
245+
}
246+
```
247+
248+
You can also give a path to a file, like a custom lib you created:
249+
```js
250+
module.exports = {
251+
build: {
252+
vendor: [
253+
'axios',
254+
'~plugins/my-lib.js'
255+
]
256+
}
257+
}
258+
```

Diff for: fr/api/configuration-cache.md

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
---
2+
title: "API: The cache Property"
3+
description: Nuxt.js use lru-cache to allow cached components for better render performances
4+
---
5+
6+
# The cache Property
7+
8+
> Nuxt.js use [lru-cache](https://github.com/isaacs/node-lru-cache) to allow cached components for better render performances
9+
10+
## Usage
11+
12+
- Type: `Boolean` or `Object` (Default: `false`)
13+
14+
If an object, see [lru-cache options](https://github.com/isaacs/node-lru-cache#options).
15+
16+
Use the `cache` key in your `nuxt.config.js`:
17+
```js
18+
module.exports = {
19+
cache: true
20+
// or
21+
cache: {
22+
max: 1000,
23+
maxAge: 900000
24+
}
25+
}
26+
```
27+
28+
If `cache` is set to `true` the default keys given are:
29+
30+
| key | Optional? | Type | Default | definition |
31+
|------|------------|-----|---------|------------|
32+
| `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. |
33+
| `maxAge` | Optional | Integer | 900000 | Maximum age in ms, default to 15 minutes. |

0 commit comments

Comments
 (0)