Plugins

No Vue, plugins são usados para adicionar funcionalidades globais a uma aplicação. Eles podem ser usados para registrar componentes, adicionar métodos ou propriedades a instâncias Vue, manipular a funcionalidade de diretivas e muito mais. Plugins são uma maneira poderosa de estender o comportamento da aplicação de maneira modular e reutilizável.

Criando um Plugin

Aqui está um exemplo de como criar um plugin simples no Vue:

1. Defina o plugin: Crie um arquivo para o plugin. Vamos chamá-lo de MyPlugin.ts.

import type { App } from "vue";

export default {
  install(app: App) {
    // Adicionar um método global
    app.config.globalProperties.$myMethod = () => {
      console.log("Meu método global!");
    };

    // Adicionar um diretiva global
    app.directive("focus", {
      mounted(el) {
        el.focus();
      },
    });

    // Adicionar um componente global
    app.component("MyComponent", {
      template: `<div>Este é um componente global!</div>`,
    });
  },
};

2. Use o plugin na sua aplicação: No ponto de entrada da aplicação, geralmente main.ts, importe e use o plugin.

import { createApp } from "vue";
import App from "./App.vue";
import MyPlugin from "./plugins/MyPlugin";

const app = createApp(App);

// Usando o plugin
app.use(MyPlugin);

app.mount("#app");

3. Usando funcionalidades do plugin: Agora você pode usar as funcionalidades adicionadas pelo plugin em qualquer lugar da sua aplicação.

Método Global:

<script setup lang="ts">
  import { getCurrentInstance } from "vue";

  const instance = getCurrentInstance();
  const useMyMethod = () => {
    instance?.appContext.config.globalProperties.$myMethod();
  };
</script>

<template>
  <button @click="useMyMethod">Chamar Método Global</button>
</template>

Diretiva Global:

<template>
  <input v-focus />
</template>

Componente Global:

<template>
  <MyComponent />
</template>

Conclusão

Plugins no Vue.js são uma maneira eficiente de adicionar funcionalidades reutilizáveis e globais à sua aplicação. Eles são fáceis de criar e integrar, permitindo que você expanda as capacidades da sua aplicação de forma modular. Utilizando o script setup e TypeScript, a criação de plugins se torna ainda mais organizada e tipada.