Add support for Microsoft Excel

[Rednas83]

Is your feature request related to a problem? Please describe.

Not able to parse excel files!

Describe the solution you'd like

Add support for an excel parser like https://github.com/SheetJS/sheetjs to also support xlsx

Something like: await this.$content(excel).only([sheet]).fetch()

Describe alternatives you've considered

• Export all seperate tabs as csv and import with 'content' as array of objects
• Parse with a server api

[itpropro]

To be honest, I think supporting a proprietary format that is very uncommon in web development compared to one of the most common file/media format would not really help the module. This would basically mean that the project could be bloated with parsers for countless spreadsheet/table formats. The much more straight forward approach would be to convert your data from xls/xlsx/csv to json and let nuxt content do the rest. JSON is the widest and most optimized format for the usecase of nuxt content, which is providing a file system based database to query from. Think of some kind of minimal filesystem based MongoDB implementation.

[Rednas83]

Thanks for your honest opinion. I appreciatie it.

Nice thing of sheetjs is that it supports lots of differents spreadsheet programs like XLS(X), DBF, ODS, etc. https://github.com/SheetJS/sheetjs#file-formats

So perhaps adding 1 parser could be enough? Or perhaps as a seperate extension?

I also just asked for adding nuxt support with the SheetJs library itself. Perhaps this indeed makes more sense. https://github.com/SheetJS/sheetjs/issues/2496

With SSR it feels a bit strange that I need to manually convert the sheets to csv/json. But perhaps it's just me being lazy🤭

[reviewher]

@itpropro this would be feasible as a really short custom parser, but @nuxt/content assumes the files contain UTF-8 encoded text: https://github.com/nuxt/content/blob/main/packages/content/lib/database.js#L233

If there were a way for the custom parsers to get the raw content as a buffer, then it would also allow for compressed text files (.txt.gz), word processor documents (.docx, .doc, .pages) and other non-plaintext formats.

[reviewher]

https://github.com/SheetJS/sheetjs/issues/2496#issuecomment-1062557645

[Tahul]

Hello!

This is really interesting, I'm adding both v1 and v2 tags.

I think supporting XLSX into @nuxt/content v2 should be possible and definitely be in the roadmap.

Expect updates soon, and thank your for the issue!

[SheetJSDev]

In case you need inspiration, our VueJS demo includes a neat example

https://user-images.githubusercontent.com/6070939/157599532-e3978b11-c4be-4873-a2a3-e02e68ad0c3b.mp4

The index.vue page is not particularly interesting (it really should just reuse a CSV example)

The nuxt.config.js file uses extendParser to listen to a number of file formats. It generates an array of JS objects per worksheet.

A sample file can be placed in the content folder

[Tahul]

That is lovely @SheetJSDev ; definitely taking this into consideration to plan xlsx support for @nuxt/content!

[Rednas83]

Official support for sheetjs would make an awesome feature I think.

Is it already decided to support it or not?

[SheetJSDev]

Official support would be nice, but it would probably suffice to include some example in the Community Snippets or Integrations section of the documentation. The SheetJS writeup for this integration was moved to https://docs.sheetjs.com/docs/demos/content#nuxtjs

[Rednas83]

Just tried this with v2, but unfortunately extendParser is not supported (yet). See #1822 for the feature request.

[SheetJSDev]

For Nuxt Content v2, it should be doable with custom transformers. Unfortunately there's a bug with custom transformers, see #1823

[SheetJSDev]

@Rednas83 since you asked, https://docs.sheetjs.com/docs/demos/static/nuxtjs/#nuxt-content-v2 (the demo page includes examples for "Nuxt v2 + Nuxt Content v1" and "Nuxt v3 + Nuxt Content v2")

The official Nuxt Content docs should be revisited, as the transformer docs had some errors.

Observing that files placed in the content subfolder have the ID content:${filename}, it's possible for a transformer to re-read the raw data from the filesystem as a NodeJS Buffer:

import { readFileSync } from "node:fs";
import { resolve } from 'node:path';

const raw_bytes = (id) => readFileSync(resolve("./content/" + id.slice(8)));

This is certainly brittle. If there's a better approach, please comment and we can update our docs.

[Rednas83]

For some reason I am not able to import defineTransformer

How did you manage to do this or should we wait for the next version of Nuxt Content v2?

Documentation looks great. Perhaps use this command for cleaning the cache in nuxt npx nuxi clean|cleanup [rootDir] instead of rm -rf .nuxt/content-cache

[SheetJSDev]

The demo works without error. Updated docs page to use npx nuxi clean.

.

The displayed error affects npx nuxt typecheck and VSCodium but does not affect the actual build or the generated output.

Based on the docs, you should be able to add an alias to nuxt.config.ts:

export default defineNuxtConfig({
  // ...
    alias: {
    '@nuxt/content/transformers': 'node_modules/@nuxt/content/dist/runtime/transformers'
  }
});

That sates the typechecker and VSCodium but breaks npx yarn run generate.

The solution will require a patch to @nuxt/content and possibly a patch to nuxt

[Rednas83]

After clean and restart of nuxt the alias works alias: { '@nuxt/content/transformers': 'node_modules/@nuxt/content/dist/runtime/transformers/utils' } I also have this in the terminal Resulting in:

Version info: NodeJs v18.12.1

[SheetJSDev]

That's exactly what happens locally. If you don't add the alias, the build works but the types fail. If you add the alias, the types work but the build fails (complete showstopper). Until this is resolved, suppress the type error by adding // @ts-ignore just before the import:

// @ts-ignore
import { defineTransformer } from "@nuxt/content/transformers/utils";

[Rednas83]

Just tried with the latest version of nuxt, but looks like xlsx is not supported anymore😢

For some reason it also required installing @types/node

[SheetJSDev]

Upstream issue https://github.com/nuxt/nuxt/issues/18572 . The node types issue affects a blank project:

npx nuxi init -t content newproject
cd newproject
npx yarn install
npx nuxi typecheck

the error looks like

Nuxi 3.1.1                                                            06:15:00
error TS2688: Cannot find type definition file for 'node'.
  The file is in the program because:
    Entry point of type library 'node' specified in compilerOptions


Found 1 error.


 ERROR  Command failed with exit code 2: npx -p vue-tsc -p typescript vue-tsc --noEmit

  at makeError (node_modules/nuxi/dist/shared/nuxi.a75c2bed.mjs:619:11)
  at handlePromise (node_modules/nuxi/dist/shared/nuxi.a75c2bed.mjs:1026:26)
  at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
  at async Object.invoke (node_modules/nuxi/dist/chunks/typecheck.mjs:46:7)
  at async _main (node_modules/nuxi/dist/cli.mjs:51:20)

[SheetJSDev]

Following up here, @danielroe is working on some changes to make @types/node a dev dependency in the starter projects. While we wait for the new starters, you can manually add that module as a dev dependency with npx yarn add --dev @types/node

We've added that step to our demo page and the generated project now passes npx nuxi typecheck