Currently, my Laravel application utilizes Vue.js as the frontend JavaScript framework. While I employ components for large scripts, I prefer using a Vue instance in the blade template for smaller scripts.
The issue arises with my app.js configuration - favoring one method breaks the other and vice versa.
require('./bootstrap');
window.Vue = require('vue');
Vue.component('repairs', require('./components/repairs.vue'));
Vue.component('repair-show', require('./components/repair-show.vue'));
const app = new Vue({
el: '#app'
});
This code snippet works well with components, while the one below excels at creating an instance:
require('./bootstrap');
window.Vue = require('vue');
Vue.component('repairs', require('./components/repairs.vue'));
Vue.component('repair-show', require('./components/repair-show.vue'));
I understand the challenge stemming from exporting components to the global Vue instance; however, I am curious if there exists an alternate configuration that enables both methods to function seamlessly.
To provide context, here is a sample of a Vue script within a Vue component:
import axios from 'axios';
var csrf_token = $('meta[name="csrf-token"]').attr('content');
export default {
created() {
this.blocks = JSON.parse(this.b);
this.contractors = JSON.parse(this.c);
this.token = csrf_token;
},
props: ['b', 'c'],
data(){
return {
blocks: '',
blockSelected: '',
units: '',
token: '',
}
},
methods: {
getUnits: function(){
var self = this;
axios.post('/getrepairsUnit', {
blockSelected: this.blockSelected,
})
.then(function(response) {
self.units = response.data;
})
.catch(function(error) {
console.log(error);
});
},
}
}
Additionally, here is an example of my Vue instance...
<script>
var app = new Vue({
el: '#app',
data: {
deposit: 0
}
});
</script>
When attempting to run the Vue instance, I encounter this error message:
[Vue warn]: Property or method "deposit" is not defined on the instance but referenced during render. Ensure you declare reactive data properties in the data option.
(found in root instance)
Although I can log output successfully, the view does not capture the data. This issue seems to resolve when I remove the global instance from the app.js file.
Thank you