Vue 3 support

[albericobenhur]

i would like to know if there will be support for vue 3

[YasCoMa]

This is an important update for new updates of Vue and Nuxt. Please, provide this support as soon as possible.

[hermesalvesbr]

Bom dia, conversei com @ktquez , o proprietário do repositório e ele falou que vai atualizar em breve

[ktquez]

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

[albericobenhur]

ktquez funcionou muito bem, muitíssimo obrigado 😁😁😁😁

[albericobenhur]

@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

[ktquez]

@albericobenhur Interessante. Vou dar uma testada para ver o que pode ser, blz

[hermesalvesbr]

Será que a abordagem deve ser via ref?

https://koenwoortman.com/vuejs-get-element-by-id-in-component/

[hermesalvesbr]

Aqui não funciona ainda, funcionou com mais alguém?

[albericobenhur]

Vou continuar tentando. Mas no meu também ainda não funcionou

[YasCoMa]

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.

[ktquez]

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

[hermesalvesbr]

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.

[hermesalvesbr]

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>

Também não funciona.

:(

[YasCoMa]

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)
},