Vue Academy · Aula

Desenvolvimento de Plugins

Crie plugins do Vue instaláveis.

Desenvolvimento de Plugins é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 2 de 3. 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 3 aulas no total.

O que é uma extensão?

Uma extensão do Vue reúne funcionalidades no nível do app que você pode instalar em uma única chamada: componentes globais, diretivas, propriedades ou integrações de terceiros. As extensões são como bibliotecas como Vue Router e Pinia se conectam ao seu app.

A função install

Uma extensão é um objeto com um método install (ou simplesmente uma função). O Vue a chama com a instância do app e todas as opções que você passar.

export const myPlugin = {
  install(app, options) {
    // set up global features here
  }
}

Instalar uma extensão

Registre uma extensão com app.use, passando opcionalmente um objeto de opções. O Vue executa a função de instalação uma vez.

import { createApp } from "vue"
import { myPlugin } from "./myPlugin"

const app = createApp(App)
app.use(myPlugin, { greeting: "Hi" })

Registrar componentes globais

Dentro da instalação, registre componentes globalmente para que todas as partes do app possam usá-los sem importá-los.

import BaseButton from "./BaseButton.vue"

export const uiKit = {
  install(app) {
    app.component("BaseButton", BaseButton)
  }
}

Registrar diretivas globais

Uma extensão também pode registrar diretivas globalmente, reunindo comportamentos relacionados do DOM em um único pacote instalável.

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

Fornecer propriedades globais

Use app.config.globalProperties para adicionar uma propriedade disponível em cada instância de componente, algo útil para utilitários como um formatador ou cliente HTTP.

export const apiPlugin = {
  install(app, options) {
    app.config.globalProperties.$api = options.client
  }
}

// in any component: this.$api.get("/users")

Usando provide com a API de composição

Para facilitar o uso com a API de composição, use app.provide no seu plug-in para que os componentes possam usar inject na configuração.

export const themePlugin = {
  install(app, options) {
    app.provide("theme", options.theme)
  }
}

// in setup: const theme = inject("theme")

Passando opções

O argumento de opções permite que os usuários configurem seu plug-in. Leia-o dentro da função de instalação para personalizar o comportamento.

export const greeter = {
  install(app, options = {}) {
    const word = options.greeting || "Hello"
    app.config.globalProperties.$greet = (name) => word + ", " + name
  }
}

Um plug-in de função

Um plug-in pode ser uma função simples, em vez de um objeto com uma função de instalação; o Vue trata a própria função como o instalador.

export function simplePlugin(app, options) {
  app.config.globalProperties.$version = "1.0.0"
}

app.use(simplePlugin)

Um exemplo completo de plug-in

Um plug-in real costuma combinar vários desses recursos: registrar um component, uma directive e uma propriedade global em uma única função de instalação.

export const toolkit = {
  install(app, options) {
    app.component("BaseButton", BaseButton)
    app.directive("focus", focusDirective)
    app.config.globalProperties.$format = options.formatter
  }
}

Quando criar um plug-in

Recorra a um plug-in quando a funcionalidade for realmente abrangente para todo o aplicativo: um kit de interface, uma camada HTTP, internacionalização ou análise de dados. Para a lógica local de um recurso, uma função composta costuma ser a opção melhor e mais leve.

Verificação rápida

Teste seus conhecimentos sobre plug-ins.

Recapitulação

Um plug-in expõe uma função install(app, options) e é registrado com app.use. Dentro da função de instalação, você pode registrar componentes e diretivas globais, adicionar propriedades globais por meio de config.globalProperties e provide valores para injeção. Use plug-ins para recursos abrangentes do aplicativo; use funções compostas para a lógica local. A seguir, você estruturará um projeto escalável.

Perguntas Frequentes

A aula “Desenvolvimento de Plugins” é grátis?

Sim — o texto completo de “Desenvolvimento de Plugins” é 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 3 aulas no total.

O que vou aprender em “Desenvolvimento de Plugins”?

Crie plugins do Vue instaláveis. 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 2 de 3.

Quanto tempo leva a aula “Desenvolvimento de Plugins”?

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

← Voltar para Vue Academy