Skip to content

Commit

Permalink
Merge branch 'working' of https://github.com/vuejs-fr/nuxt into working
Browse files Browse the repository at this point in the history
  • Loading branch information
MachinisteWeb committed Sep 16, 2017
2 parents 8f0f2ad + 47e501b commit ebf50cc
Show file tree
Hide file tree
Showing 2 changed files with 88 additions and 88 deletions.
112 changes: 56 additions & 56 deletions en/guide/index.md
Original file line number Diff line number Diff line change
@@ -1,90 +1,90 @@
---
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."
description: "Le 25 octobre 2016, l'équipe derrière zeit.co, annonçait Next.js, un framework pour les applications React rendues côté serveur. Quelques heures après l'annonce, l'idée de créer un équivalent pour les applications Vue.js était évidente : Nuxt.js était né."
---

> 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.
> Le 25 octobre 2016, l'équipe derrière [zeit.co](https://zeit.co/), annonçait [Next.js](https://zeit.co/blog/next), un framework pour les applications React rendues côté serveur. Quelques heures après l'annonce, l'idée de créer un équivalent pour les applications [Vue.js](https://fr.vuejs.org) était évidente : Nuxt.js était né.
## What is Nuxt.js ?
## Nuxt.js, qu’est-ce que c’est ?

Nuxt.js is a framework for creating Universal Vue.js Applications.
Nuxt.js est un framework pour créer des applications Vue.js universelles.

Its main scope is **UI rendering** while abstracting away the client/server distribution.
Son principal but est de **faire le rendu d'interface utilisateur (« UI »)** en faisant abstraction de la distribution entre le client et le serveur.

Our goal is to create a framework flexible enough so that you can use it as a main project base or in addition to your current project based on Node.js.
Notre but est de créer un framework suffisamment flexible afin que vous puissiez l'utiliser comme base dans un projet principal ou en tant que supplément pour votre projet actuel basé sur Node.js.

Nuxt.js presets all the configuration needed to make your development of a Vue.js Application **Server Rendered** more enjoyable.
Nuxt.js prédéfinit toute la configuration nécessaire pour faire de votre développement d'application Vue.js rendue côté serveur quelque chose d'agréable.

In addition, we also provide another 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 Applications with microservices.
En outre, nous fournissons également une autre option de déploiement appelée : *nuxt generate*. Elle permet de construire une application Vue.js **générée statiquement**.
Nous croyons que cette option pourrait être la prochaine étape importante dans le développement d'applications web avec des microservices.

As a framework, Nuxt.js comes with 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.
En tant que framework, Nuxt.js est doté de nombreuses fonctionnalités pour vous aider dans votre développement entre côté client et serveur tels que les données asynchrones, les *middlewares*, les *layouts*, etc.

## How it Works
## Comment ça marche

