Compatibility of jspreadsheet-ce v4.13.4 with Nuxt 3 about ce HOT 4 OPEN

Be wary when using ssr framework such as Nuxt or Next. You have to make sure jspreadsheet is running in client environment instead of server side.

from ce.

from ce.

You need to make a client side plugin to use it. I made an example for you:

make a file
"jspreadsheet.client.ts"

import jspreadsheet from "jspreadsheet-ce";
import "jspreadsheet-ce/dist/jspreadsheet.css";
export default defineNuxtPlugin(() => {
  return {
    provide: {
      jspreadsheet,
    },
  };
});

put the file in plugins directory in your nuxt3 project

then you can call it as a plugin from useNuxtApp()
Here's example, works in any page:

<template>
    <div>
        <div ref="spreadsheet"></div>
    </div>
</template>

<script setup>
const spreadsheet = ref(null);
const { $jspreadsheet } = useNuxtApp();
onMounted(() => {
    console.log($jspreadsheet);
    $jspreadsheet(spreadsheet.value, {
        data: [
            ["A", "B", "C"],
            ["D", "E", "F"],
            ["G", "H", "I"],
        ],
        minDimensions: [3, 3]
    });
});
</script>

Any client side modules should be used this way to ensure the code is excuded in browser.

from ce.

Working example here:
https://stackblitz.com/edit/github-pqerlg?file=app.vue

from ce.