0Pricing
Frontend Academy · Aula

Sistema de plugins: app.use()

Criar um plugin Vue como um objeto com um método install, registar componentes e diretivas globais e disponibilizar valores para toda a aplicação.

Sistema de plugins: app.use() é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.

O que é um plugin do Vue?

Um plugin é uma funcionalidade reutilizável que você instala em um app Vue: componentes globais, diretivas, valores fornecidos e auxiliares no estilo de protótipo, como roteador, i18n e Pinia. Os plugins são a forma como as bibliotecas se integram ao Vue.

Estrutura de um plugin

Um plugin é um objeto com um método install(app, options) — ou uma função que atua como o método de instalação.

// MyPlugin.ts
export default {
  install(app, options) {
    // Configure things here
  }
};

Instalando um plugin

Chame app.use(plugin, options) na instância do app Vue.

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

const app = createApp(App);
app.use(MyPlugin, { theme: 'dark' });
app.mount('#app');

Caso de uso de plugin: componentes globais

Registre globalmente muitos componentes pequenos para que os consumidores não precisem importar cada um deles.

// plugins/iconPack.ts
import IconChevron from './IconChevron.vue';
import IconClose from './IconClose.vue';
import IconUser from './IconUser.vue';

export default {
  install(app) {
    app.component('IconChevron', IconChevron);
    app.component('IconClose', IconClose);
    app.component('IconUser', IconUser);
  }
};

// main.ts
app.use(iconPack);

Caso de uso de plugin: diretivas globais

Registre diretivas personalizadas uma única vez para disponibilizá-las em todo o app.

export default {
  install(app) {
    app.directive('focus', { mounted: (el) => el.focus() });
    app.directive('click-outside', clickOutsideDirective);
  }
};

Caso de uso de plugin: provide()

Forneça valores para todo o app, que qualquer componente poderá injetar — algo comum para clientes de API e configurações.

import type { InjectionKey } from 'vue';
import { ApiClient } from './ApiClient';

export const ApiKey: InjectionKey<ApiClient> = Symbol('api');

export default {
  install(app, { baseURL }) {
    const api = new ApiClient({ baseURL });
    app.provide(ApiKey, api);
  }
};

// Anywhere:
const api = inject(ApiKey)!;

Plugins reais: Pinia, Vue Router e i18n

As principais bibliotecas do ecossistema Vue são plugins.

import { createPinia } from 'pinia';
import router from './router';
import { createI18n } from 'vue-i18n';

const app = createApp(App);
app.use(createPinia());
app.use(router);
app.use(createI18n({ /* ... */ }));

Opções de plugins

Os plugins aceitam opções para configurar seu comportamento no momento da instalação.

app.use(MyPlugin, {
  apiUrl: 'https://api.example.com',
  enableLogs: true,
  theme: 'dark'
});

// Inside the plugin:
install(app, options) {
  if (options.enableLogs) console.log('plugin installed');
}

Extensão de tipos do TypeScript

Para globalProperties ou auxiliares de injeção, amplie os tipos do Vue para que os consumidores recebam autocompletar.

// types.d.ts
declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $api: ApiClient;
  }
}

// In plugin:
install(app) {
  app.config.globalProperties.$api = new ApiClient();
}

globalProperties — padrão antigo

app.config.globalProperties.$foo expõe um valor como this.$foo nos componentes da API de opções e nos modelos. A API de composição prefere inject().

Instalação idempotente

Não cause uma falha se o plugin for instalado duas vezes — verifique uma sinalização ou use chaves de fornecimento baseadas em Symbol, que eliminam duplicações naturalmente.

Escrevendo seu próprio plugin

Se vários apps reutilizam uma configuração, como um encapsulador de autenticação, uma configuração de telemetria ou tokens de design, empacote-os como um plugin. Publicá-los no npm com uma assinatura limpa de install(app, options) é a forma idiomática do Vue de distribuir funcionalidades reutilizáveis.

Verificação rápida

Qual método você chama em uma instância de app Vue para instalar um plugin?

Recapitulação: plugins do Vue

Plugin = objeto com install(app, options). Instale por meio de app.use(plugin, options). Use plugins para registrar componentes globais, diretivas, valores fornecidos e configurar bibliotecas. Pinia, Vue Router e i18n são todos plugins. Amplie ComponentCustomProperties para propriedades com prefixo $. Mantenha a instalação idempotente.

Perguntas Frequentes

A aula “Sistema de plugins: app.use()” é grátis?

Sim — o texto completo de “Sistema de plugins: app.use()” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.

O que vou aprender em “Sistema de plugins: app.use()”?

Criar um plugin Vue como um objeto com um método install, registar componentes e diretivas globais e disponibilizar valores para toda a aplicação. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Frontend Academy?

Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.

Quanto tempo leva a aula “Sistema de plugins: app.use()”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Frontend Academy?

Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. provide() e inject() para injeção de dependências
  2. Componentes assíncronos e Suspense
  3. Diretivas personalizadas
  4. Sistema de plugins: app.use()
← Voltar para Frontend Academy