Como Criar e Executar um Projeto Nuxt.js com ServBay 
O que é Nuxt.js? 
Nuxt.js é um framework open-source baseado na popular biblioteca Vue.js, projetado para criar aplicações web modernas e de alta performance. Ele abstrai diversas configurações complexas, permitindo que o desenvolvedor foque no que realmente importa: a lógica do negócio. Nuxt.js é especialmente eficiente para aplicações que usam renderização do lado do servidor (SSR), mas também oferece poderosa capacidade de geração de sites estáticos (SSG), tornando-o ideal para a construção de sites e apps ricos em conteúdo e otimizados para SEO.
Principais características e vantagens do Nuxt.js 
- Renderização do lado do servidor (SSR): Pre-renderiza páginas Vue no servidor, acelerando o carregamento inicial, melhorando a experiência do usuário e facilitando a indexação de conteúdo pelos mecanismos de busca para melhores resultados de SEO.
- Geração de site estático (SSG): Gera arquivos HTML completamente estáticos durante a build. Isso proporciona desempenho excepcional, implantação simples e elimina a necessidade de recursos do servidor em tempo de execução—perfeito para blogs e portais cuja estrutura muda pouco.
- Divisão automática de código: O Nuxt.js separa o JavaScript conforme as rotas, carregando somente o necessário ao acessar cada página para melhor performance.
- Roteamento baseado em arquivos: Criando arquivos .vuedentro do diretóriopages, você gera rotas automaticamente e simplifica o gerenciamento.
- Modularidade: Ecossistema robusto de módulos, facilitando a integração com diversos recursos e serviços de terceiros (como Axios, suporte PWA, CMS, etc.).
- Convenção sobre configuração: Seguindo algumas convenções de estrutura e nomeação, você reduz significativamente o tempo gasto com configurações manuais.
- Experiência otimizada para o desenvolvedor: Hot Module Replacement (HMR), relatórios de erro e outros recursos tornam o desenvolvimento mais rápido e eficiente.
Aproveitando todas essas vantagens, o Nuxt.js permite criar aplicações web poderosas, otimizadas, seguras e prontas para SEO de forma eficiente e produtiva.
Configurando e Executando Nuxt.js no ServBay 
Neste guia, vamos mostrar como usar o ambiente de desenvolvimento local do ServBay—especialmente seu pacote Node.js e o gerenciador de sites—para criar, configurar e executar um projeto Nuxt.js. Vamos explicar como preparar o ambiente tanto para desenvolvimento (usando proxy reverso) quanto para produção (com serviço de arquivos estáticos).
Pré-requisitos 
Antes de começar, verifique se você atende aos seguintes requisitos:
- O aplicativo ServBay está instalado e funcionando.
- O Node.js está instalado e habilitado no ServBay. Você pode verificar e instalar isso na aba “Pacotes” do painel ServBay.
- Conhecimentos básicos em Node.js, npm (ou Yarn/pnpm) e comandos de terminal.
- (Recomendado) Um editor de código, como o VS Code.
Criando um Projeto Nuxt.js 
Vamos utilizar o scaffolding create-nuxt-app para inicializar rapidamente um novo projeto Nuxt.js.
- Abra o terminal e navegue até o diretório raiz de sites do ServBay - O ServBay consta com um diretório raiz ideal para armazenar seus projetos de desenvolvimento local. Com o terminal aberto, execute: - macOS: bash- cd /Applications/ServBay/www1- Windows: bash- cd C:\ServBay\www1
- Inicialize um novo projeto Nuxt.js - Com o comando - npx create-nuxt-app, inicialize o projeto chamado- servbay-nuxt-app. O- npx(presente no npm >5.2) permite rodar pacotes npm sem instalação global.bash- npx create-nuxt-app servbay-nuxt-app1- Após rodar o comando, siga as instruções exibidas no terminal e faça as escolhas conforme sua necessidade. Exemplo de configuração: bash- ? Project name: servbay-nuxt-app ? Programming language: JavaScript ? Package manager: Npm # Selecione seu gerenciador, geralmente Npm ou Yarn ? UI framework: None # Escolha o framework de UI conforme necessidade ? Nuxt.js modules: Axios # Selecione os módulos desejados ? Linting tools: ESLint # Opte pelas ferramentas de linting caso queira ? Testing framework: None # Defina um framework de teste se desejar ? Rendering mode: Universal (SSR / SSG) # Universal suporta SSR e SSG ? Deployment target: Server (Node.js hosting) # Server para desenvolvimento local e hospedagem Node.js ? Development tools: jsconfig.json (Recommended for VS Code) # Habilite conforme necessidade1
 2
 3
 4
 5
 6
 7
 8
 9
 10
- Instale as dependências do projeto - Vá para o diretório do projeto recém-criado e instale as dependências necessárias com o gerenciador de pacotes escolhido: bash- cd servbay-nuxt-app npm install # Ou usando Yarn: yarn install # Ou pnpm: pnpm install1
 2
 3
 4- Aguarde a conclusão da instalação. 
