{"id":50539,"date":"2022-06-16T08:38:42","date_gmt":"2022-06-16T11:38:42","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=50539&post_type=knowledgebase&preview_id=50539"},"modified":"2025-10-01T17:04:21","modified_gmt":"2025-10-01T20:04:21","slug":"nuxt-js","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/nuxt-js\/","title":{"rendered":"O que \u00e9 Nuxt.js? Saiba mais Sobre a Framework Intuitiva do Vue"},"content":{"rendered":"

Nuxt.js \u00e9 o framework Vue<\/a> mais intuitivo dispon\u00edvel atualmente. Ele combina o poder do Vue.js com recursos de renderiza\u00e7\u00e3o do lado do servidor para torn\u00e1-lo ainda mais poderoso. Com ele, voc\u00ea pode construir desde um aplicativo de renderiza\u00e7\u00e3o do lado do cliente do Vue.js completo, at\u00e9 um aplicativo gerado estaticamente abrangente e um aplicativo monol\u00edtica.<\/span><\/p>\n

Nuxt.js resolve o problema de estrutura\u00e7\u00e3o do seu projeto Vue.js, pois ele vem com uma arquitetura de desenvolvimento de frontend pronta para o empreendimento. As funcionalidades do Nuxt.js j\u00e1 est\u00e3o estruturadas usando os padr\u00f5es da ind\u00fastria para criar aplicativos empresariais.<\/p>\n

Este guia ir\u00e1 explorar Nuxt.js, o que voc\u00ea pode construir com ele e como funciona.<\/p>\n

<\/div><\/kinsta-auto-toc>
\n<\/p>\n

O que \u00e9 Nuxt.js?<\/h2>\n

Nuxt.js \u00e9 um framework de renderiza\u00e7\u00e3o do lado do servidor constru\u00eddo sobre o Vue.js. Ele abstrai a maioria das configura\u00e7\u00f5es complexas envolvidas no gerenciamento de dados ass\u00edncronos, middleware e roteamento. Ele tamb\u00e9m ajuda a estruturar aplicativos Vue.js<\/a> usando a arquitetura padr\u00e3o da ind\u00fastria para construir aplicativos Vue.js simples ou empresariais.<\/p>\n

\"Logo
Logo oficial Nuxt.js. (Fonte da imagem: M\u00e9dia<\/a>)<\/figcaption><\/figure>\n

Para que serve o Nuxt.js?<\/h2>\n

O Nuxt.js permite que voc\u00ea crie v\u00e1rios tipos diferentes de aplicativos. Abaixo est\u00e3o os tr\u00eas aplicativos mais populares feitos com o Nuxt.js.<\/p>\n

Aplicativos gerados estaticamente<\/h3>\n

Este tipo de site n\u00e3o requer nenhuma fonte de conte\u00fado externa – o conte\u00fado j\u00e1 est\u00e1 integrado no HTML. Exemplos desses sites incluem portf\u00f3lios<\/a>, sites de demonstra\u00e7\u00e3o e tutoriais.<\/p>\n

Aplicativos de p\u00e1gina \u00fanica (SPA)<\/h3>\n

Este tipo de abordagem de desenvolvimento de frontend busca conte\u00fado din\u00e2mico de uma API externa e o exibe no lado do cliente. A maioria dos frameworks de JavaScript<\/a>, como React.js, Vue.js, Angular<\/a> e Ember.js, s\u00e3o todos frameworks de aplicativos de p\u00e1gina \u00fanica.<\/p>\n

Al\u00e9m disso, o sistema de roteamento SPA \u00e9\u00a0geralmente constru\u00eddo utilizando<\/span> a API\u00a0<\/span>de hist\u00f3rico <\/span>HTML 5<\/a> ou o hash de localiza\u00e7\u00e3o, <\/span>permitindo que os desenvolvedores modifiquem a URL de um site sem ter que fazer uma atualiza\u00e7\u00e3o completa da p\u00e1gina.<\/span><\/p>\n

Aplicativos universais<\/h3>\n

“Aplicativos Universais” \u00e9 um termo que descreve o uso de uma abordagem de renderiza\u00e7\u00e3o do lado do servidor para buscar dados do lado do cliente no servidor antes de renderizar completamente a p\u00e1gina no navegador do cliente.<\/p>\n

\n
\n
\n
\n
\n
\n

A renderiza\u00e7\u00e3o do lado do servidor (SSR) \u00e9 um problema conhecido no Vue.js porque envolve configura\u00e7\u00f5es tediosas para fazer tudo certo.<\/p>\n<\/div>\n<\/div>\n<\/div>\n

\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

O Nuxt.js resolve o problema de SSR no Vue.js, o que \u00e9 \u00fatil para a otimiza\u00e7\u00e3o de mecanismos de pesquisa (SEO)<\/a>. O Nuxt.js pode at\u00e9 mesmo estender aplicativos universais para acomodar um aplicativo monol\u00edtico completo, onde o frontend e o backend compartilham uma \u00fanica base de c\u00f3digo.<\/p>\n

Como o Nuxt.js funciona?<\/h2>\n

Nuxt.js opera de maneira semelhante a um framework do lado do servidor quando um usu\u00e1rio acessa um site. Se a renderiza\u00e7\u00e3o do lado do servidor estiver habilitada, as solicita\u00e7\u00f5es s\u00e3o renderizadas no servidor toda vez que o usu\u00e1rio solicita uma p\u00e1gina, tornando necess\u00e1rio um servidor para atender a cada solicita\u00e7\u00e3o. Se a renderiza\u00e7\u00e3o do lado do cliente estiver habilitada, o conte\u00fado da p\u00e1gina \u00e9 renderizado no navegador usando JavaScript.<\/span><\/p>\n

\n
\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

Estas s\u00e3o as principais a\u00e7\u00f5es e m\u00e9todos utilizados no Nuxt.js:<\/p>\n