Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
Hello. I am using Laravel and Vue together. I installed vue-json-csv package to download my data to a csv file.
(downloaded it from here: https://www.npmjs.com/package/vue-json-csv)
The problem is I dont know how to use my own component with my own data. This is what Ive got:
in app.js:
import JsonCSV from 'vue-json-csv'
Vue.component( 'download', require('./components/download.vue').default);
in the download.vue template I inserted my data
<script>
export default {
data() {
return {
json_data: [
{
'name': 'Tony Peña',
'city': 'New York'
}
]
}
}
}
</script>
in my blade:
<download
class = "btn btn-primary"
:data = "json_data"
name = "filename.csv"
></download>
The problem I dont want to insert the data in the vue instance in app.js, but i want it in the download.vue template. I looked up the tutorial but its different from what I want
You just need to pass the data to the component. So something like this (assuming you have a component and include this in that component
<template>
<div>
<download
class="btn btn-primary"
:data="json_data"
></download>
</div>
</template>
<script>
export default {
data () {
return {
json_data: '{ "key": "value" }'
}
}
}
</script>
@BOBBYBOUWMANN - I am sorry , i already had this, The code didnt submit. I editted my post , could you look at it?
Do you get any errors?
@BOBBYBOUWMANN - Nope, no errors, I even tried this:
Vue.component( 'download', JsonCSV, require('./components/download.vue').default);
I tried to put the JsonCSV inside the component instance, yet no luck.
When I follow the package's tutorial , they do it like this:
Vue.component('downloadCsv', JsonCSV);
This works when you only insert the data in the (const app = new vue..).
Edit: I would like to know how I can use this package inside my own component
So there is no solution for this?
Please or to participate in this conversation.