Nuxt로 구성 요소를 전 세계적으로 사용하고 싶습니다.
의외로 기사가 나오지 않는다.
파일을 지정하는 방법을 잊어 버렸습니다.

그래서 비망록적인 느낌으로 씁니다.

환경

@nuxt/cli v2.11.0

사전 준비

↓이 녀석을 글로벌하게 사용하고 싶습니다 ...

components/Btn.vue

<!-- 子コンポーネント -->
<template>
  <button>クリック</button>
</template>

<script>
export default {};
</script>

　

↓이대로는 import하지 않으므로 사용할 수 없습니다.

pages/index.vue

<!-- 親コンポーネント -->
<template>
  <div class="MainPage">
    <子コンポーネント />
  </div>
</template>

<script>
export default {}
</script>

방법

간단합니다.
페이지 폴더와 같은 계층 구조에 있습니다.
plugins 폴더에 components.js 파일을 만듭니다 (파일 이름은 선택 사항)

그래서 아래와 같이 씁니다.

plugins/components.js

import Vue from 'vue'

//componentsファイルにあるグローバルにしたいコンポーネントをimport
import Button from '~/components/Btn'
//それを今回は'Button'というコンポーネント名で設定。
Vue.component('Button', Button)

그리고이 .js 파일을 nuxt.config.js의 plugins로 설정합니다.

nuxt.config.js

  plugins: [
    '~/plugins/components.js'
  ],

끝!

그리고는 원하는 때에 사용하기만 하면 됩니다.

pages/index.vue

<template>
  <div class="MainPage">
    <Button /> <!-- さっき設定したコンポーネントが使える -->
  </div>
</template>

<script>
export default {
}
</script>

제대로 구성 요소가 전역적으로 호출됩니다.

※디폴트로 모두 호출하는 설정이므로, 모든 페이지에 로드됩니다.
보통 컴포넌트는 부품으로 사용하기 때문에 import해야 한다는 것.
by 굉장한 엔지니어

이런 편리한 것도 있는 것 같습니다.

【Nuxt.js: 컴퍼넌트의 파일명에 suffix를 붙이는 것만으로, 컴퍼넌트를 어디에서라도 호출할 수 있도록 한다】
htps : // m / bag on / ms / 2d1485f418 6523 7b4d