Vue.js error: Duplicate key ‘components’ (no-dupe-keys)が発生した場合の対処法

作成日 2020.02.10
更新日 2020.07.21
Vue.js
Vue.js

vue.jsで eslint利用時に「error: Duplicate key ‘components’」が発生した場合の対応方法。今回は、ただcomponentsが重複していただけ

1. 環境
2. 原因
3. 対処法

環境

OS CentOS 8.0.1905 (Core)
node v12.13.1
npm 6.13.2
@vue/cli 4.1.1

※CentOS8にVue.jsの環境構築はこちら

原因

componentsを同じものを2つ利用していただけ

components: {
    hello
  },
  data() {
    return {
      open: true
    }
  },
  components: {
    hello
  },

対処法

当然ですが、どちらかを削除すれば解決します。

関連する記事

Vue.js dragoverイベントを取得する 2021.12.03

Vue.jsで、要素内にドラッグされている間イベントが発生するdragoverイベントを取得するサンプルコードを記述してます。「vue3」を使用して[…]
Vue.js 文字列を反転させる 2022.02.09

Vue.jsで、文字列を反転させるサンプルコードを記述してます。「vue3」を使用してます。目次 1. 環境 2. 文字列を反転環境 OS wi[…]
Vue.js tabキーの入力を取得する 2021.08.07

Vue.jsで、tabキーの入力を取得するサンプルコードを記述してます。「vue3」を使用してます。目次 1. 環境 2. tabキーの入力を取得[…]
Vue.js チェックボックスの切り替えで文字列を切り替える 2022.02.11

Vue.jsで、チェックボックスの切り替えで文字列を切り替えるサンプルコードを記述してます。「vue3」を使用してます。目次 1. 環境 2. チ[…]
Vue.jsのライブラリ「vue-flowy」を使用してワークフローを作成する 2020.02.06

vue.jsのライブラリであるvue-flowyを利用してサイト上に簡単なワークフローを作成するための手順目次 1. 環境 2. Vue環境構築 3[…]
Nuxt.js error Elements in iteration expect to have ‘v-bind:key’ directives vue/require-v-for-keyが発生時の対処法 2020.01.15

Nuxt.js(Vue.jsのフレームワーク)を v-forディレクティブを利用時にエラーが発生したので対処手順を記載。目次 1. 環境 2. エラ[…]
Vue.js 属性値を設定する 2022.06.07

Vue.jsで、htmlタグの属性値（アトリビュート）を設定するサンプルコードを記述してます。「vue3」を使用してます。目次 1. 環境 2. […]
Vue.js componentを作成する 2022.02.21

Vue.jsで、componentを作成するサンプルコードを記述してます。「vue3」を使用してます。目次 1. 環境 2. componentを[…]
Vue.js ダブルクリックイベントを取得する 2022.04.01

Vue.jsで、ダブルクリックイベントを取得するサンプルコードを記述してます。「vue3」を使用してます。目次 1. 環境 2. ダブルクリックイ[…]
Laravel7 Vue.jsを使用してSPAを実装する手順 2020.07.07

Laravel7でVue.jsを利用して、SPAを実装するまでの手順を記述してます。目次 1. 環境 2. Laravelアプリケーション作成 3.[…]