Modificando o Conteúdo de Saída do Projeto 
Para facilitar a verificação, vamos alterar o arquivo da página inicial e exibir um texto simples.
- Abra o arquivo - pages/index.vue- Utilize o editor de código para abrir - pages/index.vuena raiz do projeto.
- Altere o conteúdo do arquivo - Substitua o conteúdo por um código que exibe "Hello ServBay!": html- <template> <div> <h1>Hello ServBay!</h1> </div> </template> <script> export default { name: 'IndexPage' } </script> <style scoped> div { text-align: center; margin-top: 50px; font-family: sans-serif; } h1 { color: #333; } </style>1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22- O atributo - scopedlimita o estilo ao componente atual e o design foi levemente ajustado.
Rodando Nuxt.js em Modo de Desenvolvimento no ServBay 
O servidor de desenvolvimento Nuxt.js geralmente roda em uma porta local específica. Para acessar via domínios personalizados, certificado SSL e a porta 80/443 do ServBay, configuraremos um proxy reverso usando a interface de sites do ServBay.
- Inicie o servidor de desenvolvimento Nuxt.js - No diretório raiz do projeto, rode o comando para subir o servidor de desenvolvimento Nuxt.js. Vamos utilizar a porta - 8585(pode ser outra não ocupada):- macOS: bash- cd /Applications/ServBay/www/servbay-nuxt-app npm run dev -- --port 8585 # Ou: yarn dev --port 8585 # Ou: pnpm run dev --port 85851
 2
 3
 4- Windows: bash- cd C:\ServBay\www\servbay-nuxt-app npm run dev -- --port 8585 # Ou: yarn dev --port 8585 # Ou: pnpm run dev --port 85851
 2
 3
 4- O servidor aparecerá normalmente em - http://localhost:8585. Mantenha o terminal aberto enquanto trabalhar.
- Configurar site no ServBay (proxy reverso) - Abra o painel do ServBay, acesse a aba “Sites” e clique no botão - +no canto inferior esquerdo para adicionar uma nova configuração:- Nome: Escolha como Nuxt.js Dev Site (Proxy)ou algo identificável.
- Domínio: Defina o domínio personalizado, exemplo: nuxt-dev.servbay.demo. O uso do sufixo.servbay.demoé recomendado como boa prática.
- Tipo de site: Selecione Proxy reverso.
- Endereço IP: Informe 127.0.0.1, o localhost.
- Porta: Digite 8585, de acordo com o servidor Nuxt.js.
 - Salve a configuração. O ServBay atualizará e aplicará as mudanças automaticamente. - Para mais detalhes sobre como adicionar um website Node.js em modo desenvolvimento (proxy reverso), consulte Como adicionar site Node.js no desenvolvimento. 
- Nome: Escolha como 
- Acesse o site no modo de desenvolvimento - Abra o navegador e visite o domínio definido, por exemplo: - https://nuxt-dev.servbay.demo.- O ServBay irá redirecionar todo o tráfego para o servidor Nuxt.js via proxy reverso usando domínio customizado e HTTPS. O certificado SSL é gerado automaticamente (assinado pela CA do ServBay User, certifique-se de confiar nela no seu sistema). O uso de HTTPS em ambiente de desenvolvimento auxilia na simulação de produção, testes de Service Worker e outras funcionalidades que precisam de contexto seguro. 
Construindo e Visualizando a Versão de Produção 
Quando o desenvolvimento estiver concluído, é hora de criar a build de produção do seu projeto Nuxt.js. Para projetos em modo Universal que utilizam SSG, o comando nuxt generate (ou script npm run export) gera os arquivos estáticos.
- Crie a build e gere os arquivos estáticos - No diretório do projeto, execute: - macOS: bash- cd /Applications/ServBay/www/servbay-nuxt-app npm run build npm run export # Ou: yarn build && yarn export # Ou: pnpm build && pnpm run export1
 2
 3
 4
 5- Windows: bash- cd C:\ServBay\www\servbay-nuxt-app npm run build npm run export # Ou: yarn build && yarn export # Ou: pnpm build && pnpm run export1
 2
 3
 4
 5- Após a conclusão, será criado o diretório - distcom todos os arquivos estáticos gerados.
- Configurar site no ServBay (arquivos estáticos) - No painel do ServBay, quebre na aba “Sites” e clique no botão - +:- Nome: Algo como Nuxt.js Prod Site (Static).
- Domínio: Por exemplo, nuxt-prod.servbay.demo.
- Tipo de site: Selecione Estático.
- Diretório raiz: Caminho para os arquivos estáticos gerados: - macOS: /Applications/ServBay/www/servbay-nuxt-app/dist
- Windows: C:\ServBay\www\servbay-nuxt-app\dist
 
- macOS: 
 - Salve as alterações para aplicar a configuração. 
- Nome: Algo como 
- Acesse o site de produção - Abra o navegador e acesse seu domínio de produção, ex: - https://nuxt-prod.servbay.demo.- O servidor web do ServBay (Caddy ou Nginx, conforme configuração) irá servir os arquivos estáticos do diretório - distde forma otimizada e com alto desempenho. Você também conta com suporte a SSL gratuito e domínios personalizados.
Conclusão 
Com o ServBay, gerenciar ambientes locais de desenvolvimento e preview de projetos Nuxt.js se torna fácil e eficiente. Use o pacote Node.js do ServBay para rodar o servidor de desenvolvimento e, por meio do gerenciamento de sites, configure proxies reversos para trabalhar com domínios customizados e HTTPS. Após finalizar o desenvolvimento, gere a build estática e visualize com alta performance usando a configuração de site estático do ServBay. Esse fluxo aproveita a praticidade e os recursos avançados do ServBay, simplificando todo o processo de desenvolvimento e testes locais de projetos front-end. Esperamos que este guia ajude você a potencializar o uso do ServBay com Nuxt.js!
