[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"en-home-articles":3,"$f_3if14QxBySBdNduEP2CJTQ4DREBOE8MIrBcbZi7Prg":6089},[4,342,1078,1671,1936,2667,2848,3540,3708,3877,5080],{"id":5,"title":6,"articleCover":7,"articleCoverEmbed":8,"authorId":9,"body":10,"categoriesIds":329,"description":331,"enAlternateSlug":332,"extension":333,"meta":334,"navigation":335,"path":336,"ptBrAlternateSlug":337,"publishedAt":338,"seo":339,"stem":340,"updatedAt":8,"__hash__":341},"blogEn/en/blog/free-developer-tools-hub.md","I Built a Free Web Tools Hub for Developers","/images/en/blog/tools/free-developer-tools-hub.webp",null,"thiago-nunes-batista",{"type":11,"value":12,"toc":307},"minimark",[13,17,31,36,41,49,52,55,62,66,77,81,92,96,100,111,115,125,129,133,141,145,149,157,161,165,178,182,186,190,197,200,204,207,210,214,217,220,224,238,253,257,263,270,274,277,293,297],[14,15,16],"p",{},"You know that moment when you need to generate a CPF to test a form? Or when you need to validate a fake credit card in your development environment? Throughout my career as a developer, I always relied on different websites for these simple but essential daily tasks.",[14,18,19,20,30],{},"Each site had different layouts and user experiences, some good, others not so much. Thinking about creating something that centralizes these different tools with a simple interface and excellent user experience, I created the ",[21,22,23],"strong",{},[24,25,29],"a",{"href":26,"rel":27},"https://codigoaoponto.com/en/tools",[28],"nofollow","Código ao Ponto Developer Tools Hub",", a completely free hub that brings together several tools in one place, which are straight to the point and work without the need to create an account.",[32,33,35],"h2",{"id":34},"what-tools-are-available-in-the-hub","What tools are available in the Hub?",[37,38,40],"h3",{"id":39},"online-planning-poker","Online Planning Poker",[14,42,43,48],{},[24,44,47],{"href":45,"rel":46},"https://codigoaoponto.com/en/tools/planning-poker",[28],"The most complete tool in the hub",". Create a room, share the link with your team (no registration required), and everyone can vote simultaneously on task estimates.",[14,50,51],{},"The tool works in real-time with WebSocket - when someone votes, everyone sees it instantly. It has a session timer, participant list with status, and voting options beyond the traditional Fibonacci sequence.",[14,53,54],{},"It's the type of tool that comes in handy when your team needs to do Sprint Planning and can't find a quality, free Planning Poker.",[56,57],"img",{"alt":58,"height":59,"src":60,"width":61},"Planning Poker tool interface",405,"/images/blog/ferramentas/ferramenta-planning-poker-gratuito.webp",768,[37,63,65],{"id":64},"cpf-generator-and-validator","CPF Generator and Validator",[14,67,68,69,76],{},"One of the most popular tools in the hub. The ",[21,70,71],{},[24,72,75],{"href":73,"rel":74},"https://codigoaoponto.com/en/tools/cpf-generator",[28],"CPF Generator"," creates valid numbers instantly for use in testing environments. This access success is due to its good position in Google search result pages for the term \"CPF Generator\", ranging between second and fourth position.",[56,78],{"alt":79,"height":59,"src":80,"width":61},"CPF Generator tool interface","/images/blog/ferramentas/ferramenta-gerador-de-cpf.webp",[14,82,83,84,91],{},"As a complement, the ",[21,85,86],{},[24,87,90],{"href":88,"rel":89},"https://codigoaoponto.com/en/tools/cpf-validator",[28],"CPF Validator"," was also created, which verifies if a number is structurally valid with immediate feedback.",[56,93],{"alt":94,"height":59,"src":95,"width":61},"CPF Validator tool interface","/images/blog/ferramentas/ferramenta-validador-de-cpf.webp",[37,97,99],{"id":98},"credit-card-generator-and-validator","Credit Card Generator and Validator",[14,101,102,103,110],{},"The ",[21,104,105],{},[24,106,109],{"href":107,"rel":108},"https://codigoaoponto.com/en/tools/credit-card-generator",[28],"Credit Card Generator"," allows you to select the brand (Visa, Mastercard, American Express, etc.) and creates complete fictitious data: card number, CVV, and expiration date. Each field has a quick copy button next to it.",[56,112],{"alt":113,"height":59,"src":114,"width":61},"Credit Card Generator tool interface","/images/blog/ferramentas/ferramenta-gerador-de-cartao-de-credito.webp",[14,116,102,117,124],{},[21,118,119],{},[24,120,123],{"href":121,"rel":122},"https://codigoaoponto.com/en/tools/credit-card-validator",[28],"Credit Card Validator"," automatically identifies the brand and verifies if the number is structurally valid. Essential for testing payment flows.",[56,126],{"alt":127,"height":59,"src":128,"width":61},"Credit Card Validator tool interface","/images/blog/ferramentas/ferramenta-validador-de-cartao-de-credito.webp",[37,130,132],{"id":131},"character-and-word-counter","Character and Word Counter",[14,134,135,140],{},[24,136,139],{"href":137,"rel":138},"https://codigoaoponto.com/en/tools/character-and-word-counter",[28],"Counts in real-time as you type or paste text",". Shows total characters, characters without spaces, number of spaces, and total words. Useful for respecting character limits in APIs or validating form fields.",[56,142],{"alt":143,"height":59,"src":144,"width":61},"Character and Word Counter tool interface","/images/blog/ferramentas/ferramenta-contador-de-caracteres-e-palavras.webp",[37,146,148],{"id":147},"date-format-converter","Date Format Converter",[14,150,151,156],{},[24,152,155],{"href":153,"rel":154},"https://codigoaoponto.com/en/tools/date-format-converter",[28],"Converts dates to the most commonly used formats in development",": ISO String, Timestamp, and UTC String. You can use the current date/time or enter a specific date, with a quick copy button in the result.",[56,158],{"alt":159,"height":59,"src":160,"width":61},"Date Format Converter tool interface","/images/blog/ferramentas/ferramentas-gerador-e-conversor-de-formato-de-datas.webp",[37,162,164],{"id":163},"whatsapp-link-generator","WhatsApp Link Generator",[14,166,167,168,173,174,177],{},"Enter the phone number (with country code selection) and the desired message. ",[24,169,172],{"href":170,"rel":171},"https://codigoaoponto.com/en/tools/whatsapp-message-url-generator",[28],"The tool"," generates a direct link to open the conversation on WhatsApp, with ",[21,175,176],{},"real-time preview"," showing exactly how the message will appear, including formatting and emojis. Very useful for testing texts that will be used in those tasks where the user clicks \"Contact via WhatsApp\".",[56,179],{"alt":180,"height":59,"src":181,"width":61},"WhatsApp URL Generator tool interface with pre-filled text","/images/blog/ferramentas/ferramenta-gerador-de-link-compartilhavel-no-whatsapp.webp",[32,183,185],{"id":184},"design-and-usability-decisions","Design and Usability Decisions",[37,187,189],{"id":188},"frictionless-no-barriers","Frictionless, No Barriers",[14,191,192,193,196],{},"The most important project decision was: ",[21,194,195],{},"no tool requires registration",". This was non-negotiable from the start. Access, use, done.",[14,198,199],{},"For Planning Poker, which is collaborative, you can create rooms with shareable links. No login, no password, no hassle.",[37,201,203],{"id":202},"clean-and-intuitive-interface","Clean and Intuitive Interface",[14,205,206],{},"Each tool follows a consistent visual pattern: input area on the left, result on the right, and clearly visible action buttons.",[14,208,209],{},"Below each tool, there's an educational section explaining use cases, practical examples, and how that tool can help in daily work. The idea is that even someone who has never used it can quickly understand its value.",[37,211,213],{"id":212},"accessible-in-portuguese-and-english","Accessible in Portuguese and English",[14,215,216],{},"From the beginning, I implemented internationalization. The system automatically detects the browser language, but you can manually switch whenever you want.",[14,218,219],{},"Portuguese to serve the Brazilian community, English to reach developers worldwide. The architecture is prepared to easily add new languages.",[37,221,223],{"id":222},"responsive-and-fast","Responsive and Fast",[14,225,226,227,231,232,237],{},"All these tools have their ",[24,228,230],{"href":26,"rel":229},[28],"English versions with I18N"," and are tested with ",[24,233,236],{"href":234,"rel":235},"https://pagespeed.web.dev/",[28],"Lighthouse/PageSpeed Insights"," to ensure good loading performance and visual stability.",[14,239,240,241,246,247,252],{},"The minimum score target was 90 points on PageSpeed Insights across all categories, which is a big challenge, especially when using third-party scripts like ",[24,242,245],{"href":243,"rel":244},"https://developers.google.com/analytics",[28],"Google Analytics"," and ",[24,248,251],{"href":249,"rel":250},"https://adsense.google.com/start",[28],"Google Adsense",", but with proper optimizations, they deliver excellent loading speed.",[32,254,256],{"id":255},"the-stack-behind-it","The Stack Behind It",[14,258,259,262],{},[21,260,261],{},"Nuxt 4"," was chosen for the frontend for its focus on performance and SEO, very important aspects for good Google ranking.",[14,264,265,266,269],{},"For the backend, ",[21,267,268],{},"NestJS"," was chosen for its modular architecture and native WebSocket support, necessary for Planning Poker. It's also JavaScript-based, facilitating Full Stack development of the project.",[32,271,273],{"id":272},"whats-coming-next","What's Coming Next",[14,275,276],{},"The backlog has some interesting ideas:",[278,279,280,287],"ul",{},[281,282,283,286],"li",{},[21,284,285],{},"Sprint Retro"," for retrospective ceremonies",[281,288,289,292],{},[21,290,291],{},"More utilities"," as the community suggests",[32,294,296],{"id":295},"want-to-check-it-out","Want to Check It Out?",[14,298,299,300,306],{},"The tool has been helping hundreds of users daily, you can also be one of them ",[21,301,302],{},[24,303,305],{"href":26,"rel":304},[28],"by clicking here",", I hope to help you, thank you very much 🙋🏻",{"title":308,"searchDepth":309,"depth":309,"links":310},"",2,[311,320,326,327,328],{"id":34,"depth":309,"text":35,"children":312},[313,315,316,317,318,319],{"id":39,"depth":314,"text":40},3,{"id":64,"depth":314,"text":65},{"id":98,"depth":314,"text":99},{"id":131,"depth":314,"text":132},{"id":147,"depth":314,"text":148},{"id":163,"depth":314,"text":164},{"id":184,"depth":309,"text":185,"children":321},[322,323,324,325],{"id":188,"depth":314,"text":189},{"id":202,"depth":314,"text":203},{"id":212,"depth":314,"text":213},{"id":222,"depth":314,"text":223},{"id":255,"depth":309,"text":256},{"id":272,"depth":309,"text":273},{"id":295,"depth":309,"text":296},[330],"tools","I created a free web tools hub for developers: CPF generator, validators, Planning Poker, and more daily utilities.","free-developer-tools-hub","md",{},true,"/en/blog/free-developer-tools-hub","hub-de-ferramentas-gratuitas-para-desenvolvedores","2024-01-06",{"title":6,"description":331},"en/blog/free-developer-tools-hub","4nIYRUgxJyE8kR8BAruvp6narmsxgFTexkpMFzgrBss",{"id":343,"title":344,"articleCover":345,"articleCoverEmbed":8,"authorId":9,"body":346,"categoriesIds":1068,"description":1071,"enAlternateSlug":8,"extension":333,"meta":1072,"navigation":335,"path":1073,"ptBrAlternateSlug":8,"publishedAt":1074,"seo":1075,"stem":1076,"updatedAt":1074,"__hash__":1077},"blogEn/en/blog/how-the-routing-system-works-in-nuxt.md","How the Routing System Works in Nuxt.js","/images/blog/nuxt/nuxt-routing-thumb.webp",{"type":11,"value":347,"toc":1060},[348,364,408,411,415,425,428,437,444,450,454,457,464,467,503,513,516,534,539,542,609,612,625,628,632,635,642,645,651,666,672,686,693,847,853,857,860,875,881,887,893,896,959,962,968,972,975,1004,1010,1018,1024,1027,1035,1041,1045,1048,1051,1056],[14,349,350,351,355,356,359,360,363],{},"Nuxt uses a file-based routing system, meaning that every ",[352,353,354],"code",{},"file"," or ",[352,357,358],{},"directory"," you create inside the ",[352,361,362],{},"/pages"," folder will be turned into a page in your Nuxt site, and a URL will be generated for that page based on the file name, as shown in the table below:",[365,366,367,380],"table",{},[368,369,370],"thead",{},[371,372,373,377],"tr",{},[374,375,376],"th",{},"File",[374,378,379],{},"Route",[381,382,383,392,400],"tbody",{},[371,384,385,389],{},[386,387,388],"td",{},"pages/index.vue",[386,390,391],{},"/",[371,393,394,397],{},[386,395,396],{},"pages/links.vue",[386,398,399],{},"/links",[371,401,402,405],{},[386,403,404],{},"pages/tools/cpf-generator",[386,406,407],{},"/tools/cpf-generator",[14,409,410],{},"This is the foundation of Nuxt routing, and in this article, you will dive deeper into the key routing concepts in Nuxt.",[32,412,414],{"id":413},"the-nuxt-routing-system","The Nuxt Routing System",[14,416,417,418,421,422,424],{},"Nuxt’s routing system is called ",[352,419,420],{},"File System Routing",", where every file created inside the ",[352,423,362],{}," folder becomes a page.",[14,426,427],{},"For example, consider the folder structure below:",[429,430,435],"pre",{"className":431,"code":433,"language":434,"meta":308},[432],"language-text","/*\n/pages\n  about.vue\n  contact.vue\n  privacy-policy.vue\n*/\n","text",[352,436,433],{"__ignoreMap":308},[14,438,439,440,443],{},"Based on these files, assuming the base URL is ",[352,441,442],{},"https://onlinestore.com",", Nuxt will generate the following URLs:",[429,445,448],{"className":446,"code":447,"language":434},[432],"https://onlinestore.com/about\nhttps://onlinestore.com/contact\nhttps://onlinestore.com/privacy-policy\n",[352,449,447],{"__ignoreMap":308},[32,451,453],{"id":452},"dynamic-routes","Dynamic Routes",[14,455,456],{},"To understand dynamic routes, imagine the following scenario: you have an online store called \"Online Store,\" and within this store, you have several products. The product pages are identical, only displaying different content.",[56,458],{":copyright":459,"alt":460,"height":461,"src":462,"width":463},"{\"title\": \"A Person Using Laptop\", \"licenseId\": \"pexels\", \"author\": {\"name\": \"Mart Production\", \"url\": \"https://www.pexels.com/photo/a-person-using-laptop-7679796\" }}","people browsing an online store",427,"/images/blog/people/people-on-online-marketplace.webp",640,[14,465,466],{},"To handle this, you can use Nuxt's dynamic routes, allowing you to create a single page file that will be used for all products. This can be done in two ways:",[365,468,469,480],{},[368,470,471],{},[371,472,473,476,478],{},[374,474,475],{},"Parameter Location",[374,477,376],{},[374,479,379],{},[381,481,482,493],{},[371,483,484,487,490],{},[386,485,486],{},"Directory Name",[386,488,489],{},"pages/products/[productSlug]/index.vue",[386,491,492],{},"/products/productSlug",[371,494,495,498,501],{},[386,496,497],{},"File Name",[386,499,500],{},"pages/products/[productSlug].vue",[386,502,492],{},[14,504,505,506,246,509,512],{},"Notice that the name used is \"productSlug\" and it is enclosed in brackets: ",[352,507,508],{},"[",[352,510,511],{},"]",". This is Nuxt’s syntax, and the chosen name is the parameter name we can use in our code.",[14,514,515],{},"Regardless of whether you place the parameter in the directory name or the file name, the final result will be the same.",[14,517,518,519,522,523,526,527,530,533],{},"Given the above product page structure, imagine that a user is accessing a product page for a \"Cool T-shirt\" from a brand called \"X,\" where the ",[352,520,521],{},"slug"," for the t-shirt is ",[352,524,525],{},"cool-tshirt-brand-x",":",[528,529],"br",{},[352,531,532],{},"https://onlinestore.com/products/cool-tshirt-brand-x",".",[56,535],{":copyright":536,"alt":537,"height":461,"src":538,"width":463},"{\"title\": \"A Man Shopping for Clothes at a Sneaker Shop\", \"licenseId\": \"pexels\", \"author\": {\"name\": \"RDNE Stock project\", \"url\": \"https://www.pexels.com/photo/a-man-shopping-for-clothes-at-a-sneaker-shop-5698854\" }}","person choosing clothes to buy","/images/blog/people/people-buying-t-shirt.webp",[14,540,541],{},"We can capture the product slug as follows:",[429,543,547],{"className":544,"code":545,"language":546,"meta":308,"style":308},"language-vue shiki shiki-themes dracula","\u003Cscript setup>\nconst route = useRoute();\nconst slug = route.params.productSlug;\n\u003C/script>\n","vue",[352,548,549,569,587,599],{"__ignoreMap":308},[550,551,554,558,562,566],"span",{"class":552,"line":553},"line",1,[550,555,557],{"class":556},"sCdxs","\u003C",[550,559,561],{"class":560},"s0Tla","script",[550,563,565],{"class":564},"sY_PY"," setup",[550,567,568],{"class":556},">\n",[550,570,571,574,577,580,584],{"class":552,"line":309},[550,572,573],{"class":560},"const",[550,575,576],{"class":556}," route ",[550,578,579],{"class":560},"=",[550,581,583],{"class":582},"sAOxA"," useRoute",[550,585,586],{"class":556},"();\n",[550,588,589,591,594,596],{"class":552,"line":314},[550,590,573],{"class":560},[550,592,593],{"class":556}," slug ",[550,595,579],{"class":560},[550,597,598],{"class":556}," route.params.productSlug;\n",[550,600,602,605,607],{"class":552,"line":601},4,[550,603,604],{"class":556},"\u003C/",[550,606,561],{"class":560},[550,608,568],{"class":556},[14,610,611],{},"But what is a slug, and why was \"productSlug\" used?",[14,613,614,615,617,618,621,622,624],{},"A ",[352,616,521],{}," is similar to an ",[352,619,620],{},"id","; it serves as a unique identifier for pages or resources on a website. The slug ",[352,623,525],{}," was chosen to create a user-friendly identifier that improves navigation and SEO.",[14,626,627],{},"This slug will be used to retrieve the product details from the store’s database and display the \"Cool T-shirt\" information to the user.",[32,629,631],{"id":630},"nested-routes","Nested Routes",[14,633,634],{},"Nested routes are useful when structuring pages that share the same layout but display different content. A common example is the admin panel of the Online Store, which may have sections such as Orders, Products, and Settings.",[56,636],{":copyright":637,"alt":638,"height":639,"src":640,"width":641},"{\"title\": \"Traditional Russian stacking dolls placed on table\", \"licenseId\": \"pexels\", \"author\": {\"name\": \"Diana\", \"url\": \"https://www.pexels.com/photo/traditional-russian-stacking-dolls-placed-on-table-6912766\" }}","Russian nesting dolls",401,"/images/blog/toys/traditional-russian-stacking-dolls-1.webp",267,[14,643,644],{},"Consider the following directory and file structure:",[429,646,649],{"className":647,"code":648,"language":434},[432],"/pages\n  /admin\n    index.vue\n    orders.vue\n    products.vue\n    settings.vue\n",[352,650,648],{"__ignoreMap":308},[14,652,653,654,657,658,661,662,665],{},"Here, when the user accesses ",[352,655,656],{},"https://onlinestore.com/admin",", the ",[352,659,660],{},"index.vue"," file inside the ",[352,663,664],{},"admin"," folder is loaded. The other pages can be accessed as follows:",[429,667,670],{"className":668,"code":669,"language":434},[432],"https://onlinestore.com/admin/orders       -> Orders\nhttps://onlinestore.com/admin/products     -> Products\nhttps://onlinestore.com/admin/settings     -> Settings\n",[352,671,669],{"__ignoreMap":308},[14,673,674,675,661,678,681,682,685],{},"If all these pages share the same navigation menu, it's best to create a ",[352,676,677],{},"layout.vue",[352,679,680],{},"/admin"," folder and use ",[352,683,684],{},"\u003CNuxtPage />"," to load dynamic content, preventing code duplication.",[14,687,688,689,692],{},"The layout file in ",[352,690,691],{},"/pages/admin/layout.vue"," would look like this:",[429,694,696],{"className":544,"code":695,"language":546,"meta":308,"style":308},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cnav>\n      \u003CNuxtLink to=\"/admin/orders\">Orders\u003C/NuxtLink>\n      \u003CNuxtLink to=\"/admin/products\">Products\u003C/NuxtLink>\n      \u003CNuxtLink to=\"/admin/settings\">Settings\u003C/NuxtLink>\n    \u003C/nav>\n    \u003CNuxtPage />\n  \u003C/div>\n\u003C/template>\n",[352,697,698,707,717,727,757,782,807,817,828,838],{"__ignoreMap":308},[550,699,700,702,705],{"class":552,"line":553},[550,701,557],{"class":556},[550,703,704],{"class":560},"template",[550,706,568],{"class":556},[550,708,709,712,715],{"class":552,"line":309},[550,710,711],{"class":556},"  \u003C",[550,713,714],{"class":560},"div",[550,716,568],{"class":556},[550,718,719,722,725],{"class":552,"line":314},[550,720,721],{"class":556},"    \u003C",[550,723,724],{"class":560},"nav",[550,726,568],{"class":556},[550,728,729,732,735,738,740,744,748,750,753,755],{"class":552,"line":601},[550,730,731],{"class":556},"      \u003C",[550,733,734],{"class":560},"NuxtLink",[550,736,737],{"class":564}," to",[550,739,579],{"class":560},[550,741,743],{"class":742},"seVfx","\"",[550,745,747],{"class":746},"s-mGx","/admin/orders",[550,749,743],{"class":742},[550,751,752],{"class":556},">Orders\u003C/",[550,754,734],{"class":560},[550,756,568],{"class":556},[550,758,760,762,764,766,768,770,773,775,778,780],{"class":552,"line":759},5,[550,761,731],{"class":556},[550,763,734],{"class":560},[550,765,737],{"class":564},[550,767,579],{"class":560},[550,769,743],{"class":742},[550,771,772],{"class":746},"/admin/products",[550,774,743],{"class":742},[550,776,777],{"class":556},">Products\u003C/",[550,779,734],{"class":560},[550,781,568],{"class":556},[550,783,785,787,789,791,793,795,798,800,803,805],{"class":552,"line":784},6,[550,786,731],{"class":556},[550,788,734],{"class":560},[550,790,737],{"class":564},[550,792,579],{"class":560},[550,794,743],{"class":742},[550,796,797],{"class":746},"/admin/settings",[550,799,743],{"class":742},[550,801,802],{"class":556},">Settings\u003C/",[550,804,734],{"class":560},[550,806,568],{"class":556},[550,808,810,813,815],{"class":552,"line":809},7,[550,811,812],{"class":556},"    \u003C/",[550,814,724],{"class":560},[550,816,568],{"class":556},[550,818,820,822,825],{"class":552,"line":819},8,[550,821,721],{"class":556},[550,823,824],{"class":560},"NuxtPage",[550,826,827],{"class":556}," />\n",[550,829,831,834,836],{"class":552,"line":830},9,[550,832,833],{"class":556},"  \u003C/",[550,835,714],{"class":560},[550,837,568],{"class":556},[550,839,841,843,845],{"class":552,"line":840},10,[550,842,604],{"class":556},[550,844,704],{"class":560},[550,846,568],{"class":556},[14,848,849,850,852],{},"This way, all pages inside ",[352,851,680],{}," will inherit this structure, allowing smooth navigation without reloading the entire interface.",[32,854,856],{"id":855},"query-parameters","Query Parameters",[14,858,859],{},"Query parameters are used to pass additional information in the URL without modifying the base route.",[14,861,862,863,866,867,866,870,866,872,526],{},"The structure is: ",[352,864,865],{},"?"," + ",[352,868,869],{},"parameter name",[352,871,579],{},[352,873,874],{},"parameter value",[429,876,879],{"className":877,"code":878,"language":434},[432],"?parameter_name=parameter_value\n",[352,880,878],{"__ignoreMap":308},[14,882,883,884,526],{},"To add more parameters, use ",[352,885,886],{},"&",[429,888,891],{"className":889,"code":890,"language":434},[432],"?parameter_name=parameter_value&second_parameter_name=second_parameter_value\n",[352,892,890],{"__ignoreMap":308},[14,894,895],{},"In Nuxt, we can capture these parameters as follows:",[429,897,899],{"className":544,"code":898,"language":546,"meta":308,"style":308},"\u003Cscript setup>\n// Instantiating a variable to receive route information\nconst route = useRoute();\n\n// Storing the \"category\" parameter in the productCategory variable\nconst productCategory = route.query.category;\n\u003C/script>\n",[352,900,901,911,917,929,934,939,951],{"__ignoreMap":308},[550,902,903,905,907,909],{"class":552,"line":553},[550,904,557],{"class":556},[550,906,561],{"class":560},[550,908,565],{"class":564},[550,910,568],{"class":556},[550,912,913],{"class":552,"line":309},[550,914,916],{"class":915},"shSDL","// Instantiating a variable to receive route information\n",[550,918,919,921,923,925,927],{"class":552,"line":314},[550,920,573],{"class":560},[550,922,576],{"class":556},[550,924,579],{"class":560},[550,926,583],{"class":582},[550,928,586],{"class":556},[550,930,931],{"class":552,"line":601},[550,932,933],{"emptyLinePlaceholder":335},"\n",[550,935,936],{"class":552,"line":759},[550,937,938],{"class":915},"// Storing the \"category\" parameter in the productCategory variable\n",[550,940,941,943,946,948],{"class":552,"line":784},[550,942,573],{"class":560},[550,944,945],{"class":556}," productCategory ",[550,947,579],{"class":560},[550,949,950],{"class":556}," route.query.category;\n",[550,952,953,955,957],{"class":552,"line":809},[550,954,604],{"class":556},[550,956,561],{"class":560},[550,958,568],{"class":556},[14,960,961],{},"This allows us to manipulate data or even call an API using this information.",[56,963],{":copyright":964,"alt":965,"height":966,"src":967,"width":641},"{\"title\": \"Question Marks on Paper Crafts\", \"licenseId\": \"pexels\", \"author\": {\"name\": \"Leeloo The First\", \"url\": \"https://www.pexels.com/photo/question-marks-on-paper-crafts-5428832\" }}","question mark",400,"/images/blog/signals/question-mark-1.webp",[32,969,971],{"id":970},"common-uses-of-query-parameters","Common Uses of Query Parameters",[14,973,974],{},"Some common use cases for query parameters in the Online Store include:",[278,976,977,998],{},[281,978,979,982,983,989,991,992],{},[21,980,981],{},"Filters and Sorting:","\nQuery parameters are widely used to allow users to filter and sort data. For example, if a customer wants to see the cheapest t-shirts first, the URL might look like this:",[429,984,987],{"className":985,"code":986,"language":434},[432],"https://onlinestore.com/tshirts?orderBy=cheapest\n",[352,988,986],{"__ignoreMap":308},[528,990],{},"Another example is filtering by color or size:",[429,993,996],{"className":994,"code":995,"language":434},[432],"https://onlinestore.com/tshirts?color=blue&size=m\n",[352,997,995],{"__ignoreMap":308},[281,999,1000,1003],{},[21,1001,1002],{},"Pagination:"," When displaying lists with multiple pages, query parameters help track the current page number. Example:",[429,1005,1008],{"className":1006,"code":1007,"language":434},[432],"https://onlinestore.com/promotions?page=2\n",[352,1009,1007],{"__ignoreMap":308},[278,1011,1012],{},[281,1013,1014,1017],{},[21,1015,1016],{},"Data Search:"," When a user searches for a specific product, the search term can be passed via a query parameter. Example:",[429,1019,1022],{"className":1020,"code":1021,"language":434},[432],"\nhttps://onlinestore.com/tshirts?name=cool-tshirt\n\n",[352,1023,1021],{"__ignoreMap":308},[14,1025,1026],{},"This enables dynamic search functionalities without requiring different pages for each search term.",[278,1028,1029],{},[281,1030,1031,1034],{},[21,1032,1033],{},"Temporary States:"," Query parameters can also be used to manage temporary UI states. For example, toggling between grid and list view in a product catalog:",[429,1036,1039],{"className":1037,"code":1038,"language":434},[432],"\nhttps://onlinestore.com/promotions?viewMode=grid\n\n",[352,1040,1038],{"__ignoreMap":308},[32,1042,1044],{"id":1043},"conclusion","Conclusion",[14,1046,1047],{},"Nuxt’s routing system simplifies page creation and organization, making development more intuitive. From basic to dynamic and nested routes, its file-based structure enhances maintainability and improves user experience.",[14,1049,1050],{},"With query parameters, you can further customize navigation effortlessly. Armed with this knowledge, you can efficiently structure any Nuxt application, ensuring well-organized URLs and a smooth navigation flow.",[429,1052,1054],{"className":1053,"code":308,"language":434},[432],[352,1055,308],{"__ignoreMap":308},[1057,1058,1059],"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 .sAOxA, html code.shiki .sAOxA{--shiki-default:#50FA7B}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 .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 .shSDL, html code.shiki .shSDL{--shiki-default:#6272A4}",{"title":308,"searchDepth":309,"depth":309,"links":1061},[1062,1063,1064,1065,1066,1067],{"id":413,"depth":309,"text":414},{"id":452,"depth":309,"text":453},{"id":630,"depth":309,"text":631},{"id":855,"depth":309,"text":856},{"id":970,"depth":309,"text":971},{"id":1043,"depth":309,"text":1044},[1069,1070],"nuxt","vuejs","Understand how the routing system works in Nuxt, including basic, dynamic, nested routes, and query params. Learn how to structure URLs in your Nuxt project.",{},"/en/blog/how-the-routing-system-works-in-nuxt","2025-03-12",{"title":344,"description":1071},"en/blog/how-the-routing-system-works-in-nuxt","bhcrJCPl76SsM-wqHl3DbhI_TY3roj9i-sX4_1WKhr0",{"id":1079,"title":1080,"articleCover":1081,"articleCoverEmbed":8,"authorId":9,"body":1082,"categoriesIds":1663,"description":1664,"enAlternateSlug":8,"extension":333,"meta":1665,"navigation":335,"path":1666,"ptBrAlternateSlug":8,"publishedAt":1667,"seo":1668,"stem":1669,"updatedAt":1667,"__hash__":1670},"blogEn/en/blog/how-to-add-special-characters-on-i18n.md","How to Add Special Characters in i18N Translations","/images/blog/i18n/i18n-special-characters-on-nuxtjs-thumb.webp",{"type":11,"value":1083,"toc":1657},[1084,1090,1108,1112,1137,1162,1165,1171,1174,1180,1190,1257,1458,1462,1475,1478,1644,1646,1654],[14,1085,1086,1089],{},[352,1087,1088],{},"i18n"," is one of the most popular tools for website and application internationalization, and in some scenarios, it can be challenging to resolve specific issues when using i18n with your tool.",[14,1091,1092,1093,355,1096,1099,1100,1103,1104,1107],{},"If you tried using characters like ",[352,1094,1095],{},"@",[352,1097,1098],{},"{"," in i18n translation files in ",[352,1101,1102],{},"Vue.js"," and encountered a ",[352,1105,1106],{},"500 error",", this article will help you understand why this happened and teach you how to fix the problem.",[32,1109,1111],{"id":1110},"the-problem-with-certain-characters-in-i18n","The Problem with Certain Characters in I18N",[14,1113,1114,1115,1118,1119,1122,1123,246,1126,1129,1130,246,1133,1136],{},"Just like ",[352,1116,1117],{},"React.JS",", which reserves certain ",[352,1120,1121],{},"HTML"," keywords such as ",[352,1124,1125],{},"class",[352,1127,1128],{},"for","—replacing them with ",[352,1131,1132],{},"className",[352,1134,1135],{},"htmlFor","—i18n also treats some characters in a special way:",[278,1138,1139,1143,1148,1152,1157],{},[281,1140,1141],{},[352,1142,1098],{},[281,1144,1145],{},[352,1146,1147],{},"}",[281,1149,1150],{},[352,1151,1095],{},[281,1153,1154],{},[352,1155,1156],{},"$",[281,1158,1159],{},[352,1160,1161],{},"|",[14,1163,1164],{},"If we don't handle these characters correctly, you may face the same error I encountered:",[56,1166],{"alt":1167,"height":1168,"src":1169,"width":1170},"example of an error when adding special characters in i18n translation files",241,"/images/blog/i18n/special-character-error.webp",680,[14,1172,1173],{},"To understand the issue, let's consider a project with the following structure:",[429,1175,1178],{"className":1176,"code":1177,"language":434},[432],".\n├── i18n \u003C-- Folder containing i18n configurations\n│   └── locales \u003C--- Folder containing i18n translation files\n│       ├── en.json \u003C--- I18n translation file for English\n│       └── pt-BR.json \u003C--- I18n translation file for Brazilian Portuguese\n",[352,1179,1177],{"__ignoreMap":308},[14,1181,1182,1183,1186,1187,1189],{},"Inside the ",[352,1184,1185],{},"pt-BR.json"," file, there are key-value pairs for the translated texts in Brazilian Portuguese. The problem started when I tried adding the ",[352,1188,1095],{}," character to one of the Footer links:",[365,1191,1192,1205],{},[368,1193,1194],{},[371,1195,1196,1199,1202],{},[374,1197,1198],{},"Special Character",[374,1200,1201],{},"Description",[374,1203,1204],{},"Solution",[381,1206,1207,1217,1227,1237,1247],{},[371,1208,1209,1211,1214],{},[386,1210,1095],{},[386,1212,1213],{},"Used in URLs, emails, etc.",[386,1215,1216],{},"{'@'}",[371,1218,1219,1221,1224],{},[386,1220,1098],{},[386,1222,1223],{},"Start of a block in JSON",[386,1225,1226],{},"{'{'}",[371,1228,1229,1231,1234],{},[386,1230,1147],{},[386,1232,1233],{},"End of a block in JSON",[386,1235,1236],{},"{'}'}",[371,1238,1239,1241,1244],{},[386,1240,1156],{},[386,1242,1243],{},"Used in string interpolation",[386,1245,1246],{},"{'$'}",[371,1248,1249,1251,1254],{},[386,1250,1161],{},[386,1252,1253],{},"Pipe character",[386,1255,1256],{},"{'|'}",[429,1258,1262],{"className":1259,"code":1260,"language":1261,"meta":308,"style":308},"language-json shiki shiki-themes dracula","{\n  \"footer\": {\n    \"socialMedia\": [\n      {\n        \"url\": \"https://www.youtube.com/@CodigoAoPonto\",\n        \"ariaLabel\": \"Go to Código ao Ponto's YouTube channel\",\n        \"icon\": \"mdi:youtube\"\n      },\n      {\n        \"url\": \"https://www.instagram.com/codigo_ponto\",\n        \"ariaLabel\": \"Go to Código ao Ponto's Instagram\",\n        \"icon\": \"mdi:instagram\"\n      }\n    ]\n  }\n}\n","json",[352,1263,1264,1269,1286,1301,1306,1329,1349,1368,1373,1377,1396,1416,1434,1440,1446,1452],{"__ignoreMap":308},[550,1265,1266],{"class":552,"line":553},[550,1267,1268],{"class":556},"{\n",[550,1270,1271,1275,1279,1281,1283],{"class":552,"line":309},[550,1272,1274],{"class":1273},"sY8FZ","  \"",[550,1276,1278],{"class":1277},"sLL85","footer",[550,1280,743],{"class":1273},[550,1282,526],{"class":560},[550,1284,1285],{"class":556}," {\n",[550,1287,1288,1291,1294,1296,1298],{"class":552,"line":314},[550,1289,1290],{"class":1273},"    \"",[550,1292,1293],{"class":1277},"socialMedia",[550,1295,743],{"class":1273},[550,1297,526],{"class":560},[550,1299,1300],{"class":556}," [\n",[550,1302,1303],{"class":552,"line":601},[550,1304,1305],{"class":556},"      {\n",[550,1307,1308,1311,1314,1316,1318,1321,1324,1326],{"class":552,"line":759},[550,1309,1310],{"class":1273},"        \"",[550,1312,1313],{"class":1277},"url",[550,1315,743],{"class":1273},[550,1317,526],{"class":560},[550,1319,1320],{"class":742}," \"",[550,1322,1323],{"class":746},"https://www.youtube.com/@CodigoAoPonto",[550,1325,743],{"class":742},[550,1327,1328],{"class":556},",\n",[550,1330,1331,1333,1336,1338,1340,1342,1345,1347],{"class":552,"line":784},[550,1332,1310],{"class":1273},[550,1334,1335],{"class":1277},"ariaLabel",[550,1337,743],{"class":1273},[550,1339,526],{"class":560},[550,1341,1320],{"class":742},[550,1343,1344],{"class":746},"Go to Código ao Ponto's YouTube channel",[550,1346,743],{"class":742},[550,1348,1328],{"class":556},[550,1350,1351,1353,1356,1358,1360,1362,1365],{"class":552,"line":809},[550,1352,1310],{"class":1273},[550,1354,1355],{"class":1277},"icon",[550,1357,743],{"class":1273},[550,1359,526],{"class":560},[550,1361,1320],{"class":742},[550,1363,1364],{"class":746},"mdi:youtube",[550,1366,1367],{"class":742},"\"\n",[550,1369,1370],{"class":552,"line":819},[550,1371,1372],{"class":556},"      },\n",[550,1374,1375],{"class":552,"line":830},[550,1376,1305],{"class":556},[550,1378,1379,1381,1383,1385,1387,1389,1392,1394],{"class":552,"line":840},[550,1380,1310],{"class":1273},[550,1382,1313],{"class":1277},[550,1384,743],{"class":1273},[550,1386,526],{"class":560},[550,1388,1320],{"class":742},[550,1390,1391],{"class":746},"https://www.instagram.com/codigo_ponto",[550,1393,743],{"class":742},[550,1395,1328],{"class":556},[550,1397,1399,1401,1403,1405,1407,1409,1412,1414],{"class":552,"line":1398},11,[550,1400,1310],{"class":1273},[550,1402,1335],{"class":1277},[550,1404,743],{"class":1273},[550,1406,526],{"class":560},[550,1408,1320],{"class":742},[550,1410,1411],{"class":746},"Go to Código ao Ponto's Instagram",[550,1413,743],{"class":742},[550,1415,1328],{"class":556},[550,1417,1419,1421,1423,1425,1427,1429,1432],{"class":552,"line":1418},12,[550,1420,1310],{"class":1273},[550,1422,1355],{"class":1277},[550,1424,743],{"class":1273},[550,1426,526],{"class":560},[550,1428,1320],{"class":742},[550,1430,1431],{"class":746},"mdi:instagram",[550,1433,1367],{"class":742},[550,1435,1437],{"class":552,"line":1436},13,[550,1438,1439],{"class":556},"      }\n",[550,1441,1443],{"class":552,"line":1442},14,[550,1444,1445],{"class":556},"    ]\n",[550,1447,1449],{"class":552,"line":1448},15,[550,1450,1451],{"class":556},"  }\n",[550,1453,1455],{"class":552,"line":1454},16,[550,1456,1457],{"class":556},"}\n",[32,1459,1461],{"id":1460},"the-solution","The Solution",[14,1463,1464,1465,1468,1469,1471,1472,1474],{},"To fix this issue, we need to use ",[352,1466,1467],{},"Literal Interpolation"," in i18n. To use the ",[352,1470,1095],{}," character in the i18n translation file, we should use the following syntax: ",[352,1473,1216],{},". This means wrapping the special character in curly braces and using single quotes.",[14,1476,1477],{},"Once applied, the corrected file will look like this:",[429,1479,1481],{"className":1259,"code":1480,"language":1261,"meta":308,"style":308},"{\n  \"footer\": {\n    \"socialMedia\": [\n      {\n        \"url\": \"https://www.youtube.com/{'@'}CodigoAoPonto\",\n        \"ariaLabel\": \"Go to Código ao Ponto's YouTube channel\",\n        \"icon\": \"mdi:youtube\"\n      },\n      {\n        \"url\": \"https://www.instagram.com/codigo_ponto\",\n        \"ariaLabel\": \"Go to Código ao Ponto's Instagram\",\n        \"icon\": \"mdi:instagram\"\n      }\n    ]\n  }\n}\n",[352,1482,1483,1487,1499,1511,1515,1534,1552,1568,1572,1576,1594,1612,1628,1632,1636,1640],{"__ignoreMap":308},[550,1484,1485],{"class":552,"line":553},[550,1486,1268],{"class":556},[550,1488,1489,1491,1493,1495,1497],{"class":552,"line":309},[550,1490,1274],{"class":1273},[550,1492,1278],{"class":1277},[550,1494,743],{"class":1273},[550,1496,526],{"class":560},[550,1498,1285],{"class":556},[550,1500,1501,1503,1505,1507,1509],{"class":552,"line":314},[550,1502,1290],{"class":1273},[550,1504,1293],{"class":1277},[550,1506,743],{"class":1273},[550,1508,526],{"class":560},[550,1510,1300],{"class":556},[550,1512,1513],{"class":552,"line":601},[550,1514,1305],{"class":556},[550,1516,1517,1519,1521,1523,1525,1527,1530,1532],{"class":552,"line":759},[550,1518,1310],{"class":1273},[550,1520,1313],{"class":1277},[550,1522,743],{"class":1273},[550,1524,526],{"class":560},[550,1526,1320],{"class":742},[550,1528,1529],{"class":746},"https://www.youtube.com/{'@'}CodigoAoPonto",[550,1531,743],{"class":742},[550,1533,1328],{"class":556},[550,1535,1536,1538,1540,1542,1544,1546,1548,1550],{"class":552,"line":784},[550,1537,1310],{"class":1273},[550,1539,1335],{"class":1277},[550,1541,743],{"class":1273},[550,1543,526],{"class":560},[550,1545,1320],{"class":742},[550,1547,1344],{"class":746},[550,1549,743],{"class":742},[550,1551,1328],{"class":556},[550,1553,1554,1556,1558,1560,1562,1564,1566],{"class":552,"line":809},[550,1555,1310],{"class":1273},[550,1557,1355],{"class":1277},[550,1559,743],{"class":1273},[550,1561,526],{"class":560},[550,1563,1320],{"class":742},[550,1565,1364],{"class":746},[550,1567,1367],{"class":742},[550,1569,1570],{"class":552,"line":819},[550,1571,1372],{"class":556},[550,1573,1574],{"class":552,"line":830},[550,1575,1305],{"class":556},[550,1577,1578,1580,1582,1584,1586,1588,1590,1592],{"class":552,"line":840},[550,1579,1310],{"class":1273},[550,1581,1313],{"class":1277},[550,1583,743],{"class":1273},[550,1585,526],{"class":560},[550,1587,1320],{"class":742},[550,1589,1391],{"class":746},[550,1591,743],{"class":742},[550,1593,1328],{"class":556},[550,1595,1596,1598,1600,1602,1604,1606,1608,1610],{"class":552,"line":1398},[550,1597,1310],{"class":1273},[550,1599,1335],{"class":1277},[550,1601,743],{"class":1273},[550,1603,526],{"class":560},[550,1605,1320],{"class":742},[550,1607,1411],{"class":746},[550,1609,743],{"class":742},[550,1611,1328],{"class":556},[550,1613,1614,1616,1618,1620,1622,1624,1626],{"class":552,"line":1418},[550,1615,1310],{"class":1273},[550,1617,1355],{"class":1277},[550,1619,743],{"class":1273},[550,1621,526],{"class":560},[550,1623,1320],{"class":742},[550,1625,1431],{"class":746},[550,1627,1367],{"class":742},[550,1629,1630],{"class":552,"line":1436},[550,1631,1439],{"class":556},[550,1633,1634],{"class":552,"line":1442},[550,1635,1445],{"class":556},[550,1637,1638],{"class":552,"line":1448},[550,1639,1451],{"class":556},[550,1641,1642],{"class":552,"line":1454},[550,1643,1457],{"class":556},[37,1645,1044],{"id":1043},[14,1647,1648,1649,533],{},"I hope this helps you overcome the challenge of using special characters in i18n with Vue.js. If you still have questions, you can check the ",[24,1650,1653],{"href":1651,"rel":1652},"https://vue-i18n.intlify.dev/guide/essentials/syntax#literal-interpolation",[28],"Official VueI18n Documentation",[1057,1655,1656],{},"html pre.shiki code .sCdxs, html code.shiki .sCdxs{--shiki-default:#F8F8F2}html pre.shiki code .sY8FZ, html code.shiki .sY8FZ{--shiki-default:#8BE9FE}html pre.shiki code .sLL85, html code.shiki .sLL85{--shiki-default:#8BE9FD}html pre.shiki code .s0Tla, html code.shiki .s0Tla{--shiki-default:#FF79C6}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 .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);}",{"title":308,"searchDepth":309,"depth":309,"links":1658},[1659,1660],{"id":1110,"depth":309,"text":1111},{"id":1460,"depth":309,"text":1461,"children":1661},[1662],{"id":1043,"depth":314,"text":1044},[1069,1070],"Learn how to add special characters like @ and {} in i18n translations in Vue.js without causing errors",{},"/en/blog/how-to-add-special-characters-on-i18n","2025-02-02",{"title":1080,"description":1664},"en/blog/how-to-add-special-characters-on-i18n","5_Hwe7jXzxOgyB9ISfHkYFp3LUxTBGnu4xPAS8SM0M0",{"id":1672,"title":1673,"articleCover":1674,"articleCoverEmbed":8,"authorId":9,"body":1675,"categoriesIds":1927,"description":1929,"enAlternateSlug":8,"extension":333,"meta":1930,"navigation":335,"path":1931,"ptBrAlternateSlug":8,"publishedAt":1932,"seo":1933,"stem":1934,"updatedAt":1932,"__hash__":1935},"blogEn/en/blog/how-to-create-and-set-up-ssh-key-github.md","SSH Key in Git: How to Set Up an SSH Key for GitHub","/images/en/blog/git/how-to-create-and-set-up-ssh-key-github-thumb.webp",{"type":11,"value":1676,"toc":1921},[1677,1680,1683,1687,1694,1722,1725,1733,1740,1750,1778,1782,1789,1802,1816,1819,1831,1840,1844,1847,1889,1899,1902,1904,1918],[14,1678,1679],{},"Git is the most popular tool for version control, and GitHub is the most widely used platform for storing your code in the cloud. However, having to enter your username and password every time you interact with GitHub can be quite inconvenient.",[14,1681,1682],{},"This is where the SSH key comes in. The key is used to establish a secure connection between your machine and GitHub, eliminating the need to repeatedly enter your credentials. In this article, I will guide you step by step on setting up an SSH key in GitHub to optimize your workflow.",[32,1684,1686],{"id":1685},"generating-the-ssh-key","Generating the SSH Key",[14,1688,1689,1690,1693],{},"The first step is to generate the SSH key. You can do this by running the command below to generate the SSH key. Don't forget to replace ",[352,1691,1692],{},"codigoaoponto@email.com"," with your email registered on GitHub:",[429,1695,1699],{"className":1696,"code":1697,"language":1698,"meta":308,"style":308},"language-bash shiki shiki-themes dracula","ssh-keygen -t ed25519 -C \"codigoaoponto@email.com\"\n","bash",[352,1700,1701],{"__ignoreMap":308},[550,1702,1703,1706,1710,1713,1716,1718,1720],{"class":552,"line":553},[550,1704,1705],{"class":582},"ssh-keygen",[550,1707,1709],{"class":1708},"sIQBb"," -t",[550,1711,1712],{"class":746}," ed25519",[550,1714,1715],{"class":1708}," -C",[550,1717,1320],{"class":742},[550,1719,1692],{"class":746},[550,1721,1367],{"class":742},[14,1723,1724],{},"During this process, you will be asked about:",[278,1726,1727,1730],{},[281,1728,1729],{},"Adding a password to the SSH key.",[281,1731,1732],{},"Changing the directory where the SSH key will be saved.",[14,1734,1735,1736,1739],{},"In this tutorial, we will not worry about these options. For both questions, you can simply press ",[352,1737,1738],{},"Enter",". After these two questions, the SSH key will be generated.",[14,1741,1742,1743,1746,1747,1749],{},"If, for some reason, you want to generate the key in ",[352,1744,1745],{},"rsa"," format, the command will be slightly different, but the process will be identical, also requiring just pressing ",[352,1748,1738],{}," for the questions:",[429,1751,1753],{"className":1696,"code":1752,"language":1698,"meta":308,"style":308},"ssh-keygen -t rsa -b 4096 -C \"codigoaoponto@email.com\"\n",[352,1754,1755],{"__ignoreMap":308},[550,1756,1757,1759,1761,1764,1767,1770,1772,1774,1776],{"class":552,"line":553},[550,1758,1705],{"class":582},[550,1760,1709],{"class":1708},[550,1762,1763],{"class":746}," rsa",[550,1765,1766],{"class":1708}," -b",[550,1768,1769],{"class":1708}," 4096",[550,1771,1715],{"class":1708},[550,1773,1320],{"class":742},[550,1775,1692],{"class":746},[550,1777,1367],{"class":742},[32,1779,1781],{"id":1780},"obtaining-the-generated-ssh-key","Obtaining the Generated SSH Key",[14,1783,1784,1785,1788],{},"The second step is to copy the generated SSH key, and you can do this by running the command below, where ",[352,1786,1787],{},"key_directory"," should be replaced with the path to the public SSH key file:",[429,1790,1792],{"className":1696,"code":1791,"language":1698,"meta":308,"style":308},"cat key_directory\n",[352,1793,1794],{"__ignoreMap":308},[550,1795,1796,1799],{"class":552,"line":553},[550,1797,1798],{"class":582},"cat",[550,1800,1801],{"class":746}," key_directory\n",[14,1803,1804,1805,1808,1809,1812,1813,1815],{},"If you followed all the previous tutorial steps, the SSH key was generated in the default directory: ",[352,1806,1807],{},"~/.ssh/id_ed25519.pub"," (or ",[352,1810,1811],{},"~/.ssh/id_rsa.pub"," if you generated the key in RSA format). If you chose to save the SSH key in another directory, simply place the path to that directory after the ",[352,1814,1798],{}," command.",[14,1817,1818],{},"To display in the terminal the public SSH key saved in the default directory, use:",[429,1820,1822],{"className":1696,"code":1821,"language":1698,"meta":308,"style":308},"cat ~/.ssh/.id_rsa.pub\n",[352,1823,1824],{"__ignoreMap":308},[550,1825,1826,1828],{"class":552,"line":553},[550,1827,1798],{"class":582},[550,1829,1830],{"class":746}," ~/.ssh/.id_rsa.pub\n",[14,1832,102,1833,1835,1836,1839],{},[352,1834,1798],{}," command prints the contents of a file in the terminal. In this case, it will display the ",[21,1837,1838],{},"public SSH key",", which you must copy.",[32,1841,1843],{"id":1842},"adding-the-ssh-key-to-your-github-account","Adding the SSH Key to Your GitHub Account",[14,1845,1846],{},"Now that your SSH key is copied, the next step is to link it to your GitHub account:",[1848,1849,1850,1856,1862,1869,1876,1882],"ol",{},[281,1851,1852,1853,533],{},"While logged into GitHub, in the upper right corner, click on your profile picture and select ",[21,1854,1855],{},"Settings",[281,1857,1858,1859,533],{},"In the left menu, click ",[21,1860,1861],{},"SSH and GPG keys",[281,1863,1864,1865,1868],{},"Click the ",[21,1866,1867],{},"New SSH key"," button.",[281,1870,1871,1872,1875],{},"In the ",[21,1873,1874],{},"Title"," field, enter a description for the key, such as \"Personal Computer\" or \"Work Computer\".",[281,1877,1871,1878,1881],{},[21,1879,1880],{},"Key"," field, paste the contents of your public key that you copied earlier.",[281,1883,1884,1885,1888],{},"Click ",[21,1886,1887],{},"Add SSH key"," to save.",[14,1890,1891,1892,355,1895,1898],{},"Once this is done, when you run a Git command such as ",[352,1893,1894],{},"git pull",[352,1896,1897],{},"git push",", GitHub will use the SSH key you generated and configured.",[14,1900,1901],{},"::img{src=\"images/blog/git/add-new-ssh-key-on-github.webp\" alt=\"GitHub page for adding SSH key\" width=\"658\" height=\"488\"}::",[32,1903,1044],{"id":1043},[14,1905,1906,1907,1912,1913,533],{},"This article guided you through generating the SSH key and configuring it in GitHub. If you want more complementary content on the subject, you can watch ",[24,1908,1911],{"href":1909,"rel":1910},"https://www.youtube.com/watch?v=oNSIShMKP1s",[28],"this video on the Código ao Ponto YouTube channel"," or access the ",[24,1914,1917],{"href":1915,"rel":1916},"https://docs.github.com/en/authentication/connecting-to-github-with-ssh/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent",[28],"official GitHub documentation",[1057,1919,1920],{},"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 pre.shiki code .s-mGx, html code.shiki .s-mGx{--shiki-default:#F1FA8C}html pre.shiki code .seVfx, html code.shiki .seVfx{--shiki-default:#E9F284}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);}",{"title":308,"searchDepth":309,"depth":309,"links":1922},[1923,1924,1925,1926],{"id":1685,"depth":309,"text":1686},{"id":1780,"depth":309,"text":1781},{"id":1842,"depth":309,"text":1843},{"id":1043,"depth":309,"text":1044},[1928],"git","Learn how to generate, configure, and add an SSH key to GitHub for secure authentication, eliminating the need to enter your password for each access.",{},"/en/blog/how-to-create-and-set-up-ssh-key-github","2025-02-04",{"title":1673,"description":1929},"en/blog/how-to-create-and-set-up-ssh-key-github","AIqZAUYaRq8TkrW4Bx_JBAN_4XbzwgZ-UtpnTiKxfL8",{"id":1937,"title":1938,"articleCover":1939,"articleCoverEmbed":8,"authorId":9,"body":1940,"categoriesIds":2658,"description":2660,"enAlternateSlug":8,"extension":333,"meta":2661,"navigation":335,"path":2662,"ptBrAlternateSlug":8,"publishedAt":2663,"seo":2664,"stem":2665,"updatedAt":2663,"__hash__":2666},"blogEn/en/blog/how-to-create-structured-data-with-nuxtjs.md","What is Structured Data and How to Add it in Nuxt.JS","/images/en/blog/seo/structured-data/structured-data-thumb-1.webp",{"type":11,"value":1941,"toc":2647},[1942,1945,1949,1952,1959,1963,1971,1978,1984,1988,1991,2237,2241,2244,2255,2259,2262,2273,2277,2289,2292,2300,2307,2329,2335,2350,2361,2423,2426,2430,2433,2439,2449,2633,2635,2644],[14,1943,1944],{},"In this article, you will learn what Structured Data is, when to use it, when not to use it, and how to implement it in Nuxt.JS in a very simple way.",[32,1946,1948],{"id":1947},"what-is-structured-data","What is Structured Data?",[14,1950,1951],{},"Structured data is information from a website that is organized in a standardized format such as JSON-LD, Microdata, or RDFa.",[14,1953,1954,1955,1958],{},"Through structured data, search engines like Google receive more information about what your page is about. Based on this information, along with other factors, search engines can display ",[352,1956,1957],{},"Rich Results"," of your site's pages in search results.",[32,1960,1962],{"id":1961},"what-are-rich-snippets","What are Rich Snippets?",[14,1964,1965,355,1968,1970],{},[352,1966,1967],{},"Rich Snippets",[352,1969,1957],{}," are visual enhancements in search results such as images, prices, breadcrumbs, review stars, etc.",[14,1972,1973,1974,1977],{},"Below, you can see an example of a Rich Result on Google from the ",[352,1975,1976],{},"Yahoo Finance"," website, where an image, title, and publication date are displayed. These visual elements increase the chances of attracting the user's attention and driving them to your site.",[56,1979],{"alt":1980,"height":1981,"src":1982,"width":1983},"example of a rich search result on Google from Yahoo Finance",358,"/images/blog/seo/structured-data/yahoo-finances-schema-org-rich-result.webp",688,[32,1985,1987],{"id":1986},"example-of-structured-data-code","Example of Structured Data Code",[14,1989,1990],{},"Below you can see an example of structured data, but don't worry, you won't need to do all this manually. We'll use a Nuxt tool for that.",[429,1992,1996],{"className":1993,"code":1994,"language":1995,"meta":308,"style":308},"language-javascript shiki shiki-themes dracula","\u003Cscript type=\"application/ld+json\">\n{\n  \"@type\": \"FAQPage\",\n  \"@context\": \"https://schema.org\",\n  \"@graph\": [\n    {\n      \"@id\": \"https://codigoaoponto.com/tools/cpf-generator/#/schema/question/c6e1aab\",\n      \"@type\": \"Question\",\n      \"inLanguage\": \"pt-BR\",\n      \"name\": \"What is a CPF Generator?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"A CPF Generator is a tool that generates valid CPF numbers, useful for testing and system development. It applies the official CPF validation algorithm to ensure that the generated numbers are correctly formatted.\"\n      }\n    }\n  ]\n}\n\u003C/script>\n","javascript",[352,1997,1998,2018,2022,2043,2063,2075,2080,2101,2120,2140,2160,2173,2192,2209,2213,2218,2223,2228],{"__ignoreMap":308},[550,1999,2000,2002,2004,2007,2009,2011,2014,2016],{"class":552,"line":553},[550,2001,557],{"class":556},[550,2003,561],{"class":560},[550,2005,2006],{"class":564}," type",[550,2008,579],{"class":560},[550,2010,743],{"class":742},[550,2012,2013],{"class":746},"application/ld+json",[550,2015,743],{"class":742},[550,2017,568],{"class":556},[550,2019,2020],{"class":552,"line":309},[550,2021,1268],{"class":560},[550,2023,2024,2026,2029,2031,2034,2036,2039,2041],{"class":552,"line":314},[550,2025,1274],{"class":742},[550,2027,2028],{"class":746},"@type",[550,2030,743],{"class":742},[550,2032,2033],{"class":556},": ",[550,2035,743],{"class":742},[550,2037,2038],{"class":746},"FAQPage",[550,2040,743],{"class":742},[550,2042,1328],{"class":556},[550,2044,2045,2047,2050,2052,2054,2056,2059,2061],{"class":552,"line":601},[550,2046,1274],{"class":742},[550,2048,2049],{"class":746},"@context",[550,2051,743],{"class":742},[550,2053,2033],{"class":556},[550,2055,743],{"class":742},[550,2057,2058],{"class":746},"https://schema.org",[550,2060,743],{"class":742},[550,2062,1328],{"class":556},[550,2064,2065,2067,2070,2072],{"class":552,"line":759},[550,2066,1274],{"class":742},[550,2068,2069],{"class":746},"@graph",[550,2071,743],{"class":742},[550,2073,2074],{"class":556},": [\n",[550,2076,2077],{"class":552,"line":784},[550,2078,2079],{"class":556},"    {\n",[550,2081,2082,2085,2088,2090,2092,2094,2097,2099],{"class":552,"line":809},[550,2083,2084],{"class":742},"      \"",[550,2086,2087],{"class":746},"@id",[550,2089,743],{"class":742},[550,2091,526],{"class":560},[550,2093,1320],{"class":742},[550,2095,2096],{"class":746},"https://codigoaoponto.com/tools/cpf-generator/#/schema/question/c6e1aab",[550,2098,743],{"class":742},[550,2100,1328],{"class":556},[550,2102,2103,2105,2107,2109,2111,2113,2116,2118],{"class":552,"line":819},[550,2104,2084],{"class":742},[550,2106,2028],{"class":746},[550,2108,743],{"class":742},[550,2110,526],{"class":560},[550,2112,1320],{"class":742},[550,2114,2115],{"class":746},"Question",[550,2117,743],{"class":742},[550,2119,1328],{"class":556},[550,2121,2122,2124,2127,2129,2131,2133,2136,2138],{"class":552,"line":830},[550,2123,2084],{"class":742},[550,2125,2126],{"class":746},"inLanguage",[550,2128,743],{"class":742},[550,2130,526],{"class":560},[550,2132,1320],{"class":742},[550,2134,2135],{"class":746},"pt-BR",[550,2137,743],{"class":742},[550,2139,1328],{"class":556},[550,2141,2142,2144,2147,2149,2151,2153,2156,2158],{"class":552,"line":840},[550,2143,2084],{"class":742},[550,2145,2146],{"class":746},"name",[550,2148,743],{"class":742},[550,2150,526],{"class":560},[550,2152,1320],{"class":742},[550,2154,2155],{"class":746},"What is a CPF Generator?",[550,2157,743],{"class":742},[550,2159,1328],{"class":556},[550,2161,2162,2164,2167,2169,2171],{"class":552,"line":1398},[550,2163,2084],{"class":742},[550,2165,2166],{"class":746},"acceptedAnswer",[550,2168,743],{"class":742},[550,2170,526],{"class":560},[550,2172,1285],{"class":556},[550,2174,2175,2177,2179,2181,2183,2185,2188,2190],{"class":552,"line":1418},[550,2176,1310],{"class":742},[550,2178,2028],{"class":746},[550,2180,743],{"class":742},[550,2182,526],{"class":560},[550,2184,1320],{"class":742},[550,2186,2187],{"class":746},"Answer",[550,2189,743],{"class":742},[550,2191,1328],{"class":556},[550,2193,2194,2196,2198,2200,2202,2204,2207],{"class":552,"line":1436},[550,2195,1310],{"class":742},[550,2197,434],{"class":746},[550,2199,743],{"class":742},[550,2201,526],{"class":560},[550,2203,1320],{"class":742},[550,2205,2206],{"class":746},"A CPF Generator is a tool that generates valid CPF numbers, useful for testing and system development. It applies the official CPF validation algorithm to ensure that the generated numbers are correctly formatted.",[550,2208,1367],{"class":742},[550,2210,2211],{"class":552,"line":1442},[550,2212,1439],{"class":556},[550,2214,2215],{"class":552,"line":1448},[550,2216,2217],{"class":556},"    }\n",[550,2219,2220],{"class":552,"line":1454},[550,2221,2222],{"class":556},"  ]\n",[550,2224,2226],{"class":552,"line":2225},17,[550,2227,1457],{"class":560},[550,2229,2231,2233,2235],{"class":552,"line":2230},18,[550,2232,604],{"class":556},[550,2234,561],{"class":560},[550,2236,568],{"class":556},[32,2238,2240],{"id":2239},"when-to-use-structured-data","When to Use Structured Data?",[14,2242,2243],{},"Use Structured Data when:",[278,2245,2246,2249,2252],{},[281,2247,2248],{},"The page content fits into one of the supported categories, such as products, recipes, events, FAQs, etc.",[281,2250,2251],{},"You want to increase your page visibility and click-through rate (CTR).",[281,2253,2254],{},"You want to help search engines better understand your website's content.",[32,2256,2258],{"id":2257},"when-not-to-use-structured-data","When Not to Use Structured Data?",[14,2260,2261],{},"Avoid using Structured Data when:",[278,2263,2264,2267,2270],{},[281,2265,2266],{},"The page content does not fit into the supported categories.",[281,2268,2269],{},"The content is of low quality; structured data won't improve it.",[281,2271,2272],{},"The content changes frequently, making it costly to update this information regularly.",[32,2274,2276],{"id":2275},"installing-the-schemaorg-package-in-nuxt","Installing the Schema.org Package in Nuxt",[14,2278,2279,2284,2285,2288],{},[24,2280,2283],{"href":2281,"rel":2282},"https://nuxtseo.com",[28],"Nuxt SEO"," is a collection of SEO modules that make it easier to develop ",[352,2286,2287],{},"technical SEO"," for your website. In this tutorial, we will use the module that simplifies the implementation of structured data.",[14,2290,2291],{},"You can install this module in several ways; here, I'll show the two main ones:",[1848,2293,2294,2297],{},[281,2295,2296],{},"nuxi (Nuxt's official command-line interface)",[281,2298,2299],{},"npm (Package manager)",[14,2301,2302,2303,2306],{},"If you are using ",[352,2304,2305],{},"nuxi",", simply run the following command:",[429,2308,2310],{"className":1696,"code":2309,"language":1698,"meta":308,"style":308},"npx nuxi module add schema-org\n",[352,2311,2312],{"__ignoreMap":308},[550,2313,2314,2317,2320,2323,2326],{"class":552,"line":553},[550,2315,2316],{"class":582},"npx",[550,2318,2319],{"class":746}," nuxi",[550,2321,2322],{"class":746}," module",[550,2324,2325],{"class":746}," add",[550,2327,2328],{"class":746}," schema-org\n",[14,2330,2302,2331,2334],{},[352,2332,2333],{},"npm",", you'll need an extra step. Start by installing the package:",[429,2336,2338],{"className":1696,"code":2337,"language":1698,"meta":308,"style":308},"npm i nuxt-schema-org\n",[352,2339,2340],{"__ignoreMap":308},[550,2341,2342,2344,2347],{"class":552,"line":553},[550,2343,2333],{"class":582},[550,2345,2346],{"class":746}," i",[550,2348,2349],{"class":746}," nuxt-schema-org\n",[14,2351,2352,2353,2356,2357,2360],{},"Then add the installed package to the ",[352,2354,2355],{},"modules"," option in the ",[352,2358,2359],{},"nuxt.config.ts"," file:",[429,2362,2366],{"className":2363,"code":2364,"language":2365,"meta":308,"style":308},"language-js shiki shiki-themes dracula","export default defineNuxtConfig({\n  // other configurations...\n  modules: [\n    // other modules\n    \"nuxt-schema-org\"\n  ]\n  // other configurations...\n});\n","js",[352,2367,2368,2382,2387,2396,2401,2410,2414,2418],{"__ignoreMap":308},[550,2369,2370,2373,2376,2379],{"class":552,"line":553},[550,2371,2372],{"class":560},"export",[550,2374,2375],{"class":560}," default",[550,2377,2378],{"class":582}," defineNuxtConfig",[550,2380,2381],{"class":556},"({\n",[550,2383,2384],{"class":552,"line":309},[550,2385,2386],{"class":915},"  // other configurations...\n",[550,2388,2389,2392,2394],{"class":552,"line":314},[550,2390,2391],{"class":556},"  modules",[550,2393,526],{"class":560},[550,2395,1300],{"class":556},[550,2397,2398],{"class":552,"line":601},[550,2399,2400],{"class":915},"    // other modules\n",[550,2402,2403,2405,2408],{"class":552,"line":759},[550,2404,1290],{"class":742},[550,2406,2407],{"class":746},"nuxt-schema-org",[550,2409,1367],{"class":742},[550,2411,2412],{"class":552,"line":784},[550,2413,2222],{"class":556},[550,2415,2416],{"class":552,"line":809},[550,2417,2386],{"class":915},[550,2419,2420],{"class":552,"line":819},[550,2421,2422],{"class":556},"});\n",[14,2424,2425],{},"Once this is done, we can start using the tool.",[32,2427,2429],{"id":2428},"structured-data-in-nuxtjs","Structured Data in Nuxt.JS",[14,2431,2432],{},"As an example, we will create structured data for an FAQ, which is frequently displayed when searching for a question:",[56,2434],{"alt":2435,"height":2436,"src":2437,"width":2438},"example of a rich FAQ result on Google for the question about what Nuxt.JS is",351,"/images/blog/seo/structured-data/faq-rich-result-example-1.webp",681,[14,2440,2441,2442,2445,2446,2448],{},"In Nuxt, the ",[352,2443,2444],{},"useSchemaOrg"," composable is globally available, which you can use inside the ",[352,2447,561],{}," tag to write your structured data.",[429,2450,2452],{"className":2363,"code":2451,"language":2365,"meta":308,"style":308},"\u003Cscript setup>\nuseSchemaOrg([\n  defineWebPage({\n    \"@type\": \"FAQPage\"\n  }),\n  defineQuestion({\n    name: \"What is a CPF Generator?\",\n    acceptedAnswer:\n      \"A CPF Generator is a tool that generates valid CPF numbers, useful for testing and system development. It applies the official CPF validation algorithm to ensure that the generated numbers are correctly formatted.\"\n  }),\n  defineQuestion({\n    name: \"How does the CPF Generator work?\",\n    acceptedAnswer:\n      \"The CPF Generator randomly creates the first nine digits of the CPF and then calculates the two check digits using the official validation algorithm, ensuring the generated number is valid.\"\n  }),\n  defineQuestion({\n    name: \"What is a CPF?\",\n    acceptedAnswer:\n      \"A CPF (Cadastro de Pessoa Física) is a personal identification number used by the Brazilian government to recognize citizens and residents. Composed of 11 digits, it is essential for various activities, such as opening bank accounts, making purchases, hiring services, and other identification processes.\"\n  })\n]);\n\u003C/script>\n",[352,2453,2454,2464,2469,2476,2492,2500,2507,2520,2525,2533,2539,2545,2558,2562,2571,2577,2583,2596,2600,2610,2618,2624],{"__ignoreMap":308},[550,2455,2456,2458,2460,2462],{"class":552,"line":553},[550,2457,557],{"class":556},[550,2459,561],{"class":560},[550,2461,565],{"class":564},[550,2463,568],{"class":556},[550,2465,2466],{"class":552,"line":309},[550,2467,2468],{"class":556},"useSchemaOrg([\n",[550,2470,2471,2474],{"class":552,"line":314},[550,2472,2473],{"class":556},"  defineWebPage(",[550,2475,1268],{"class":560},[550,2477,2478,2480,2482,2484,2486,2488,2490],{"class":552,"line":601},[550,2479,1290],{"class":742},[550,2481,2028],{"class":746},[550,2483,743],{"class":742},[550,2485,2033],{"class":556},[550,2487,743],{"class":742},[550,2489,2038],{"class":746},[550,2491,1367],{"class":742},[550,2493,2494,2497],{"class":552,"line":759},[550,2495,2496],{"class":560},"  }",[550,2498,2499],{"class":556},"),\n",[550,2501,2502,2505],{"class":552,"line":784},[550,2503,2504],{"class":556},"  defineQuestion(",[550,2506,1268],{"class":560},[550,2508,2509,2512,2514,2516,2518],{"class":552,"line":809},[550,2510,2511],{"class":556},"    name: ",[550,2513,743],{"class":742},[550,2515,2155],{"class":746},[550,2517,743],{"class":742},[550,2519,1328],{"class":556},[550,2521,2522],{"class":552,"line":819},[550,2523,2524],{"class":556},"    acceptedAnswer:\n",[550,2526,2527,2529,2531],{"class":552,"line":830},[550,2528,2084],{"class":742},[550,2530,2206],{"class":746},[550,2532,1367],{"class":742},[550,2534,2535,2537],{"class":552,"line":840},[550,2536,2496],{"class":560},[550,2538,2499],{"class":556},[550,2540,2541,2543],{"class":552,"line":1398},[550,2542,2504],{"class":556},[550,2544,1268],{"class":560},[550,2546,2547,2549,2551,2554,2556],{"class":552,"line":1418},[550,2548,2511],{"class":556},[550,2550,743],{"class":742},[550,2552,2553],{"class":746},"How does the CPF Generator work?",[550,2555,743],{"class":742},[550,2557,1328],{"class":556},[550,2559,2560],{"class":552,"line":1436},[550,2561,2524],{"class":556},[550,2563,2564,2566,2569],{"class":552,"line":1442},[550,2565,2084],{"class":742},[550,2567,2568],{"class":746},"The CPF Generator randomly creates the first nine digits of the CPF and then calculates the two check digits using the official validation algorithm, ensuring the generated number is valid.",[550,2570,1367],{"class":742},[550,2572,2573,2575],{"class":552,"line":1448},[550,2574,2496],{"class":560},[550,2576,2499],{"class":556},[550,2578,2579,2581],{"class":552,"line":1454},[550,2580,2504],{"class":556},[550,2582,1268],{"class":560},[550,2584,2585,2587,2589,2592,2594],{"class":552,"line":2225},[550,2586,2511],{"class":556},[550,2588,743],{"class":742},[550,2590,2591],{"class":746},"What is a CPF?",[550,2593,743],{"class":742},[550,2595,1328],{"class":556},[550,2597,2598],{"class":552,"line":2230},[550,2599,2524],{"class":556},[550,2601,2603,2605,2608],{"class":552,"line":2602},19,[550,2604,2084],{"class":742},[550,2606,2607],{"class":746},"A CPF (Cadastro de Pessoa Física) is a personal identification number used by the Brazilian government to recognize citizens and residents. Composed of 11 digits, it is essential for various activities, such as opening bank accounts, making purchases, hiring services, and other identification processes.",[550,2609,1367],{"class":742},[550,2611,2613,2615],{"class":552,"line":2612},20,[550,2614,2496],{"class":560},[550,2616,2617],{"class":556},")\n",[550,2619,2621],{"class":552,"line":2620},21,[550,2622,2623],{"class":556},"]);\n",[550,2625,2627,2629,2631],{"class":552,"line":2626},22,[550,2628,604],{"class":556},[550,2630,561],{"class":560},[550,2632,568],{"class":556},[37,2634,1044],{"id":1043},[14,2636,2637,2638,2643],{},"This article guided you through the basics of creating Structured Data in Nuxt.JS. If you want to explore further, you can check the ",[24,2639,2642],{"href":2640,"rel":2641},"https://nuxtseo.com/docs/schema-org/getting-started/introduction",[28],"complete documentation of the tool"," to learn how to create structured data for your specific needs.",[1057,2645,2646],{},"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 .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 .sAOxA, html code.shiki .sAOxA{--shiki-default:#50FA7B}html pre.shiki code .shSDL, html code.shiki .shSDL{--shiki-default:#6272A4}",{"title":308,"searchDepth":309,"depth":309,"links":2648},[2649,2650,2651,2652,2653,2654,2655],{"id":1947,"depth":309,"text":1948},{"id":1961,"depth":309,"text":1962},{"id":1986,"depth":309,"text":1987},{"id":2239,"depth":309,"text":2240},{"id":2257,"depth":309,"text":2258},{"id":2275,"depth":309,"text":2276},{"id":2428,"depth":309,"text":2429,"children":2656},[2657],{"id":1043,"depth":314,"text":1044},[1069,1070,2659],"seo","Learn what Structured Data is, when and how to use it in Nuxt.js to optimize your website and improve visibility in search engines.",{},"/en/blog/how-to-create-structured-data-with-nuxtjs","2025-01-22",{"title":1938,"description":2660},"en/blog/how-to-create-structured-data-with-nuxtjs","LqHMa_e3UlrUm5iBoXehokIZ6ZWuwGDJjdQuCNri_aA",{"id":2668,"title":2669,"articleCover":2670,"articleCoverEmbed":8,"authorId":9,"body":2671,"categoriesIds":2839,"description":2841,"enAlternateSlug":8,"extension":333,"meta":2842,"navigation":335,"path":2843,"ptBrAlternateSlug":8,"publishedAt":2844,"seo":2845,"stem":2846,"updatedAt":2844,"__hash__":2847},"blogEn/en/blog/how-to-deal-with-envy-from-other-programmers.md","How to Deal with Envy from Other Programmers in Your Career","/images/en/blog/career/a-nail-that-stands-out-gets-hammered.webp",{"type":11,"value":2672,"toc":2829},[2673,2677,2684,2693,2697,2704,2707,2711,2718,2729,2735,2739,2745,2748,2752,2759,2763,2805,2812,2814,2817,2823],[32,2674,2676],{"id":2675},"a-nail-that-stands-out-gets-hammered-a-harsh-truth-in-programming-careers","A Nail That Stands Out Gets Hammered: A Harsh Truth in Programming Careers",[14,2678,2679,2680,2683],{},"“",[21,2681,2682],{},"A nail that stands out gets hammered",".” If you already have experience in your career, you've probably noticed this. If you're just starting out, this is a truth that time will teach you, but I'm here to tell you before it happens so you can be prepared.",[14,2685,2686,2687,2689,2690,533],{},"In this article, we'll discuss the challenges that arise throughout a programming career, and why they are not just in the ",[21,2688,352],{},", but mostly in ",[21,2691,2692],{},"people",[32,2694,2696],{"id":2695},"early-career-focus-on-hard-skills","Early Career: Focus on Hard Skills",[14,2698,2699,2700,2703],{},"When you're starting out, most of your time is dedicated to ",[21,2701,2702],{},"hard skills",". This includes learning programming languages, frameworks, libraries, and tools that allow you to deliver quality projects.",[14,2705,2706],{},"This phase is natural and necessary because it guarantees your first opportunity as a developer. This is where you build the technical foundation that will support your career.",[32,2708,2710],{"id":2709},"evolution-soft-skills-become-essential","Evolution: Soft Skills Become Essential",[14,2712,2713,2714,2717],{},"As you grow, you realize that the biggest challenge is no longer technical. ",[21,2715,2716],{},"Soft skills"," become fundamental:",[278,2719,2720,2723,2726],{},[281,2721,2722],{},"Communicating clearly with colleagues and managers",[281,2724,2725],{},"Aligning expectations and coordinating how tasks will be carried out",[281,2727,2728],{},"Ensuring things actually work day-to-day",[14,2730,2731,2732,533],{},"Often, the main obstacle is not the code itself, but the ability to deal with people and complex situations. This is where you learn that ",[21,2733,2734],{},"delivering results involves more than writing lines of code",[32,2736,2738],{"id":2737},"when-you-start-to-stand-out","When You Start to Stand Out",[14,2740,2741,2742,533],{},"If you dedicate yourself and consistently deliver results, you will inevitably start to stand out. This is when unexpected problems may appear: ",[21,2743,2744],{},"envy from colleagues",[14,2746,2747],{},"Programming involves people much more than it involves code. People have feelings. One of them is envy. Fortunately, the number of professionals who behave this way is small, but it's important to be aware of this and be prepared to deal with it when it happens.",[32,2749,2751],{"id":2750},"being-prepared-makes-all-the-difference","Being Prepared Makes All the Difference",[14,2753,2754,2755,2758],{},"Knowing that envy and unfair criticism can appear in the workplace means you ",[21,2756,2757],{},"won't be caught off guard",". Being prepared means more than just recognizing these situations exist — it's acting strategically to stay focused on your growth and protect your reputation.",[37,2760,2762],{"id":2761},"how-to-prepare-in-practice","How to Prepare in Practice",[1848,2764,2765,2773,2781,2789,2797],{},[281,2766,2767,2770,2772],{},[21,2768,2769],{},"Maintain consistency in your work",[528,2771],{},"\nDeliver results regularly and keep them documented. Doing this makes it harder for colleagues to diminish or take credit for your work.",[281,2774,2775,2778,2780],{},[21,2776,2777],{},"Constantly develop your soft skills",[528,2779],{},"\nKnowing how to communicate, align expectations, and handle conflicts maturely makes a huge difference. Soft skills are not just “nice to have” — they are essential to navigate the human complexities of the workplace.",[281,2782,2783,2786,2788],{},[21,2784,2785],{},"Avoid reacting emotionally",[528,2787],{},"\nEnvy can come disguised as criticism or passive-aggressive behavior. Staying calm and responding professionally helps prevent unnecessary conflicts.",[281,2790,2791,2794,2796],{},[21,2792,2793],{},"Focus on your growth",[528,2795],{},"\nDon't compare yourself to others in a harmful way. Focus on what you can control: your technical development, your posture, and your learning. The more you grow consistently, the stronger you become in the face of adversity.",[281,2798,2799,2802,2804],{},[21,2800,2801],{},"Learn to read the signs",[528,2803],{},"\nIdentifying behaviors like veiled criticism or attempts to take credit allows you to anticipate and act intelligently instead of reacting impulsively.",[14,2806,2807,2808,2811],{},"Being prepared ultimately means ",[21,2809,2810],{},"not letting envy or negative behavior from colleagues interfere with your development",". It's about turning potentially negative situations into opportunities for learning and strengthening your career.",[32,2813,1044],{"id":1043},[14,2815,2816],{},"Growing as a programmer goes far beyond learning languages or frameworks. It's about standing out, taking responsibility, and dealing with people, feelings, and challenges that don't appear in code.",[14,2818,102,2819,2822],{},[21,2820,2821],{},"nail that stands out may get hammered",", but if you are ready, no one will be able to bend you off your path. Preparation, focus, and consistency are the keys to a solid and successful career.",[2824,2825,2826],"blockquote",{},[14,2827,2828],{},"Remember: envy exists, but it doesn't have to be an obstacle if you know how to maintain your growth and reputation intact.",{"title":308,"searchDepth":309,"depth":309,"links":2830},[2831,2832,2833,2834,2835,2838],{"id":2675,"depth":309,"text":2676},{"id":2695,"depth":309,"text":2696},{"id":2709,"depth":309,"text":2710},{"id":2737,"depth":309,"text":2738},{"id":2750,"depth":309,"text":2751,"children":2836},[2837],{"id":2761,"depth":314,"text":2762},{"id":1043,"depth":309,"text":1044},[2840],"career","Understand how envy can appear in the workplace among programmers and how to be prepared to deal with it while keeping your focus and professional growth.",{},"/en/blog/how-to-deal-with-envy-from-other-programmers","2025-08-29",{"title":2669,"description":2841},"en/blog/how-to-deal-with-envy-from-other-programmers","SiBXCxulwIwJyT-9nK114ArC3N5G1DZsLIbTWCgkpFM",{"id":2849,"title":2850,"articleCover":2851,"articleCoverEmbed":8,"authorId":9,"body":2852,"categoriesIds":3532,"description":3533,"enAlternateSlug":8,"extension":333,"meta":3534,"navigation":335,"path":3535,"ptBrAlternateSlug":8,"publishedAt":3536,"seo":3537,"stem":3538,"updatedAt":3536,"__hash__":3539},"blogEn/en/blog/how-to-use-middlewares-nuxtjs.md","Middlewares: What They Are and How to Use Them in Nuxt.JS","/images/blog/nuxt/front-end-middlewares-thumb.webp",{"type":11,"value":2853,"toc":3525},[2854,2858,2869,2889,2892,2905,2908,2912,2918,2921,2924,2935,2938,2942,2945,2956,2972,3122,3130,3315,3325,3446,3449,3496,3509,3511,3514,3522],[32,2855,2857],{"id":2856},"what-are-middlewares","What Are Middlewares?",[14,2859,2860,2861,2864,2865,2868],{},"In Front-end development, ",[21,2862,2863],{},"Middlewares"," are blocks of code that execute ",[21,2866,2867],{},"before navigation to a new page occurs",", allowing various controls in our application, such as:",[278,2870,2871,2877,2883],{},[281,2872,2873,2876],{},[21,2874,2875],{},"Authentication",": Checks if the user is logged in; otherwise, they are redirected to the login screen.",[281,2878,2879,2882],{},[21,2880,2881],{},"Permission",": Verifies if the user has access to the page; if not, they are redirected to an allowed page.",[281,2884,2885,2888],{},[21,2886,2887],{},"Logs",": Saves information about page activities.",[14,2890,2891],{},"Middlewares act as an intermediate layer, working from the start of the page load until its complete rendering.",[14,2893,2894,2895,246,2900,533],{},"This middleware functionality is present in modern Front-end frameworks such as ",[24,2896,2899],{"href":2897,"rel":2898},"https://nextjs.org",[28],"Next.js",[24,2901,2904],{"href":2902,"rel":2903},"https://nuxt.com",[28],"Nuxt.JS",[14,2906,2907],{},"In this article, I will teach you how to implement route middlewares in Nuxt.JS.",[32,2909,2911],{"id":2910},"middlewares-in-a-less-technical-way","Middlewares in a Less Technical Way",[56,2913],{":copyright":2914,"alt":2915,"height":2916,"src":2917,"width":463},"{\"title\": \"People at a party\", \"licenseId\": \"pexels\", \"author\": {\"name\": \"Cottonbro Studio\", \"url\": \"https://www.pexels.com/photo/people-toasting-wine-glasses-3171837\" }}","people at a party",428,"/images/blog/people/pexels-cottonbro-3171837.webp",[14,2919,2920],{},"To explain it more simply, let’s use an analogy:",[14,2922,2923],{},"Imagine you want to enter a party, and in this process, you go through three security staff members, who act as \"middlewares,\" each responsible for a specific action.",[1848,2925,2926,2929,2932],{},[281,2927,2928],{},"The first security guard checks if you have a valid ticket, similar to an authentication middleware. If you don’t have one, you are redirected to the ticket office or login screen.",[281,2930,2931],{},"The second guard ensures you are of legal age, a crucial requirement for entering the party, similar to a permission middleware. If you don’t meet the criteria, you are sent away.",[281,2933,2934],{},"The third and final guard gives you a wristband indicating whether you have VIP access, much like middlewares that add data to requests.",[14,2936,2937],{},"Finally, after passing all these checks, you are free to enter the party hall.",[32,2939,2941],{"id":2940},"types-of-middlewares","Types of Middlewares",[14,2943,2944],{},"In Nuxt.js, we have the following types of Middlewares:",[278,2946,2947,2950,2953],{},[281,2948,2949],{},"Global",[281,2951,2952],{},"Inline or Anonymous",[281,2954,2955],{},"Named",[1848,2957,2958],{},[281,2959,2960,2963,2964,2967,2968,2971],{},[21,2961,2962],{},"Global Middlewares"," are created inside the ",[352,2965,2966],{},"/middleware"," folder and execute on all pages. The ",[352,2969,2970],{},"global"," suffix is required.",[429,2973,2977],{"className":2974,"code":2975,"language":2976,"meta":308,"style":308},"language-typescript shiki shiki-themes dracula","/*\n  Example of a Global Middleware:\n  This middleware checks if the requested URL/route exists.\n  If it doesn’t exist, the user is redirected to the links page.\n\n  File Name and Directory:\n  /middleware/notFound.global.js\n*/\n\nexport default defineNuxtRouteMiddleware((to) => {\n  const hasFoundRoute = to.matched.length > 0;\n\n  if (!hasFoundRoute) {\n    return navigateTo({\n      path: \"/links\"\n    });\n  }\n});\n","typescript",[352,2978,2979,2984,2989,2994,2999,3003,3008,3013,3018,3022,3046,3068,3072,3086,3096,3109,3114,3118],{"__ignoreMap":308},[550,2980,2981],{"class":552,"line":553},[550,2982,2983],{"class":915},"/*\n",[550,2985,2986],{"class":552,"line":309},[550,2987,2988],{"class":915},"  Example of a Global Middleware:\n",[550,2990,2991],{"class":552,"line":314},[550,2992,2993],{"class":915},"  This middleware checks if the requested URL/route exists.\n",[550,2995,2996],{"class":552,"line":601},[550,2997,2998],{"class":915},"  If it doesn’t exist, the user is redirected to the links page.\n",[550,3000,3001],{"class":552,"line":759},[550,3002,933],{"emptyLinePlaceholder":335},[550,3004,3005],{"class":552,"line":784},[550,3006,3007],{"class":915},"  File Name and Directory:\n",[550,3009,3010],{"class":552,"line":809},[550,3011,3012],{"class":915},"  /middleware/notFound.global.js\n",[550,3014,3015],{"class":552,"line":819},[550,3016,3017],{"class":915},"*/\n",[550,3019,3020],{"class":552,"line":830},[550,3021,933],{"emptyLinePlaceholder":335},[550,3023,3024,3026,3028,3031,3034,3038,3041,3044],{"class":552,"line":840},[550,3025,2372],{"class":560},[550,3027,2375],{"class":560},[550,3029,3030],{"class":582}," defineNuxtRouteMiddleware",[550,3032,3033],{"class":556},"((",[550,3035,3037],{"class":3036},"sGEwX","to",[550,3039,3040],{"class":556},") ",[550,3042,3043],{"class":560},"=>",[550,3045,1285],{"class":556},[550,3047,3048,3051,3054,3056,3059,3062,3065],{"class":552,"line":1398},[550,3049,3050],{"class":560},"  const",[550,3052,3053],{"class":556}," hasFoundRoute ",[550,3055,579],{"class":560},[550,3057,3058],{"class":556}," to.matched.length ",[550,3060,3061],{"class":560},">",[550,3063,3064],{"class":1708}," 0",[550,3066,3067],{"class":556},";\n",[550,3069,3070],{"class":552,"line":1418},[550,3071,933],{"emptyLinePlaceholder":335},[550,3073,3074,3077,3080,3083],{"class":552,"line":1436},[550,3075,3076],{"class":560},"  if",[550,3078,3079],{"class":556}," (",[550,3081,3082],{"class":560},"!",[550,3084,3085],{"class":556},"hasFoundRoute) {\n",[550,3087,3088,3091,3094],{"class":552,"line":1442},[550,3089,3090],{"class":560},"    return",[550,3092,3093],{"class":582}," navigateTo",[550,3095,2381],{"class":556},[550,3097,3098,3101,3103,3105,3107],{"class":552,"line":1448},[550,3099,3100],{"class":556},"      path",[550,3102,526],{"class":560},[550,3104,1320],{"class":742},[550,3106,399],{"class":746},[550,3108,1367],{"class":742},[550,3110,3111],{"class":552,"line":1454},[550,3112,3113],{"class":556},"    });\n",[550,3115,3116],{"class":552,"line":2225},[550,3117,1451],{"class":556},[550,3119,3120],{"class":552,"line":2230},[550,3121,2422],{"class":556},[1848,3123,3124],{"start":309},[281,3125,3126,3129],{},[21,3127,3128],{},"Inline or Anonymous Middlewares"," are specific to a page, defined directly within the Nuxt page file. This limits code reuse since it cannot be easily shared with other pages.",[429,3131,3133],{"className":2363,"code":3132,"language":2365,"meta":308,"style":308},"/*\n  Example of an Inline Middleware:\n  This middleware checks if data is present in the store.\n  If not, the data is requested.\n*/\n\n\u003Cscript setup lang=\"ts\">\nimport { useStore } from 'vuex';\n\ndefinePageMeta({\n  middleware: [\n    async function (to, from) {\n      const store = useStore();\n      if (!store.state.user) {\n        await store.dispatch(\"fetchUser\");\n      }\n    },\n  ],\n});\n\u003C/script>\n",[352,3134,3135,3139,3144,3149,3154,3158,3162,3184,3199,3203,3210,3215,3236,3251,3263,3287,3291,3296,3301,3307],{"__ignoreMap":308},[550,3136,3137],{"class":552,"line":553},[550,3138,2983],{"class":915},[550,3140,3141],{"class":552,"line":309},[550,3142,3143],{"class":915},"  Example of an Inline Middleware:\n",[550,3145,3146],{"class":552,"line":314},[550,3147,3148],{"class":915},"  This middleware checks if data is present in the store.\n",[550,3150,3151],{"class":552,"line":601},[550,3152,3153],{"class":915},"  If not, the data is requested.\n",[550,3155,3156],{"class":552,"line":759},[550,3157,3017],{"class":915},[550,3159,3160],{"class":552,"line":784},[550,3161,933],{"emptyLinePlaceholder":335},[550,3163,3164,3166,3168,3170,3173,3175,3177,3180,3182],{"class":552,"line":809},[550,3165,557],{"class":556},[550,3167,561],{"class":560},[550,3169,565],{"class":564},[550,3171,3172],{"class":564}," lang",[550,3174,579],{"class":560},[550,3176,743],{"class":742},[550,3178,3179],{"class":746},"ts",[550,3181,743],{"class":742},[550,3183,568],{"class":556},[550,3185,3186,3189,3191,3194,3196],{"class":552,"line":819},[550,3187,3188],{"class":556},"import ",[550,3190,1098],{"class":560},[550,3192,3193],{"class":556}," useStore ",[550,3195,1147],{"class":560},[550,3197,3198],{"class":556}," from 'vuex';\n",[550,3200,3201],{"class":552,"line":830},[550,3202,933],{"emptyLinePlaceholder":335},[550,3204,3205,3208],{"class":552,"line":840},[550,3206,3207],{"class":556},"definePageMeta(",[550,3209,1268],{"class":560},[550,3211,3212],{"class":552,"line":1398},[550,3213,3214],{"class":556},"  middleware: [\n",[550,3216,3217,3220,3223,3225,3227,3230,3233],{"class":552,"line":1418},[550,3218,3219],{"class":560},"    async",[550,3221,3222],{"class":560}," function",[550,3224,3079],{"class":556},[550,3226,3037],{"class":3036},[550,3228,3229],{"class":556},", ",[550,3231,3232],{"class":3036},"from",[550,3234,3235],{"class":556},") {\n",[550,3237,3238,3241,3244,3246,3249],{"class":552,"line":1436},[550,3239,3240],{"class":560},"      const",[550,3242,3243],{"class":556}," store ",[550,3245,579],{"class":560},[550,3247,3248],{"class":582}," useStore",[550,3250,586],{"class":556},[550,3252,3253,3256,3258,3260],{"class":552,"line":1442},[550,3254,3255],{"class":560},"      if",[550,3257,3079],{"class":556},[550,3259,3082],{"class":560},[550,3261,3262],{"class":556},"store.state.user) {\n",[550,3264,3265,3268,3271,3274,3277,3279,3282,3284],{"class":552,"line":1448},[550,3266,3267],{"class":560},"        await",[550,3269,3270],{"class":556}," store.",[550,3272,3273],{"class":582},"dispatch",[550,3275,3276],{"class":556},"(",[550,3278,743],{"class":742},[550,3280,3281],{"class":746},"fetchUser",[550,3283,743],{"class":742},[550,3285,3286],{"class":556},");\n",[550,3288,3289],{"class":552,"line":1454},[550,3290,1439],{"class":556},[550,3292,3293],{"class":552,"line":2225},[550,3294,3295],{"class":556},"    },\n",[550,3297,3298],{"class":552,"line":2230},[550,3299,3300],{"class":556},"  ],\n",[550,3302,3303,3305],{"class":552,"line":2602},[550,3304,1147],{"class":560},[550,3306,3286],{"class":556},[550,3308,3309,3311,3313],{"class":552,"line":2612},[550,3310,604],{"class":556},[550,3312,561],{"class":560},[550,3314,568],{"class":556},[1848,3316,3317],{"start":314},[281,3318,3319,2963,3322,3324],{},[21,3320,3321],{},"Named Middlewares",[352,3323,2966],{}," folder.",[429,3326,3328],{"className":2363,"code":3327,"language":2365,"meta":308,"style":308},"/*\n  Example of a Named Middleware:\n  This middleware checks if the user is logged in.\n  If not, they are redirected to the login page.\n\n  File Name and Directory:\n  /middleware/auth.js\n*/\n\nexport default defineNuxtRouteMiddleware((to, from) => {\n  const { $store } = useNuxtApp();\n\n  if (!$store.auth?.loggedIn) {\n    return navigateTo(\"/login\");\n  }\n});\n",[352,3329,3330,3334,3339,3344,3349,3353,3357,3362,3366,3370,3392,3406,3410,3421,3438,3442],{"__ignoreMap":308},[550,3331,3332],{"class":552,"line":553},[550,3333,2983],{"class":915},[550,3335,3336],{"class":552,"line":309},[550,3337,3338],{"class":915},"  Example of a Named Middleware:\n",[550,3340,3341],{"class":552,"line":314},[550,3342,3343],{"class":915},"  This middleware checks if the user is logged in.\n",[550,3345,3346],{"class":552,"line":601},[550,3347,3348],{"class":915},"  If not, they are redirected to the login page.\n",[550,3350,3351],{"class":552,"line":759},[550,3352,933],{"emptyLinePlaceholder":335},[550,3354,3355],{"class":552,"line":784},[550,3356,3007],{"class":915},[550,3358,3359],{"class":552,"line":809},[550,3360,3361],{"class":915},"  /middleware/auth.js\n",[550,3363,3364],{"class":552,"line":819},[550,3365,3017],{"class":915},[550,3367,3368],{"class":552,"line":830},[550,3369,933],{"emptyLinePlaceholder":335},[550,3371,3372,3374,3376,3378,3380,3382,3384,3386,3388,3390],{"class":552,"line":840},[550,3373,2372],{"class":560},[550,3375,2375],{"class":560},[550,3377,3030],{"class":582},[550,3379,3033],{"class":556},[550,3381,3037],{"class":3036},[550,3383,3229],{"class":556},[550,3385,3232],{"class":3036},[550,3387,3040],{"class":556},[550,3389,3043],{"class":560},[550,3391,1285],{"class":556},[550,3393,3394,3396,3399,3401,3404],{"class":552,"line":1398},[550,3395,3050],{"class":560},[550,3397,3398],{"class":556}," { $store } ",[550,3400,579],{"class":560},[550,3402,3403],{"class":582}," useNuxtApp",[550,3405,586],{"class":556},[550,3407,3408],{"class":552,"line":1418},[550,3409,933],{"emptyLinePlaceholder":335},[550,3411,3412,3414,3416,3418],{"class":552,"line":1436},[550,3413,3076],{"class":560},[550,3415,3079],{"class":556},[550,3417,3082],{"class":560},[550,3419,3420],{"class":556},"$store.auth?.loggedIn) {\n",[550,3422,3423,3425,3427,3429,3431,3434,3436],{"class":552,"line":1442},[550,3424,3090],{"class":560},[550,3426,3093],{"class":582},[550,3428,3276],{"class":556},[550,3430,743],{"class":742},[550,3432,3433],{"class":746},"/login",[550,3435,743],{"class":742},[550,3437,3286],{"class":556},[550,3439,3440],{"class":552,"line":1448},[550,3441,1451],{"class":556},[550,3443,3444],{"class":552,"line":1454},[550,3445,2422],{"class":556},[14,3447,3448],{},"For Named Middlewares, you need to specify which pages use a particular middleware. One way to do this is by modifying the page files that will utilize the middleware:",[429,3450,3452],{"className":2363,"code":3451,"language":2365,"meta":308,"style":308},"\u003Cscript setup>\ndefinePageMeta({\n  middleware: \"auth-admin\"\n});\n\u003C/script>\n",[352,3453,3454,3464,3470,3482,3488],{"__ignoreMap":308},[550,3455,3456,3458,3460,3462],{"class":552,"line":553},[550,3457,557],{"class":556},[550,3459,561],{"class":560},[550,3461,565],{"class":564},[550,3463,568],{"class":556},[550,3465,3466,3468],{"class":552,"line":309},[550,3467,3207],{"class":556},[550,3469,1268],{"class":560},[550,3471,3472,3475,3477,3480],{"class":552,"line":314},[550,3473,3474],{"class":556},"  middleware: ",[550,3476,743],{"class":742},[550,3478,3479],{"class":746},"auth-admin",[550,3481,1367],{"class":742},[550,3483,3484,3486],{"class":552,"line":601},[550,3485,1147],{"class":560},[550,3487,3286],{"class":556},[550,3489,3490,3492,3494],{"class":552,"line":759},[550,3491,604],{"class":556},[550,3493,561],{"class":560},[550,3495,568],{"class":556},[14,3497,3498,3499,355,3502,3505,3506,533],{},"It’s also important to note that even if you name middleware files using ",[352,3500,3501],{},"PascalCase",[352,3503,3504],{},"camelCase",", file names are normalized to ",[352,3507,3508],{},"kebab-case",[37,3510,1044],{"id":1043},[14,3512,3513],{},"I hope this article has helped you understand the key points of creating and using Middlewares in Nuxt.JS in a simple and quick way 🙋🏻‍♂️.",[14,3515,3516,3517,533],{},"If you need more information about Middlewares in Nuxt.JS, you can check the ",[24,3518,3521],{"href":3519,"rel":3520},"https://nuxt.com/docs/guide/directory-structure/middleware",[28],"official documentation",[1057,3523,3524],{},"html pre.shiki code .shSDL, html code.shiki .shSDL{--shiki-default:#6272A4}html pre.shiki code .s0Tla, html code.shiki .s0Tla{--shiki-default:#FF79C6}html pre.shiki code .sAOxA, html code.shiki .sAOxA{--shiki-default:#50FA7B}html pre.shiki code .sCdxs, html code.shiki .sCdxs{--shiki-default:#F8F8F2}html pre.shiki code .sGEwX, html code.shiki .sGEwX{--shiki-default:#FFB86C;--shiki-default-font-style:italic}html pre.shiki code .sIQBb, html code.shiki .sIQBb{--shiki-default:#BD93F9}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 .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 .sY_PY, html code.shiki .sY_PY{--shiki-default:#50FA7B;--shiki-default-font-style:italic}",{"title":308,"searchDepth":309,"depth":309,"links":3526},[3527,3528,3529],{"id":2856,"depth":309,"text":2857},{"id":2910,"depth":309,"text":2911},{"id":2940,"depth":309,"text":2941,"children":3530},[3531],{"id":1043,"depth":314,"text":1044},[1069,1070],"Learn what middlewares are and how to use them in Nuxt.js to control navigation, authentication, and permissions on your pages.",{},"/en/blog/how-to-use-middlewares-nuxtjs","2025-02-03",{"title":2850,"description":3533},"en/blog/how-to-use-middlewares-nuxtjs","qICEvamtKQfCJ-Gv6kU_5yMlvZH50E5LJdS3FzNZ7bg",{"id":3541,"title":3542,"articleCover":3543,"articleCoverEmbed":8,"authorId":9,"body":3544,"categoriesIds":3696,"description":3698,"enAlternateSlug":3699,"extension":333,"meta":3700,"navigation":335,"path":3701,"ptBrAlternateSlug":3702,"publishedAt":3703,"seo":3704,"stem":3705,"updatedAt":3706,"__hash__":3707},"blogEn/en/blog/recovering-lost-files-in-git-with-vscode.md","Lost Files in Git Without a Commit? Here's How to Recover Them Using VS Code","/images/en/blog/vscode/how-to-recover-lost-files-in-git-using-vscode.webp",{"type":11,"value":3545,"toc":3690},[3546,3562,3565,3571,3580,3592,3594,3599,3602,3627,3630,3634,3637,3658,3662,3665,3679,3681,3687],[14,3547,3548,3549,3229,3552,3229,3555,3558,3559,533],{},"Git is the most widely used version control system in the market. As developers, we usually only scratch the surface of what this tool is capable of. In our daily routine, we tend to rely on basic commands such as ",[352,3550,3551],{},"pull",[352,3553,3554],{},"commit",[352,3556,3557],{},"merge",", and ",[352,3560,3561],{},"push",[14,3563,3564],{},"However, Git is a powerful and complex tool. Incorrect usage can lead to serious problems, such as losing code that has not yet been committed to the repository. If this has ever happened to you, you probably felt that moment of panic, thinking all the time invested in that code was completely wasted.",[14,3566,3567,3568,533],{},"If you use VS Code — one of the most popular code editors among developers — I have good news: ",[21,3569,3570],{},"in most cases, your code is not actually lost",[14,3572,3573,3574,3579],{},"In this article, I'll show you how to use a native ",[24,3575,3578],{"href":3576,"rel":3577},"https://code.visualstudio.com",[28],"Visual Studio Code"," feature to recover lost files, even if you never made a Git commit.",[14,3581,3582,3583,3586,3587,533],{},"The feature we'll use is called ",[21,3584,3585],{},"Local History",", and it was officially introduced in VS Code version ",[24,3588,3591],{"href":3589,"rel":3590},"https://code.visualstudio.com/updates/v1_66#_local-history",[28],"1.66, released in March 2022",[32,3593,1461],{"id":1460},[14,3595,3596,3598],{},[21,3597,3585],{}," keeps a local history of changes made to files edited in VS Code, allowing you to go back in time and restore previous versions of your code.",[14,3600,3601],{},"To recover a lost file, follow the steps below:",[1848,3603,3604,3612,3618,3621,3624],{},[281,3605,3606,3607],{},"Press ",[3608,3609,3611],"prose-kbd",{"value":3610},"F1"," to open the VS Code command palette",[281,3613,3614,3615],{},"Search for ",[21,3616,3617],{},"“Local History: Find Entry to Restore”",[281,3619,3620],{},"After selecting the command, look for the name of the file you lost",[281,3622,3623],{},"VS Code will display all saved versions of that file, along with timestamps of each change",[281,3625,3626],{},"Select the desired version and click to restore the code",[14,3628,3629],{},"That's it. Your file will be restored exactly as it was at that point in time.",[32,3631,3633],{"id":3632},"important-notes-about-local-history","Important Notes About Local History",[14,3635,3636],{},"Before relying too much on this feature, it's important to understand its limitations:",[278,3638,3639,3645,3652,3655],{},[281,3640,3641,3644],{},[21,3642,3643],{},"Local History is stored only locally",", meaning it will be lost if you format your machine or clear VS Code data",[281,3646,3647,3648,3651],{},"It ",[21,3649,3650],{},"does not replace Git"," and should not be used as a version control strategy",[281,3653,3654],{},"The history has time and storage limits, so very old versions may be automatically removed",[281,3656,3657],{},"It only works for files that were opened and edited inside VS Code",[32,3659,3661],{"id":3660},"best-practices-to-avoid-losing-code","Best Practices to Avoid Losing Code",[14,3663,3664],{},"Even with this feature available, preventing these situations in the first place is always the best approach. Some good practices include:",[278,3666,3667,3670,3673,3676],{},[281,3668,3669],{},"Make small, frequent commits",[281,3671,3672],{},"Use branches for experiments and tests",[281,3674,3675],{},"Avoid working for long periods without committing changes",[281,3677,3678],{},"Always review what will be discarded before running destructive Git commands",[32,3680,1044],{"id":1043},[14,3682,3683,3684,3686],{},"VS Code is an extremely powerful code editor. It offers so many features and shortcuts that it's nearly impossible to know everything it can do. ",[21,3685,3585],{}," is one of those lesser-known features that can make a huge difference.",[14,3688,3689],{},"If this article helped you recover lost code, consider sharing it with other developers. It might save someone's project — and sanity 😄",{"title":308,"searchDepth":309,"depth":309,"links":3691},[3692,3693,3694,3695],{"id":1460,"depth":309,"text":1461},{"id":3632,"depth":309,"text":3633},{"id":3660,"depth":309,"text":3661},{"id":1043,"depth":309,"text":1044},[1928,3697],"vscode","Learn how to recover lost code changes using a VS Code feature called Local History, which saves different versions of your files.","recovering-lost-files-in-git-with-vscode",{},"/en/blog/recovering-lost-files-in-git-with-vscode","como-recuperar-arquivos-perdidos-no-git-pelo-vscode","2025-01-21",{"title":3542,"description":3698},"en/blog/recovering-lost-files-in-git-with-vscode","2026-01-07","xSG-DHrgfiWaBHy_BBwldJGCOCZV1yMwl7WixV7J_-s",{"id":3709,"title":3710,"articleCover":3711,"articleCoverEmbed":8,"authorId":9,"body":3712,"categoriesIds":3869,"description":3870,"enAlternateSlug":8,"extension":333,"meta":3871,"navigation":335,"path":3872,"ptBrAlternateSlug":8,"publishedAt":3873,"seo":3874,"stem":3875,"updatedAt":3873,"__hash__":3876},"blogEn/en/blog/vercel-buys-nuxt-labs.md","Vercel Acquired Nuxt Labs! What Does This Mean for Nuxt?","/images/en/blog/nuxt/vercel-buys-nuxt-labs.webp",{"type":11,"value":3713,"toc":3862},[3714,3725,3728,3732,3741,3744,3758,3761,3765,3772,3778,3786,3791,3795,3802,3822,3825,3829,3832,3838,3843,3845,3852,3859],[14,3715,3716,3717,3720,3721,3724],{},"Last week, ",[21,3718,3719],{},"Vercel","—the company known for developing Next.js—announced the acquisition of ",[21,3722,3723],{},"Nuxt Labs",", a startup created by the core maintainers of the Nuxt.js framework. The news took the community by surprise, raising questions about Nuxt's future and the impact of this move on Vue ecosystem developers.",[14,3726,3727],{},"In this article, let's break down what was acquired, why it happened, and what changes in practice.",[32,3729,3731],{"id":3730},"what-is-nuxt-labs","What is Nuxt Labs?",[14,3733,3734,3736,3737,3740],{},[21,3735,3723],{}," is a company founded by ",[21,3738,3739],{},"Sébastien Chopin"," and part of the Nuxt core team to support the sustainable development of the framework. Since Nuxt is open source and free to use, Nuxt Labs was created to offer paid products that help fund core development.",[14,3742,3743],{},"Some of Nuxt Labs' main products include:",[278,3745,3746,3752],{},[281,3747,3748,3751],{},[21,3749,3750],{},"Nuxt Studio"," — A visual interface for creating content with Nuxt Content",[281,3753,3754,3757],{},[21,3755,3756],{},"Nuxt UI Pro"," — A premium component library built with Tailwind CSS",[14,3759,3760],{},"These tools allowed the core team to work more consistently on Nuxt, supporting major releases like Nuxt 3 and new official modules.",[32,3762,3764],{"id":3763},"why-did-vercel-acquire-nuxt-labs","Why did Vercel acquire Nuxt Labs?",[14,3766,3767,3768,3771],{},"According to the official announcement on Vercel's blog and Nuxt Labs' statement, the motivation is to ",[21,3769,3770],{},"invest in the Vue ecosystem"," and ensure that Nuxt has the support it needs to continue evolving.",[14,3773,3774,3775,533],{},"This move is also part of Vercel's broader strategy to expand its support for multiple meta-frameworks—just like it has done with Next.js, SvelteKit, and Astro. The goal is to make ",[21,3776,3777],{},"Vercel the best platform to host any modern frontend project",[14,3779,3780,3781,526],{},"In their words from the ",[24,3782,3785],{"href":3783,"rel":3784},"https://vercel.com/blog/nuxtlabs-joins-vercel",[28],"official announcement",[2824,3787,3788],{},[14,3789,3790],{},"“We want to ensure Nuxt continues to innovate and remains a powerful option for Vue developers. We're excited to welcome Sébastien Chopin and part of the Nuxt Labs team to Vercel.”",[32,3792,3794],{"id":3793},"what-changes-in-practice","What changes in practice?",[14,3796,3797,3798,3801],{},"For now, ",[21,3799,3800],{},"Nuxt will remain open source and independent",". The framework itself was not bought—rather, the company that maintains and builds products around it was. Still, the impact is meaningful:",[278,3803,3804,3810,3816],{},[281,3805,3806,3809],{},[21,3807,3808],{},"More resources"," for Nuxt's ongoing development",[281,3811,3812,3815],{},[21,3813,3814],{},"Core team now employed by Vercel",", gaining more financial stability",[281,3817,3818,3821],{},[21,3819,3820],{},"Tighter integration with the Vercel platform"," (while still supporting alternatives like Netlify or self-hosting)",[14,3823,3824],{},"Paid products such as Nuxt Studio and Nuxt UI Pro are expected to remain available, potentially with improvements backed by Vercel's investment.",[32,3826,3828],{"id":3827},"what-about-the-community","What about the community?",[14,3830,3831],{},"Sébastien Chopin emphasized that the community will continue to play a central role in Nuxt's future. Project governance remains open, and development will continue to happen in public on GitHub.",[14,3833,3834,3835,533],{},"There's also a strong commitment to Vue's ecosystem — Vercel even mentioned plans to ",[21,3836,3837],{},"invest more in frameworks beyond React",[2824,3839,3840],{},[14,3841,3842],{},"“Vue is one of the most used frameworks on Vercel. We want to support all modern frameworks, and Nuxt is a key part of that.”",[32,3844,1044],{"id":1043},[14,3846,3847,3848,3851],{},"It's important to note that ",[21,3849,3850],{},"the Nuxt project itself wasn't bought","—just its main supporting company. With the acquisition of Nuxt Labs, Vercel is showing a real willingness to invest in a broader range of frameworks and not limit itself to React.",[14,3853,3854,3855,3858],{},"In the short term, the expectation is ",[21,3856,3857],{},"more investment, more stability, and faster evolution for Nuxt","—great news for developers working with Vue every day.",[14,3860,3861],{},"Let's keep an eye on what's next in this exciting new chapter.",{"title":308,"searchDepth":309,"depth":309,"links":3863},[3864,3865,3866,3867,3868],{"id":3730,"depth":309,"text":3731},{"id":3763,"depth":309,"text":3764},{"id":3793,"depth":309,"text":3794},{"id":3827,"depth":309,"text":3828},{"id":1043,"depth":309,"text":1044},[1069],"Vercel has announced the acquisition of Nuxt Labs, the company behind the Nuxt ecosystem. In this article, find out what this means for the framework and the community.",{},"/en/blog/vercel-buys-nuxt-labs","2025-07-17",{"title":3710,"description":3870},"en/blog/vercel-buys-nuxt-labs","AVZofLDIuGU-ww3lPa55MJD8UeKOpsx6s7mFqWhinXM",{"id":3878,"title":3879,"articleCover":3880,"articleCoverEmbed":8,"authorId":3881,"body":3882,"categoriesIds":5072,"description":5073,"enAlternateSlug":8,"extension":333,"meta":5074,"navigation":335,"path":5075,"ptBrAlternateSlug":8,"publishedAt":5076,"seo":5077,"stem":5078,"updatedAt":5076,"__hash__":5079},"blogEn/en/blog/what-are-directives-in-vue-and-how-to-implement-them.md","What are Directives in Vue and How to Implement Them","/images/en/blog/vue/what-are-directives-in-vue-and-how-to-implement-them.webp","eduardo-goncalves-souza",{"type":11,"value":3883,"toc":5060},[3884,3895,3898,3901,3905,3908,3968,3972,3976,3981,4093,4113,4117,4126,4254,4263,4267,4272,4452,4461,4465,4473,4635,4645,4649,4657,4868,4872,4877,5037,5041,5057],[14,3885,3886,3887,3890,3891,3894],{},"If you're starting with Vue.js, one of the first concepts you need to master is ",[21,3888,3889],{},"directives",". These are special instructions that extend functionalities when inserted into HTML, enabling the creation of more dynamic and reactive interfaces simply. In Vue.js, directives are marked with the ",[352,3892,3893],{},"v-"," prefix and are responsible for implementing specific behaviors in elements.",[14,3896,3897],{},"With them, you can control element display, bind data reactively, handle events, and even create conditional interactions without directly modifying the page structure.",[14,3899,3900],{},"Now that you understand the meaning and relevance of directives, let's explore the native directives available in Vue.js and how to implement them in practice.",[37,3902,3904],{"id":3903},"what-are-the-main-directives-in-vuejs","What Are the Main Directives in Vue.js?",[14,3906,3907],{},"Vue.js provides a range of built-in directives for performing common operations. Here are some of the most commonly used directives:",[278,3909,3910,3918,3926,3934,3942,3950],{},[281,3911,3912,3917],{},[21,3913,3914],{},[352,3915,3916],{},"v-bind",": Allows dynamic modification of attributes or properties of HTML elements.",[281,3919,3920,3925],{},[21,3921,3922],{},[352,3923,3924],{},"v-model",": Facilitates form creation by enabling two-way data binding. This ensures that information entered in input fields is automatically synchronized with the application's state.",[281,3927,3928,3933],{},[21,3929,3930],{},[352,3931,3932],{},"v-on",": Handles JavaScript events within Vue.js, linking user actions to program logic.",[281,3935,3936,3941],{},[21,3937,3938],{},[352,3939,3940],{},"v-for",": Used to dynamically display lists. It iterates over arrays or objects and automatically creates an element for each item.",[281,3943,3944,3949],{},[21,3945,3946],{},[352,3947,3948],{},"v-if",": Dynamically includes or excludes elements based on conditions. It manages rendering by inserting or removing elements.",[281,3951,3952,3957,3958,3960,3961,3963,3964,3967],{},[21,3953,3954],{},[352,3955,3956],{},"v-show",": Controls element visibility based on conditions. Unlike ",[352,3959,3948],{},", which adds or removes elements from the DOM, ",[352,3962,3956],{}," only changes visibility via CSS (",[352,3965,3966],{},"display: none",").",[32,3969,3971],{"id":3970},"lets-explore-in-practice","Let's Explore in Practice",[37,3973,3975],{"id":3974},"binding-attributes-v-bind","Binding Attributes (v-bind)",[14,3977,102,3978,3980],{},[352,3979,3916],{}," directive is used to bind a value to an HTML tag, creating a connection between values. Its syntax is simple. Here's an example:",[429,3982,3984],{"className":544,"code":3983,"language":546,"meta":308,"style":308},"\u003Ctemplate>\n  \u003Ca v-bind:href=\"url\">Visit our website\u003C/a>\n\u003C/template>\n\n\u003Cscript setup>\nimport { ref } from \"vue\";\n\nconst url = ref(\"https://codigoaoponto.com/\");\n\u003C/script>\n",[352,3985,3986,3994,4018,4026,4030,4040,4058,4062,4085],{"__ignoreMap":308},[550,3987,3988,3990,3992],{"class":552,"line":553},[550,3989,557],{"class":556},[550,3991,704],{"class":560},[550,3993,568],{"class":556},[550,3995,3996,3998,4000,4003,4005,4007,4009,4011,4014,4016],{"class":552,"line":309},[550,3997,711],{"class":556},[550,3999,24],{"class":560},[550,4001,4002],{"class":564}," v-bind:href",[550,4004,579],{"class":560},[550,4006,743],{"class":742},[550,4008,1313],{"class":746},[550,4010,743],{"class":742},[550,4012,4013],{"class":556},">Visit our website\u003C/",[550,4015,24],{"class":560},[550,4017,568],{"class":556},[550,4019,4020,4022,4024],{"class":552,"line":314},[550,4021,604],{"class":556},[550,4023,704],{"class":560},[550,4025,568],{"class":556},[550,4027,4028],{"class":552,"line":601},[550,4029,933],{"emptyLinePlaceholder":335},[550,4031,4032,4034,4036,4038],{"class":552,"line":759},[550,4033,557],{"class":556},[550,4035,561],{"class":560},[550,4037,565],{"class":564},[550,4039,568],{"class":556},[550,4041,4042,4045,4048,4050,4052,4054,4056],{"class":552,"line":784},[550,4043,4044],{"class":560},"import",[550,4046,4047],{"class":556}," { ref } ",[550,4049,3232],{"class":560},[550,4051,1320],{"class":742},[550,4053,546],{"class":746},[550,4055,743],{"class":742},[550,4057,3067],{"class":556},[550,4059,4060],{"class":552,"line":809},[550,4061,933],{"emptyLinePlaceholder":335},[550,4063,4064,4066,4069,4071,4074,4076,4078,4081,4083],{"class":552,"line":819},[550,4065,573],{"class":560},[550,4067,4068],{"class":556}," url ",[550,4070,579],{"class":560},[550,4072,4073],{"class":582}," ref",[550,4075,3276],{"class":556},[550,4077,743],{"class":742},[550,4079,4080],{"class":746},"https://codigoaoponto.com/",[550,4082,743],{"class":742},[550,4084,3286],{"class":556},[550,4086,4087,4089,4091],{"class":552,"line":830},[550,4088,604],{"class":556},[550,4090,561],{"class":560},[550,4092,568],{"class":556},[14,4094,4095,4096,4098,4099,4102,4103,4106,4107,4109,4110,4112],{},"In the code above, we bind the ",[352,4097,1313],{}," variable to the ",[352,4100,4101],{},"\u003Ca>"," tag, ensuring that its value is inserted into the ",[352,4104,4105],{},"href"," attribute. If the ",[352,4108,1313],{}," variable changes, the ",[352,4111,4105],{}," attribute will automatically update.",[37,4114,4116],{"id":4115},"two-way-binding-v-model","Two-Way Binding (v-model)",[14,4118,102,4119,4121,4122,4125],{},[352,4120,3924],{}," directive binds an application variable to an ",[352,4123,4124],{},"\u003Cinput>"," element in the template. It works bidirectionally, meaning any change in the variable will reflect in the input, and vice versa. Example:",[429,4127,4129],{"className":544,"code":4128,"language":546,"meta":308,"style":308},"\u003Ctemplate>\n  \u003Cinput v-model=\"name\" type=\"text\" />\n  \u003Cdiv>Hello! My name is {{ name }}\u003C/div>\n\u003C/template>\n\n\u003Cscript setup>\nimport { ref } from \"vue\";\n\nconst name = ref(\"Test\");\n\u003C/script>\n",[352,4130,4131,4139,4169,4182,4190,4194,4204,4220,4224,4246],{"__ignoreMap":308},[550,4132,4133,4135,4137],{"class":552,"line":553},[550,4134,557],{"class":556},[550,4136,704],{"class":560},[550,4138,568],{"class":556},[550,4140,4141,4143,4146,4149,4151,4153,4155,4157,4159,4161,4163,4165,4167],{"class":552,"line":309},[550,4142,711],{"class":556},[550,4144,4145],{"class":560},"input",[550,4147,4148],{"class":564}," v-model",[550,4150,579],{"class":560},[550,4152,743],{"class":742},[550,4154,2146],{"class":746},[550,4156,743],{"class":742},[550,4158,2006],{"class":564},[550,4160,579],{"class":560},[550,4162,743],{"class":742},[550,4164,434],{"class":746},[550,4166,743],{"class":742},[550,4168,827],{"class":556},[550,4170,4171,4173,4175,4178,4180],{"class":552,"line":314},[550,4172,711],{"class":556},[550,4174,714],{"class":560},[550,4176,4177],{"class":556},">Hello! My name is {{ name }}\u003C/",[550,4179,714],{"class":560},[550,4181,568],{"class":556},[550,4183,4184,4186,4188],{"class":552,"line":601},[550,4185,604],{"class":556},[550,4187,704],{"class":560},[550,4189,568],{"class":556},[550,4191,4192],{"class":552,"line":759},[550,4193,933],{"emptyLinePlaceholder":335},[550,4195,4196,4198,4200,4202],{"class":552,"line":784},[550,4197,557],{"class":556},[550,4199,561],{"class":560},[550,4201,565],{"class":564},[550,4203,568],{"class":556},[550,4205,4206,4208,4210,4212,4214,4216,4218],{"class":552,"line":809},[550,4207,4044],{"class":560},[550,4209,4047],{"class":556},[550,4211,3232],{"class":560},[550,4213,1320],{"class":742},[550,4215,546],{"class":746},[550,4217,743],{"class":742},[550,4219,3067],{"class":556},[550,4221,4222],{"class":552,"line":819},[550,4223,933],{"emptyLinePlaceholder":335},[550,4225,4226,4228,4231,4233,4235,4237,4239,4242,4244],{"class":552,"line":830},[550,4227,573],{"class":560},[550,4229,4230],{"class":556}," name ",[550,4232,579],{"class":560},[550,4234,4073],{"class":582},[550,4236,3276],{"class":556},[550,4238,743],{"class":742},[550,4240,4241],{"class":746},"Test",[550,4243,743],{"class":742},[550,4245,3286],{"class":556},[550,4247,4248,4250,4252],{"class":552,"line":840},[550,4249,604],{"class":556},[550,4251,561],{"class":560},[550,4253,568],{"class":556},[14,4255,4256,4257,4259,4260,4262],{},"Here, we associate the ",[352,4258,2146],{}," variable with the ",[352,4261,4124],{}," tag, ensuring its reactivity and enabling two-way data binding!",[37,4264,4266],{"id":4265},"event-handling-v-on","Event Handling (v-on)",[14,4268,102,4269,4271],{},[352,4270,3932],{}," directive handles events within Vue.js, typically used for actions like button clicks, form submissions, or element focus. Example:",[429,4273,4275],{"className":544,"code":4274,"language":546,"meta":308,"style":308},"\u003Ctemplate>\n  \u003Cinput v-model=\"name\" type=\"text\" />\n  \u003Cdiv>Hello! My name is {{ name }}\u003C/div>\n  \u003Cbutton v-on:click=\"reset\">Reset\u003C/button>\n\u003C/template>\n\n\u003Cscript setup>\nimport { ref } from \"vue\";\n\nconst name = ref(\"Test\");\n\nfunction reset() {\n  name.value = \"\";\n}\n\u003C/script>\n",[352,4276,4277,4285,4313,4325,4351,4359,4363,4373,4389,4393,4413,4417,4428,4440,4444],{"__ignoreMap":308},[550,4278,4279,4281,4283],{"class":552,"line":553},[550,4280,557],{"class":556},[550,4282,704],{"class":560},[550,4284,568],{"class":556},[550,4286,4287,4289,4291,4293,4295,4297,4299,4301,4303,4305,4307,4309,4311],{"class":552,"line":309},[550,4288,711],{"class":556},[550,4290,4145],{"class":560},[550,4292,4148],{"class":564},[550,4294,579],{"class":560},[550,4296,743],{"class":742},[550,4298,2146],{"class":746},[550,4300,743],{"class":742},[550,4302,2006],{"class":564},[550,4304,579],{"class":560},[550,4306,743],{"class":742},[550,4308,434],{"class":746},[550,4310,743],{"class":742},[550,4312,827],{"class":556},[550,4314,4315,4317,4319,4321,4323],{"class":552,"line":314},[550,4316,711],{"class":556},[550,4318,714],{"class":560},[550,4320,4177],{"class":556},[550,4322,714],{"class":560},[550,4324,568],{"class":556},[550,4326,4327,4329,4332,4335,4337,4339,4342,4344,4347,4349],{"class":552,"line":601},[550,4328,711],{"class":556},[550,4330,4331],{"class":560},"button",[550,4333,4334],{"class":564}," v-on:click",[550,4336,579],{"class":560},[550,4338,743],{"class":742},[550,4340,4341],{"class":746},"reset",[550,4343,743],{"class":742},[550,4345,4346],{"class":556},">Reset\u003C/",[550,4348,4331],{"class":560},[550,4350,568],{"class":556},[550,4352,4353,4355,4357],{"class":552,"line":759},[550,4354,604],{"class":556},[550,4356,704],{"class":560},[550,4358,568],{"class":556},[550,4360,4361],{"class":552,"line":784},[550,4362,933],{"emptyLinePlaceholder":335},[550,4364,4365,4367,4369,4371],{"class":552,"line":809},[550,4366,557],{"class":556},[550,4368,561],{"class":560},[550,4370,565],{"class":564},[550,4372,568],{"class":556},[550,4374,4375,4377,4379,4381,4383,4385,4387],{"class":552,"line":819},[550,4376,4044],{"class":560},[550,4378,4047],{"class":556},[550,4380,3232],{"class":560},[550,4382,1320],{"class":742},[550,4384,546],{"class":746},[550,4386,743],{"class":742},[550,4388,3067],{"class":556},[550,4390,4391],{"class":552,"line":830},[550,4392,933],{"emptyLinePlaceholder":335},[550,4394,4395,4397,4399,4401,4403,4405,4407,4409,4411],{"class":552,"line":840},[550,4396,573],{"class":560},[550,4398,4230],{"class":556},[550,4400,579],{"class":560},[550,4402,4073],{"class":582},[550,4404,3276],{"class":556},[550,4406,743],{"class":742},[550,4408,4241],{"class":746},[550,4410,743],{"class":742},[550,4412,3286],{"class":556},[550,4414,4415],{"class":552,"line":1398},[550,4416,933],{"emptyLinePlaceholder":335},[550,4418,4419,4422,4425],{"class":552,"line":1418},[550,4420,4421],{"class":560},"function",[550,4423,4424],{"class":582}," reset",[550,4426,4427],{"class":556},"() {\n",[550,4429,4430,4433,4435,4438],{"class":552,"line":1436},[550,4431,4432],{"class":556},"  name.value ",[550,4434,579],{"class":560},[550,4436,4437],{"class":742}," \"\"",[550,4439,3067],{"class":556},[550,4441,4442],{"class":552,"line":1442},[550,4443,1457],{"class":556},[550,4445,4446,4448,4450],{"class":552,"line":1448},[550,4447,604],{"class":556},[550,4449,561],{"class":560},[550,4451,568],{"class":556},[14,4453,4454,4455,4457,4458,4460],{},"When clicking the button, the ",[352,4456,4341],{}," function resets the ",[352,4459,2146],{}," variable to an empty string.",[37,4462,4464],{"id":4463},"rendering-lists-v-for","Rendering Lists (v-for)",[14,4466,102,4467,4469,4470,4472],{},[352,4468,3940],{}," directive works similarly to JavaScript's ",[352,4471,1128],{}," loop, iterating over lists, arrays, or objects and dynamically generating elements. Example:",[429,4474,4476],{"className":544,"code":4475,"language":546,"meta":308,"style":308},"\u003Ctemplate>\n  \u003Cul>\n    \u003Cli v-for=\"(name, index) in names\" v-bind:key=\"index\">\n      {{ name }}\n    \u003C/li>\n  \u003C/ul>\n\u003C/template>\n\n\u003Cscript setup>\nconst names = [\"Código ao Ponto\", \"Eduardo\", \"Thiago\", \"Ricardo\", \"Cleiton\"];\n\u003C/script>\n",[352,4477,4478,4486,4494,4526,4531,4539,4547,4555,4559,4569,4627],{"__ignoreMap":308},[550,4479,4480,4482,4484],{"class":552,"line":553},[550,4481,557],{"class":556},[550,4483,704],{"class":560},[550,4485,568],{"class":556},[550,4487,4488,4490,4492],{"class":552,"line":309},[550,4489,711],{"class":556},[550,4491,278],{"class":560},[550,4493,568],{"class":556},[550,4495,4496,4498,4500,4503,4505,4507,4510,4512,4515,4517,4519,4522,4524],{"class":552,"line":314},[550,4497,721],{"class":556},[550,4499,281],{"class":560},[550,4501,4502],{"class":564}," v-for",[550,4504,579],{"class":560},[550,4506,743],{"class":742},[550,4508,4509],{"class":746},"(name, index) in names",[550,4511,743],{"class":742},[550,4513,4514],{"class":564}," v-bind:key",[550,4516,579],{"class":560},[550,4518,743],{"class":742},[550,4520,4521],{"class":746},"index",[550,4523,743],{"class":742},[550,4525,568],{"class":556},[550,4527,4528],{"class":552,"line":601},[550,4529,4530],{"class":556},"      {{ name }}\n",[550,4532,4533,4535,4537],{"class":552,"line":759},[550,4534,812],{"class":556},[550,4536,281],{"class":560},[550,4538,568],{"class":556},[550,4540,4541,4543,4545],{"class":552,"line":784},[550,4542,833],{"class":556},[550,4544,278],{"class":560},[550,4546,568],{"class":556},[550,4548,4549,4551,4553],{"class":552,"line":809},[550,4550,604],{"class":556},[550,4552,704],{"class":560},[550,4554,568],{"class":556},[550,4556,4557],{"class":552,"line":819},[550,4558,933],{"emptyLinePlaceholder":335},[550,4560,4561,4563,4565,4567],{"class":552,"line":830},[550,4562,557],{"class":556},[550,4564,561],{"class":560},[550,4566,565],{"class":564},[550,4568,568],{"class":556},[550,4570,4571,4573,4576,4578,4581,4583,4586,4588,4590,4592,4595,4597,4599,4601,4604,4606,4608,4610,4613,4615,4617,4619,4622,4624],{"class":552,"line":840},[550,4572,573],{"class":560},[550,4574,4575],{"class":556}," names ",[550,4577,579],{"class":560},[550,4579,4580],{"class":556}," [",[550,4582,743],{"class":742},[550,4584,4585],{"class":746},"Código ao Ponto",[550,4587,743],{"class":742},[550,4589,3229],{"class":556},[550,4591,743],{"class":742},[550,4593,4594],{"class":746},"Eduardo",[550,4596,743],{"class":742},[550,4598,3229],{"class":556},[550,4600,743],{"class":742},[550,4602,4603],{"class":746},"Thiago",[550,4605,743],{"class":742},[550,4607,3229],{"class":556},[550,4609,743],{"class":742},[550,4611,4612],{"class":746},"Ricardo",[550,4614,743],{"class":742},[550,4616,3229],{"class":556},[550,4618,743],{"class":742},[550,4620,4621],{"class":746},"Cleiton",[550,4623,743],{"class":742},[550,4625,4626],{"class":556},"];\n",[550,4628,4629,4631,4633],{"class":552,"line":1398},[550,4630,604],{"class":556},[550,4632,561],{"class":560},[550,4634,568],{"class":556},[14,4636,4637,4638,4641,4642,4644],{},"Here, we're creating a list of names based on an array. The ",[352,4639,4640],{},"v-bind:key"," attribute is essential when using ",[352,4643,3940],{}," to provide a unique identifier for each list element, improving tracking and management.",[37,4646,4648],{"id":4647},"conditional-rendering-v-if-and-v-else","Conditional Rendering (v-if and v-else)",[14,4650,102,4651,246,4653,4656],{},[352,4652,3948],{},[352,4654,4655],{},"v-else"," directives dynamically include or exclude elements based on a condition. Example:",[429,4658,4660],{"className":544,"code":4659,"language":546,"meta":308,"style":308},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cinput v-model=\"name\" type=\"text\" />\n    \u003Cdiv v-if=\"name\">Hello! My name is {{ name }}\u003C/div>\n    \u003Cdiv v-else>Please enter your name.\u003C/div>\n    \u003Cbutton v-on:click=\"reset\">Reset\u003C/button>\n  \u003C/div>\n\u003C/template>\n\n\u003Cscript setup>\nimport { ref } from \"vue\";\n\nconst name = ref(\"\");\n\nfunction reset() {\n  name.value = \"\";\n}\n\u003C/script>\n",[352,4661,4662,4670,4678,4706,4729,4745,4767,4775,4783,4787,4797,4813,4817,4834,4838,4846,4856,4860],{"__ignoreMap":308},[550,4663,4664,4666,4668],{"class":552,"line":553},[550,4665,557],{"class":556},[550,4667,704],{"class":560},[550,4669,568],{"class":556},[550,4671,4672,4674,4676],{"class":552,"line":309},[550,4673,711],{"class":556},[550,4675,714],{"class":560},[550,4677,568],{"class":556},[550,4679,4680,4682,4684,4686,4688,4690,4692,4694,4696,4698,4700,4702,4704],{"class":552,"line":314},[550,4681,721],{"class":556},[550,4683,4145],{"class":560},[550,4685,4148],{"class":564},[550,4687,579],{"class":560},[550,4689,743],{"class":742},[550,4691,2146],{"class":746},[550,4693,743],{"class":742},[550,4695,2006],{"class":564},[550,4697,579],{"class":560},[550,4699,743],{"class":742},[550,4701,434],{"class":746},[550,4703,743],{"class":742},[550,4705,827],{"class":556},[550,4707,4708,4710,4712,4715,4717,4719,4721,4723,4725,4727],{"class":552,"line":601},[550,4709,721],{"class":556},[550,4711,714],{"class":560},[550,4713,4714],{"class":564}," v-if",[550,4716,579],{"class":560},[550,4718,743],{"class":742},[550,4720,2146],{"class":746},[550,4722,743],{"class":742},[550,4724,4177],{"class":556},[550,4726,714],{"class":560},[550,4728,568],{"class":556},[550,4730,4731,4733,4735,4738,4741,4743],{"class":552,"line":759},[550,4732,721],{"class":556},[550,4734,714],{"class":560},[550,4736,4737],{"class":564}," v-else",[550,4739,4740],{"class":556},">Please enter your name.\u003C/",[550,4742,714],{"class":560},[550,4744,568],{"class":556},[550,4746,4747,4749,4751,4753,4755,4757,4759,4761,4763,4765],{"class":552,"line":784},[550,4748,721],{"class":556},[550,4750,4331],{"class":560},[550,4752,4334],{"class":564},[550,4754,579],{"class":560},[550,4756,743],{"class":742},[550,4758,4341],{"class":746},[550,4760,743],{"class":742},[550,4762,4346],{"class":556},[550,4764,4331],{"class":560},[550,4766,568],{"class":556},[550,4768,4769,4771,4773],{"class":552,"line":809},[550,4770,833],{"class":556},[550,4772,714],{"class":560},[550,4774,568],{"class":556},[550,4776,4777,4779,4781],{"class":552,"line":819},[550,4778,604],{"class":556},[550,4780,704],{"class":560},[550,4782,568],{"class":556},[550,4784,4785],{"class":552,"line":830},[550,4786,933],{"emptyLinePlaceholder":335},[550,4788,4789,4791,4793,4795],{"class":552,"line":840},[550,4790,557],{"class":556},[550,4792,561],{"class":560},[550,4794,565],{"class":564},[550,4796,568],{"class":556},[550,4798,4799,4801,4803,4805,4807,4809,4811],{"class":552,"line":1398},[550,4800,4044],{"class":560},[550,4802,4047],{"class":556},[550,4804,3232],{"class":560},[550,4806,1320],{"class":742},[550,4808,546],{"class":746},[550,4810,743],{"class":742},[550,4812,3067],{"class":556},[550,4814,4815],{"class":552,"line":1418},[550,4816,933],{"emptyLinePlaceholder":335},[550,4818,4819,4821,4823,4825,4827,4829,4832],{"class":552,"line":1436},[550,4820,573],{"class":560},[550,4822,4230],{"class":556},[550,4824,579],{"class":560},[550,4826,4073],{"class":582},[550,4828,3276],{"class":556},[550,4830,4831],{"class":742},"\"\"",[550,4833,3286],{"class":556},[550,4835,4836],{"class":552,"line":1442},[550,4837,933],{"emptyLinePlaceholder":335},[550,4839,4840,4842,4844],{"class":552,"line":1448},[550,4841,4421],{"class":560},[550,4843,4424],{"class":582},[550,4845,4427],{"class":556},[550,4847,4848,4850,4852,4854],{"class":552,"line":1454},[550,4849,4432],{"class":556},[550,4851,579],{"class":560},[550,4853,4437],{"class":742},[550,4855,3067],{"class":556},[550,4857,4858],{"class":552,"line":2225},[550,4859,1457],{"class":556},[550,4861,4862,4864,4866],{"class":552,"line":2230},[550,4863,604],{"class":556},[550,4865,561],{"class":560},[550,4867,568],{"class":556},[37,4869,4871],{"id":4870},"visibility-control-v-show","Visibility Control (v-show)",[14,4873,102,4874,4876],{},[352,4875,3956],{}," directive controls an element's visibility without removing it from the DOM. Example:",[429,4878,4880],{"className":544,"code":4879,"language":546,"meta":308,"style":308},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cinput v-model=\"name\" type=\"text\" />\n    \u003Cdiv>Hello! My name is {{ name }}\u003C/div>\n    \u003Cdiv v-show=\"name.length > 10\">Your name is too long!\u003C/div>\n  \u003C/div>\n\u003C/template>\n\n\u003Cscript setup>\nimport { ref } from \"vue\";\n\nconst name = ref(\"\");\n\u003C/script>\n",[352,4881,4882,4890,4898,4926,4938,4963,4971,4979,4983,4993,5009,5013,5029],{"__ignoreMap":308},[550,4883,4884,4886,4888],{"class":552,"line":553},[550,4885,557],{"class":556},[550,4887,704],{"class":560},[550,4889,568],{"class":556},[550,4891,4892,4894,4896],{"class":552,"line":309},[550,4893,711],{"class":556},[550,4895,714],{"class":560},[550,4897,568],{"class":556},[550,4899,4900,4902,4904,4906,4908,4910,4912,4914,4916,4918,4920,4922,4924],{"class":552,"line":314},[550,4901,721],{"class":556},[550,4903,4145],{"class":560},[550,4905,4148],{"class":564},[550,4907,579],{"class":560},[550,4909,743],{"class":742},[550,4911,2146],{"class":746},[550,4913,743],{"class":742},[550,4915,2006],{"class":564},[550,4917,579],{"class":560},[550,4919,743],{"class":742},[550,4921,434],{"class":746},[550,4923,743],{"class":742},[550,4925,827],{"class":556},[550,4927,4928,4930,4932,4934,4936],{"class":552,"line":601},[550,4929,721],{"class":556},[550,4931,714],{"class":560},[550,4933,4177],{"class":556},[550,4935,714],{"class":560},[550,4937,568],{"class":556},[550,4939,4940,4942,4944,4947,4949,4951,4954,4956,4959,4961],{"class":552,"line":759},[550,4941,721],{"class":556},[550,4943,714],{"class":560},[550,4945,4946],{"class":564}," v-show",[550,4948,579],{"class":560},[550,4950,743],{"class":742},[550,4952,4953],{"class":746},"name.length > 10",[550,4955,743],{"class":742},[550,4957,4958],{"class":556},">Your name is too long!\u003C/",[550,4960,714],{"class":560},[550,4962,568],{"class":556},[550,4964,4965,4967,4969],{"class":552,"line":784},[550,4966,833],{"class":556},[550,4968,714],{"class":560},[550,4970,568],{"class":556},[550,4972,4973,4975,4977],{"class":552,"line":809},[550,4974,604],{"class":556},[550,4976,704],{"class":560},[550,4978,568],{"class":556},[550,4980,4981],{"class":552,"line":819},[550,4982,933],{"emptyLinePlaceholder":335},[550,4984,4985,4987,4989,4991],{"class":552,"line":830},[550,4986,557],{"class":556},[550,4988,561],{"class":560},[550,4990,565],{"class":564},[550,4992,568],{"class":556},[550,4994,4995,4997,4999,5001,5003,5005,5007],{"class":552,"line":840},[550,4996,4044],{"class":560},[550,4998,4047],{"class":556},[550,5000,3232],{"class":560},[550,5002,1320],{"class":742},[550,5004,546],{"class":746},[550,5006,743],{"class":742},[550,5008,3067],{"class":556},[550,5010,5011],{"class":552,"line":1398},[550,5012,933],{"emptyLinePlaceholder":335},[550,5014,5015,5017,5019,5021,5023,5025,5027],{"class":552,"line":1418},[550,5016,573],{"class":560},[550,5018,4230],{"class":556},[550,5020,579],{"class":560},[550,5022,4073],{"class":582},[550,5024,3276],{"class":556},[550,5026,4831],{"class":742},[550,5028,3286],{"class":556},[550,5030,5031,5033,5035],{"class":552,"line":1436},[550,5032,604],{"class":556},[550,5034,561],{"class":560},[550,5036,568],{"class":556},[32,5038,5040],{"id":5039},"final-considerations","Final Considerations",[14,5042,5043,5044,3229,5046,3229,5048,3229,5050,3229,5052,3558,5054,5056],{},"Now that you're familiar with Vue.js's main directives, including ",[352,5045,3948],{},[352,5047,4655],{},[352,5049,3956],{},[352,5051,3940],{},[352,5053,3916],{},[352,5055,3932],{},", you can apply these concepts to build more dynamic and efficient applications!",[1057,5058,5059],{},"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 .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);}",{"title":308,"searchDepth":309,"depth":309,"links":5061},[5062,5063,5071],{"id":3903,"depth":314,"text":3904},{"id":3970,"depth":309,"text":3971,"children":5064},[5065,5066,5067,5068,5069,5070],{"id":3974,"depth":314,"text":3975},{"id":4115,"depth":314,"text":4116},{"id":4265,"depth":314,"text":4266},{"id":4463,"depth":314,"text":4464},{"id":4647,"depth":314,"text":4648},{"id":4870,"depth":314,"text":4871},{"id":5039,"depth":309,"text":5040},[1070],"Discover what directives are in Vue, their functionalities, and how to implement them effectively",{},"/en/blog/what-are-directives-in-vue-and-how-to-implement-them","2025-03-21",{"title":3879,"description":5073},"en/blog/what-are-directives-in-vue-and-how-to-implement-them","NMz3ioBBxhNNiimm8KNfuMxc6nGG-vnX_efXA-2T7m8",{"id":5081,"title":5082,"articleCover":5083,"articleCoverEmbed":8,"authorId":3881,"body":5084,"categoriesIds":6081,"description":6082,"enAlternateSlug":8,"extension":333,"meta":6083,"navigation":335,"path":6084,"ptBrAlternateSlug":8,"publishedAt":6085,"seo":6086,"stem":6087,"updatedAt":6085,"__hash__":6088},"blogEn/en/blog/what-is-the-difference-between-composition-api-and-options-api-in-vuejs.md","What is the Difference Between Composition API and Options API in VueJS","/images/en/blog/vue/what-is-the-difference-between-composition-api-and-options-api-in-vuejs.webp",{"type":11,"value":5085,"toc":6070},[5086,5097,5101,5104,5107,5110,5421,5425,5445,5465,5468,5502,5506,5509,5512,5515,5775,5778,5807,5810,5843,5846,5852,5856,5864,5959,5963,5968,6007,6012,6056,6058,6061,6064,6067],[14,5087,5088,5089,5092,5093,5096],{},"In web development, the choice of framework and tools is crucial for the structure, scalability, and maintenance of a project. Two strategies stand out when we talk about Vue.js: the ",[21,5090,5091],{},"Options API"," and the ",[21,5094,5095],{},"Composition API",". Both provide different ways to organize and manage the logic of an application, each with its own benefits and specific use cases.",[32,5098,5100],{"id":5099},"options-api-the-essence-of-vue","Options API: The Essence of Vue",[14,5102,5103],{},"The Options API is the traditional way of using Vue.js. Present since the beginning, its syntax is based on an options object to structure the properties of a component.",[14,5105,5106],{},"It may seem complicated, but in practice, it's simpler than it seems!",[14,5108,5109],{},"Here's how it looks:",[429,5111,5113],{"className":544,"code":5112,"language":546,"meta":308,"style":308},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cp>Count: {{ count }}\u003C/p>\n    \u003Cbr />\n    \u003Cbutton v-on:click=\"increment\">Increment\u003C/button>\n    \u003Cbutton v-on:click=\"reset\">Reset\u003C/button>\n  \u003C/div>\n\u003C/template>\n\n\u003Cscript>\nexport default {\n  // Component state\n  data() {\n    return {\n      count: 0\n    };\n  },\n\n  // Component methods\n  methods: {\n    increment() {\n      this.count++;\n    },\n    reset() {\n      this.count = 0;\n    }\n  },\n\n  // Computed property\n  computed: {\n    doubleCount() {\n      return this.count * 2;\n    }\n  }\n};\n\u003C/script>\n",[352,5114,5115,5123,5131,5144,5152,5176,5198,5206,5214,5218,5226,5234,5239,5246,5252,5262,5267,5272,5276,5281,5290,5297,5311,5316,5324,5338,5343,5348,5353,5359,5369,5377,5396,5401,5406,5412],{"__ignoreMap":308},[550,5116,5117,5119,5121],{"class":552,"line":553},[550,5118,557],{"class":556},[550,5120,704],{"class":560},[550,5122,568],{"class":556},[550,5124,5125,5127,5129],{"class":552,"line":309},[550,5126,711],{"class":556},[550,5128,714],{"class":560},[550,5130,568],{"class":556},[550,5132,5133,5135,5137,5140,5142],{"class":552,"line":314},[550,5134,721],{"class":556},[550,5136,14],{"class":560},[550,5138,5139],{"class":556},">Count: {{ count }}\u003C/",[550,5141,14],{"class":560},[550,5143,568],{"class":556},[550,5145,5146,5148,5150],{"class":552,"line":601},[550,5147,721],{"class":556},[550,5149,528],{"class":560},[550,5151,827],{"class":556},[550,5153,5154,5156,5158,5160,5162,5164,5167,5169,5172,5174],{"class":552,"line":759},[550,5155,721],{"class":556},[550,5157,4331],{"class":560},[550,5159,4334],{"class":564},[550,5161,579],{"class":560},[550,5163,743],{"class":742},[550,5165,5166],{"class":746},"increment",[550,5168,743],{"class":742},[550,5170,5171],{"class":556},">Increment\u003C/",[550,5173,4331],{"class":560},[550,5175,568],{"class":556},[550,5177,5178,5180,5182,5184,5186,5188,5190,5192,5194,5196],{"class":552,"line":784},[550,5179,721],{"class":556},[550,5181,4331],{"class":560},[550,5183,4334],{"class":564},[550,5185,579],{"class":560},[550,5187,743],{"class":742},[550,5189,4341],{"class":746},[550,5191,743],{"class":742},[550,5193,4346],{"class":556},[550,5195,4331],{"class":560},[550,5197,568],{"class":556},[550,5199,5200,5202,5204],{"class":552,"line":809},[550,5201,833],{"class":556},[550,5203,714],{"class":560},[550,5205,568],{"class":556},[550,5207,5208,5210,5212],{"class":552,"line":819},[550,5209,604],{"class":556},[550,5211,704],{"class":560},[550,5213,568],{"class":556},[550,5215,5216],{"class":552,"line":830},[550,5217,933],{"emptyLinePlaceholder":335},[550,5219,5220,5222,5224],{"class":552,"line":840},[550,5221,557],{"class":556},[550,5223,561],{"class":560},[550,5225,568],{"class":556},[550,5227,5228,5230,5232],{"class":552,"line":1398},[550,5229,2372],{"class":560},[550,5231,2375],{"class":560},[550,5233,1285],{"class":556},[550,5235,5236],{"class":552,"line":1418},[550,5237,5238],{"class":915},"  // Component state\n",[550,5240,5241,5244],{"class":552,"line":1436},[550,5242,5243],{"class":582},"  data",[550,5245,4427],{"class":556},[550,5247,5248,5250],{"class":552,"line":1442},[550,5249,3090],{"class":560},[550,5251,1285],{"class":556},[550,5253,5254,5257,5259],{"class":552,"line":1448},[550,5255,5256],{"class":556},"      count",[550,5258,526],{"class":560},[550,5260,5261],{"class":1708}," 0\n",[550,5263,5264],{"class":552,"line":1454},[550,5265,5266],{"class":556},"    };\n",[550,5268,5269],{"class":552,"line":2225},[550,5270,5271],{"class":556},"  },\n",[550,5273,5274],{"class":552,"line":2230},[550,5275,933],{"emptyLinePlaceholder":335},[550,5277,5278],{"class":552,"line":2602},[550,5279,5280],{"class":915},"  // Component methods\n",[550,5282,5283,5286,5288],{"class":552,"line":2612},[550,5284,5285],{"class":556},"  methods",[550,5287,526],{"class":560},[550,5289,1285],{"class":556},[550,5291,5292,5295],{"class":552,"line":2620},[550,5293,5294],{"class":582},"    increment",[550,5296,4427],{"class":556},[550,5298,5299,5303,5306,5309],{"class":552,"line":2626},[550,5300,5302],{"class":5301},"sqerP","      this",[550,5304,5305],{"class":556},".count",[550,5307,5308],{"class":560},"++",[550,5310,3067],{"class":556},[550,5312,5314],{"class":552,"line":5313},23,[550,5315,3295],{"class":556},[550,5317,5319,5322],{"class":552,"line":5318},24,[550,5320,5321],{"class":582},"    reset",[550,5323,4427],{"class":556},[550,5325,5327,5329,5332,5334,5336],{"class":552,"line":5326},25,[550,5328,5302],{"class":5301},[550,5330,5331],{"class":556},".count ",[550,5333,579],{"class":560},[550,5335,3064],{"class":1708},[550,5337,3067],{"class":556},[550,5339,5341],{"class":552,"line":5340},26,[550,5342,2217],{"class":556},[550,5344,5346],{"class":552,"line":5345},27,[550,5347,5271],{"class":556},[550,5349,5351],{"class":552,"line":5350},28,[550,5352,933],{"emptyLinePlaceholder":335},[550,5354,5356],{"class":552,"line":5355},29,[550,5357,5358],{"class":915},"  // Computed property\n",[550,5360,5362,5365,5367],{"class":552,"line":5361},30,[550,5363,5364],{"class":556},"  computed",[550,5366,526],{"class":560},[550,5368,1285],{"class":556},[550,5370,5372,5375],{"class":552,"line":5371},31,[550,5373,5374],{"class":582},"    doubleCount",[550,5376,4427],{"class":556},[550,5378,5380,5383,5386,5388,5391,5394],{"class":552,"line":5379},32,[550,5381,5382],{"class":560},"      return",[550,5384,5385],{"class":5301}," this",[550,5387,5331],{"class":556},[550,5389,5390],{"class":560},"*",[550,5392,5393],{"class":1708}," 2",[550,5395,3067],{"class":556},[550,5397,5399],{"class":552,"line":5398},33,[550,5400,2217],{"class":556},[550,5402,5404],{"class":552,"line":5403},34,[550,5405,1451],{"class":556},[550,5407,5409],{"class":552,"line":5408},35,[550,5410,5411],{"class":556},"};\n",[550,5413,5415,5417,5419],{"class":552,"line":5414},36,[550,5416,604],{"class":556},[550,5418,561],{"class":560},[550,5420,568],{"class":556},[37,5422,5424],{"id":5423},"structure","Structure:",[278,5426,5427,5433,5439],{},[281,5428,5429,5432],{},[352,5430,5431],{},"data",": Defines the reactive data of the component, i.e., where the variables that will have dynamic values are declared.",[281,5434,5435,5438],{},[352,5436,5437],{},"methods",": Where we specify custom functions. These functions can change states, react to user events, and perform specific logic.",[281,5440,5441,5444],{},[352,5442,5443],{},"computed",": Defines computed properties that derive from data, i.e., values that only need to be calculated once and updated only when a related variable changes.",[14,5446,5447,5448,3229,5450,3229,5453,3229,5456,3229,5458,3558,5461,5464],{},"Vue.js also has other options, such as ",[352,5449,2146],{},[352,5451,5452],{},"components",[352,5454,5455],{},"props",[352,5457,3889],{},[352,5459,5460],{},"watch",[352,5462,5463],{},"emits",", among others. However, we can explore these aspects further in a future article.",[14,5466,5467],{},"Let's examine some of the properties and limitations presented by the Options API:",[278,5469,5470,5489,5499],{},[281,5471,5472,5473,5476,5477,5479,5480,5483,5484,246,5486,5488],{},"Access to data through ",[352,5474,5475],{},"this",": Variables defined in the ",[352,5478,5431],{}," property can only be accessed through the ",[352,5481,5482],{},"this."," context, as illustrated in the ",[352,5485,5166],{},[352,5487,4341],{}," methods.",[281,5490,5491,5492,3229,5494,3229,5496,5498],{},"Rigid code division: Functions and variables are categorized into specific sections, such as ",[352,5493,5431],{},[352,5495,5437],{},[352,5497,5443],{},". This can split the logic associated with similar functionality, making it harder to read and maintain the code in larger-scale projects.",[281,5500,5501],{},"Difficulties in reusing logic: The Options API uses Mixins to share logic between components, which can result in naming conflicts and issues in code traceability.",[32,5503,5505],{"id":5504},"composition-api-flexibility-and-practicality","Composition API: Flexibility and Practicality",[14,5507,5508],{},"The Composition API is the new way to structure code, introduced in Vue 3. With the Composition API, you can structure your component's logic in a more transparent and intuitive way.",[14,5510,5511],{},"Let's see how much has really changed and clarify any doubts about the Composition API.",[14,5513,5514],{},"I'll create the same application, but this time with the Composition API. Observe how it looks:",[429,5516,5518],{"className":544,"code":5517,"language":546,"meta":308,"style":308},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cp>Count: {{ count }}\u003C/p>\n    \u003Cbr />\n    \u003Cbutton v-on:click=\"increment\">Increment\u003C/button>\n    \u003Cbutton v-on:click=\"reset\">Reset\u003C/button>\n  \u003C/div>\n\u003C/template>\n\n\u003Cscript setup>\nimport { ref, computed } from \"vue\";\n\n// Reactive state\nconst count = ref(0);\n\n// Methods\nfunction increment() {\n  count.value++;\n}\n\nfunction reset() {\n  count.value = 0;\n}\n\n// Computed property\nconst doubleCount = computed(() => count.value * 2);\n\u003C/script>\n",[352,5519,5520,5528,5536,5548,5556,5578,5600,5608,5616,5620,5630,5647,5651,5656,5674,5678,5683,5692,5701,5705,5709,5717,5728,5732,5736,5741,5767],{"__ignoreMap":308},[550,5521,5522,5524,5526],{"class":552,"line":553},[550,5523,557],{"class":556},[550,5525,704],{"class":560},[550,5527,568],{"class":556},[550,5529,5530,5532,5534],{"class":552,"line":309},[550,5531,711],{"class":556},[550,5533,714],{"class":560},[550,5535,568],{"class":556},[550,5537,5538,5540,5542,5544,5546],{"class":552,"line":314},[550,5539,721],{"class":556},[550,5541,14],{"class":560},[550,5543,5139],{"class":556},[550,5545,14],{"class":560},[550,5547,568],{"class":556},[550,5549,5550,5552,5554],{"class":552,"line":601},[550,5551,721],{"class":556},[550,5553,528],{"class":560},[550,5555,827],{"class":556},[550,5557,5558,5560,5562,5564,5566,5568,5570,5572,5574,5576],{"class":552,"line":759},[550,5559,721],{"class":556},[550,5561,4331],{"class":560},[550,5563,4334],{"class":564},[550,5565,579],{"class":560},[550,5567,743],{"class":742},[550,5569,5166],{"class":746},[550,5571,743],{"class":742},[550,5573,5171],{"class":556},[550,5575,4331],{"class":560},[550,5577,568],{"class":556},[550,5579,5580,5582,5584,5586,5588,5590,5592,5594,5596,5598],{"class":552,"line":784},[550,5581,721],{"class":556},[550,5583,4331],{"class":560},[550,5585,4334],{"class":564},[550,5587,579],{"class":560},[550,5589,743],{"class":742},[550,5591,4341],{"class":746},[550,5593,743],{"class":742},[550,5595,4346],{"class":556},[550,5597,4331],{"class":560},[550,5599,568],{"class":556},[550,5601,5602,5604,5606],{"class":552,"line":809},[550,5603,833],{"class":556},[550,5605,714],{"class":560},[550,5607,568],{"class":556},[550,5609,5610,5612,5614],{"class":552,"line":819},[550,5611,604],{"class":556},[550,5613,704],{"class":560},[550,5615,568],{"class":556},[550,5617,5618],{"class":552,"line":830},[550,5619,933],{"emptyLinePlaceholder":335},[550,5621,5622,5624,5626,5628],{"class":552,"line":840},[550,5623,557],{"class":556},[550,5625,561],{"class":560},[550,5627,565],{"class":564},[550,5629,568],{"class":556},[550,5631,5632,5634,5637,5639,5641,5643,5645],{"class":552,"line":1398},[550,5633,4044],{"class":560},[550,5635,5636],{"class":556}," { ref, computed } ",[550,5638,3232],{"class":560},[550,5640,1320],{"class":742},[550,5642,546],{"class":746},[550,5644,743],{"class":742},[550,5646,3067],{"class":556},[550,5648,5649],{"class":552,"line":1418},[550,5650,933],{"emptyLinePlaceholder":335},[550,5652,5653],{"class":552,"line":1436},[550,5654,5655],{"class":915},"// Reactive state\n",[550,5657,5658,5660,5663,5665,5667,5669,5672],{"class":552,"line":1442},[550,5659,573],{"class":560},[550,5661,5662],{"class":556}," count ",[550,5664,579],{"class":560},[550,5666,4073],{"class":582},[550,5668,3276],{"class":556},[550,5670,5671],{"class":1708},"0",[550,5673,3286],{"class":556},[550,5675,5676],{"class":552,"line":1448},[550,5677,933],{"emptyLinePlaceholder":335},[550,5679,5680],{"class":552,"line":1454},[550,5681,5682],{"class":915},"// Methods\n",[550,5684,5685,5687,5690],{"class":552,"line":2225},[550,5686,4421],{"class":560},[550,5688,5689],{"class":582}," increment",[550,5691,4427],{"class":556},[550,5693,5694,5697,5699],{"class":552,"line":2230},[550,5695,5696],{"class":556},"  count.value",[550,5698,5308],{"class":560},[550,5700,3067],{"class":556},[550,5702,5703],{"class":552,"line":2602},[550,5704,1457],{"class":556},[550,5706,5707],{"class":552,"line":2612},[550,5708,933],{"emptyLinePlaceholder":335},[550,5710,5711,5713,5715],{"class":552,"line":2620},[550,5712,4421],{"class":560},[550,5714,4424],{"class":582},[550,5716,4427],{"class":556},[550,5718,5719,5722,5724,5726],{"class":552,"line":2626},[550,5720,5721],{"class":556},"  count.value ",[550,5723,579],{"class":560},[550,5725,3064],{"class":1708},[550,5727,3067],{"class":556},[550,5729,5730],{"class":552,"line":5313},[550,5731,1457],{"class":556},[550,5733,5734],{"class":552,"line":5318},[550,5735,933],{"emptyLinePlaceholder":335},[550,5737,5738],{"class":552,"line":5326},[550,5739,5740],{"class":915},"// Computed property\n",[550,5742,5743,5745,5748,5750,5753,5756,5758,5761,5763,5765],{"class":552,"line":5340},[550,5744,573],{"class":560},[550,5746,5747],{"class":556}," doubleCount ",[550,5749,579],{"class":560},[550,5751,5752],{"class":582}," computed",[550,5754,5755],{"class":556},"(() ",[550,5757,3043],{"class":560},[550,5759,5760],{"class":556}," count.value ",[550,5762,5390],{"class":560},[550,5764,5393],{"class":1708},[550,5766,3286],{"class":556},[550,5768,5769,5771,5773],{"class":552,"line":5345},[550,5770,604],{"class":556},[550,5772,561],{"class":560},[550,5774,568],{"class":556},[37,5776,5424],{"id":5777},"structure-1",[278,5779,5780,5788,5796],{},[281,5781,5782,5787],{},[21,5783,5784],{},[352,5785,5786],{},"\u003Cscript setup/>",": Where all the logic and code that will not be rendered to the user is placed.",[281,5789,5790,5795],{},[21,5791,5792],{},[352,5793,5794],{},"ref()",": Defines whether a variable will be reactive or not.",[281,5797,5798,5803,5804,5806],{},[21,5799,5800],{},[352,5801,5802],{},"computed()",": Performs the same function as the ",[352,5805,5443],{}," in the Options API.",[14,5808,5809],{},"Let's explore some of the functionalities brought by the Composition API:",[278,5811,5812,5815,5828],{},[281,5813,5814],{},"It is necessary to import what we are going to use.",[281,5816,5817,5818,5820,5821,5824,5825,5827],{},"We need to use the ",[352,5819,5794],{}," method to make the variable reactive. For example, if ",[352,5822,5823],{},"count"," did not have ",[352,5826,5794],{},", when updated, it would not update automatically and would require a page reload.",[281,5829,5830,5831,5833,5834,5837,5838,246,5840,5842],{},"The data of variables that use ",[352,5832,5794],{}," can only be accessed using ",[352,5835,5836],{},".value",", as used in the ",[352,5839,5166],{},[352,5841,4341],{}," functions.",[14,5844,5845],{},"Below is a gif of the application we created in this article with Vue.js:",[56,5847],{"alt":5848,"height":5849,"src":5850,"width":5851},"Simple application created for the article using Vue.js APIs",450,"images/blog/vue/demonstracao-do-aplicativo-criado-no-artigo-com-as-apis-do-vue.gif",800,[32,5853,5855],{"id":5854},"detailed-comparison","Detailed Comparison",[14,5857,5858,5859,246,5861,5863],{},"Each API in Vue.js has unique characteristics that affect how the code is organized, managed, and interpreted. The choice between ",[21,5860,5091],{},[21,5862,5095],{}," mainly impacts code structuring and readability. Below, we highlight the main differences between them:",[365,5865,5866,5877],{},[368,5867,5868],{},[371,5869,5870,5873,5875],{},[374,5871,5872],{},"Characteristic",[374,5874,5091],{},[374,5876,5095],{},[381,5878,5879,5899,5920,5933,5946],{},[371,5880,5881,5886,5896],{},[386,5882,5883],{},[21,5884,5885],{},"Code Structuring",[386,5887,5888,5889,3229,5891,3229,5893,5895],{},"Structures code according to the type of option (",[352,5890,5431],{},[352,5892,5437],{},[352,5894,5443],{},", etc.), potentially fragmenting logic into complex parts.",[386,5897,5898],{},"Organizes code by function, improving interpretation and aligning it with modern JavaScript.",[371,5900,5901,5906,5911],{},[386,5902,5903],{},[21,5904,5905],{},"Reactivity",[386,5907,5908,5909,533],{},"Automatically manages reactive properties defined in ",[352,5910,5431],{},[386,5912,5913,5914,246,5916,5919],{},"Requires explicit use of ",[352,5915,5794],{},[352,5917,5918],{},"reactive()"," to make variables reactive.",[371,5921,5922,5927,5930],{},[386,5923,5924],{},[21,5925,5926],{},"Readability",[386,5928,5929],{},"For those experienced in Object-Oriented Programming (OOP), it may be more familiar, though it can be less intuitive for large-scale projects.",[386,5931,5932],{},"Ideal for developers experienced in JavaScript, and provides exceptional support for TypeScript.",[371,5934,5935,5940,5943],{},[386,5936,5937],{},[21,5938,5939],{},"Learning Curve",[386,5941,5942],{},"Perfect for beginners, as it follows an organized and predictable structure, where each component function is divided into specific blocks.",[386,5944,5945],{},"Has a steeper learning curve, as it requires a deeper understanding of concepts like reactivity. However, it becomes more intuitive with practice.",[371,5947,5948,5953,5956],{},[386,5949,5950],{},[21,5951,5952],{},"Maintenance and Scalability",[386,5954,5955],{},"In large-scale projects, maintenance can become challenging, as the logic of a component is fragmented into several sections, making it harder to read and debug.",[386,5957,5958],{},"Ideal for scalable projects, as it simplifies code organization and allows for modular and reusable responsibility division.",[32,5960,5962],{"id":5961},"but-when-to-use-each-api","But when to use each API?",[14,5964,5965],{},[21,5966,5967],{},"The Options API is ideal for:",[278,5969,5970,5983,5989,5995,6001],{},[281,5971,5972,5975,5976,3229,5978,3229,5980,5982],{},[21,5973,5974],{},"More structured and declarative code"," - Ideal for those who prefer a clear distinction between state, methods, and computed properties (such as ",[352,5977,5431],{},[352,5979,5437],{},[352,5981,5443],{},", etc.).",[281,5984,5985,5988],{},[21,5986,5987],{},"Easy learning"," - If you are starting with Vue.js, this methodology is more intuitive and organized, following a clearly established pattern.",[281,5990,5991,5994],{},[21,5992,5993],{},"Compatibility with older libraries"," - Some Vue libraries still rely on the Options API, making this option more practical to prevent compatibility issues.",[281,5996,5997,6000],{},[21,5998,5999],{},"Simplified debugging"," - Due to the fixed structure of the code, it becomes easier to understand the flow and identify failures, especially for those accustomed to Vue.js's conventional architecture.",[281,6002,6003,6006],{},[21,6004,6005],{},"Effective resource use in smaller projects"," - In smaller-scale applications, the Options API provides a straightforward and efficient solution, free of extra complexity.",[14,6008,6009],{},[21,6010,6011],{},"The Composition API is more recommended for:",[278,6013,6014,6024,6035,6044,6050],{},[281,6015,6016,6019,6020,6023],{},[21,6017,6018],{},"Greater adaptability and code reuse"," - Through ",[21,6021,6022],{},"Functions",", we can share logic between components without the limitations of Mixins in the Options API.",[281,6025,6026,6029,6030,3229,6032,6034],{},[21,6027,6028],{},"Improved organization in large projects"," - Instead of segmenting code by options (",[352,6031,5431],{},[352,6033,5437],{},", etc.), logic can be grouped by functionality, simplifying maintenance.",[281,6036,6037,6040,6041,6043],{},[21,6038,6039],{},"Advanced reactivity management"," - By using ",[352,6042,5794],{},", you gain more control over the state.",[281,6045,6046,6049],{},[21,6047,6048],{},"Ease in creating custom hooks"," - The Composition API allows the creation of reusable hooks, making the structure more modular and simplifying code maintenance.",[281,6051,6052,6055],{},[21,6053,6054],{},"Enhanced experience with TypeScript"," - If you plan to use TypeScript in your project, the Composition API integrates more smoothly, providing more precise typing and improved support for type inference.",[32,6057,5040],{"id":5039},[14,6059,6060],{},"Now that you know the differences between the Options API and the Composition API, you are ready to choose the best option for your project. Remember that each has its advantages and disadvantages, and everything depends on the complexity of your project.",[14,6062,6063],{},"However, when it comes to personal preference, I generally prefer using the Composition API in my personal projects, due to its optimization with TypeScript and the ability to group logic.",[14,6065,6066],{},"Regardless of the API chosen, Vue.js remains a powerful and flexible tool for Front-End development. 🚀",[1057,6068,6069],{},"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 .shSDL, html code.shiki .shSDL{--shiki-default:#6272A4}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 pre.shiki code .sqerP, html code.shiki .sqerP{--shiki-default:#BD93F9;--shiki-default-font-style:italic}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);}",{"title":308,"searchDepth":309,"depth":309,"links":6071},[6072,6075,6078,6079,6080],{"id":5099,"depth":309,"text":5100,"children":6073},[6074],{"id":5423,"depth":314,"text":5424},{"id":5504,"depth":309,"text":5505,"children":6076},[6077],{"id":5777,"depth":314,"text":5424},{"id":5854,"depth":309,"text":5855},{"id":5961,"depth":309,"text":5962},{"id":5039,"depth":309,"text":5040},[1070],"Simplifying and discovering the main differences, advantages, and practical applications of the Composition API and Options API in Vue.js.",{},"/en/blog/what-is-the-difference-between-composition-api-and-options-api-in-vuejs","2025-02-20",{"title":5082,"description":6082},"en/blog/what-is-the-difference-between-composition-api-and-options-api-in-vuejs","QyAT_a_Inf2DpjoD4xzK49Gw1NDLlVJrW1_hAj-m5L0",{"kind":6090,"etag":6091,"nextPageToken":6092,"regionCode":6093,"pageInfo":6094,"items":6096},"youtube#searchListResponse","RqHvnJceZTQU9NCZJZaXFfojxmQ","CAYQAA","BR",{"totalResults":6095,"resultsPerPage":784},152,[6097,6123,6138,6153,6168,6183],{"kind":6098,"etag":6099,"id":6100,"snippet":6103},"youtube#searchResult","ktMwzONB8lU2emm2mI6bPLOillg",{"kind":6101,"videoId":6102},"youtube#video","3DoN3OE281Q",{"publishedAt":6104,"channelId":6105,"title":6106,"description":6107,"thumbnails":6108,"channelTitle":6121,"liveBroadcastContent":6122,"publishTime":6104},"2025-09-30T16:01:45Z","UCbBKSeVUwxDO4_t5muNl9mQ","DEV PJ: Pare de Ser REFÉM Financeiro de EMPRESA!","Se você é desenvolvedor PJ (Pessoa Jurídica), sabe que o risco de rescisão contratual é alto e imediato. Sem aviso prévio, sem ...",{"default":6109,"medium":6113,"high":6117},{"url":6110,"width":6111,"height":6112},"https://i.ytimg.com/vi/3DoN3OE281Q/default.jpg",120,90,{"url":6114,"width":6115,"height":6116},"https://i.ytimg.com/vi/3DoN3OE281Q/mqdefault.jpg",320,180,{"url":6118,"width":6119,"height":6120},"https://i.ytimg.com/vi/3DoN3OE281Q/hqdefault.jpg",480,360,"Código Ao Ponto","none",{"kind":6098,"etag":6124,"id":6125,"snippet":6127},"GzclzbwU2sIdm2vsIz6vr3tY_Qs",{"kind":6101,"videoId":6126},"YsqHqhn6zsE",{"publishedAt":6128,"channelId":6105,"title":6129,"description":6130,"thumbnails":6131,"channelTitle":6121,"liveBroadcastContent":6122,"publishTime":6128},"2025-09-25T16:01:51Z","Como Criar uma Barra de Progresso com HTML, CSS e JavaScript (Passo a Passo)","Aprenda a criar uma barra de progresso totalmente personalizada usando apenas HTML, CSS e JavaScript! Neste tutorial ...",{"default":6132,"medium":6134,"high":6136},{"url":6133,"width":6111,"height":6112},"https://i.ytimg.com/vi/YsqHqhn6zsE/default.jpg",{"url":6135,"width":6115,"height":6116},"https://i.ytimg.com/vi/YsqHqhn6zsE/mqdefault.jpg",{"url":6137,"width":6119,"height":6120},"https://i.ytimg.com/vi/YsqHqhn6zsE/hqdefault.jpg",{"kind":6098,"etag":6139,"id":6140,"snippet":6142},"c78OpTM4bF9ISPp9BI-uVcKlEZU",{"kind":6101,"videoId":6141},"7DtsRVkvBlY",{"publishedAt":6143,"channelId":6105,"title":6144,"description":6145,"thumbnails":6146,"channelTitle":6121,"liveBroadcastContent":6122,"publishTime":6143},"2025-09-23T16:01:56Z","Como Criar um Botão Voltar ao Topo com HTML, CSS e JavaScript","Neste tutorial, você vai aprender a criar um botão de \"voltar ao topo\" (scroll to top) totalmente funcional e com uma animação ...",{"default":6147,"medium":6149,"high":6151},{"url":6148,"width":6111,"height":6112},"https://i.ytimg.com/vi/7DtsRVkvBlY/default.jpg",{"url":6150,"width":6115,"height":6116},"https://i.ytimg.com/vi/7DtsRVkvBlY/mqdefault.jpg",{"url":6152,"width":6119,"height":6120},"https://i.ytimg.com/vi/7DtsRVkvBlY/hqdefault.jpg",{"kind":6098,"etag":6154,"id":6155,"snippet":6157},"y63xFVK8YDZXlMT1SF2YhbF1qNQ",{"kind":6101,"videoId":6156},"SN4uds2_LjE",{"publishedAt":6158,"channelId":6105,"title":6159,"description":6160,"thumbnails":6161,"channelTitle":6121,"liveBroadcastContent":6122,"publishTime":6158},"2025-09-18T16:01:46Z","Modal com HTML, CSS e JavaScript – Tutorial Completo","Aprenda como criar uma modal com HTML, CSS e JavaScript do zero! Neste tutorial você vai ver, passo a passo, como ...",{"default":6162,"medium":6164,"high":6166},{"url":6163,"width":6111,"height":6112},"https://i.ytimg.com/vi/SN4uds2_LjE/default.jpg",{"url":6165,"width":6115,"height":6116},"https://i.ytimg.com/vi/SN4uds2_LjE/mqdefault.jpg",{"url":6167,"width":6119,"height":6120},"https://i.ytimg.com/vi/SN4uds2_LjE/hqdefault.jpg",{"kind":6098,"etag":6169,"id":6170,"snippet":6172},"J0X_mQsAaJOpOH5hXvqMBX53bUw",{"kind":6101,"videoId":6171},"hKiCgDfCVog",{"publishedAt":6173,"channelId":6105,"title":6174,"description":6175,"thumbnails":6176,"channelTitle":6121,"liveBroadcastContent":6122,"publishTime":6173},"2025-09-11T16:01:43Z","Sou iniciante. Qual framework eu escolho pra começar?","Se você está começando no mundo da programação e está perdido entre React, Vue e Angular, esse vídeo é pra você! Vamos ...",{"default":6177,"medium":6179,"high":6181},{"url":6178,"width":6111,"height":6112},"https://i.ytimg.com/vi/hKiCgDfCVog/default.jpg",{"url":6180,"width":6115,"height":6116},"https://i.ytimg.com/vi/hKiCgDfCVog/mqdefault.jpg",{"url":6182,"width":6119,"height":6120},"https://i.ytimg.com/vi/hKiCgDfCVog/hqdefault.jpg",{"kind":6098,"etag":6184,"id":6185,"snippet":6187},"qljpp_gzJmLdz1gBFNPQplmtQN4",{"kind":6101,"videoId":6186},"QkaGREVuhRY",{"publishedAt":6188,"channelId":6105,"title":6189,"description":6190,"thumbnails":6191,"channelTitle":6121,"liveBroadcastContent":6122,"publishTime":6188},"2025-09-04T16:01:42Z","🛠️ Aula Prática Nuxt: Criando Footer, Container e Hero do Projeto #16","Dando sequência ao projeto prático com Nuxt.js, nesta aula vamos construir o componente de Footer, criar um Container ...",{"default":6192,"medium":6194,"high":6196},{"url":6193,"width":6111,"height":6112},"https://i.ytimg.com/vi/QkaGREVuhRY/default.jpg",{"url":6195,"width":6115,"height":6116},"https://i.ytimg.com/vi/QkaGREVuhRY/mqdefault.jpg",{"url":6197,"width":6119,"height":6120},"https://i.ytimg.com/vi/QkaGREVuhRY/hqdefault.jpg"]