Nuxt框架使用vue-touch-keyboard虚拟键盘页面持续加载无法打开问题咨询

核心原因 #

vue-touch-keyboard是仅适配Vue2的纯客户端组件，Nuxt默认服务端渲染逻辑会触发未兼容的执行路径，导致页面隐式卡死无报错。 #

1. 修复SSR兼容问题 #

该库依赖浏览器原生window、document对象，服务端渲染阶段不存在这些API，会导致静默失败：

• 在nuxt.config.js中注册插件时添加ssr: false配置，仅在客户端加载该组件
• 页面中使用<client-only>标签包裹虚拟键盘组件，避免服务端渲染阶段执行

2. 修正组件注册逻辑 #

你当前在业务单文件组件内直接调用Vue.use()注册组件是错误写法：

• 全局注册逻辑要统一放到Nuxt的plugins目录下，避免重复注册导致实例冲突
• 组件样式不要在script中导入，统一放到nuxt.config的css配置项中加载更稳妥

3. 避免渲染死循环 #

输入框聚焦触发键盘弹出的逻辑可能被重复执行，导致死循环：

• 在show方法中添加重复触发判断，避免同一输入框多次触发显示逻辑
• 隐藏键盘时主动让输入框失焦，清空绑定的输入源

4. 版本匹配校验 #

如果你使用的是Nuxt3（基于Vue3），该库完全不兼容，需要更换适配Vue3的虚拟键盘组件。 #

完整修改示例 #

第一步：新增插件文件 plugins/vue-touch-keyboard.js #

import Vue from 'vue'
import VueTouchKeyboard from "vue-touch-keyboard"
import "vue-touch-keyboard/dist/vue-touch-keyboard.css"

Vue.use(VueTouchKeyboard)

第二步：修改 nuxt.config.js 配置 #

export default {
  // 其他配置保持不变
  plugins: [
    { src: '~/plugins/vue-touch-keyboard.js', ssr: false }
  ]
}

第三步：修改页面组件代码 #

<template>
  <div>
    <input type="text" placeholder="Text input" @focus="show" data-layout="normal" />
    <client-only>
      <vue-touch-keyboard :options="options" v-if="visible" :layout="layout" :cancel="hide" :accept="accept" :input="input" />
    </client-only>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      layout: "normal",
      input: null,
      options: {
        useKbEvents: false,
        preventClickEvent: false
      }
    }
  },
  methods: {
    accept(text) {
      alert("Input text: " + text);
      this.hide();
    },
    show(e) {
      // 避免重复触发显示逻辑
      if(this.input === e.target && this.visible) return
      this.input = e.target;
      this.layout = e.target.dataset.layout;
      this.visible = true
    },
    hide() {
      this.visible = false;
      // 主动失焦避免再次触发聚焦事件
      this.input?.blur()
      this.input = null
    }
  }
}
</script>

内容的提问来源于stack exchange，提问作者RegexHelp