Framework Guide

Vue

Integrate TabularJS into a Vue 3 application using the Composition API to parse spreadsheet files directly in the browser.

Installation

bash

npm install tabularjs

Composition API

Use ref for reactive state and a template ref to trigger the hidden file input.

App.vuehtml

<template>
    <div>
        <input
            ref="inputRef"
            type="file"
            @change="handleFile"
            style="display: none"
        />
        <button @click="inputRef.click()">Upload Spreadsheet</button>
        <pre v-if="data">{{ JSON.stringify(data, null, 2) }}</pre>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import tabularjs from 'tabularjs';

const data = ref(null);
const inputRef = ref(null);

async function handleFile(e) {
    const file = e.target.files[0];
    if (file) {
        data.value = await tabularjs(file);
    }
}
</script>

Options API

Prefer the classic Options API? TabularJS works just as well.

App.vuehtml

<template>
    <div>
        <input
            ref="inputRef"
            type="file"
            @change="handleFile"
            style="display: none"
        />
        <button @click="$refs.inputRef.click()">Upload Spreadsheet</button>
        <pre v-if="data">{{ JSON.stringify(data, null, 2) }}</pre>
    </div>
</template>

<script>
import tabularjs from 'tabularjs';

export default {
    data() {
        return { data: null };
    },
    methods: {
        async handleFile(e) {
            const file = e.target.files[0];
            if (file) {
                this.data = await tabularjs(file);
            }
        }
    }
}
</script>