Um belo e completo template para website desenvolvido com Vue 3 e outras ferramentas com fácil personalização.
Decidi desenvolver esse template devido à falta de soluções completas e funcionais desenvolvidas em Vue. Esse modelo fornece a possibilidade de implementar um site completo, totalmente funcional, apenas substituindo o conteúdo dos arquivos .yaml. Além disso, possibilita a adição de novas páginas, menus, serviços e clientes de maneira descomplicada, podendo ser facilmente estendido adicionando novos componentes.
- Layout responsivo
- Animações ao acessar as seções
- Modo claro/escuro automático (a partir das definiçoes do navegador) e persistente
- Totalmente SEO friendly
- Formulario de contato funcional (necessário se cadastrar na plataforma EmailJS)
- Vue 3 - The progressive Javascript framework
- Vite - Build Tool for the web
- TailwindCSS - A utility-first CSS framework
- daisyUI - TailwindCSS plugin for faster, easer and cleaner development
- Phosphor Icons - A flexible icon family for interfaces, diagrams, presentations
- maska - Simple zero-dependency input mask library
- vite-plugin-yaml - Transform YAML file into Javascript object
- vite-html-plugin - A vite plugin for processing html
- vue-google-map - Composable components for easy use of Google Maps in Vue 3
- VueUse - UseDark component for reactive dark mode with auto data persistence
- EmailJS - Send Email Directly From Your Code
- AOS - Animate on scroll Javascript library
- FontSource - Collection of open-source fonts that are packaged into individual npm packages
No terminal clone o projeto:
git clone https://github.com/zapsys/site-template-vuejs.git
Entre na pasta do projeto:
cd site-template-vuejs
Instale as dependências (use o npm, yarn ou pnpm):
npm install
Rode o comando:
npm run dev
Acesse a url http://localhost:5173 no navegador para ver o resultado.
npm run build
Então execute:
npm run serve
Acesse a url http://localhost:4173 no navegador para ver o resultado.
Edite os arguivos partials.yaml e sections.yaml e adicione as suas informações. Para o conteúdo do arquivo index.html edite o arquvivo vite.config.js e altere as informações da propriedade data, pois as mesmas serão injetadas na página inicial.
Para o envio de emails pelo formulário de contato é necessário se cadastrar na plataforma do EmailJS e configurar um serviço (service_id), um template (template_id) e uma chave-pública (public key). De posse desses valores crie um arquivo .env na raiz do projeto e adicione os valores como segue:
VITE_EMAILJS_SERVICE_ID=service_id
VITE_EMAILJS_TEMPLATE_ID=template_id
VITE_EMAILJS_PUBLIC_KEY=public_key
VITE_GOOGLE_MAPS_API_KEY=google_maps_api_key
Para mostrar o mapa corretamente na seção de contato é necessário fazer login no Google Maps Platform e gerar uma api_key (Maps Javascript API). De posse de sua chave adicione-a no arquivo .env como mostrado acima.
O Vite ficará responsável de ler as variáveis de ambiente para usá-las no componente desejado. É usada a diretiva import.meta.env.nome_variavel, contudo, é importante o prefixo VITE_ para que a mesma seja exposta no frontend.
Para esses casos se deve abrir um issue.
Caso tenha alguma dúvida ou sugestão sinta-se a vontade para nos contactar e contribuir.
- Adicionar captcha ao formulário de contato
- Integrar os temas do plugin daisyUI para serem aplicados ao site
Este projeto está sob a licença MIT, que permite o download, execução, alteração, redistribuição, tanto para uso privado como comercial do código fonte, desde que citado o autor.