ADVPL - Como Executar uma Aplicação Vue.js Dentro do Protheus

A integração de aplicações modernas desenvolvidas em Vue.js com o ambiente Protheus permite criar interfaces mais dinâmicas, responsivas e com uma experiência de usuário muito superior às telas tradicionais.

Neste artigo, demonstraremos o processo completo para executar uma aplicação Vue.js diretamente dentro do Protheus utilizando o recurso FWCallApp().

1. Desenvolvimento da Aplicação Vue.js

Desenvolva normalmente sua aplicação utilizando Vue.js e Vite.

2. Configuração do vite.config.ts

O ponto mais importante da integração está na configuração correta do arquivo vite.config.ts.

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  base: './',

  plugins: [vue()],

  server: {
    proxy: {
      '/rest': {
        target: 'http://localhost:40001',
        changeOrigin: true,
        secure: false
      }
    }
  }
})

A propriedade base: './' é fundamental para que todos os arquivos estáticos sejam carregados corretamente dentro do ambiente do Protheus após a publicação da aplicação.

3. Gerar o Build da Aplicação

Após concluir o desenvolvimento, execute o processo de build do projeto:

npm run build

O Vite criará automaticamente a pasta dist, contendo todos os arquivos necessários para distribuição.

4. Criar a Estrutura do Aplicativo

Crie uma pasta com o nome que será utilizado pelo Protheus para identificar a aplicação.

Exemplo:

uDev

5. Copiar os Arquivos da Pasta Dist

Copie todo o conteúdo gerado dentro da pasta dist para a pasta criada anteriormente.

6. Compactar os Arquivos

Compacte a pasta em formato ZIP.

7. Alterar a Extensão

Após compactar, renomeie o arquivo gerado de:

uDev.zip

para:

uDev.app

8. Publicar o Arquivo APP

Compile ou publique o arquivo .app no ambiente Protheus conforme o processo padrão utilizado em sua instalação.

9. Executar a Aplicação via ADVPL

Crie uma função ADVPL para abrir a aplicação:

User Function uDev()

    FWCallApp('uDev')

Return( Nil )

Ao executar a rotina, o Protheus carregará a aplicação Vue.js empacotada dentro do arquivo APP, permitindo a utilização de interfaces modernas integradas ao ERP.

Essa abordagem é extremamente útil para o desenvolvimento de dashboards, consultas avançadas, assistentes de configuração, aplicações internas e novas experiências de usuário dentro do ecossistema Protheus.

#ADVPL #Protheus #TOTVS #VueJS #Vite #FWCallApp #DesenvolvimentoProtheus #FrontendProtheus #ERPProtheus #ProgramacaoADVPL #IntegracaoVueProtheus #JavaScript #TypeScript #DesenvolvimentoWeb #TOTVSDeveloper #AplicativosProtheus #FrameworkProtheus #CustomizacaoProtheus #VueNoProtheus #TecnologiaTOTVS

```