Lançado · em melhoria
Framework · Desde 2014
Vue.js é um framework JavaScript progressivo para criar interfaces com componentes declarativos; o Nuxt acrescenta rotas, renderização no servidor e APIs.
Vue.js é um framework JavaScript de código aberto para construir interfaces de usuário, criado por Evan You e lançado pela primeira vez em 2014. Ele combina templates baseados em HTML com estado reativo, então a página se atualiza sozinha quando os dados mudam, e sua unidade básica é o componente de arquivo único (.vue), que reúne template, script e estilos. O Nuxt é um framework full stack construído sobre o Vue que traz roteamento baseado em arquivos, importações automáticas, renderização no servidor e APIs de servidor movidas pelo motor Nitro.
O Vue pode ser adotado aos poucos: de uma única tag script que deixa interativa parte de uma página existente até uma aplicação de página única completa feita com Vite. Ele se encaixa muito bem em telas interativas, como painéis administrativos, dashboards e ferramentas internas. Quando a visibilidade em buscadores e a velocidade do primeiro carregamento importam, ou quando você quer páginas e APIs no mesmo projeto, o Nuxt oferece renderização no servidor, geração estática e rotas de servidor, e pode ser publicado em servidores Node.js, hospedagem estática e muitos outros destinos.
Para começar, instale o Node.js e siga o tutorial interativo e o guia do site oficial para aprender reatividade, componentes e sintaxe de templates. Depois crie um projeto baseado em Vite com npm create vue@latest e construa telas de verdade; quando precisar de convenções de rotas e renderização no servidor, passe para o Nuxt. Pinia para gerenciamento de estado e Vitest para testes unitários são as ferramentas recomendadas oficialmente.
O estado declarado com ref, reactive e computed rastreia quem depende dele, então só a parte da página que usa um valor é renderizada de novo quando ele muda.
Template, script e estilos ficam em um só arquivo .vue, com estilos de escopo limitado e suporte a TypeScript desde o início.
A lógica relacionada é agrupada em funções e reutilizada como composables, o que mantém organizados até os componentes grandes.
Roteamento por arquivos, importações automáticas, renderização no servidor, geração estática e rotas de API na pasta server funcionam sem configuração extra.
As ferramentas do Vue e do Nuxt rodam sobre o Node.js. Instale a versão LTS em nodejs.org e confira se node e npm exibem suas versões.
node --version && npm --versionA ferramenta oficial create-vue pergunta se você quer adicionar TypeScript, Vue Router, Pinia, Vitest e mais. Na nova pasta, rode npm install e depois npm run dev para iniciar o servidor de desenvolvimento do Vite.
npm create vue@latestPara usar o Nuxt, gere um projeto com o nuxi. Entre na nova pasta e rode npm run dev; o servidor de desenvolvimento escuta por padrão em http://localhost:3000.
npx nuxi@latest init my-nuxt-appsrc/App.vue é o componente raiz de um projeto create-vue. O bloco script setup cria um contador reativo count com ref(0); o template o exibe entre chaves duplas e o incrementa a cada clique por meio de @click. Quando count muda, o Vue renderiza de novo apenas o que depende dele. Com npm run dev rodando, cada alteração salva aparece na hora no navegador.
src/App.vue
<script setup lang="ts">
import { ref } from "vue";
const count = ref(0);
</script>
<template>
<h1>Hello, Vue!</h1>
<button @click="count++">Clicked {{ count }} times</button>
</template>
npm create vue@latest hello-vue && cd hello-vue && npm install && npm run devSeis capítulos que levam você da instalação aos conceitos essenciais de Vue.js · Nuxt.
Tire dúvidas, compartilhe experiências e troque opiniões sobre Vue.js · Nuxt.
Ainda não há discussões. Comece a primeira.
0 comentários
Fazer login · Faça login para deixar um comentário.
Seja o primeiro a comentar.