Command Palette

Search for a command to run...

Logo File vault VUE

File vault VUE

07.2024 - 07.2024

  • Vue.js
  • TypeScript
  • Shadcn
  • TailwindCSS
  • Vercel
Capture d'écran de File vault VUE

Description du projet

File Vault Vue est un portage en Vue.js d'un composant d'upload de fichiers initialement créé par un membre de la communauté shadcn/ui pour React.

Le composant original offrait une expérience d'upload moderne avec drag-and-drop, prévisualisation des fichiers, barre de progression et gestion multi-fichiers. Comme il n'existait qu'en React, j'ai décidé de le recréer entièrement en Vue.js pour que la communauté Vue puisse en bénéficier.

Le portage conserve l'ensemble des fonctionnalités : glisser-déposer de fichiers depuis le bureau ou le gestionnaire de fichiers, validation du type MIME et de la taille maximale configurable, prévisualisation des images avec miniatures, progression d'upload en temps réel avec barre animée, gestion des erreurs avec messages explicites, et suppression individuelle des fichiers de la file d'attente.

L'architecture du composant suit les conventions Vue 3 Composition API avec TypeScript strict. Les props sont typées via defineProps, les events via defineEmits, et l'état interne est géré par des refs réactifs. Le composant expose des slots pour personnaliser le rendu de la zone de drop, des items de la liste et des messages d'erreur. Le styling repose sur Tailwind CSS et s'intègre nativement avec les composants shadcn-vue, ce qui permet de l'insérer dans un projet existant sans conflit de styles.

Le projet est déployé sur Vercel avec une démo interactive permettant de tester toutes les fonctionnalités directement dans le navigateur. Le code source est public et documenté pour faciliter l'intégration dans d'autres projets Vue.

Technologies utilisées

Ce projet utilise les technologies suivantes : Vue.js, TypeScript, Shadcn, TailwindCSS, Vercel.