2017-23 @ Fabio Franchino

Include CSV in Vue-CLI project

Posted on July 19, 2020

Here the steps:

  • Install the loader with npm i csv-loader -D
  • Add in vue.config.js the webpack rule:
module.exports = {
  chainWebpack: config => {
    config
      .module
      .rule('csv')
      .test(/\.csv$/)
      .use('csv-loader')
      .loader('csv-loader')
      .options({
        dynamicTyping: true,
        header: true,
        skipEmptyLines: true
      })
      .end()
  }
}
  • Import the file anywhere in your components:
import csv from './assets/file.csv'

export default{
  created(){
    console.log(csv)
  }
}

It's already converted as JS object. Neat!

← Render datapoints with D3 and Webgl
Express wildcard origin snippet →