Menu
I installed gruhn/vue-qrcode-reader package for reading QR codes.
this is my qrscan.blade.php
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Vue</title>
<link href="{{ mix('css/app.css') }}" rel="stylesheet" type="text/css">
</head>
<body>
<div id="app"></div>
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>
app.js
require('./bootstrap');
window.Vue = require('vue');
import Vue from 'vue'
import VueQrcodeReader from 'vue-qrcode-reader'
Vue.use(VueQrcodeReader)
const app = new Vue({
el: '#app',
components: { App },
});
and my vue-qrcode-reader.vue
<template>
<QrcodeReader
:paused="paused"
@decode="onDecode"
@init="onInit">
<div v-if="content" class="decoded-content">{{ content }}</div>
<LoadingIndicator v-show="loading" />
</QrcodeReader>
</template>
<script>
import { QrcodeReader } from 'vue-qrcode-reader'
import InitHandler from '@/mixins/InitHandler'
export default {
components: { QrcodeReader },
mixins: [ InitHandler ],
data () {
return {
paused: false,
content: null
}
},
methods: {
onDecode (content) {
this.content = content
this.paused = true
}
}
}
</script>
<style scoped>
.
.
.
</style>
And this is my route
Route::get('/qrscan', 'InventoryItemController@QRscan');
What am I doing wrong? All i get is blank page its like my .vue file is not detected by my blade.php file.
862
Okay so there are a few issues. Mainly in app.js. To start off when you are creating your vue instance you are referencing an unknow variable App. I assume this is your root component, but you've never imported it, so Vue doesn't know this.
Secondly, you have not imported your component in the app.js for the qr reader - vue-qrcode-reader.vue. Thus, it is not loaded and not usable.
And thirdly Vue is never being rendered. Why? You haven't rendered it when creating the Vue instance, nor in the blade file by referencing some Vue component.
So how could the fixed code look? app.js:
require('./bootstrap');
window.Vue = require('vue');
import Vue from 'vue'
import VueQrcodeReader from 'vue-qrcode-reader'
import VueQrCodeReaderComponent from './components/vue-qrcode-reader.vue'
Vue.use(VueQrcodeReader)
Vue.component('vue-qr-code-reader', VueQrCodeReaderComponent);
const app = new Vue({
el: '#app',
});
Now your Vue instance knows about the existence of your QR code reader component and we can reference it in the blade file to render it like this:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Vue</title>
<link href="{{ mix('css/app.css') }}" rel="stylesheet" type="text/css">
</head>
<body>
<div id="app">
<vue-qr-code-reader></vue-qr-code-reader>
</div>
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>
So now, your app.js imports the vue-qrcode-reader.vue which is your component, binds it to "html" tag <vue-qr-code-reader> using the Vue.component method and then we can use it in our blade file. Don't forget to recompile your javascript and hope this helps :)
144
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
