Encountering issues with the registration component in VueJS. I acquired the component from https://github.com/wanxe/vue-button-spinner via npm install. Subsequently, I integrated the code into my Laravel 5.5 app.js file.
The contents of my app.js:
require('./bootstrap');
window.Vue = require('vue');
import Spinner from './components/Spinner.vue'
window.onload = function () {
Vue.component('button-spinner', require('./components/Spinner.vue'));
var vw = new Vue({
el: '#app',
components: {
'button-spinner': Spinner
}
});
};
Snippet of Spinner.vue code:
<script>
import VueButtonSpinner from 'vue-button-spinner';
console.log('Test');
export default {
name: 'events-form',
data() {
return {
isLoading: false,
status: '',
}
},
components: {
VueButtonSpinner
},
methods: {
onSubmit() {
this.isLoading = true
$someRequest('/url', 'GET')
.then(response => {
this.isLoading = false
this.status = true // or success
setTimeout(() => { this.status = '' }, 2000) // to clear the status :)
})
.catch(error => {
console.error(error)
this.isLoading = false
this.status = false //or error
})
}
},
mounted() {
console.log('Component mounted.')
}
}
</script>
Following the integration, I executed npm run dev and included the necessary HTML code.
<div id="app">
<button-spinner
:isLoading="isLoading"
:disabled="isLoading"
:status="status">
<input type="submit" :disabled="submitted" :class="{ 'disabled': submitted == true }" @click="submit('register', $event)"
v-model="registerSubmit" id="registerSubmit" style="width: 100%; height: 40px">
</button-spinner>
</div>
<script src="{{URL::asset('js/app.js')}}"></script>
However, upon testing, the component failed to work as expected. The console output indicated a
Unknown custom element: <button-spinner>https://i.sstatic.net/Uxk0l.png
EDIT:
After removing window.onload = function () from app.js, the
console.log('Component mounted.')[Vue warn]: Failed to mount component: template or render function not defined.found in---> <ButtonSpinner> at resources/assets/js/components/Spinner.vue<Root>An additional issue emerged after excluding the window.onload. This was exacerbated by linking extra JS files in the HTML.
<script src="{{URL::asset('js/login.js')}}"></script>
<script src="{{URL::asset('js/register.js')}}"></script>
These scripts, which utilize VueJS, generated numerous errors.
https://i.sstatic.net/hTOaA.png
While everything functioned seamlessly with window.onload, the question arises whether these files should be incorporated directly into app.js? For instance, should the register.js file be included like so: https://pastebin.com/0uHxRcN9.
Revised app.js content:
window.Vue = require('vue');
require('./bootstrap');
import Spinner from './components/Spinner.vue'
require('./register');
require('./login');
new Vue({
el: '#app',
components: {
'button-spinner': Spinner
}
});