Vue Academy · Aula

Arquitetura de plugins e app.use()

Objeto de plugin { install(app, options) }, acesso a app.component, app.directive e app.provide.

Aula 1 de 413 etapas

Arquitetura de plugins e app.use() é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 1 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 Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.

O que é um plug-in do Vue

Um plug-in do Vue é um código reutilizável que adiciona funcionalidades no nível da aplicação — componentes globais, diretivas, serviços injetados ou configuração. Exemplos: Vue Router, Pinia e bibliotecas de i18n.

Você registra um plug-in uma única vez com app.use(plugin).

O contrato de instalação

Um plug-in é um objeto com um método install(app, options) ou uma função usada diretamente como install. O Vue o chama com a instância da aplicação e quaisquer opções que você passar.

const myPlugin = {
  install(app, options) {
    // register things on the app here
    console.log('installing with', options)
  }
}

export default myPlugin

Registrando componentes globais

Dentro de install, use app.component(name, definition) para registrar um componente disponível em todos os modelos sem precisar importá-lo.

import BaseButton from './BaseButton.vue'
import BaseIcon from './BaseIcon.vue'

const uiKit = {
  install(app) {
    app.component('BaseButton', BaseButton)
    app.component('BaseIcon', BaseIcon)
  }
}

Registrando diretivas globais

Use app.directive(name, definition) para registrar globalmente uma diretiva personalizada, como v-focus ou v-tooltip.

const focusPlugin = {
  install(app) {
    app.directive('focus', {
      mounted(el) {
        el.focus()
      }
    })
  }
}

// usage in any template: <input v-focus />

Fornecendo serviços injetáveis

app.provide(key, value) expõe um valor que qualquer componente descendente pode ler com inject(key). Essa é a maneira moderna de compartilhar serviços (um cliente de API ou uma configuração) sem usar variáveis globais.

const apiPlugin = {
  install(app, options) {
    const client = createClient(options.baseURL)
    app.provide('api', client)
  }
}

Consumindo o serviço fornecido

Qualquer componente usa inject para ler o que o plug-in forneceu. Prefira uma chave de injeção tipada (um Symbol) por segurança, mas chaves de texto também funcionam.

<script setup>
import { inject } from 'vue'

const api = inject('api')
async function load() {
  const data = await api.get('/users')
}
</script>

Passando opções para um plug-in

O segundo argumento de app.use é encaminhado como o parâmetro options de install. Use-o para configurar o comportamento no momento do registro.

import { createApp } from 'vue'
import App from './App.vue'
import apiPlugin from './plugins/api'

const app = createApp(App)
app.use(apiPlugin, { baseURL: 'https://api.example.com' })
app.mount('#app')

Os plug-ins são executados antes de mount

Todas as chamadas de app.use acontecem antes de app.mount. No momento da montagem, todos os componentes globais, diretivas e valores fornecidos já estão registrados, portanto a primeira renderização já tem acesso a eles.

const app = createApp(App)
app.use(router)
app.use(pinia)
app.use(uiKit)
// everything is registered, now render
app.mount('#app')

Instalação idempotente

O Vue impede a instalação do mesmo plug-in duas vezes na mesma aplicação — a segunda chamada de app.use com um plug-in idêntico é ignorada. Ainda assim, projete install para ser segura e evite efeitos colaterais fora da instância da aplicação.

app.use(myPlugin) // installs
app.use(myPlugin) // ignored, no double registration

Um plug-in mínimo completo

Juntando tudo: um plug-in pode registrar um componente, uma diretiva e fornecer um serviço em um único método install.

import Banner from './Banner.vue'

export default {
  install(app, options = {}) {
    app.component('AppBanner', Banner)
    app.directive('focus', { mounted: (el) => el.focus() })
    app.provide('config', { theme: options.theme || 'light' })
  }
}

Plug-in versus composição reutilizável

Use um plug-in para uma configuração em toda a aplicação que é executada uma vez (componentes globais ou o fornecimento de um serviço singleton). Use uma composição reutilizável para uma lógica reutilizável com estado, consumida por componente. Os plug-ins geralmente configuram o que as composições reutilizáveis leem posteriormente por meio de inject.

Verificação rápida

Teste sua compreensão da arquitetura de plug-ins.

Responda na aula interativa

Recapitulação

Você aprendeu sobre a arquitetura de plug-ins:

Um plug-in expõe install(app, options) (ou é uma função)
app.component / app.directive registram elementos globais
app.provide expõe serviços injetáveis que são lidos por meio de inject
app.use(plugin, options) registra o plug-in antes de mount
A instalação é idempotente — uma segunda instalação é ignorada

Grátis para começar

Aprenda HTML com um tutor de IA — grátis

Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.

Cursos: 42
Aulas: 156

Começar a aprender grátis Ver o curso completo

Perguntas Frequentes

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

Sim — o texto completo de “Arquitetura de plugins e 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 Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.

O que vou aprender em “Arquitetura de plugins e app.use()”?

Objeto de plugin { install(app, options) }, acesso a app.component, app.directive e app.provide. Você pratica Vue 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 Vue Academy?

Nenhuma experiência prévia é necessária. Vue 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 1 de 4.

Quanto tempo leva a aula “Arquitetura de plugins e 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 Vue Academy?

Sim. Cada aula de Vue 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

Arquitetura de plugins e app.use()
Propriedades globais e provide/inject em plugins
Exemplo de plugin de notificações e toasts
Publicação e tipagem de plugins Vue

← Voltar para Vue Academy