code.enj

Vue3 グローバルコンポーネントの実装

Vue

コンポーネント化したボタンを色々なところで使うといったパターンはよくあるかと思いますが、使う度にコンポーネントを呼び出すのが面倒...そんな時はグローバルに登録する方法を検討してみてはいかがでしょうか？
Vue3 で独自で実装したコンポーネントをグローバル登録する方法を解説します。

# コンポーネントの用意

まずはコンポーネントの用意から。今回はシンプルなボタンを作成してみます。
vue cli で作成したプロジェクトのsrc/components/配下に MyButton.vueファイルを作成し、以下のようなボタンを実装します。

<template>
  <div class="my-button">
    <slot></slot>
  </div>
</template>

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

<style lang="scss">
.my-button {
  display: inline-block;
  padding: 4px 16px;
  border: 1px solid #cfcfcf;
  border-radius: 4px;
  cursor: pointer;
  transition: all ease 0.4s;
  &:hover {
    opacity: 0.6;
  }
}
</style>

# グローバルに登録する

次に作成したコンポーネントをグローバルに登録する方法です。 src配下にある main.jsを開き、まずは実装したコンポーネントを呼び出します。
そして createAppのcomponentメソッドで実装したコンポーネントをグローバルに登録してあげる、これだけでグローバルコンポーネントとして登録することができます。






 




 


import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

import MyButton from "./components/MyButton";

createApp(App)
    .use(store)
    .use(router)
    .component("MyButton", MyButton)
    .mount("#app");

# グローバルコンポーネントを使ってみる

先程登録したグローバルコンポーネントを使ってみます。
vue cli で作成したプロジェクトにデフォルトで実装されている src/views/Home.vueのテンプレート内に<MyButton>ボタン</MyButton>を追加します。



 

















<template>
  <div class="home">
    <MyButton>ボタン</MyButton>
    <img alt="Vue logo" src="../assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js App" />
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";

export default {
  name: "Home",
  components: {
    HelloWorld,
  },
};
</script>

http://localhost:8080/を開くとボタンが表示されているのが確認できるかと思います。
本来であれば、各コンポーネントで importして、componentsに登録しないといけないところが、グローバルコンポーネントに登録することで、いちいち呼び出さずともコンポーネントが使えるようになるのが便利ですね。