VueJS3, How to parse a csv file in my src folder? - csv

Question

I am using VueJS3 cli. New in VueJS here :)
I have a csv file in my folder:
/src/db/example.csv
I would like to load it and use it as data structure, in the same way I do it with json files:
import jsonExample from "#/db/example.json";
If I try to do it with a csv file I get this:
import csvExample from "#/db/example.csv";
// You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
I tried to install the csv-loader
yarn add csv-loader
But I don't know where to add the configuration (https://www.npmjs.com/package/csv-loader#user-content-usage) I don't have any webpack configuration file :/, I have:
babel.config.js
jsconfig.json
package.json
vue.config.js
yarn.lock
I also tried to use papaparse directly:
this.$papa.parse("#/db/example.csv");
But I get this error:
{
"data": [
[
"#/db/exaple.csv"
]
],
"errors": [
{
"type": "Delimiter",
"code": "UndetectableDelimiter",
"message": "Unable to auto-detect delimiting character; defaulted to ','"
}
],
"meta": {
"delimiter": ",",
"linebreak": "\n",
"aborted": false,
"truncated": false,
"cursor": 19
}
}
Obviously it is interpreting the Path as a the Data.

Answer 1

Following instructions here: https://cli.vuejs.org/guide/webpack.html#working-with-webpack
I configured the loader like this:
// vue.config.js
const { defineConfig } = require('#vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
chainWebpack: config => {
// csv-loader
config.module
.rule('csv-loader')
.test(/\.csv$/)
.use('csv-loader')
.loader('csv-loader')
.end()
}
})
Now this is working:
import data from "#/db/example.csv";
PD: I had to restart yarn serve