@desco/vue-component-dom

Add components programmatically to the VueJS DOM

Usage no npm install needed!

<script type="module">
  import descoVueComponentDom from 'https://cdn.skypack.dev/@desco/vue-component-dom';
</script>

README

@desco/vue-component-dom

Pacote que permite adicionar programaticamente componentes ao DOM do VueJS.

Licença MIT Versão 1.2.2

🚀 Pronto para uso 🚀

Veja outros projetos NPM aqui.

Veja outros projetos aqui.


📋 Tabela de conteúdos


🛠️ Tecnologias

As seguintes tecnologias são utilizadas:


⚙️ Instalação

npm install --save @desco/vue-component-dom

Note que será necessário ter o NPM instalado para o comando funcionar.


📦 Importação

import vueComponentDom from '@desco/vue-component-dom'

📚 Como Usar

<template>
  <div>
    <div ref="meuContainer"></div>
  </div>
</template>
import vueComponentDom from '@desco/vue-component-dom'
import MeuComponente from './MeuComponente'

export default {
  [...]
  mounted: () {
      vueComponentDom(
          MeuComponente,
          this.$refs.meuContainer,
          { ...props, },
          { type: 'append', class: 'my-class', }
      )
  },
  [...]
}

Parâmetros

Nome Tipo Obrigatório Padrão Descrição
component Object Sim - O componente a ser inserido
container Node Sim - O nó do DOM onde inserir o componente
props JSON Não {} JSON contendo os valores a serem passados para as propriedades do componente.
params Object Não { type: 'append', class: '', } Parâmetros extras, veja na tabela abaixo
params.position String Não 'append' Se o componente será inserido no início ou final do container. Aceita: append e prepend
params.class String Não '' Classe personalizável para o container do componente inserido

Note que props deve usar os nomes das propriedades e não dos atributos.


Autor

Rafael A. R. Dias Email eu@diasrafael.com.br Linkedin @diasrafael Facebook @eudiasrafael GitHub Geral @descodifica GitHub NPM @desco-npm NPM @desco