Nuxt 3 - uma estrutura híbrida Vue popular

O que é que há de novo?

Vue 3 suporte

Vue 3 veio com vários novos recursos que tornam a criação e a manutenção de aplicativos muito mais rápida e fácil. As alterações mais importantes foram feitas na API Global Vue e na API Events. Vue 3também introduz novas funcionalidades como fornecer/injetar, API de composição (descrita abaixo), Fragmentos e Teletransporte.

Composição API

A API de composição é um recurso embutido no Vue 3, que fornece um conjunto de APIs que permite o uso de funções importadas em vez de declarar opções. Assim, as principais vantagens da API de composição são a melhor reutilização da lógica, a organização mais flexível do código e a excelente integração com o TypeScript. Todas as partes da nova API podem ser usadas fora do Vue componentes.

Nuxt 3 fornece um novo diretório - composables/ - que permite a importação automática da aplicação de introdução de componentes Vue.

Exemplo de composição:

// Estará disponível como useFoo() (camelCase do nome do ficheiro sem extensão)
 export default function () {
   return useState('foo', () => 'bar')// Estará disponível como useFoo() (camelCase do nome do ficheiro sem extensão)
 export default function () {
   return useState('foo', () => 'bar')
 }
 }

Exemplo de utilização de um composable numa Vue componente:

<div>{{ foo }}</div>
</>

Como se pode ver acima, um composable é exportado como useFoo, tal como declarado no nome da const. Se não houver um nome de exportação, o composable será acessível como pascelCase do nome do ficheiro. Também permite integrar facilmente os compostáveis auto-importados com um compostável popular do Vue Store chamado Pina.

fonte

Motor Nitro

Nitro é um servidor full-stack que usa Rollup e Node.js trabalhadores em desenvolvimento para servir o isolamento do código e do contexto. Ele também inclui uma API de servidor e middleware de servidor. Em produção, o motor constrói a aplicação e o servidor em um diretório - `.output`. O problema é que o output é leve: minificado e sem qualquer nó módulos. O Nitro permite-lhe implementar o resultado em Node.js, Serverless, Workers, Edge-side rendering ou como puramente estático. 

Nuxt 3 oferece a possibilidade de implantação em Azulejo ou Netlify sem necessidade de configuração, juntamente com uma implementação Firebase ou Cloudflare com configuração mínima.

Vite

O Vite é uma ferramenta de front-end da próxima geração, que é uma funcionalidade incorporada para Nuxt 3. Esta ferramenta proporciona uma experiência de desenvolvimento mais rápida para projectos Web. Para o desenvolvimento, o servidor Vite dispõe de melhorias ricas em funcionalidades em relação aos módulos ES nativos e de um Hot Module Replacement (HMR) muito rápido.

No processo de criação, o Vite agrupa o código com o Rollup pré-configurado para otimizar os activos estáticos para produção.

Nova estrutura de ficheiros

fonte

Nuxt 3 introduz uma estrutura de ficheiros ligeiramente alterada. As maiores mudanças foram feitas no `app.vue` - o diretório `pages/` é opcional e se não estiver presente, a aplicação não incluirá um vue-router, o que é útil quando se cria uma página de carregamento ou uma aplicação que não precisa de roteamento. 

Exemplo de ficheiro app.vue:

Olá mundo!

Para incluir encaminhamento, páginas e layout, é necessário utilizar componentes incorporados, nomeadamente `NuxtPage` e `NuxtLayout`. Exemplo:

<div>
<p>&nbsp;&nbsp;&nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;</p>
</div>

O `app.vue` é o principal componente do Aplicação NuxtAssim, tudo o que for adicionado aí será global e incluído em todas as páginas. 

A alteração do NuxA estrutura de diretórios t implica a substituição do diretório `store/` pelo diretório `composables/`, uma vez que Vue 3introduz os produtos compostáveis que substituem as lojas.

Migração do Vue 2 para o Vue 3 usando o Nuxt Bridge

O Nuxt 3 introduz o Nuxt Bridge - camada de compatibilidade futura que actualiza as aplicações Nuxt 2 com as funcionalidades do Nuxt 3, permitindo-lhe atualizar-se peça a peça. Ele fornece acesso a recursos como: Motor Nitro, API de composição e novo CLI, bastando instalar e ativar a ponte.

O Nuxt Bridge é compatível com as versões anteriores, pelo que os plug-ins e módulos antigos continuarão a funcionar, enquanto a migração é fácil e possível sem ter de reescrever toda a aplicação.

Para ativar o Nuxt Bridge, tem de se certificar que o servidor de desenvolvimento não está a funcionar, depois remover quaisquer ficheiros de bloqueio de pacotes e instalar o `nuxt-edge`:

- "nuxt": "^2.15.0"

"nuxt-edge": "mais recente"

Depois disso, reinstale todas as dependências:

instalação do fio

A sua migração com o Nuxt Bridge está concluída!

Outra forma é instalar Nuxt Bridge como uma dependência de desenvolvimento:

yarn add --dev @nuxt/bridge@npm:@nuxt/bridge-edge

Depois é preciso atualizar os scripts no `package.json` para levar em conta as mudanças que o servidor Nitro traz para o processo de construção.