Configurando um projeto Vue 3 usando Vite e Vuetify 3

*Iaai programeiros!! *

Hoje fui designada com a responsabilidade de montar toda a estrutura de um projeto frontend utilizando a tecnologia Vue.js. A grande vantagem (e ao menos tempo desvantagem pois meu conhecimento é limitado) é que tenho total liberdade para tomar decisões, pois não há requisitos rígidos ou versões específicas a serem seguidas. Isso me permite explorar as melhores opções disponíveis e criar uma solução sob medida para nossas necessidades.

Escolhendo a Tecnologia:

Optei por utilizar a versão mais recente do Vue, a versão 3. Além disso, estou empolgada em explorar a composition API para a criação dos componentes. Essa abordagem nos proporcionará um código mais limpo e estruturado, além de oferecer uma experiência de desenvolvimento mais eficiente.

Gerenciamento de Estado:

Para o gerenciamento de estado, escolhi utilizar o Pinia, uma biblioteca que tem se destacado pela sua simplicidade e desempenho. Acredito que o Pinia será um aliado importante para manter o fluxo de dados da aplicação organizado e fácil de gerenciar.

Aproveitando o Vuetify 3 e Material Design Icons:

O prazo do projeto é bem apertado ( menos de duas semanas, e tenho que fazer o backend também) por isso, decidi utilizar o Vuetify 3, que é uma biblioteca repleta de componentes prontos para uso. Isso vai agilizar o desenvolvimento, garantindo que a interface do usuário seja moderna e atrativa ( na real? que funciono). Além disso, o Vuetify 3 disponibiliza uma biblioteca de fontes, chamada MDI, que enriquecerá ainda mais nossa aplicação.

Organização com Atomic System:

Para garantir a organização e a manutenção do código, estou seguindo o padrão Atomic System para os componentes customizados. Esse padrão divide os componentes em diferentes camadas, o que facilita a reutilização e a evolução da aplicação de forma estruturada.

Vamos começar:

Para agilizar a compilação e deixar o desenvolvimento mais ágil, vou utilizar o Vite.

Criando o projeto

$ npm create vite@latest

Aqui vamos escolher o nosso framework querido:

Vamos de opção customizada para já instalar o pinia

As configurações ficaram assim:

Vue.js - The Progressive JavaScript Framework

√ Add TypeScript? ... No 
√ Add JSX Support? ... No
√ Add Vue Router for Single Page Application development? ... No 
√ Add Pinia for state management? ... Yes 
√ Add Vitest for Unit Testing? ... No 
√ Add an End-to-End Testing Solution? » No 
√ Add ESLint for code quality? ... No 

Agora vamos a instalação do Vuetify e MDI

$ npm i vuetify@^3.3.8
$ npm install @mdi/font

Chegou hora de deixar nosso código preparado para usar os componentes do Vuetify 3 e os ícones do Material Design. Para isso vamos editar o arquivo main.js

### main.js ###
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

//Vuetify
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import '@mdi/font/css/materialdesignicons.css'

const vuetify = createVuetify({
  components,
  directives,
  icons: {
    defaultSet: 'mdi'
  }
})

const pinia = createPinia()

const app = createApp(App)

app.use(pinia)
app.use(vuetify)

app.mount('#app')

Prontinho!!! Agora é #partiu codar!