VueJS import and parse CSV (frontend only)

Question

can you please share a working example of parsing CSV file from client?

I can't seem to find any working example at all ...

I have been playing around with vue-papa-parser and vue-csv-import but can make it work :(

Here is my component file (using the latter package):

    <template lang="html">
     <div class="container">
       <h1 class="h2">CSV Upload</h1>
       <div class="dragndrop text-muted d-flex flex-column justify-content-center align-items-center border border-secondary">
    
          <vue-csv-import
              v-model="csv"
              :fields="{name: {required: false, label: 'Name'}, age: {required: true, label: 'Age'}}"
          >
              <vue-csv-toggle-headers></vue-csv-toggle-headers>
              <vue-csv-errors></vue-csv-errors>
              <vue-csv-input></vue-csv-input>
              <vue-csv-map :auto-match="false"></vue-csv-map>
          </vue-csv-import>
       </div>
     </div>
    </template>
    
    <script>
      import { VueCsvImport } from 'vue-csv-import';
    
      export default {
        name: "CSVUpload",
        components: {
          VueCsvImport
        },
        data() {
          return {
            csv: null
          }
        },
        methods: {
        }
      }
    </script>
    
    <style lang="css" scoped>
    .dragndrop {
      background-color: #f5f5f5;
      height: 50vh;
      width: 80%;
      margin: 2.5em auto;
    }
    </style>

but on the console I am getting this:

[Vue warn]: Error in render: "TypeError: Cannot read property 'VueCsvImportData' of undefined"

found in

---> <VueCsvImport>
       <CallRecordUpload> at src/components/admin/Upload/Upload.vue
         <Home> at src/components/Home.vue
           <App> at src/App.vue
             <Root>

and thus I cannot even see any INPUT TYPE="FILE" to try to upload ... there is something wrong with the vue-csv-import :(

any thoughts?

EDIT: SOLVED

I had to install lower version (v4 is for vue3 only!)

npm install [email protected] --save

works for me great!

thx @marsnebulasoup for the tip !!

Answer 1

bad version .. it automatically uses the latest version 4 (which is for vue3 only .. for vue2 I had to use 2.3.4 and it worked great :) )

see the changelog