Nuxt 2中@dargmuesli/nuxt-cookie-control组件使用问题求助

问题说明 #

在Nuxt 2项目中使用@dargmuesli/nuxt-cookie-control时，自动导入组件功能失效，直接在layouts/default.vue中使用<CookieControl>组件会触发以下报错：

known custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

当前使用的配置如下：

// nuxt.config.js
module.exports = {
  // ...其他配置
  cookieControl: {
    barPosition: 'bottom-full',
    cookies: {
      necessary: [
        {
          name: {
            en: 'Authentication',
            fi: 'Todennus',
          },
          description: {
            en: 'Used for customer authentication',
            fi: 'Käytetään asiakkaan todentamiseen',
          },
          cookies: [
            'auth._token.local',
            'auth._token_expiration.local',
          ],
        },
      ],
      optional: [],
      closeModalOnClickOutside: false,
      isCookieIdVisible: true,
      locales: ['en', 'fi'],
    },
  }
}

手动使用组件的两种方法 #

1. 在单个布局/页面中局部注册组件 #

直接在使用组件的文件中导入并注册，以layouts/default.vue为例：

<template>
  <div>
    <CookieControl />
    <!-- 你的布局内容 -->
  </div>
</template>

<script>
// 手动导入组件
import { CookieControl } from '@dargmuesli/nuxt-cookie-control/components'

export default {
  components: {
    CookieControl // 注册组件
  }
}
</script>

2. 全局注册组件（全项目可用） #

如果需要在多个页面/布局中使用，可以通过Nuxt插件全局注册：

1. 创建插件文件plugins/cookie-control.js：

import Vue from 'vue'
import { CookieControl } from '@dargmuesli/nuxt-cookie-control/components'

// 全局注册组件
Vue.component('CookieControl', CookieControl)

2. 在nuxt.config.js中配置插件：

module.exports = {
  // ...其他配置
  plugins: [
    '~/plugins/cookie-control.js'
  ]
}

Nuxt 2 专属注意事项 #

• 版本适配：确保安装的是适配Nuxt 2的版本，@dargmuesli/nuxt-cookie-control v4.x及以上版本仅支持Nuxt 3，Nuxt 2需安装v3.x版本：

npm install @dargmuesli/nuxt-cookie-control@3.x

• 模块注册：必须在nuxt.config.js的modules数组中注册该模块，否则配置项不会生效：

module.exports = {
  modules: [
    '@dargmuesli/nuxt-cookie-control'
  ],
  // ...你的cookieControl配置
}

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