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
Copy file name to clipboardExpand all lines: README.md
+7-7Lines changed: 7 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -8,29 +8,29 @@ de composants. Il peut s'utiliser facilement en tant que plugin.
8
8
9
9
### TL;DR
10
10
11
-
Avec npm:
11
+
Avec npm:
12
12
13
13
```shell
14
14
npm init vue-dsfr
15
15
```
16
16
17
-
Avec pnpm:
17
+
Avec pnpm:
18
18
19
19
```shell
20
20
pnpm create vue-dsfr
21
21
```
22
22
23
-
Avec yarn:
23
+
Avec yarn:
24
24
25
25
```shell
26
26
yarn create vue-dsfr
27
27
```
28
28
29
29
Et suivez le guide !
30
30
31
-
### Détails:
31
+
### Détails:
32
32
33
-
Cf. [le site officiel](https://vue-dsfr.netlify.app/?path=/story/docs-2-guide-d-utilisation--page)
33
+
Cf. [le site officiel](https://vue-dsfr.netlify.app/?path=/docs/docs-2-guide-d-utilisation--docs)
34
34
35
35
## Comment contribuer
36
36
@@ -43,7 +43,7 @@ et **la fusion doit être demandée dans `develop`.**
43
43
44
44
### Détails
45
45
46
-
Cf [le site officiel](https://vue-dsfr.netlify.app/?path=/story/docs-3-guide-du-d%C3%A9veloppeur--page)
46
+
Cf [le site officiel](https://vue-dsfr.netlify.app/?path=/docs/docs-3-guide-du-d%C3%A9veloppeur--docs)
47
47
48
48
## Utiliser la bibliothèque dans un projet existant (ou un nouveau projet sans passer par [`create-vue-dsfr`](https://www.npmjs.com/package/create-vue-dsfr))
49
49
### Installer la bibliothèque
@@ -65,7 +65,7 @@ const app = createApp(App)
65
65
.mount('#app')
66
66
```
67
67
68
-
Et ensuite, les composants sont utilisables directement dans les composants de l'application:
68
+
Et ensuite, les composants sont utilisables directement dans les composants de l'application:
Copy file name to clipboardExpand all lines: docs/icones.md
+12-12Lines changed: 12 additions & 12 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,7 +9,7 @@ title: Utiliser des icônes
9
9
Pour utiliser les icônes officielles avec les classes CSS du DSFR, il n’y a pas d’actions en plus à faire,
10
10
puisque c’est le CSS officiel du DSFR qui est utilisé.
11
11
12
-
Ci-dessous un exemple:
12
+
Ci-dessous un exemple:
13
13
14
14
::: code-group
15
15
@@ -24,7 +24,7 @@ Ci-dessous un exemple :
24
24
25
25
Plusieurs composants (`DsfrButton`, `DsfrBadge`, `DsfrCallout`...) ont la prop `icon` qui permet d’ajouter une icône.
26
26
27
-
Attention, cette icône n’est pas forcément une icône officielle du DSFR. En effet, VueDsfr utilise la bibliothèque [`oh-vue-icons`](https://oh-vue-icons.netlify.app/). Cette prop `icon` est donc:
27
+
Attention, cette icône n’est pas forcément une icône officielle du DSFR. En effet, VueDsfr utilise la bibliothèque [`oh-vue-icons`](https://oh-vue-icons.netlify.app/). Cette prop `icon` est donc:
28
28
29
29
- soit une `string` qui doit être un nom d’icône valide pour OhVueIcon ;
30
30
- soit la prop complète attendue par le composant `OhVueIcon` de la bibliothèque [`oh-vue-icons`](https://oh-vue-icons.netlify.app/).
@@ -44,7 +44,7 @@ Dans les deux cas il faut que cette icône ait été ajoutée (cf. plus loin)
44
44
45
45
## Les icônes déjà enregistrées dans VIcon (OhVueIcon) dans VueDsfr
46
46
47
-
Voici la liste des icônes déjà enregistrées dans la bibliothèque VueDsfr:
47
+
Voici la liste des icônes déjà enregistrées dans la bibliothèque VueDsfr:
48
48
49
49
::: code-group
50
50
<<< ../src/icons.ts
@@ -57,11 +57,11 @@ Ces icônes ont été ajoutées parce qu’elles sont utilisées dans les compos
57
57
::: warning
58
58
Il faudra utiliser le nom en **kebab-case** dans la prop `icon` des composants ou dans la prop `name` de `VIcon`
59
59
60
-
exemple:
60
+
exemple:
61
61
62
62
```vue
63
63
<template>
64
-
Une icône ici: <VIcon name="ri-close-line" />
64
+
Une icône ici: <VIcon name="ri-close-line" />
65
65
</template>
66
66
```
67
67
@@ -78,14 +78,14 @@ Il est fort probable que vous vouliez utiliser d’autres icônes que celle qui
78
78
### Ajouter des icônes Remix icons
79
79
80
80
Il est possible d’utiliser facilement toutes les icônes [Remix Icon](https://remixicon.com/) grâce à
81
-
[OhVueIcons](https://oh-vue-icons.js.org/): le composant `VIcon` est enregistré globalement si la bibliothèque est
81
+
[OhVueIcons](https://oh-vue-icons.js.org/): le composant `VIcon` est enregistré globalement si la bibliothèque est
82
82
utilisée en tant que plugin.
83
83
84
84
#### 1. Réexporter les icônes souhaitées depuis `oh-vue-icons`
85
85
86
86
La première étape est de créer un fichier `src/icons.ts` qui ré-exporte les icônes que vous souhaitez utiliser (il est déjà créé si vous avez utilisé `create-vue-dsfr` pour créer votre projet).
87
87
88
-
Ci-dessous un exemple:
88
+
Ci-dessous un exemple:
89
89
90
90
```typescript
91
91
// src/icons.ts
@@ -97,11 +97,11 @@ export {
97
97
} from'oh-vue-icons/icons/ri/index.js'// Import de quelques icônes de Remix Icon (ri)
98
98
```
99
99
100
-
Ensuite, deux possibilités: soit on les ajoute au plugin, soit directement à `OhVueIcon`. Cf. les prochaines sections selon votre projet.
100
+
Ensuite, deux possibilités: soit on les ajoute au plugin, soit directement à `OhVueIcon`. Cf. les prochaines sections selon votre projet.
101
101
102
102
#### 2.a. Si VueDsfr est utilisé en tant que plugin
103
103
104
-
Si vous utilisez VueDsfr en tant que plugin, il faudra importer ce fichier `src/icons.ts` dans votre point d’entrée Vue (en général `src/main.ts`) et donner dans l’objet `options` du plugin VueDsfr la propriété `icons` avec un tableau des icônes à enregistrer, comme ci-dessous:
104
+
Si vous utilisez VueDsfr en tant que plugin, il faudra importer ce fichier `src/icons.ts` dans votre point d’entrée Vue (en général `src/main.ts`) et donner dans l’objet `options` du plugin VueDsfr la propriété `icons` avec un tableau des icônes à enregistrer, comme ci-dessous:
105
105
106
106
```typescript{10,13}
107
107
// src/main.ts
@@ -123,7 +123,7 @@ createApp(App)
123
123
124
124
#### 2.b. Si VueDsfr n’est *pas* utilisé en tant que plugin
125
125
126
-
Si vous n’utilisez VueDsfr en tant que plugin, il faudra importer le fichier `src/icons.ts` dans votre point d’entrée Vue (en général `src/main.ts`), importer `addIcons` (import nommé) de `oh-vue-icons` et donner les icônes à enregistrer, c’est-à-dire celles qui sont exportées par `src/icons.ts`, comme ci-dessous:
126
+
Si vous n’utilisez VueDsfr en tant que plugin, il faudra importer le fichier `src/icons.ts` dans votre point d’entrée Vue (en général `src/main.ts`), importer `addIcons` (import nommé) de `oh-vue-icons` et donner les icônes à enregistrer, c’est-à-dire celles qui sont exportées par `src/icons.ts`, comme ci-dessous:
127
127
128
128
```typescript{5,14,17}
129
129
// src/main.ts
@@ -156,7 +156,7 @@ mises à disposition par [OhVueIcons](https://oh-vue-icons.netlify.app) en les a
156
156
Ci-dessous des exemples pour
157
157
[Remix Icon](https://remixicon.com/),
158
158
[Font Awesome 5](https://fontawesome.com/icons)
159
-
et [Bootstrap Icons](https://icons.getbootstrap.com/):
159
+
et [Bootstrap Icons](https://icons.getbootstrap.com/):
160
160
161
161
```typescript
162
162
// src/icons.ts
@@ -180,7 +180,7 @@ export {
180
180
181
181
## Pour Nuxt 3
182
182
183
-
Créer/modifier le fichier `vue-dsfr.ts` dans le dossier `plugins` avec un contenu comme celui-ci:
183
+
Créer/modifier le fichier `vue-dsfr.ts` dans le dossier `plugins` avec un contenu comme celui-ci:
Copy file name to clipboardExpand all lines: docs/pour-commencer.md
+16-16Lines changed: 16 additions & 16 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -7,19 +7,19 @@ Ceci est le guide d̛’utilisation de la bibliothèque. Si vous cherchez à con
7
7
8
8
La façon la plus simple de commencer un projet est d’utiliser le package `create-vue-dsfr`, qui permet de créer un projet NPM avec tout le nécessaire pour développer un projet utilisant VueDsfr, que ce soit pour Vite (Vue3) ou pour Nuxt (Nuxt3), avec ou sans TypeScript.
9
9
10
-
Avec npm:
10
+
Avec npm:
11
11
12
12
```shell
13
13
npm init vue-dsfr
14
14
```
15
15
16
-
Avec pnpm:
16
+
Avec pnpm:
17
17
18
18
```shell
19
19
pnpm create vue-dsfr
20
20
```
21
21
22
-
Avec yarn:
22
+
Avec yarn:
23
23
24
24
```shell
25
25
yarn create vue-dsfr
@@ -31,13 +31,13 @@ Et suivez les indications de l’assistant.
31
31
32
32
### Utiliser la bibliothèque en tant que plugin
33
33
34
-
| Notes: |
34
+
| Notes: |
35
35
|:---------------------------|
36
36
| Pour utiliser cette bibliothèque, il vous faudra **[Vue 3](https://v3.vuejs.org/)** (et **[Vue-Router 4](https://next.router.vuejs.org/)**). Par conséquent, si vous utilisez Nuxt, il vous faut **[Nuxt 3](https://v3.nuxtjs.org/)** (plus de détails plus loin). |
37
37
38
38
#### Installer la bibliothèque en tant que dépendance du projet
39
39
40
-
Afin d'installer la bibliothèque, taper ces commandes dans votre console au sein du répertoire du projet:
40
+
Afin d'installer la bibliothèque, taper ces commandes dans votre console au sein du répertoire du projet:
41
41
42
42
```shell
43
43
npm install @gouvfr/dsfr @gouvminint/vue-dsfr
@@ -83,7 +83,7 @@ const app = createApp(App)
83
83
La bibliothèque **`VueDsfr`** fournit bien plusieurs builds (`esm` et `umd`) et Nuxt3 sait lequel choisir.
84
84
85
85
Ensuite, il faut ajouter le plugin en créant le dossier `/plugins` s’il n’existe pas et en créant dedans un fichier `vue-dsfr.js`
0 commit comments