Open albericobenhur opened 2 years ago
This is an important update for new updates of Vue and Nuxt. Please, provide this support as soon as possible.
Bom dia, conversei com @ktquez , o proprietário do repositório e ele falou que vai atualizar em breve
Pessoal, demorou, estou afastado um pouco da área, então a manutenção do projeto está um pouco lenta. Em breve voltaremos com tudo e atualizando tudo para Vue 3
Dei uma adaptada, gostaria que vocês pudessem dar uma testada e passar um feedback se está funcionando nos mais variados usos de vocês.
Adicionei uma tag "@vue-a11y/vlibras@next" ao pacote, assim que testado e ok, a gente o transforma na versão principal do componente, blz
Aqui está o link da branch: https://github.com/vue-a11y/vue-vlibras/tree/next
Qualquer coisa, só mandar por aqui.
Valeuu
ktquez funcionou muito bem, muitíssimo obrigado 😁😁😁😁
@ktquez , Bom dia Alan Ktquez, ele funcionou perfeitamente no vue 3, tem alguma forma dele funcionar com nuxt 3 também? eu tentei aqui mas não consegui
quando tento usar no client side ele não emite erros mas também não renderiza
@albericobenhur Interessante. Vou dar uma testada para ver o que pode ser, blz
Será que a abordagem deve ser via ref?
https://koenwoortman.com/vuejs-get-element-by-id-in-component/
Aqui não funciona ainda, funcionou com mais alguém?
Vou continuar tentando. Mas no meu também ainda não funcionou
Hey I would like to share the solution in my project, in nuxt v3. I mixed the integration in the .vue file of this repository and the original documentation for vlibras: https://vlibras.gov.br/doc/widget/installation/webpageintegration.html?_ga=2.205222480.1595640842.1682445746-816840059.1655413110
The original vlibras-plugin.js has a typo error, there is a ghost character in if(initializing). Firstly, i fixed it and put it in public/js/ So i changed the variable src to point to my version of the plugin. The urlWidget can be kept the same value.
I changed the init() method and added the following attributes for script:
script.id = 'vlbr';
script.async = true;
I inserted the methods init and createWidget directly in App.vue, for nuxt. and i called this.init() in mounted()
in the final part of the template html i added:
<ClientOnly>
<div v-if="mounted">
<div vw class="enabled">
<div vw-access-button class="active"></div>
<div vw-plugin-wrapper>
<div class="vw-plugin-top-wrapper"></div>
</div>
</div>
</div>
</ClientOnly>
I hope this explanation help you all.
Obrigado @YasCoMa Espero que ajude o pessoal a utilizar essa solução para imediato
Eu ainda estou afastado da área por motivos pessoais e por isso não estou conseguindo ajudar a dar suporte imediatamente. Irei voltar no segundo semestre e caso alguém não tenha feito algum PR para essa correção, irei solucionar isso internamente no vue-vlibras
initializing
@YasCoMa obrigado pelo apoio, ainda estou na luta para integrar com Nuxt 3.
Coloquei o vlibras-plugin.js em: https://gist.github.com/hermesalvesbr/fd59edc24bdbd3403630417067b12391
Seria possível me apontar em qual linha eu devo colocar os atributos:
script.id = 'vlbr';
script.async = true;
Ou compartilhar no gist o seu vlibras-plugin.js? Fico grato com a atenção dedicada.
and i called this.init() in mounted()
Eu estou tentando(também) uma nova abordagem:
<template>
<ClientOnly>
<div class="enabled">
<div ref="accessButton" class="active"></div>
<div ref="pluginWrapper">
<div class="vw-plugin-top-wrapper"></div>
</div>
</div>
</ClientOnly>
</template>
<script setup lang="ts">
const accessButton = ref(null)
const pluginWrapper = ref(null)
const initVLibras = () => {
const script = document.createElement('script')
script.src = 'https://vlibras.gov.br/app/vlibras-plugin.js'
script.async = true
script.onload = createWidget
document.body.appendChild(script)
}
const createWidget = () => {
new window.VLibras.Widget('https://vlibras.gov.br/app')
}
onMounted(() => {
initVLibras()
})
</script>
:(
I added these new attributes in as a complement to this function:
methods: { init () { script = document.createElement('script') script.addEventListener('load', this.createWidget) script.src = this.src document.querySelector('body').appendChild(script) },
i would like to know if there will be support for vue 3