[{"data":1,"prerenderedAt":309},["ShallowReactive",2],{"blog-vue3-nuxt3-ecossistema-pt-BR":3},{"id":4,"title":5,"body":6,"date":298,"description":299,"extension":300,"lang":301,"meta":302,"navigation":303,"path":304,"seo":305,"stem":306,"translationKey":307,"__hash__":308},"blog\u002Fblog\u002Fvue3-nuxt3-ecossistema.md","Vue 3 + Nuxt 3: o que mudou no ecossistema",{"type":7,"value":8,"toc":291},"minimark",[9,14,28,133,137,156,243,247,254,258,280,284,287],[10,11,13],"h2",{"id":12},"composition-api-é-o-novo-padrão","Composition API é o novo padrão",[15,16,17,18,22,23,27],"p",{},"O maior salto do Vue 2 para o Vue 3 foi a ",[19,20,21],"strong",{},"Composition API"," com ",[24,25,26],"code",{},"\u003Cscript setup>",". O código fica mais legível, reutilizável e fácil de tipar com TypeScript.",[29,30,35],"pre",{"className":31,"code":32,"language":33,"meta":34,"style":34},"language-vue shiki shiki-themes github-light github-dark","\u003Cscript setup lang=\"ts\">\nconst count = ref(0)\nconst doubled = computed(() => count.value * 2)\n\u003C\u002Fscript>\n","vue","",[24,36,37,67,93,123],{"__ignoreMap":34},[38,39,42,46,50,54,57,60,64],"span",{"class":40,"line":41},"line",1,[38,43,45],{"class":44},"sVt8B","\u003C",[38,47,49],{"class":48},"s9eBZ","script",[38,51,53],{"class":52},"sScJk"," setup",[38,55,56],{"class":52}," lang",[38,58,59],{"class":44},"=",[38,61,63],{"class":62},"sZZnC","\"ts\"",[38,65,66],{"class":44},">\n",[38,68,70,74,78,81,84,87,90],{"class":40,"line":69},2,[38,71,73],{"class":72},"szBVR","const",[38,75,77],{"class":76},"sj4cs"," count",[38,79,80],{"class":72}," =",[38,82,83],{"class":52}," ref",[38,85,86],{"class":44},"(",[38,88,89],{"class":76},"0",[38,91,92],{"class":44},")\n",[38,94,96,98,101,103,106,109,112,115,118,121],{"class":40,"line":95},3,[38,97,73],{"class":72},[38,99,100],{"class":76}," doubled",[38,102,80],{"class":72},[38,104,105],{"class":52}," computed",[38,107,108],{"class":44},"(() ",[38,110,111],{"class":72},"=>",[38,113,114],{"class":44}," count.value ",[38,116,117],{"class":72},"*",[38,119,120],{"class":76}," 2",[38,122,92],{"class":44},[38,124,126,129,131],{"class":40,"line":125},4,[38,127,128],{"class":44},"\u003C\u002F",[38,130,49],{"class":48},[38,132,66],{"class":44},[10,134,136],{"id":135},"pinia-substituiu-o-vuex","Pinia substituiu o Vuex",[15,138,139,140,143,144,147,148,151,152,155],{},"O Vuex 4 ainda existe, mas o ",[19,141,142],{},"Pinia"," é o store oficial hoje. Sem mutations, sem namespaces verbosos — só ",[24,145,146],{},"state",", ",[24,149,150],{},"getters"," e ",[24,153,154],{},"actions",".",[29,157,161],{"className":158,"code":159,"language":160,"meta":34,"style":34},"language-ts shiki shiki-themes github-light github-dark","export const useCounterStore = defineStore('counter', () => {\n  const count = ref(0)\n  const increment = () => count.value++\n  return { count, increment }\n})\n","ts",[24,162,163,192,209,229,237],{"__ignoreMap":34},[38,164,165,168,171,174,176,179,181,184,187,189],{"class":40,"line":41},[38,166,167],{"class":72},"export",[38,169,170],{"class":72}," const",[38,172,173],{"class":76}," useCounterStore",[38,175,80],{"class":72},[38,177,178],{"class":52}," defineStore",[38,180,86],{"class":44},[38,182,183],{"class":62},"'counter'",[38,185,186],{"class":44},", () ",[38,188,111],{"class":72},[38,190,191],{"class":44}," {\n",[38,193,194,197,199,201,203,205,207],{"class":40,"line":69},[38,195,196],{"class":72},"  const",[38,198,77],{"class":76},[38,200,80],{"class":72},[38,202,83],{"class":52},[38,204,86],{"class":44},[38,206,89],{"class":76},[38,208,92],{"class":44},[38,210,211,213,216,218,221,223,226],{"class":40,"line":95},[38,212,196],{"class":72},[38,214,215],{"class":52}," increment",[38,217,80],{"class":72},[38,219,220],{"class":44}," () ",[38,222,111],{"class":72},[38,224,225],{"class":44}," count.value",[38,227,228],{"class":72},"++\n",[38,230,231,234],{"class":40,"line":125},[38,232,233],{"class":72},"  return",[38,235,236],{"class":44}," { count, increment }\n",[38,238,240],{"class":40,"line":239},5,[38,241,242],{"class":44},"})\n",[10,244,246],{"id":245},"vite-no-lugar-do-webpack","Vite no lugar do Webpack",[15,248,249,250,253],{},"O Nuxt 3 usa ",[19,251,252],{},"Vite"," por padrão. HMR instantâneo, build mais rápido, melhor DX. A diferença é sentida especialmente em projetos grandes.",[10,255,257],{"id":256},"o-que-ainda-é-válido-do-vue-2","O que ainda é válido do Vue 2",[259,260,261,265,277],"ul",{},[262,263,264],"li",{},"Options API ainda funciona no Vue 3",[262,266,267,147,270,147,273,276],{},[24,268,269],{},"v-model",[24,271,272],{},"v-for",[24,274,275],{},"v-if"," — mesma API",[262,278,279],{},"Ecosystem de componentes está migrando, mas Vuetify, Quasar e PrimeVue têm versões Vue 3",[10,281,283],{"id":282},"conclusão","Conclusão",[15,285,286],{},"A migração vale a pena. A curva de aprendizado é real, mas o ganho em produtividade e performance compensa.",[288,289,290],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}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 .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":34,"searchDepth":69,"depth":69,"links":292},[293,294,295,296,297],{"id":12,"depth":69,"text":13},{"id":135,"depth":69,"text":136},{"id":245,"depth":69,"text":246},{"id":256,"depth":69,"text":257},{"id":282,"depth":69,"text":283},"2026-05-10","Um panorama prático das principais mudanças do Vue 2\u002FNuxt 2 para Vue 3\u002FNuxt 3 — Composition API, Pinia, Vite e o que realmente importa no dia a dia.","md","pt-BR",{},true,"\u002Fblog\u002Fvue3-nuxt3-ecossistema",{"title":5,"description":299},"blog\u002Fvue3-nuxt3-ecossistema","vue3-nuxt3-ecosystem","Bz7Qqxjk8wlM6rQSQNmEeZf0LcKAHGkaBq41yKNmjpk",1779999660725]