You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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."
3
+
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é."
4
4
---
5
5
6
-
> 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.
6
+
> 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é.
7
7
8
-
## What is Nuxt.js ?
8
+
## Nuxt.js, qu’est-ce que c’est ?
9
9
10
-
Nuxt.js is a framework for creating Universal Vue.js Applications.
10
+
Nuxt.js est un framework pour créer des applications Vue.js universelles.
11
11
12
-
Its main scope is **UI rendering**while abstracting away the client/server distribution.
12
+
Son principal but est de **faire le rendu d'interface utilisateur (« UI »)**en faisant abstraction de la distribution entre le client et le serveur.
13
13
14
-
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.
14
+
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.
15
15
16
-
Nuxt.js presets all the configuration needed to make your development of a Vue.js Application **Server Rendered** more enjoyable.
16
+
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.
17
17
18
-
In addition, we also provide another deployment option called: *nuxt generate*. It will build a **Static Generated** Vue.js Application.
19
-
We believe that option could be the next big step in the development of Web Applications with microservices.
18
+
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**.
19
+
Nous croyons que cette option pourrait être la prochaine étape importante dans le développement d'applications web avec des microservices.
20
20
21
-
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.
21
+
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.
22
22
23
-
## How it Works
23
+
## Comment ça marche
24
24
25
-
25
+
26
26
27
-
Nuxt.js includes the following to create a rich web application development:
27
+
Nuxt.js inclut les éléments suivants afin de créer une expérience de développement optimale :
A total of only**57kb min+gzip** (53kb with vuex).
34
+
Un total de seulement**57ko min+gzip** (53ko avec Vuex).
35
35
36
-
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.
36
+
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.
37
37
38
-
## Features
38
+
## Fonctionnalités
39
39
40
-
-Write Vue Files
41
-
-Automatic Code Splitting
42
-
- Server-Side Rendering
43
-
-Powerful Routing System with Asynchronous Data
44
-
-Static File Serving
45
-
- ES6/ES7 Transpilation
46
-
-Bundling and minifying of your JS & CSS
47
-
-Managing `<head>`element (title, meta...)
48
-
-Hot module replacement in Development
49
-
-Pre-processor: SASS, LESS, Stylus, etc
50
-
- HTTP/2 push headers ready
51
-
-Extending with Modular architecture
40
+
-Écriture des fichiers Vue (`*.vue*`)
41
+
-Scission de code automatique
42
+
-Rendu coté serveur (ou « SSR » pour « Server-Side Rendering »)
43
+
-Routage puissant à l'aide de données asynchrones
44
+
-Génération de fichiers statiques
45
+
-Transpilation ES6/ES7
46
+
-Empaquetage et minification de vos fichiers JS et CSS
47
+
-Gestion des éléments de balise d'en-tête `<head>`HTML (`<title>`, `<meta>`, etc.)
48
+
-Rechargement à chaud pendant le développement
49
+
-Préprocesseur : Sass, Less, Stylus, etc.
50
+
-Entête HTTP/2 PUSH
51
+
-Extensibilité avec une architecture modulaire
52
52
53
-
## Schema
53
+
## Schéma
54
54
55
-
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>`:
55
+
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>`:
56
56
57
57
58
58
59
-
## Server Rendered (Universal SSR)
59
+
## Rendu côté serveur (SSR universel)
60
60
61
-
You can use nuxt.js as a framework to handle all the UI rendering of your project.
61
+
Vous pouvez utiliser Nuxt.js comme framework pour gérer le rendu complet de l'interface utilisateur de votre projet.
62
62
63
-
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.
63
+
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.
64
64
65
-
### Single Page Applications (SPA)
65
+
### Application monopage
66
66
67
-
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.
67
+
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.
68
68
69
-
Take a look at [the commands](/guide/commands)to learn more about usage.
69
+
Jetez un œil à [la liste des commandes](/guide/commands)pour en savoir plus.
70
70
71
-
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.
71
+
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).
72
72
73
-
## Static Generated (Pre Rendering)
73
+
## Génération statique (pré-rendu)
74
74
75
-
The big innovation of nuxt.js comes here: `nuxt generate`
75
+
La grande innovation de Nuxt.js est : `nuxt generate`
76
76
77
-
When building your application it will generate the HTML for every one of your routes and store it in a file.
77
+
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.
78
78
79
-
Example:
79
+
Exemple :
80
80
81
81
```bash
82
82
-| pages/
83
83
----| about.vue
84
84
----| index.vue
85
85
```
86
86
87
-
Will generate:
87
+
Cela générera :
88
88
89
89
```
90
90
-| dist/
@@ -93,20 +93,20 @@ Will generate:
93
93
----| index.html
94
94
```
95
95
96
-
This way, you can host your generated web application on any static hosting!
96
+
De cette façon, vous pouvez héberger votre application web sur n'importe quel hébergement statique !
97
97
98
-
The best example is this website. It is generated and hosted on GitHub Pages:
98
+
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 :
-[Code source](https://github.com/nuxt/nuxtjs.org) (en anglais)
101
+
-[Code généré](https://github.com/nuxt/nuxtjs.org/tree/gh-pages) (en anglais)
102
102
103
-
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:
103
+
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 :
104
104
105
-
1. Clone the [nuxtjs.org repository](https://github.com/nuxt/nuxtjs.org)
106
-
2.Install the dependencies via `npm install`
107
-
3.Run `nuxt generate`
108
-
4.Push the `dist`folder to the`gh-pages` branch
105
+
1. Clone le [dépôt nuxtjs.org](https://github.com/nuxt/nuxtjs.org)
106
+
2.Installe les dépendances via `npm install`
107
+
3.Lance `nux generate`
108
+
4.Déploie le dossier `dist`sur la branche`gh-pages`
109
109
110
-
We now have a **Serverless Static Generated Web Application** :)
110
+
Et nous voilà avec une **application web générée sans fichiers statiques serveurs** :)
111
111
112
-
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!
112
+
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 !
description: Nuxt.js is really easy to get started with. A simple project only needs the `nuxt` dependency.
3
+
description: Débuter avec Nuxt.js est vraiment facile. Un projet simple n'a besoin que d'une dépendance à `nuxt`.
4
4
---
5
5
6
-
> Nuxt.js is really easy to get started with. A simple project only needs the `nuxt` dependency.
6
+
> Débuter avec Nuxt.js est vraiment facile. Un projet simple n'a besoin que d'une dépendance à `nuxt`.
7
7
8
-
## Using Nuxt.js starter template
8
+
## Utiliser le template de base de Nuxt.js
9
9
10
-
To get started quickly, the Nuxt.js team has created a [starter template](https://github.com/nuxt-community/starter-template).
10
+
Afin de démarrer rapidement, l'équipe Nuxt.js a créé un [template de démarrage](https://github.com/nuxt-community/starter-template).
11
11
12
-
[Download the .zip](https://github.com/nuxt-community/starter-template/archive/master.zip)starter template or install it with vue-cli:
12
+
[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:
> If[vue-cli](https://github.com/vuejs/vue-cli)is not installed, please install it with`npm install -g vue-cli`
18
+
> Si[vue-cli](https://github.com/vuejs/vue-cli)n'est pas installée, merci de l'installer via`npm install -g vue-cli`
19
19
20
-
then install the dependencies:
20
+
puis installez les dépendances :
21
21
22
22
```bash
23
-
$ cd<project-name>
23
+
$ cd<nom-du-projet>
24
24
$ npm install
25
25
```
26
26
27
-
and launch the project with:
27
+
et démarrez le projet avec :
28
28
```bash
29
29
$ npm run dev
30
30
```
31
-
The application is now running on http://localhost:3000
31
+
L'application est désormais accessible à l'adresse http://localhost:3000.
32
32
33
-
<pclass="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>
33
+
<pclass="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>
34
34
35
-
To discover more about the directory structure of the project: [Directory Structure Documentation](/guide/directory-structure).
35
+
Pour en savoir plus sur la structure des répertoires du projet, consultez [la documentation de l'architecture des répertoires](/guide/directory-structure).
36
36
37
-
## Starting from scratch
37
+
## Commencer depuis zéro
38
38
39
-
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:
39
+
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:
40
40
41
41
```bash
42
-
$ mkdir <project-name>
43
-
$ cd<project-name>
42
+
$ mkdir <nom-du-projet>
43
+
$ cd<nom-du-projet>
44
44
```
45
45
46
-
*Info: replace project-name by the name of the project.*
46
+
<pclass="Alert Alert--nuxt-green"><b>Info :</b> remplacez <code><nom-du-projet></nom-du-projet></code> par le nom du projet.</p>
47
47
48
-
### The package.json
48
+
### Le package.json
49
49
50
-
The project needs a `package.json`file to specify how to start`nuxt`:
50
+
Le projet a besoin d'un fichier `package.json`avec un script permettant de lancer`nuxt`:
51
51
```json
52
52
{
53
-
"name": "my-app",
53
+
"name": "mon-application",
54
54
"scripts": {
55
55
"dev": "nuxt"
56
56
}
57
57
}
58
58
```
59
-
`scripts`will launch Nuxt.js via `npm run dev`.
59
+
`scripts`lancera Nuxt.js via `npm run dev`.
60
60
61
-
### Installing`nuxt`
61
+
### Installation de`nuxt`
62
62
63
-
Once the `package.json`has been created, add`nuxt`to the project via npm:
63
+
Une fois que le `package.json`est créé, ajoutez`nuxt`au projet via npm:
64
64
```bash
65
65
npm install --save nuxt
66
66
```
67
67
68
-
### The `pages` directory
68
+
### Le dossier `pages`
69
69
70
-
Nuxt.js will transform every `*.vue`file inside the `pages`directory as a route for the application.
70
+
Nuxt.js va transformer chaque fichier `*.vue`se trouvant dans le dossier `pages`en une route pour l'application.
71
71
72
-
Create the `pages`directory:
72
+
Créez le dossier `pages` :
73
73
```bash
74
74
$ mkdir pages
75
75
```
76
76
77
-
then create the first page in`pages/index.vue`:
77
+
puis créez la première page `pages/index.vue`:
78
78
```html
79
79
<template>
80
-
<h1>Hello world!</h1>
80
+
<h1>Hello world!</h1>
81
81
</template>
82
82
```
83
83
84
-
and launch the project with:
84
+
et lancez le projet avec :
85
85
```bash
86
86
$ npm run dev
87
87
```
88
-
The application is now running on http://localhost:3000
88
+
L'application est désormais accessible à l'adresse http://localhost:3000.
89
89
90
-
<pclass="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>
90
+
<pclass="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>
91
91
92
-
To discover more about the directory structure of the project: [Directory Structure Documentation](/guide/directory-structure).
92
+
Pour en savoir plus sur la structure des dossiers du projet, consultez [la documentation de l'architecture des dossiers](/guide/directory-structure).
0 commit comments