[{"data":1,"prerenderedAt":1229},["ShallowReactive",2],{"pt-BR-article-\u002Fblog\u002Fvue-vapor-mode-como-funciona-e-como-usar":3,"pt-BR-related-posts-\u002Fblog\u002Fvue-vapor-mode-como-funciona-e-como-usar":1071},{"id":4,"title":5,"articleCover":6,"articleCoverEmbed":7,"articleCoverEmbedUploadDate":7,"articleCoverHeight":8,"articleCoverWidth":9,"authorId":10,"body":11,"categoriesIds":1056,"description":1059,"enAlternateSlug":1060,"extension":1061,"meta":1062,"navigation":176,"path":1063,"ptBrAlternateSlug":1064,"publishedAt":1065,"seo":1066,"sitemap":1067,"stem":1068,"updatedAt":1065,"wordCount":1069,"__hash__":1070},"blog\u002Fblog\u002Fvue-vapor-mode-como-funciona-e-como-usar.md","Vue Vapor Mode: o que é e o que muda no Vue 3.6","\u002Fimages\u002Fblog\u002Fvue\u002Fvue-vapor-mode-como-funciona-e-como-usar.webp",null,720,1280,"thiago-nunes-batista",{"type":12,"value":13,"toc":1030},"minimark",[14,31,39,44,47,50,53,58,88,92,103,276,283,298,302,313,383,386,390,396,453,462,466,472,524,538,541,607,618,621,625,628,690,699,706,709,716,729,764,771,775,778,894,910,914,917,924,928,931,934,951,955,959,962,966,974,978,983,987,996,1000,1003,1007,1019,1023,1026],[15,16,17,18,22,23,26,27,30],"p",{},"O Vue 3.6 ainda não saiu como versão estável. Em 6 de outubro de 2026, a versão mais recente é a ",[19,20,21],"code",{},"3.6.0-rc.10"," (30 de setembro), e a estável continua sendo a ",[19,24,25],{},"3.5.43"," (17 de setembro). Confirmei isso no npm e nas releases do repositório ",[19,28,29],{},"vuejs\u002Fcore"," nesta data.",[15,32,33,34,38],{},"O ",[35,36,37],"strong",{},"Vue Vapor Mode"," é a principal novidade dessa versão: um modo de compilação que dispensa o Virtual DOM e gera código que atualiza o DOM diretamente. Ele é opt-in, então você escolhe componente a componente onde usar, sem reescrever o app. Neste artigo você vê como o Vapor funciona, como ativar no Vue e no Nuxt 4.6, o que ainda não é suportado e quando vale a pena testar.",[40,41,43],"h2",{"id":42},"como-o-vapor-funciona","Como o Vapor funciona",[15,45,46],{},"No modo tradicional, quando um estado reativo muda, o Vue executa a função de renderização, monta uma nova árvore de VNodes (objetos JavaScript que descrevem a interface), compara com a árvore anterior e só então altera o DOM real.",[15,48,49],{},"No Vapor Mode, o compilador analisa o template e gera código que manipula o DOM diretamente. Os componentes Vapor não criam VNodes nem comparam árvores em tempo de execução. Quando uma variável reativa muda, só o trecho do DOM ligado a ela é atualizado.",[15,51,52],{},"Segundo as notas oficiais do Vue 3.6, o objetivo é reduzir o tamanho base do bundle e melhorar a performance. As mesmas notas dizem que o Vapor mostrou, em benchmarks de terceiros (o js-framework-benchmark), o mesmo nível de performance do Solid e do Svelte 5. Como em qualquer benchmark, o resultado depende do cenário medido.",[54,55,57],"h3",{"id":56},"e-o-alien-signals","E o Alien Signals?",[15,59,60,61,64,65,72,73,76,77,76,80,83,84,87],{},"O Vue 3.6 também traz uma refatoração grande do ",[19,62,63],{},"@vue\u002Freactivity",", baseada na biblioteca ",[66,67,71],"a",{"href":68,"rel":69},"https:\u002F\u002Fgithub.com\u002Fstackblitz\u002Falien-signals",[70],"nofollow","alien-signals",". Segundo as notas do rc.1, ela melhora o desempenho e o uso de memória do sistema de reatividade. É uma mudança interna: ",[19,74,75],{},"ref",", ",[19,78,79],{},"reactive",[19,81,82],{},"computed"," e ",[19,85,86],{},"watch"," continuam com a mesma API. Como ela faz parte do Vue 3.6, o benefício não depende de você usar o Vapor.",[40,89,91],{"id":90},"como-ativar-o-vapor-mode","Como ativar o Vapor Mode",[15,93,94,95,98,99,102],{},"O Vapor funciona com SFCs que usam ",[19,96,97],{},"\u003Cscript setup>"," ou só template. Você marca o componente com o atributo ",[19,100,101],{},"vapor",":",[104,105,110],"pre",{"className":106,"code":107,"language":108,"meta":109,"style":109},"language-vue shiki shiki-themes dracula","\u003Cscript setup vapor lang=\"ts\">\nimport { ref } from 'vue'\n\nconst count = ref(0)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton @click=\"count++\">\n    count is {{ count }}\n  \u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n","vue","",[19,111,112,151,171,178,203,213,218,228,251,257,267],{"__ignoreMap":109},[113,114,117,121,125,129,132,135,138,142,146,148],"span",{"class":115,"line":116},"line",1,[113,118,120],{"class":119},"sCdxs","\u003C",[113,122,124],{"class":123},"s0Tla","script",[113,126,128],{"class":127},"sY_PY"," setup",[113,130,131],{"class":127}," vapor",[113,133,134],{"class":127}," lang",[113,136,137],{"class":123},"=",[113,139,141],{"class":140},"seVfx","\"",[113,143,145],{"class":144},"s-mGx","ts",[113,147,141],{"class":140},[113,149,150],{"class":119},">\n",[113,152,154,157,160,163,166,168],{"class":115,"line":153},2,[113,155,156],{"class":123},"import",[113,158,159],{"class":119}," { ref } ",[113,161,162],{"class":123},"from",[113,164,165],{"class":140}," '",[113,167,108],{"class":144},[113,169,170],{"class":140},"'\n",[113,172,174],{"class":115,"line":173},3,[113,175,177],{"emptyLinePlaceholder":176},true,"\n",[113,179,181,184,187,189,193,196,200],{"class":115,"line":180},4,[113,182,183],{"class":123},"const",[113,185,186],{"class":119}," count ",[113,188,137],{"class":123},[113,190,192],{"class":191},"sAOxA"," ref",[113,194,195],{"class":119},"(",[113,197,199],{"class":198},"sIQBb","0",[113,201,202],{"class":119},")\n",[113,204,206,209,211],{"class":115,"line":205},5,[113,207,208],{"class":119},"\u003C\u002F",[113,210,124],{"class":123},[113,212,150],{"class":119},[113,214,216],{"class":115,"line":215},6,[113,217,177],{"emptyLinePlaceholder":176},[113,219,221,223,226],{"class":115,"line":220},7,[113,222,120],{"class":119},[113,224,225],{"class":123},"template",[113,227,150],{"class":119},[113,229,231,234,237,240,242,244,247,249],{"class":115,"line":230},8,[113,232,233],{"class":119},"  \u003C",[113,235,236],{"class":123},"button",[113,238,239],{"class":127}," @click",[113,241,137],{"class":123},[113,243,141],{"class":140},[113,245,246],{"class":144},"count++",[113,248,141],{"class":140},[113,250,150],{"class":119},[113,252,254],{"class":115,"line":253},9,[113,255,256],{"class":119},"    count is {{ count }}\n",[113,258,260,263,265],{"class":115,"line":259},10,[113,261,262],{"class":119},"  \u003C\u002F",[113,264,236],{"class":123},[113,266,150],{"class":119},[113,268,270,272,274],{"class":115,"line":269},11,[113,271,208],{"class":119},[113,273,225],{"class":123},[113,275,150],{"class":119},[15,277,278,279,282],{},"Fora do Nuxt, o ",[19,280,281],{},"@vitejs\u002Fplugin-vue"," compila SFCs Vapor (o changelog do plugin registra suporte a componentes Vapor, inclusive só com template), então use uma versão recente.",[15,284,285,286,289,290,293,294,297],{},"O Vue também aceita ",[19,287,288],{},"\u003Cscript vapor>"," como atalho de ",[19,291,292],{},"\u003Cscript setup vapor>",". Outra opção é colocar o marcador no template, com ",[19,295,296],{},"\u003Ctemplate vapor>",", para compilar o SFC inteiro em modo Vapor.",[54,299,301],{"id":300},"componentes-vapor-em-um-app-existente","Componentes Vapor em um app existente",[15,303,304,305,308,309,312],{},"Num app criado com ",[19,306,307],{},"createApp()",", é preciso instalar o ",[19,310,311],{},"vaporInteropPlugin"," para usar componentes Vapor:",[104,314,317],{"className":315,"code":316,"language":145,"meta":109,"style":109},"language-ts shiki shiki-themes dracula","import { createApp, vaporInteropPlugin } from 'vue'\nimport App from '.\u002FApp.vue'\n\ncreateApp(App).use(vaporInteropPlugin).mount('#app')\n",[19,318,319,334,350,354],{"__ignoreMap":109},[113,320,321,323,326,328,330,332],{"class":115,"line":116},[113,322,156],{"class":123},[113,324,325],{"class":119}," { createApp, vaporInteropPlugin } ",[113,327,162],{"class":123},[113,329,165],{"class":140},[113,331,108],{"class":144},[113,333,170],{"class":140},[113,335,336,338,341,343,345,348],{"class":115,"line":153},[113,337,156],{"class":123},[113,339,340],{"class":119}," App ",[113,342,162],{"class":123},[113,344,165],{"class":140},[113,346,347],{"class":144},".\u002FApp.vue",[113,349,170],{"class":140},[113,351,352],{"class":115,"line":173},[113,353,177],{"emptyLinePlaceholder":176},[113,355,356,359,362,365,368,371,373,376,379,381],{"class":115,"line":180},[113,357,358],{"class":191},"createApp",[113,360,361],{"class":119},"(App).",[113,363,364],{"class":191},"use",[113,366,367],{"class":119},"(vaporInteropPlugin).",[113,369,370],{"class":191},"mount",[113,372,195],{"class":119},[113,374,375],{"class":140},"'",[113,377,378],{"class":144},"#app",[113,380,375],{"class":140},[113,382,202],{"class":119},[15,384,385],{},"Com o plugin instalado, componentes Vapor e componentes comuns podem ficar aninhados uns dentro dos outros. As notas do Vue avisam que isso cobre props, eventos e slots no uso padrão, mas ainda não todos os casos de borda. A recomendação deles é manter regiões distintas no app, cada uma em um modo, e evitar o aninhamento misto sempre que der.",[54,387,389],{"id":388},"app-100-vapor","App 100% Vapor",[15,391,392,393,102],{},"Se todos os componentes forem Vapor, use ",[19,394,395],{},"createVaporApp()",[104,397,399],{"className":315,"code":398,"language":145,"meta":109,"style":109},"import { createVaporApp } from 'vue'\nimport App from '.\u002FApp.vue'\n\ncreateVaporApp(App).mount('#app')\n",[19,400,401,416,430,434],{"__ignoreMap":109},[113,402,403,405,408,410,412,414],{"class":115,"line":116},[113,404,156],{"class":123},[113,406,407],{"class":119}," { createVaporApp } ",[113,409,162],{"class":123},[113,411,165],{"class":140},[113,413,108],{"class":144},[113,415,170],{"class":140},[113,417,418,420,422,424,426,428],{"class":115,"line":153},[113,419,156],{"class":123},[113,421,340],{"class":119},[113,423,162],{"class":123},[113,425,165],{"class":140},[113,427,347],{"class":144},[113,429,170],{"class":140},[113,431,432],{"class":115,"line":173},[113,433,177],{"emptyLinePlaceholder":176},[113,435,436,439,441,443,445,447,449,451],{"class":115,"line":180},[113,437,438],{"class":191},"createVaporApp",[113,440,361],{"class":119},[113,442,370],{"class":191},[113,444,195],{"class":119},[113,446,375],{"class":140},[113,448,378],{"class":144},[113,450,375],{"class":140},[113,452,202],{"class":119},[15,454,455,456,458,459,461],{},"Assim o runtime do Virtual DOM não entra no bundle. Cada componente continua precisando do marcador ",[19,457,101],{},". Componentes escritos com render function ou JSX seguem sendo componentes de Virtual DOM e exigem interop. Um app Vapor também pode instalar o ",[19,460,311],{}," para aceitar componentes de Virtual DOM, mas isso traz o runtime de volta e reduz o ganho de tamanho.",[40,463,465],{"id":464},"vapor-no-nuxt-46","Vapor no Nuxt 4.6",[15,467,468,469,102],{},"O Nuxt 4.6, lançado em 5 de outubro de 2026, suporta o Vapor em modo de interoperabilidade. A raiz do app continua no Virtual DOM, e você escolhe quais componentes ou páginas usam Vapor. Para habilitar, ligue a opção no ",[19,470,471],{},"nuxt.config.ts",[104,473,475],{"className":315,"code":474,"language":145,"meta":109,"style":109},"export default defineNuxtConfig({\n  vue: {\n    vapor: true,\n  },\n})\n",[19,476,477,491,501,514,519],{"__ignoreMap":109},[113,478,479,482,485,488],{"class":115,"line":116},[113,480,481],{"class":123},"export",[113,483,484],{"class":123}," default",[113,486,487],{"class":191}," defineNuxtConfig",[113,489,490],{"class":119},"({\n",[113,492,493,496,498],{"class":115,"line":153},[113,494,495],{"class":119},"  vue",[113,497,102],{"class":123},[113,499,500],{"class":119}," {\n",[113,502,503,506,508,511],{"class":115,"line":173},[113,504,505],{"class":119},"    vapor",[113,507,102],{"class":123},[113,509,510],{"class":198}," true",[113,512,513],{"class":119},",\n",[113,515,516],{"class":115,"line":180},[113,517,518],{"class":119},"  },\n",[113,520,521],{"class":115,"line":205},[113,522,523],{"class":119},"})\n",[15,525,526,527,529,530,533,534,537],{},"Depois marque os componentes com ",[19,528,292],{},", como no exemplo acima. O Nuxt exige Vue ",[19,531,532],{},"^3.6.0-rc.2"," ou mais novo. Segundo o anúncio, rotas, ",[19,535,536],{},"useAsyncData",", layouts e a maioria dos componentes embutidos funcionam sem mudanças. O anúncio recomenda testar o Vapor primeiro em um projeto novo.",[15,539,540],{},"A documentação do Nuxt lista algumas limitações do modo de interop:",[542,543,544,548,555,575,581,600],"ul",{},[545,546,547],"li",{},"a raiz do app não pode ser Vapor, porque os apps 100% Vapor não estão disponíveis no Nuxt;",[545,549,550,551,554],{},"componentes Vapor não expõem ",[19,552,553],{},"$el"," nas template refs;",[545,556,557,560,561,564,565,76,568,83,571,574],{},[19,558,559],{},"\u003CClientOnly>"," pula o repasse de atributos, e ",[19,562,563],{},"\u003CNuxtIsland>",", os componentes de servidor e os componentes de head que leem texto filho (",[19,566,567],{},"\u003CTitle>",[19,569,570],{},"\u003CStyle>",[19,572,573],{},"\u003CNoscript>",") emitem aviso se receberem um slot Vapor;",[545,576,577,580],{},[19,578,579],{},"onPrehydrate"," com chave volta para a forma sem chave (e avisa em desenvolvimento), porque não há instância de componente para anexar a chave;",[545,582,583,83,586,589,590,593,594,596,597,599],{},[19,584,585],{},"asyncData",[19,587,588],{},"fetchKey"," via ",[19,591,592],{},"defineNuxtComponent"," não funcionam (use ",[19,595,536],{}," no ",[19,598,97],{},");",[545,601,602,603,606],{},"composables do Nuxt chamados depois de um ",[19,604,605],{},"await"," podem perder o contexto.",[15,608,609,610,613,614,617],{},"O mesmo anúncio traz números de performance do Nuxt 4.6: o ",[19,611,612],{},"nuxt build"," de um projeto inicial passou de 4,4 s para 3,6 s (18% mais rápido) e a página com 300 ",[19,615,616],{},"\u003CNuxtLink>"," foi de 110 para 140 req\u002Fs no SSR (+26%). O Nuxt atribui esses ganhos às otimizações gerais da versão, não ao Vapor.",[15,619,620],{},"Se você ainda usa Nuxt 3, vale saber que ele chegou ao fim de vida em 31 de julho de 2026.",[40,622,624],{"id":623},"o-que-o-vapor-ainda-não-suporta","O que o Vapor ainda não suporta",[15,626,627],{},"O Vapor aceita um subconjunto das APIs do Vue. As notas oficiais listam o que não está disponível ou não se aplica nos componentes Vapor:",[542,629,630,648,653,662,668,673],{},[545,631,632,633,76,636,76,639,642,643,647],{},"Options API (",[19,634,635],{},"data",[19,637,638],{},"methods",[19,640,641],{},"mounted"," e companhia). Se você precisa entender a diferença, veja o artigo sobre ",[66,644,646],{"href":645},"\u002Fblog\u002Fqual-a-diferenca-entre-a-composition-api-e-options-api-no-vuejs","Composition API e Options API",";",[545,649,650,647],{},[19,651,652],{},"app.config.globalProperties",[545,654,655,658,659,647],{},[19,656,657],{},"getCurrentInstance()",", que retorna ",[19,660,661],{},"null",[545,663,664,665,647],{},"eventos de ciclo de vida por elemento, como ",[19,666,667],{},"@vue:mounted",[545,669,670,647],{},[19,671,672],{},"v-memo",[545,674,675,76,677,76,680,76,683,83,686,689],{},[19,676,553],{},[19,678,679],{},"$props",[19,681,682],{},"$attrs",[19,684,685],{},"$slots",[19,687,688],{},"$refs"," nas template refs de componentes.",[15,691,692,693,695,696,698],{},"Bibliotecas de componentes baseadas em Virtual DOM também merecem teste. As notas falam em \"arestas\" ao usar uma biblioteca de componentes de Virtual DOM dentro do Vapor, sem citar nenhuma biblioteca específica. Se alguma delas depende de ",[19,694,657],{},", o ",[19,697,661],{}," acima pode ser um problema, mas isso só um teste no seu projeto confirma.",[15,700,701,702,705],{},"As notas oficiais não listam ",[19,703,704],{},"\u003CSuspense>"," nem o Vue DevTools como incompatíveis com o Vapor, mas isso não garante suporte completo. O changelog das RCs registra várias correções de integração do Vapor com o Suspense, então o suporte está em andamento. Teste os dois no seu cenário antes de decidir.",[15,707,708],{},"O mesmo vale para SSR. O changelog das RCs traz várias correções de hidratação em componentes Vapor, o que indica que o SSR é suportado, mas ainda em ajuste. Se o seu app renderiza no servidor, teste a hidratação com atenção.",[54,710,712,713],{"id":711},"eventos-e-delegate","Eventos e ",[19,714,715],{},".delegate",[15,717,718,719,722,723,726,727,102],{},"Nas RCs mais antigas, o Vapor delegava eventos para o ",[19,720,721],{},"document",", o que fazia um ",[19,724,725],{},"stopPropagation()"," em um ancestral impedir o handler do filho. Desde o rc.2, os listeners são ligados direto no elemento, como no Vue tradicional, e a delegação virou opt-in com o modificador ",[19,728,715],{},[104,730,732],{"className":106,"code":731,"language":108,"meta":109,"style":109},"\u003Cbutton @click.delegate=\"onClick\" \u002F>\n",[19,733,734],{"__ignoreMap":109},[113,735,736,738,740,743,746,749,752,754,756,759,761],{"class":115,"line":116},[113,737,120],{"class":119},[113,739,236],{"class":123},[113,741,742],{"class":119}," @",[113,744,745],{"class":127},"click",[113,747,748],{"class":119},".",[113,750,751],{"class":127},"delegate",[113,753,137],{"class":123},[113,755,141],{"class":140},[113,757,758],{"class":119},"onClick",[113,760,141],{"class":140},[113,762,763],{"class":119}," \u002F>\n",[15,765,766,767,770],{},"A opção ",[19,768,769],{},"compilerOptions.eventDelegation"," foi removida.",[54,772,774],{"id":773},"diretivas-customizadas","Diretivas customizadas",[15,776,777],{},"As diretivas customizadas também têm outra interface no Vapor. Em vez de um objeto com hooks, você escreve uma função que recebe o elemento e um getter reativo, e pode devolver uma função de limpeza:",[104,779,781],{"className":315,"code":780,"language":145,"meta":109,"style":109},"import { watchEffect } from 'vue'\n\nconst MyDirective = (el, source) => {\n  watchEffect(() => {\n    el.textContent = source()\n  })\n  return () => console.log('cleanup')\n}\n",[19,782,783,798,802,832,844,857,862,889],{"__ignoreMap":109},[113,784,785,787,790,792,794,796],{"class":115,"line":116},[113,786,156],{"class":123},[113,788,789],{"class":119}," { watchEffect } ",[113,791,162],{"class":123},[113,793,165],{"class":140},[113,795,108],{"class":144},[113,797,170],{"class":140},[113,799,800],{"class":115,"line":153},[113,801,177],{"emptyLinePlaceholder":176},[113,803,804,806,809,812,815,819,821,824,827,830],{"class":115,"line":173},[113,805,183],{"class":123},[113,807,808],{"class":191}," MyDirective",[113,810,811],{"class":123}," =",[113,813,814],{"class":119}," (",[113,816,818],{"class":817},"sGEwX","el",[113,820,76],{"class":119},[113,822,823],{"class":817},"source",[113,825,826],{"class":119},") ",[113,828,829],{"class":123},"=>",[113,831,500],{"class":119},[113,833,834,837,840,842],{"class":115,"line":180},[113,835,836],{"class":191},"  watchEffect",[113,838,839],{"class":119},"(() ",[113,841,829],{"class":123},[113,843,500],{"class":119},[113,845,846,849,851,854],{"class":115,"line":205},[113,847,848],{"class":119},"    el.textContent ",[113,850,137],{"class":123},[113,852,853],{"class":191}," source",[113,855,856],{"class":119},"()\n",[113,858,859],{"class":115,"line":215},[113,860,861],{"class":119},"  })\n",[113,863,864,867,870,872,875,878,880,882,885,887],{"class":115,"line":220},[113,865,866],{"class":123},"  return",[113,868,869],{"class":119}," () ",[113,871,829],{"class":123},[113,873,874],{"class":119}," console.",[113,876,877],{"class":191},"log",[113,879,195],{"class":119},[113,881,375],{"class":140},[113,883,884],{"class":144},"cleanup",[113,886,375],{"class":140},[113,888,202],{"class":119},[113,890,891],{"class":115,"line":230},[113,892,893],{"class":119},"}\n",[15,895,896,897,900,901,904,905,909],{},"A assinatura completa é ",[19,898,899],{},"(node, value?, argument?, modifiers?)",", e ",[19,902,903],{},"value"," é o getter reativo. Se quiser rever o básico, o artigo sobre ",[66,906,908],{"href":907},"\u002Fblog\u002Fo-que-sao-diretivas-no-vue-e-como-implementa-las","diretivas no Vue"," cobre o modelo tradicional.",[40,911,913],{"id":912},"onde-o-vapor-ajuda","Onde o Vapor ajuda",[15,915,916],{},"O ganho aparece onde o app faz muito trabalho de atualização de DOM: listas e tabelas densas, componentes que mudam várias vezes por segundo e páginas em que o tamanho do JavaScript inicial pesa. Para um CRUD comum, a diferença tende a passar despercebida pelo usuário.",[15,918,919,920,923],{},"O Vapor também não resolve problemas que não vêm do renderizador. Renderizar 10.000 itens no DOM continua lento nos dois modos, e a saída é virtualizar a lista. Chamar funções pesadas direto no template, como ",[19,921,922],{},"{{ calcularTotal(item) }}",", continua sendo má ideia nos dois modos.",[40,925,927],{"id":926},"vale-adotar-agora","Vale adotar agora?",[15,929,930],{},"A própria equipe do Vue diz que o conjunto de recursos do Vapor está completo no RC e recomenda, por enquanto, dois usos: aplicar o Vapor em partes de um app existente, como uma página sensível a performance, e construir apps pequenos novos inteiramente em Vapor.",[15,932,933],{},"Para um app em produção que já roda bem no Vue 3.5, esperar a versão estável é a escolha mais segura. Para uma página isolada onde você já mediu um gargalo, um teste no Nuxt 4.6 ou num app Vue com interop é um bom experimento. Antes de começar, confira:",[542,935,936,939,945,948],{},[545,937,938],{},"você mediu o desempenho atual (o painel Performance do navegador serve) e achou um gargalo de renderização;",[545,940,941,942,944],{},"o componente usa ",[19,943,97],{}," ou só template;",[545,946,947],{},"as bibliotecas de UI que ele usa funcionam com interop no seu projeto;",[545,949,950],{},"você consegue isolar o Vapor numa rota ou componente e voltar atrás sem dor.",[40,952,954],{"id":953},"perguntas-frequentes","Perguntas frequentes",[54,956,958],{"id":957},"o-que-é-vapor-mode-no-vue","O que é Vapor Mode no Vue?",[15,960,961],{},"É um modo de compilação opt-in para SFCs, disponível no Vue 3.6 RC. Em vez de criar e comparar uma árvore de Virtual DOM em tempo de execução, o compilador gera código que atualiza o DOM diretamente.",[54,963,965],{"id":964},"o-vue-36-já-saiu-como-estável","O Vue 3.6 já saiu como estável?",[15,967,968,969,971,972,748],{},"Ainda não. Até 6 de outubro de 2026, a versão mais recente é a ",[19,970,21],{},", e a estável é a ",[19,973,25],{},[54,975,977],{"id":976},"o-vapor-mode-substitui-o-virtual-dom","O Vapor Mode substitui o Virtual DOM?",[15,979,980,981,748],{},"Não. Ele é opcional e convive com o Virtual DOM no mesmo app, por meio do ",[19,982,311],{},[54,984,986],{"id":985},"preciso-reescrever-meu-app-para-usar-o-vapor","Preciso reescrever meu app para usar o Vapor?",[15,988,989,990,992,993,995],{},"Não. Você pode marcar um componente por vez com ",[19,991,101],{},". Os componentes que usam Options API ficam fora, porque o Vapor só aceita ",[19,994,97],{}," e templates.",[54,997,999],{"id":998},"o-vapor-mode-funciona-com-options-api","O Vapor Mode funciona com Options API?",[15,1001,1002],{},"Não. As notas oficiais listam a Options API como não suportada.",[54,1004,1006],{"id":1005},"o-vapor-mode-funciona-com-nuxt","O Vapor Mode funciona com Nuxt?",[15,1008,1009,1010,596,1013,1015,1016,1018],{},"Sim, desde o Nuxt 4.6, em modo de interoperabilidade: ative ",[19,1011,1012],{},"vue: { vapor: true }",[19,1014,471],{}," e marque os componentes com ",[19,1017,292],{},". A raiz do app continua no Virtual DOM.",[54,1020,1022],{"id":1021},"o-vapor-mode-é-mais-rápido-que-o-virtual-dom","O Vapor Mode é mais rápido que o Virtual DOM?",[15,1024,1025],{},"Segundo as notas do Vue 3.6, o Vapor chegou ao nível de Solid e Svelte 5 em benchmarks de terceiros. Para a maioria dos apps o ganho percebido é pequeno, e o efeito real no seu projeto só aparece medindo.",[1027,1028,1029],"style",{},"html pre.shiki code .sCdxs, html code.shiki .sCdxs{--shiki-default:#F8F8F2}html pre.shiki code .s0Tla, html code.shiki .s0Tla{--shiki-default:#FF79C6}html pre.shiki code .sY_PY, html code.shiki .sY_PY{--shiki-default:#50FA7B;--shiki-default-font-style:italic}html pre.shiki code .seVfx, html code.shiki .seVfx{--shiki-default:#E9F284}html pre.shiki code .s-mGx, html code.shiki .s-mGx{--shiki-default:#F1FA8C}html pre.shiki code .sAOxA, html code.shiki .sAOxA{--shiki-default:#50FA7B}html pre.shiki code .sIQBb, html code.shiki .sIQBb{--shiki-default:#BD93F9}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sGEwX, html code.shiki .sGEwX{--shiki-default:#FFB86C;--shiki-default-font-style:italic}",{"title":109,"searchDepth":153,"depth":153,"links":1031},[1032,1035,1039,1040,1045,1046,1047],{"id":42,"depth":153,"text":43,"children":1033},[1034],{"id":56,"depth":173,"text":57},{"id":90,"depth":153,"text":91,"children":1036},[1037,1038],{"id":300,"depth":173,"text":301},{"id":388,"depth":173,"text":389},{"id":464,"depth":153,"text":465},{"id":623,"depth":153,"text":624,"children":1041},[1042,1044],{"id":711,"depth":173,"text":1043},"Eventos e .delegate",{"id":773,"depth":173,"text":774},{"id":912,"depth":153,"text":913},{"id":926,"depth":153,"text":927},{"id":953,"depth":153,"text":954,"children":1048},[1049,1050,1051,1052,1053,1054,1055],{"id":957,"depth":173,"text":958},{"id":964,"depth":173,"text":965},{"id":976,"depth":173,"text":977},{"id":985,"depth":173,"text":986},{"id":998,"depth":173,"text":999},{"id":1005,"depth":173,"text":1006},{"id":1021,"depth":173,"text":1022},[1057,1058],"vuejs","nuxt","O que é o Vue Vapor Mode, como ativar no Vue 3.6 (RC) e no Nuxt 4.6, o que ainda não funciona e quando vale a pena usar, com exemplos e perguntas frequentes.","vue-vapor-mode-what-it-is-and-how-to-use-it","md",{},"\u002Fblog\u002Fvue-vapor-mode-como-funciona-e-como-usar","vue-vapor-mode-como-funciona-e-como-usar","2026-10-06",{"title":5,"description":1059},{"loc":1063,"lastmod":1065},"blog\u002Fvue-vapor-mode-como-funciona-e-como-usar",1727,"NQrIpjH60lJ3Pb8kNbXKYS5Uv15ImJPunsIToGQO9LE",[1072,1080,1087,1094,1102,1110,1118,1125,1133,1141,1148,1156,1162,1171,1178,1184,1191,1198,1204,1212,1219,1221],{"id":1073,"path":1074,"title":1075,"articleCover":1076,"categoriesIds":1077,"publishedAt":1079},"blog\u002Fblog\u002Fa-maneira-correta-de-utilizar-a-nomenclatura-bem.md","\u002Fblog\u002Fa-maneira-correta-de-utilizar-a-nomenclatura-bem","A maneira correta de utilizar a nomenclatura BEM","\u002Fimages\u002Fblog\u002Fa-maneira-correta-de-utilizar-a-nomenclatura-bem.webp",[1078],"css","2024-05-05",{"id":1081,"path":1082,"title":1083,"articleCover":1084,"categoriesIds":1085,"publishedAt":1086},"blog\u002Fblog\u002Fcomo-adicionar-caracteres-especiais-no-i18n.md","\u002Fblog\u002Fcomo-adicionar-caracteres-especiais-no-i18n","Como Adicionar Caracteres Especiais em Traduções do i18N","\u002Fimages\u002Fblog\u002Fi18n\u002Fi18n-caracteres-especiais-no-nuxtjs-thumb.webp",[1058,1057],"2025-01-29",{"id":1088,"path":1089,"title":1090,"articleCover":1091,"categoriesIds":1092,"publishedAt":1093},"blog\u002Fblog\u002Fcomo-adicionar-o-google-tag-manager-no-seu-website-com-nuxt-3.md","\u002Fblog\u002Fcomo-adicionar-o-google-tag-manager-no-seu-website-com-nuxt-3","Como adicionar o Google Tag Manager no seu website com Nuxt 3","\u002Fimages\u002Fblog\u002Fcomo-adicionar-google-tag-manager-em-projeto-com-nuxt-3.webp",[1058,1057],"2024-08-15",{"id":1095,"path":1096,"title":1097,"articleCover":1098,"categoriesIds":1099,"publishedAt":1101},"blog\u002Fblog\u002Fcomo-configurar-chave-ssh-no-git-para-usar-no-github.md","\u002Fblog\u002Fcomo-configurar-chave-ssh-no-git-para-usar-no-github","Chave SSH no Git: Como Configurar chave SSH para usar no GitHub","\u002Fimages\u002Fblog\u002Fgit\u002Fcomo-criar-e-configurar-chave-ssh-no-github-thumb.webp",[1100],"git","2025-02-04",{"id":1103,"path":1104,"title":1105,"articleCover":1106,"categoriesIds":1107,"publishedAt":1109},"blog\u002Fblog\u002Fcomo-consumir-uma-api-no-javascript-com-a-fetch-api.md","\u002Fblog\u002Fcomo-consumir-uma-api-no-javascript-com-a-fetch-api","Como consumir uma API no JavaScript com a Fetch API","\u002Fimages\u002Fblog\u002Fcomo-consumir-uma-api-no-javascript-com-a-fetch-api.webp",[1108],"javascript","2024-09-05",{"id":1111,"path":1112,"title":1113,"articleCover":1114,"categoriesIds":1115,"publishedAt":1117},"blog\u002Fblog\u002Fcomo-criar-dados-estruturados-com-nuxtjs.md","\u002Fblog\u002Fcomo-criar-dados-estruturados-com-nuxtjs","Como Adicionar Dados Estruturados no Nuxt.JS","\u002Fimages\u002Fblog\u002Fseo\u002Fstructured-data\u002Fstructured-data-thumb-1.webp",[1058,1057,1116],"seo","2025-01-22",{"id":1119,"path":1120,"title":1121,"articleCover":1122,"categoriesIds":1123,"publishedAt":1124},"blog\u002Fblog\u002Fcomo-funciona-o-sistema-de-rotas-no-nuxt.md","\u002Fblog\u002Fcomo-funciona-o-sistema-de-rotas-no-nuxt","Rotas no Nuxt: dinâmicas, aninhadas e catch-all","\u002Fimages\u002Fblog\u002Fnuxt\u002Fsistema-de-rotas-no-nuxtjs-thumb.webp",[1058,1057],"2025-03-12",{"id":1126,"path":1127,"title":1128,"articleCover":1129,"categoriesIds":1130,"publishedAt":1132},"blog\u002Fblog\u002Fcomo-lidar-com-inveja-de-outros-programadores.md","\u002Fblog\u002Fcomo-lidar-com-inveja-de-outros-programadores","Como Lidar com Inveja de Outros Programadores","\u002Fimages\u002Fblog\u002Fcarreira\u002Finveja-de-programadores-com-quem-se-destaca.webp",[1131],"career","2025-08-29",{"id":1134,"path":1135,"title":1136,"articleCover":1137,"categoriesIds":1138,"publishedAt":1140},"blog\u002Fblog\u002Fcomo-recuperar-arquivos-perdidos-no-git-pelo-vscode.md","\u002Fblog\u002Fcomo-recuperar-arquivos-perdidos-no-git-pelo-vscode","Perdeu arquivos no Git sem commit? Veja como recuperar pelo VS Code","\u002Fimages\u002Fblog\u002Fcomo-recuperar-arquivos-perdido-no-git-pelo-vscode.webp",[1100,1139],"vscode","2024-05-15",{"id":1142,"path":1143,"title":1144,"articleCover":1145,"categoriesIds":1146,"publishedAt":1147},"blog\u002Fblog\u002Fcomo-usar-middlewares-no-nuxtjs.md","\u002Fblog\u002Fcomo-usar-middlewares-no-nuxtjs","Middlewares: O que são e como utilizar no Nuxt.JS","\u002Fimages\u002Fblog\u002Fnuxt\u002Fmiddlewares-no-front-end.webp",[1058,1057],"2025-01-14",{"id":1149,"path":1150,"title":1151,"articleCover":1152,"categoriesIds":1153,"publishedAt":1155},"blog\u002Fblog\u002Fcomo-validar-cartao-de-credito-com-javascript.md","\u002Fblog\u002Fcomo-validar-cartao-de-credito-com-javascript","Como validar um cartão de crédito com JavaScript (algoritmo de Luhn)","\u002Fimages\u002Fblog\u002Fjavascript\u002Fcomo-validar-cartao-de-credito-com-javascript.webp",[1108,1154],"tools","2026-09-17",{"id":1157,"path":1158,"title":1159,"articleCover":1160,"categoriesIds":1161,"publishedAt":1155},"blog\u002Fblog\u002Fcomo-validar-cpf-com-javascript.md","\u002Fblog\u002Fcomo-validar-cpf-com-javascript","Como validar um CPF com JavaScript","\u002Fimages\u002Fblog\u002Fjavascript\u002Fcomo-validar-cpf-com-javascript.webp",[1108,1154],{"id":1163,"path":1164,"title":1165,"articleCover":1166,"categoriesIds":1167,"publishedAt":1170},"blog\u002Fblog\u002Fcomponentes-do-figma-um-guia-para-te-ajudar-a-comecar.md","\u002Fblog\u002Fcomponentes-do-figma-um-guia-para-te-ajudar-a-comecar","Guia de Componentes no Figma para Iniciantes","\u002Fimages\u002Fblog\u002Ffigma\u002Fcomponentes-do-figma-um-guia-para-te-ajudar-a-comecar.png",[1168,1169],"figma","ux","2024-10-15",{"id":1172,"path":1173,"title":1174,"articleCover":1175,"categoriesIds":1176,"publishedAt":1177},"blog\u002Fblog\u002Fhub-de-ferramentas-gratuitas-para-desenvolvedores.md","\u002Fblog\u002Fhub-de-ferramentas-gratuitas-para-desenvolvedores","Criei um Hub de Ferramentas Web Gratuitas para Devs","\u002Fimages\u002Fblog\u002Fferramentas\u002Fhub-ferramentas-gratuitas-para-desenvolvedores.webp",[1154],"2026-01-06",{"id":1179,"path":907,"title":1180,"articleCover":1181,"categoriesIds":1182,"publishedAt":1183},"blog\u002Fblog\u002Fo-que-sao-diretivas-no-vue-e-como-implementa-las.md","Diretivas no Vue 3: nativas e personalizadas","\u002Fimages\u002Fblog\u002Fvue\u002Fo-que-sao-diretivas-no-vue-e-como-implementa-las.webp",[1057],"2025-03-21",{"id":1185,"path":1186,"title":1187,"articleCover":1188,"categoriesIds":1189,"publishedAt":1190},"blog\u002Fblog\u002Fog-tags-o-que-sao-e-como-adicionar-no-seu-site.md","\u002Fblog\u002Fog-tags-o-que-sao-e-como-adicionar-no-seu-site","OG Tags: O que São e Como Adicioná-las ao Seu Site","\u002Fimages\u002Fblog\u002Fseo\u002Fo-que-e-como-utilizar-as-og-tags.webp",[1116],"2024-10-05",{"id":1192,"path":1193,"title":1194,"articleCover":1195,"categoriesIds":1196,"publishedAt":1197},"blog\u002Fblog\u002Fos-principais-erros-de-programadores-em-entrevistas-de-emprego.md","\u002Fblog\u002Fos-principais-erros-de-programadores-em-entrevistas-de-emprego","Os principais erros de programadores em entrevistas de emprego","\u002Fimages\u002Fblog\u002Fnao-cometa-esses-erros-na-sua-entrevista.webp",[1131],"2024-09-15",{"id":1199,"path":645,"title":1200,"articleCover":1201,"categoriesIds":1202,"publishedAt":1203},"blog\u002Fblog\u002Fqual-a-diferenca-entre-a-composition-api-e-options-api-no-vuejs.md","Qual a diferença entre a Composition API e Options API no VueJS","\u002Fimages\u002Fblog\u002Fvue\u002Fqual-a-diferenca-entre-a-composition-api-e-options-api-no-vuejs.webp",[1057],"2025-02-20",{"id":1205,"path":1206,"title":1207,"articleCover":1208,"categoriesIds":1209,"publishedAt":1211},"blog\u002Fblog\u002Fscroll-infinito-como-adicionar-ao-seu-site-e-suas-vantagens.md","\u002Fblog\u002Fscroll-infinito-como-adicionar-ao-seu-site-e-suas-vantagens","Scroll Infinito no React-Native: Guia Prático","\u002Fimages\u002Fblog\u002Freact-native\u002Fscroll-infinito-como-adicionar-ao-seu-site-e-suas-vantagens.webp",[1210],"react-native","2024-12-15",{"id":1213,"path":1214,"title":1215,"articleCover":1216,"categoriesIds":1217,"publishedAt":1218},"blog\u002Fblog\u002Fvercel-compra-nuxt-labs.md","\u002Fblog\u002Fvercel-compra-nuxt-labs","Vercel comprou a Nuxt Labs! E agora, o que muda para o Nuxt?","\u002Fimages\u002Fblog\u002Fnuxt\u002Fvercel-compra-nuxt-labs.webp",[1058],"2025-07-17",{"id":4,"path":1063,"title":5,"articleCover":6,"categoriesIds":1220,"publishedAt":1065},[1057,1058],{"id":1222,"path":1223,"title":1224,"articleCover":1225,"categoriesIds":1226,"publishedAt":1228},"blog\u002Fblog\u002Fweb-vitals-como-a-experiencia-do-usuario-vai-afetar-o-seo-do-seu-site.md","\u002Fblog\u002Fweb-vitals-como-a-experiencia-do-usuario-vai-afetar-o-seo-do-seu-site","Web Vitals e SEO: como a experiência do usuário afeta o seu site","\u002Fimages\u002Fblog\u002Fseo\u002Fweb-vitals\u002Fweb-vitals-como-a-experiencia-do-usuario-vai-afetar-o-seo-do-seu-site.webp",[1116,1227],"web-vitals","2024-10-25",1791321319159]