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

2020.02.10
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
  },

1

2

3

4

5

6

7

8

9

10

11

components: {

hello

},

data() {

return {

open: true

}

},

components: {

hello

},

対処法

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

関連する記事

Laravel7 vue.jsを使用する手順 2020.05.13

Laravel7でvue.jsを使用できるようにするまでの手順を記述してます。目次 1. 環境 2. laravel/uiをインストール 3. 確認[…]
Vue.js v-cloakのサンプルコード 2019.11.21

v-cloakを利用して、バインディングされる前に mastache構文( {{hoge}} ) が表示されないようにするサンプルコード目次 1. […]
Vue.js ant-design-vueを使用してみる 2020.01.19

vueのUIフレームワーク「ant-design-vue」が、なかなか良さそうなので、利用するまでの構築手順を記載目次 1. 環境 2. Vue環境[…]
Nuxt.js axiosを使用してAPI接続しJSONデータを取得する 2019.12.06

Nuxt.jsでaxiosを使ってAPIデータを取得する手順とサンプルコードです。デザイン部は vuetify を利用しています。目次 1. 環境 […]
Vue.js vue-sweetalert2をインストールしてalertを表示する 2020.01.20

Vueのライブラリvue-sweetalert2をインストールしてalertを表示するまでの簡単なサンプルコードです。 bootstrap-vueも少[…]
Vue.js Vue-multiselectを利用してselectbox で複数選択を可能にする 2019.12.18

VueのライブラリVue-multiselectをインストールしてselectboxで複数選択できるようするまでの簡単なサンプルコードです。目次 1[…]
Vue.js Bootstrap-Vueを利用したプロジェクトの作成 2019.12.11

Bootstrap-Vueを利用してbootstrap4を簡単に利用できるプロジェクトの作成手順。目次 1. 環境 2. Vue CLI インストー[…]
Vue.js error: Parsing error: Unterminated string constantが発生した場合の対処法 2020.02.20

vue.jsで eslint利用時に「error: Parsing error: Unterminated string constant」が発生した[…]
Vue.js vue-yandex-shareを使用してsnsシェアボタンを実装する 2020.02.07

vue.jsのライブラリでsnsシェアボタンを実装できる「vue-yandex-share」を利用して、サイトに必要なsnsシェアボタンを設置するまで[…]
Vue.js v-onとコンポーネントの利用のサンプルコード 2019.11.02

v-onとコンポーネントの登録と利用の仕方の簡単なサンプルコード目次 1. 環境 2. サンプルコード環境 OS windows10 p[…]