在 nuxt.js 中 import 仅客户端可用的组件

734 阅读1分钟

在nuxt.js中如果导入某些在初始化时就调用了window、document的组件,则在服务端渲染时就会报错。比如vue-qr组件如果直接导入使用,则会报错:

那么可以使用此方法进行导入

<client-only>
    <vue-qr text="hello qr"></vue-qr>
</client-only>


<script>
export default {
    components: {
        [process.client && "VueQr"]: () => import("vue-qr")
    }
}
</script>

这样就只会在客户端导入 client 组件,而不会在服务端导入