Use in Nuxtjs

[kiyavash]

I've tried to use this library in my Nuxt project but I faced an issue it would be great if anyone could help me! here is my code : <template> <div> <client-only> <StreamBarcodeReader @decode="onDecode"></StreamBarcodeReader> </client-only> </div> </template> <script> import { StreamBarcodeReader } from 'vue-barcode-reader' export default { components: { StreamBarcodeReader, }, But when I load the page I get reference Error : Window is not defined

[zecka]

I had the same issue. Solved by moving StreamBarcodeReader into another component that is rendered with <client-only>

I think the issue come from the import of vue-barcode-reader library and not from component usage, that's why you got this error even if you use <client-only>tag. By moving import of vue-barcode-reader in a new component who are render in <client-only> tag, the import of librarie will be trigger only on client.

~/components/TestBarcodeReader.vue

<template>
    <client-only>
        <BarcodeReader></BarcodeReader>
    </client-only>
</template>
<script>
import BarcodeReader from "~/components/BarcodeReader.vue"
export default {
    components: {
        StreamBarcodeReader,
    },
}
</script>

~/components/BarcodeReader.vue

<template>
    <StreamBarcodeReader @decode="onDecode" @loaded="onLoaded"></StreamBarcodeReader>
</template>
<script>
import { StreamBarcodeReader } from 'vue-barcode-reader'
export default {
    components: {
        StreamBarcodeReader,
    },
    methods:{
        onDecode(){},
        onLoaded(){},
    }
}
</script>

You probably will have following error:Cannot use import statement outside a module

In this case add following rules to nuxt.config.js

export default {
    build: {
        transpile: ["vue-barcode-reader"]
    }
}

[kiyavash]

@zecka thank you my friend you helped me a lot!