Vueコンポーネントの自動的な必要なインポート

Vue では、グローバルコンポーネントやローカル登録の方法を使用してコンポーネントを使用することができます。

グローバル登録#

app.componentを使用してグローバルコンポーネントを作成します。

import { createApp } from 'vue'
import HelloWorld from './components/HelloWorld'

const app = createApp({})

// hello-wolrdという名前のグローバルコンポーネントを登録します
app.component('hello-wolrd', HelloWorld);

コンポーネントをグローバルに登録すると、どこからでもこのコンポーネントを使用できます：<hello-wolrd/>

グローバル登録はTypeScriptのサポートを失うことに注意してください。Vue 3 には、グローバルコンポーネントのインターフェースを拡張するPRがあります。現在、Volarはこの使用法をサポートしており、components.d.tsファイルをルートディレクトリに追加することでグローバルコンポーネントのTypeScriptサポートを追加できます。

declare module 'vue' {
  export interface GlobalComponents {
    HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
  }
}

ローカル登録#

Vue コンポーネントをファイルから直接インポートして使用することができます。

シングルファイルコンポーネント（SFC）内での使用方法

<template>
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

JSX 内での使用方法

import HelloWolrd from './components/HelloWorld.vue'
export default {
  name: "item",
  render(){
    return (
      <HelloWolrd msg="Welcome to Your Vue.js App"/>
    )
  }
}

ローカル登録されたコンポーネントは他のコンポーネントからアクセスできず、親コンポーネントや子コンポーネントなどで使用できません。そのため、このコンポーネントを使用する場所ごとに再度インポートして登録する必要があります。

import HelloWolrd from './components/HelloWorld.vue'

ただし、このような直接コンポーネントをインポートする方法にはもう 1 つの利点があります。インポートしたコンポーネントがtypescriptを使用している場合、プラグインなしでスマートな入力補完と型チェックの機能をコンポーネント内で利用できます。

ローカル自動登録#

ローカル登録の利点は明らかですが、使用するたびにインポートを繰り返す必要があります。しかし、コンポーネントが多い場合、コンポーネントの登録コードが冗長になる可能性があります。そこで、unplugin-vue-componentsを使用してコンポーネントを自動的に必要に応じてインポートすることができます。コンポーネントを必要に応じてインポートするだけで、インポートとコンポーネントの登録は不要です。

このプラグインは使用されているコンポーネントに対してcomponents.d.tsを自動的に生成し、TypeScriptのサポートを提供します。

プラグインのインストール

vite

// vite.config.ts
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    Components({ /* options */ }),
  ],
})

rollup

// rollup.config.js
import Components from 'unplugin-vue-components/rollup'

export default {
  plugins: [
    Components({ /* options */ }),
  ],
}

webpack

// webpack.config.js
module.exports = {
  /* ... */
  plugins: [
    require('unplugin-vue-components/webpack')({ /* options */ })
  ]
}

その後、テンプレート内で通常どおりコンポーネントを使用することができます。自動的に次の変換が行われます。

<template>
  <div>
    <HelloWorld msg="Hello Vue 3.0 + Vite" />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

変換結果は次のようになります。

<template>
  <div>
    <HelloWorld msg="Hello Vue 3.0 + Vite" />
  </div>
</template>

<script>
import HelloWorld from './src/components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

デフォルトでは、src/componentsディレクトリ内のコンポーネントが検索されます。dirsパラメータを使用してカスタムコンポーネントディレクトリを指定することもできます。その他の設定についてはhttps://github.com/antfu/unplugin-vue-components#configurationを参照してください。

異なるアプローチの比較#

	グローバル登録	ローカル登録	unplugin-vue-components
TypeScript サポート	`components.d.ts`ファイルを定義	デフォルトサポート	`components.d.ts`ファイルが自動的に生成されます
コンポーネントのスコープ	グローバル	ローカル	ローカル
使用方法	グローバル登録後に使用	ローカル登録後に使用	プラグインを追加して使用

ckvv