![Vue with Webpack and Babel](https://i.imgur.com/avEUftE.png)
![Vue avec webpack et Babel](https://i.imgur.com/avEUftE.png)

Nuxt.js includes the following to create a rich web application development:
Nuxt.js inclut les éléments suivants afin de créer une expérience de développement optimale :

- [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)
- [Vue Router](https://github.com/vuejs/vue-router)
- [Vuex](https://github.com/vuejs/vuex) (inclut uniquement quand l'[option `store`](/guide/vuex-store) est activée)
- [Vue Meta](https://github.com/declandewet/vue-meta)

A total of only **57kb min+gzip** (53kb with vuex).
Un total de seulement **57ko min+gzip** (53ko avec 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.
Sous le capot, nous utilisons [webpack](https://github.com/webpack/webpack) avec [vue-loader](https://github.com/vuejs/vue-loader) et [babel-loader](https://github.com/babel/babel-loader) pour empaqueter (« bundle »), scinder (« code-split ») et minifier votre code.

## Features
## Fonctionnalités

- 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>` element (title, meta...)
- Hot module replacement in Development
- Pre-processor: SASS, LESS, Stylus, etc
- HTTP/2 push headers ready
- Extending with Modular architecture
- Écriture des fichiers Vue (`*.vue*`)
- Scission de code automatique
- Rendu coté serveur (ou « SSR » pour « Server-Side Rendering »)
- Routage puissant à l'aide de données asynchrones
- Génération de fichiers statiques
- Transpilation ES6/ES7
- Empaquetage et minification de vos fichiers JS et CSS
- Gestion des éléments de balise d'en-tête `<head>` HTML (`<title>`, `<meta>`, etc.)
- Rechargement à chaud pendant le développement
- Préprocesseur : Sass, Less, Stylus, etc.
- Entête HTTP/2 PUSH
- Extensibilité avec une architecture modulaire

## Schema
## Schéma

This schema shows what is called by nuxt.js when the server is called or when the user navigate through the app via `<nuxt-link>`:
Ce schéma (en anglais) montre ce qui est invoqué par Nuxt.js quand le serveur est appelé ou quand l'utilisateur navigue dans l'application à l'aide de `<nuxt-link>` :

![nuxt-schema](/nuxt-schema.png)

## Server Rendered (Universal SSR)
## Rendu côté serveur (SSR universel)

You can use nuxt.js as a framework to handle all the UI rendering of your project.
Vous pouvez utiliser Nuxt.js comme framework pour gérer le rendu complet de l'interface utilisateur de votre projet.

When launching `nuxt`, it will start a development server with hot-reloading and [vue-server-renderer](https://ssr.vuejs.org/en/) configured to automatically server-render your application.
En utilisant la commande `nuxt`, Nuxt démarrera un serveur de développement avec rechargement à chaud et [Vue Server Renderer](https://ssr.vuejs.org/fr/) sera configuré pour faire automatiquement le rendu de votre application côté serveur.

### Single Page Applications (SPA)
### Application monopage

If for any reason you prefer not using server side rendering or need static hosting for your applications, you can simply use SPA mode using `nuxt --spa`. Combination with *generate* feature gives a powerful SPA deployment mechanism without need to use Node.js runtime or any special server handling.
Si pour une quelconque raison vous préférez ne pas utiliser le rendu côté serveur ou que vous avez besoin d'un hébergement statique pour votre application, vous pouvez simplement utiliser le mode application monopage (ou « SPA » pour « Simple Page Application ») en utilisant la commande `nuxt --spa`. Combiné avec la fonctionnalité de *génération*, vous avez la une puissante application monopage qui ne nécessite aucunement de Node.js ou d'un serveur spécial pour fonctionner.

Take a look at [the commands](/guide/commands) to learn more about usage.
Jetez un œil à [la liste des commandes](/guide/commands) pour en savoir plus.

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/nuxt) guide.
Si vous avez déjà un serveur, vous pouvez greffer Nuxt.js en l'utilisant comme middleware. Il n'y a aucune restriction quand vous utilisez Nuxt.js pour développer votre application web universelle. Consultez le guide [d'utilisation de Nuxt.js par programmation](/api/nuxt).

## Static Generated (Pre Rendering)
## Génération statique (pré-rendu)

The big innovation of nuxt.js comes here: `nuxt generate`
La grande innovation de Nuxt.js est : `nuxt generate`

When building your application it will generate the HTML for every one of your routes and store it in a file.
Lors de la création de votre application, il génèrera le code HTML de chacune de vos routes pour le stocker dans un fichier.

Example:
Exemple :

```bash
-| pages/
----| about.vue
----| index.vue
```

Will generate:
Cela générera :

```
-| dist/
Expand All @@ -93,20 +93,20 @@ Will generate:
----| index.html
```

This way, you can host your generated web application on any static hosting!
De cette façon, vous pouvez héberger votre application web sur n'importe quel hébergement statique !

The best example is this website. It is generated and hosted on GitHub Pages:
Le meilleur exemple est ce site web. Il est généré et hébergé sur le système d'hébergement de page de GitHub :

- [Source code](https://github.com/nuxt/nuxtjs.org)
- [Generated code](https://github.com/nuxt/nuxtjs.org/tree/gh-pages)
- [Code source](https://github.com/nuxt/nuxtjs.org) (en anglais)
- [Code généré](https://github.com/nuxt/nuxtjs.org/tree/gh-pages) (en anglais)

We don't want to manually generate the application every time we update the [docs repository](https://github.com/nuxt/docs), so each push made calls an AWS Lambda function which:
Nous ne voulons pas générer manuellement l'application à chaque fois que nous mettons à jour la [documentation](https://github.com/nuxt/docs), du coup chaque modification réalisée invoque une fonction AWS Lambda qui :

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
1. Clone le [dépôt nuxtjs.org](https://github.com/nuxt/nuxtjs.org)
2. Installe les dépendances via `npm install`
3. Lance `nux generate`
4. Déploie le dossier `dist` sur la branche `gh-pages`

We now have a **Serverless Static Generated Web Application** :)
Et nous voilà avec une **application web générée sans fichiers statiques serveurs** :)

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 navigates through 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!
Nous pouvons aller plus loin en imaginant une application d'e-commerce créée avec `nuxt generate` et hébergée sur un CDN. Chaque fois qu'un produit est en rupture de stock ou de nouveau en stock nous régénérons l'application. Mais si l'utilisateur navigue sur l'application en même temps, il verra les informations à jour grâce aux appels d'API effectués sur l'API de l'e-commerce. Pas besoin d'avoir plusieurs instances d'un serveur d'un cache !
64 changes: 32 additions & 32 deletions en/guide/installation.md
Original file line number Diff line number Diff line change
@@ -1,92 +1,92 @@
---
title: Installation
description: Nuxt.js is really easy to get started with. A simple project only needs the `nuxt` dependency.
description: Débuter avec Nuxt.js est vraiment facile. Un projet simple n'a besoin que d'une dépendance à `nuxt`.
---

> Nuxt.js is really easy to get started with. A simple project only needs the `nuxt` dependency.
> Débuter avec Nuxt.js est vraiment facile. Un projet simple n'a besoin que d'une dépendance à `nuxt`.
## Using Nuxt.js starter template
## Utiliser le template de base de Nuxt.js

To get started quickly, the Nuxt.js team has created a [starter template](https://github.com/nuxt-community/starter-template).
Afin de démarrer rapidement, l'équipe Nuxt.js a créé un [template de démarrage](https://github.com/nuxt-community/starter-template).

[Download the .zip](https://github.com/nuxt-community/starter-template/archive/master.zip) starter template or install it with vue-cli:
[Téléchargez le .zip](https://github.com/nuxt-community/starter-template/archive/master.zip) du template de démarrage ou installez le à l'aide de vue-cli :

```bash
$ vue init nuxt-community/starter-template <project-name>
```

> If [vue-cli](https://github.com/vuejs/vue-cli) is not installed, please install it with `npm install -g vue-cli`
> Si [vue-cli](https://github.com/vuejs/vue-cli) n'est pas installée, merci de l'installer via `npm install -g vue-cli`
then install the dependencies:
puis installez les dépendances :

```bash
$ cd <project-name>
$ cd <nom-du-projet>
$ npm install
```

and launch the project with:
et démarrez le projet avec :
```bash
$ npm run dev
```
The application is now running on http://localhost:3000
L'application est désormais accessible à l'adresse http://localhost:3000.

<p class="Alert">Nuxt.js will listen for file changes inside the `pages` directory, so there is no need to restart the application when adding new pages.</p>
<p class="Alert">Nuxt.js va surveiller les modifications faites sur les fichiers du répertoire <code>pages</code> aussi il n'y a pas besoin de redémarrer le serveur quand vous ajoutez de nouvelles pages.</p>

To discover more about the directory structure of the project: [Directory Structure Documentation](/guide/directory-structure).
Pour en savoir plus sur la structure des répertoires du projet, consultez [la documentation de l'architecture des répertoires](/guide/directory-structure).

## Starting from scratch
## Commencer depuis zéro

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:
La création d'une application Nuxt.js à partir de zéro est également très simple, elle ne nécessite qu'*1 fichier et 1 répertoire*. Créez un répertoire vide pour commencer à travailler sur l'application :

```bash
$ mkdir <project-name>
$ cd <project-name>
$ mkdir <nom-du-projet>
$ cd <nom-du-projet>
```

*Info: replace project-name by the name of the project.*
<p class="Alert Alert--nuxt-green"><b>Info :</b> remplacez <code>&lt;nom-du-projet&gt;</nom-du-projet></code> par le nom du projet.</p>

### The package.json
### Le package.json

The project needs a `package.json` file to specify how to start `nuxt`:
Le projet a besoin d'un fichier `package.json` avec un script permettant de lancer `nuxt` :
```json
{
"name": "my-app",
"name": "mon-application",
"scripts": {
"dev": "nuxt"
}
}
```
`scripts` will launch Nuxt.js via `npm run dev`.
`scripts` lancera Nuxt.js via `npm run dev`.

### Installing `nuxt`
### Installation de `nuxt`

Once the `package.json` has been created, add `nuxt` to the project via npm:
Une fois que le `package.json` est créé, ajoutez `nuxt` au projet via npm :
```bash
npm install --save nuxt
```

### The `pages` directory
### Le dossier `pages`

Nuxt.js will transform every `*.vue` file inside the `pages` directory as a route for the application.
Nuxt.js va transformer chaque fichier `*.vue` se trouvant dans le dossier `pages` en une route pour l'application.

Create the `pages` directory:
Créez le dossier `pages` :
```bash
$ mkdir pages
```

then create the first page in `pages/index.vue`:
puis créez la première page `pages/index.vue`:
```html
<template>
<h1>Hello world!</h1>
<h1>Hello world !</h1>
</template>
```

and launch the project with:
et lancez le projet avec :
```bash
$ npm run dev
```
The application is now running on http://localhost:3000
L'application est désormais accessible à l'adresse http://localhost:3000.

<p class="Alert">Nuxt.js will listen for file changes inside the `pages` directory, so there is no need to restart the application when adding new pages.</p>
<p class="Alert">Nuxt.js va surveiller les modifications faites sur les fichiers du répertoire <code>pages</code> aussi il n'y a pas besoin de redémarrer le serveur quand vous ajoutez de nouvelles pages</p>

To discover more about the directory structure of the project: [Directory Structure Documentation](/guide/directory-structure).
Pour en savoir plus sur la structure des dossiers du projet, consultez [la documentation de l'architecture des dossiers](/guide/directory-structure).

0 comments on commit ebf50cc

Please sign in to comment.