如何从Vue单文件组件中获取app对象以注册自定义元素？

方案1：组件内直接配置编译器选项（Vue 3 + 常规script写法，优先推荐） #

你不需要获取全局app实例，Vue 3支持在单文件组件的组件选项中直接声明compilerOptions，该配置仅对当前组件生效，完全符合你仅在当前文件管理自定义元素规则的需求：

<script>
export default {
  compilerOptions: {
    isCustomElement: tag => tag === 'gcse:searchresults-only'
    // 如果你有多个gcse前缀的自定义元素，也可以写成匹配前缀的形式
    // isCustomElement: tag => tag.startsWith('gcse:')
  },
  // 其余组件逻辑
}
</script>

方案2：script setup语法适配 #

如果你用的是<script setup>语法糖，只需要在同文件新增一个普通script块声明配置即可：

<!-- 普通script块仅用于声明编译器配置 -->
<script>
export default {
  compilerOptions: {
    isCustomElement: tag => tag.startsWith('gcse:')
  }
}
</script>

<script setup>
// 你的业务逻辑代码
</script>

方案3：全版本兼容写法（Vue 2/3通用，无需修改配置） #

如果你用的是基于Vue 2的旧版Gridsome，没有组件级compilerOptions配置，直接用动态组件语法渲染即可，Vue会自动跳过组件解析，将其识别为原生自定义元素：

<template>
  <component :is="'gcse:searchresults-only'" />
</template>

Gridsome全局配置方案（仅当多个组件用到该元素时使用） #

如果后续你有多个组件需要用到gcse系列自定义元素，可以在Gridsome配置中全局设置，在项目根目录的gridsome.server.js中添加如下配置：

module.exports = function (api) {
  api.chainWebpack(config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => {
        options.compilerOptions = {
          ...options.compilerOptions,
          isCustomElement: tag => tag.startsWith('gcse:')
        }
        return options
      })
  })
}

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