@dazzadev/vue-sheet-mapper
v3.1.0
Published
Vue 3 component for Excel and CSV imports: users match each column of their file to one of your fields
Maintainers
Readme
Features
- Excel & CSV — reads
.xlsx,.xlsand.csv, detecting the text encoding - Auto-match — maps columns to fields by key, label or aliases, accent-insensitive
- Reactive schemas — pass a
ref,computedor getter; fields may arrive from your API after the file is picked - Two output modes — the mapped rows, or the raw file plus a mapping dictionary for server-side imports
- Bring your own validation — one hook hands you every row; zod, yup, your own function or your backend
- i18n — 5 built-in locales (en, es, fr, pt, nl) with per-key overrides
- Themeable — every visual property is a CSS custom property; icons and strings are replaceable
- Headless —
useSheetMappercarries the whole flow with no markup - TypeScript — full type declarations included
Installation
npm install @dazzadev/vue-sheet-mapper xlsx
xlsxis a peer dependency. Read Security before choosing a version — the copy published on npm is stale and carries unfixed advisories.
Quick start
<script setup lang="ts">
import { SheetMapper } from "@dazzadev/vue-sheet-mapper";
import "@dazzadev/vue-sheet-mapper/style.css";
import type { MappedResult, SchemaField } from "@dazzadev/vue-sheet-mapper";
const fields: SchemaField[] = [
{ key: "name", label: "Name", requireColumn: true },
{ key: "email", label: "Email", requireColumn: true },
];
function onMapped(results: MappedResult[]) {
// one entry per assigned column
}
</script>
<template>
<SheetMapper
:fields="fields"
@mapped="(results) => onMapped(results as MappedResult[])"
/>
</template>Documentation
Everything else lives in the docs:
| | | | --- | --- | | Guide | Installation, security, validation, output modes, file handling, headless usage | | Customization | i18n, icons, matcher, transform, slots, CSS theming | | API | Props, events, TypeScript types, exports | | Changelog | Every release, with migration notes |
Contributing
pnpm install
pnpm dev # the demo, with hot reload
pnpm docs:dev # the documentation site
pnpm test # the suite
pnpm build # typecheck + library buildLicense
MIT
