Design System Library

Les librairies UX comme Naive UI offrent une large gamme de composants préconçus pour accélérer le développement d'interfaces tout en garantissant une bonne expérience utilisateur. Elles permettent de gagner du temps et de se concentrer sur la logique métier plutôt que sur les détails du design. Sans librairies UX, chaque composant d'interface doit être conçu et stylisé manuellement, ce qui peut être long et source d'incohérences visuelles dans l'application.

Naive UI

Naive UI est une librairie de composants Vue 3 conçue pour créer des interfaces utilisateur modernes et réactives. Elle propose une variété de composants prêts à l'emploi, tels que des boutons, des champs de saisie, des modales, des listes déroulantes, etc.

Pour utiliser Naive UI dans votre projet Vue 3, commencez par l'installer :

npm install naive-ui

Puis, importez et configurez Naive UI dans main.js :

import { createApp } from 'vue';
import NaiveUI from 'naive-ui';
import App from './App.vue';

const app = createApp(App);
app.use(NaiveUI);
app.mount('#app');

Utilisation des composants Naive UI

Naive UI propose de nombreux composants pour créer rapidement une interface moderne. Voyons comment utiliser certains de ces composants en remplaçant des éléments HTML de base par des composants Naive UI.

Cas du composant Counter.component.vue

<script lang="ts" setup>
  import {computed, ref} from 'vue';
  import {NButton, NCard, NText} from 'naive-ui';

  const counter = ref(0);
  const doubleCounter = computed(() => counter.value * 2);

  const reset = () => {
    counter.value = 0;
  };
</script>

<template>
  <n-card bordered title="Compteur">
    <n-text strong>Valeur actuelle : {{ counter }}</n-text>
    <br/>
    <n-text type="success">Double : {{ doubleCounter }}</n-text>
    <br/><br/>
    <n-button type="primary" @click="counter++">Incrémenter</n-button>
    <n-button :disabled="counter === 0" class="ml-2" type="error" @click="reset">
      Réinitialiser
    </n-button>
  </n-card>
</template>

Documentation

Pour en savoir plus sur les composants et les fonctionnalités de Naive UI, consultez la documentation officielle.