[{"data":1,"prerenderedAt":761},["ShallowReactive",2],{"en-article-\u002Fen\u002Fblog\u002Fhow-to-add-special-characters-on-i18n":3,"en-related-posts-\u002Fen\u002Fblog\u002Fhow-to-add-special-characters-on-i18n":655},{"id":4,"title":5,"articleCover":6,"articleCoverEmbed":7,"articleCoverEmbedUploadDate":7,"articleCoverHeight":8,"articleCoverWidth":9,"authorId":10,"body":11,"categoriesIds":636,"description":639,"enAlternateSlug":640,"extension":641,"meta":642,"navigation":643,"path":644,"ptBrAlternateSlug":645,"publishedAt":646,"seo":647,"sitemap":648,"stem":652,"updatedAt":651,"wordCount":653,"__hash__":654},"blogEn\u002Fen\u002Fblog\u002Fhow-to-add-special-characters-on-i18n.md","How to Add Special Characters in i18N Translations","\u002Fimages\u002Fblog\u002Fi18n\u002Fi18n-special-characters-on-nuxtjs-thumb.webp",null,720,1280,"thiago-nunes-batista",{"type":12,"value":13,"toc":630},"minimark",[14,22,41,46,72,99,102,109,112,122,132,205,424,428,441,444,610,615,626],[15,16,17,21],"p",{},[18,19,20],"code",{},"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.",[15,23,24,25,28,29,32,33,36,37,40],{},"If you tried using characters like ",[18,26,27],{},"@"," or ",[18,30,31],{},"{"," in i18n translation files in ",[18,34,35],{},"Vue.js"," and encountered a ",[18,38,39],{},"500 error",", this article will help you understand why this happened and teach you how to fix the problem.",[42,43,45],"h2",{"id":44},"the-problem-with-certain-characters-in-i18n","The Problem with Certain Characters in I18N",[15,47,48,49,52,53,56,57,60,61,64,65,60,68,71],{},"Just like ",[18,50,51],{},"React.JS",", which reserves certain ",[18,54,55],{},"HTML"," keywords such as ",[18,58,59],{},"class"," and ",[18,62,63],{},"for","—replacing them with ",[18,66,67],{},"className",[18,69,70],{},"htmlFor","—i18n also treats some characters in a special way:",[73,74,75,80,85,89,94],"ul",{},[76,77,78],"li",{},[18,79,31],{},[76,81,82],{},[18,83,84],{},"}",[76,86,87],{},[18,88,27],{},[76,90,91],{},[18,92,93],{},"$",[76,95,96],{},[18,97,98],{},"|",[15,100,101],{},"If we don't handle these characters correctly, you may face the same error I encountered:",[103,104],"img",{"alt":105,"height":106,"src":107,"width":108},"example of an error when adding special characters in i18n translation files",241,"\u002Fimages\u002Fblog\u002Fi18n\u002Fspecial-character-error.webp",680,[15,110,111],{},"To understand the issue, let's consider a project with the following structure:",[113,114,119],"pre",{"className":115,"code":117,"language":118},[116],"language-text",".\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","text",[18,120,117],{"__ignoreMap":121},"",[15,123,124,125,128,129,131],{},"Inside the ",[18,126,127],{},"pt-BR.json"," file, there are key-value pairs for the translated texts in Brazilian Portuguese. The problem started when I tried adding the ",[18,130,27],{}," character to one of the Footer links:",[133,134,135,151],"table",{},[136,137,138],"thead",{},[139,140,141,145,148],"tr",{},[142,143,144],"th",{},"Special Character",[142,146,147],{},"Description",[142,149,150],{},"Solution",[152,153,154,165,175,185,195],"tbody",{},[139,155,156,159,162],{},[157,158,27],"td",{},[157,160,161],{},"Used in URLs, emails, etc.",[157,163,164],{},"{'@'}",[139,166,167,169,172],{},[157,168,31],{},[157,170,171],{},"Start of a block in JSON",[157,173,174],{},"{'{'}",[139,176,177,179,182],{},[157,178,84],{},[157,180,181],{},"End of a block in JSON",[157,183,184],{},"{'}'}",[139,186,187,189,192],{},[157,188,93],{},[157,190,191],{},"Used in string interpolation",[157,193,194],{},"{'$'}",[139,196,197,199,202],{},[157,198,98],{},[157,200,201],{},"Pipe character",[157,203,204],{},"{'|'}",[113,206,210],{"className":207,"code":208,"language":209,"meta":121,"style":121},"language-json shiki shiki-themes dracula","{\n  \"footer\": {\n    \"socialMedia\": [\n      {\n        \"url\": \"https:\u002F\u002Fwww.youtube.com\u002F@CodigoAoPonto\",\n        \"ariaLabel\": \"Go to Código ao Ponto's YouTube channel\",\n        \"icon\": \"mdi:youtube\"\n      },\n      {\n        \"url\": \"https:\u002F\u002Fwww.instagram.com\u002Fcodigo_ponto\",\n        \"ariaLabel\": \"Go to Código ao Ponto's Instagram\",\n        \"icon\": \"mdi:instagram\"\n      }\n    ]\n  }\n}\n","json",[18,211,212,221,242,258,264,290,311,331,337,342,362,382,400,406,412,418],{"__ignoreMap":121},[213,214,217],"span",{"class":215,"line":216},"line",1,[213,218,220],{"class":219},"sCdxs","{\n",[213,222,224,228,232,235,239],{"class":215,"line":223},2,[213,225,227],{"class":226},"sY8FZ","  \"",[213,229,231],{"class":230},"sLL85","footer",[213,233,234],{"class":226},"\"",[213,236,238],{"class":237},"s0Tla",":",[213,240,241],{"class":219}," {\n",[213,243,245,248,251,253,255],{"class":215,"line":244},3,[213,246,247],{"class":226},"    \"",[213,249,250],{"class":230},"socialMedia",[213,252,234],{"class":226},[213,254,238],{"class":237},[213,256,257],{"class":219}," [\n",[213,259,261],{"class":215,"line":260},4,[213,262,263],{"class":219},"      {\n",[213,265,267,270,273,275,277,281,285,287],{"class":215,"line":266},5,[213,268,269],{"class":226},"        \"",[213,271,272],{"class":230},"url",[213,274,234],{"class":226},[213,276,238],{"class":237},[213,278,280],{"class":279},"seVfx"," \"",[213,282,284],{"class":283},"s-mGx","https:\u002F\u002Fwww.youtube.com\u002F@CodigoAoPonto",[213,286,234],{"class":279},[213,288,289],{"class":219},",\n",[213,291,293,295,298,300,302,304,307,309],{"class":215,"line":292},6,[213,294,269],{"class":226},[213,296,297],{"class":230},"ariaLabel",[213,299,234],{"class":226},[213,301,238],{"class":237},[213,303,280],{"class":279},[213,305,306],{"class":283},"Go to Código ao Ponto's YouTube channel",[213,308,234],{"class":279},[213,310,289],{"class":219},[213,312,314,316,319,321,323,325,328],{"class":215,"line":313},7,[213,315,269],{"class":226},[213,317,318],{"class":230},"icon",[213,320,234],{"class":226},[213,322,238],{"class":237},[213,324,280],{"class":279},[213,326,327],{"class":283},"mdi:youtube",[213,329,330],{"class":279},"\"\n",[213,332,334],{"class":215,"line":333},8,[213,335,336],{"class":219},"      },\n",[213,338,340],{"class":215,"line":339},9,[213,341,263],{"class":219},[213,343,345,347,349,351,353,355,358,360],{"class":215,"line":344},10,[213,346,269],{"class":226},[213,348,272],{"class":230},[213,350,234],{"class":226},[213,352,238],{"class":237},[213,354,280],{"class":279},[213,356,357],{"class":283},"https:\u002F\u002Fwww.instagram.com\u002Fcodigo_ponto",[213,359,234],{"class":279},[213,361,289],{"class":219},[213,363,365,367,369,371,373,375,378,380],{"class":215,"line":364},11,[213,366,269],{"class":226},[213,368,297],{"class":230},[213,370,234],{"class":226},[213,372,238],{"class":237},[213,374,280],{"class":279},[213,376,377],{"class":283},"Go to Código ao Ponto's Instagram",[213,379,234],{"class":279},[213,381,289],{"class":219},[213,383,385,387,389,391,393,395,398],{"class":215,"line":384},12,[213,386,269],{"class":226},[213,388,318],{"class":230},[213,390,234],{"class":226},[213,392,238],{"class":237},[213,394,280],{"class":279},[213,396,397],{"class":283},"mdi:instagram",[213,399,330],{"class":279},[213,401,403],{"class":215,"line":402},13,[213,404,405],{"class":219},"      }\n",[213,407,409],{"class":215,"line":408},14,[213,410,411],{"class":219},"    ]\n",[213,413,415],{"class":215,"line":414},15,[213,416,417],{"class":219},"  }\n",[213,419,421],{"class":215,"line":420},16,[213,422,423],{"class":219},"}\n",[42,425,427],{"id":426},"the-solution","The Solution",[15,429,430,431,434,435,437,438,440],{},"To fix this issue, we need to use ",[18,432,433],{},"Literal Interpolation"," in i18n. To use the ",[18,436,27],{}," character in the i18n translation file, we should use the following syntax: ",[18,439,164],{},". This means wrapping the special character in curly braces and using single quotes.",[15,442,443],{},"Once applied, the corrected file will look like this:",[113,445,447],{"className":207,"code":446,"language":209,"meta":121,"style":121},"{\n  \"footer\": {\n    \"socialMedia\": [\n      {\n        \"url\": \"https:\u002F\u002Fwww.youtube.com\u002F{'@'}CodigoAoPonto\",\n        \"ariaLabel\": \"Go to Código ao Ponto's YouTube channel\",\n        \"icon\": \"mdi:youtube\"\n      },\n      {\n        \"url\": \"https:\u002F\u002Fwww.instagram.com\u002Fcodigo_ponto\",\n        \"ariaLabel\": \"Go to Código ao Ponto's Instagram\",\n        \"icon\": \"mdi:instagram\"\n      }\n    ]\n  }\n}\n",[18,448,449,453,465,477,481,500,518,534,538,542,560,578,594,598,602,606],{"__ignoreMap":121},[213,450,451],{"class":215,"line":216},[213,452,220],{"class":219},[213,454,455,457,459,461,463],{"class":215,"line":223},[213,456,227],{"class":226},[213,458,231],{"class":230},[213,460,234],{"class":226},[213,462,238],{"class":237},[213,464,241],{"class":219},[213,466,467,469,471,473,475],{"class":215,"line":244},[213,468,247],{"class":226},[213,470,250],{"class":230},[213,472,234],{"class":226},[213,474,238],{"class":237},[213,476,257],{"class":219},[213,478,479],{"class":215,"line":260},[213,480,263],{"class":219},[213,482,483,485,487,489,491,493,496,498],{"class":215,"line":266},[213,484,269],{"class":226},[213,486,272],{"class":230},[213,488,234],{"class":226},[213,490,238],{"class":237},[213,492,280],{"class":279},[213,494,495],{"class":283},"https:\u002F\u002Fwww.youtube.com\u002F{'@'}CodigoAoPonto",[213,497,234],{"class":279},[213,499,289],{"class":219},[213,501,502,504,506,508,510,512,514,516],{"class":215,"line":292},[213,503,269],{"class":226},[213,505,297],{"class":230},[213,507,234],{"class":226},[213,509,238],{"class":237},[213,511,280],{"class":279},[213,513,306],{"class":283},[213,515,234],{"class":279},[213,517,289],{"class":219},[213,519,520,522,524,526,528,530,532],{"class":215,"line":313},[213,521,269],{"class":226},[213,523,318],{"class":230},[213,525,234],{"class":226},[213,527,238],{"class":237},[213,529,280],{"class":279},[213,531,327],{"class":283},[213,533,330],{"class":279},[213,535,536],{"class":215,"line":333},[213,537,336],{"class":219},[213,539,540],{"class":215,"line":339},[213,541,263],{"class":219},[213,543,544,546,548,550,552,554,556,558],{"class":215,"line":344},[213,545,269],{"class":226},[213,547,272],{"class":230},[213,549,234],{"class":226},[213,551,238],{"class":237},[213,553,280],{"class":279},[213,555,357],{"class":283},[213,557,234],{"class":279},[213,559,289],{"class":219},[213,561,562,564,566,568,570,572,574,576],{"class":215,"line":364},[213,563,269],{"class":226},[213,565,297],{"class":230},[213,567,234],{"class":226},[213,569,238],{"class":237},[213,571,280],{"class":279},[213,573,377],{"class":283},[213,575,234],{"class":279},[213,577,289],{"class":219},[213,579,580,582,584,586,588,590,592],{"class":215,"line":384},[213,581,269],{"class":226},[213,583,318],{"class":230},[213,585,234],{"class":226},[213,587,238],{"class":237},[213,589,280],{"class":279},[213,591,397],{"class":283},[213,593,330],{"class":279},[213,595,596],{"class":215,"line":402},[213,597,405],{"class":219},[213,599,600],{"class":215,"line":408},[213,601,411],{"class":219},[213,603,604],{"class":215,"line":414},[213,605,417],{"class":219},[213,607,608],{"class":215,"line":420},[213,609,423],{"class":219},[611,612,614],"h3",{"id":613},"conclusion","Conclusion",[15,616,617,618,625],{},"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 ",[619,620,624],"a",{"href":621,"rel":622},"https:\u002F\u002Fvue-i18n.intlify.dev\u002Fguide\u002Fessentials\u002Fsyntax#literal-interpolation",[623],"nofollow","Official VueI18n Documentation",".",[627,628,629],"style",{},"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":121,"searchDepth":223,"depth":223,"links":631},[632,633],{"id":44,"depth":223,"text":45},{"id":426,"depth":223,"text":427,"children":634},[635],{"id":613,"depth":244,"text":614},[637,638],"nuxt","vuejs","Learn how to add special characters like @ and {} in i18n translations in Vue.js without causing errors, with a step-by-step solution and code examples.","how-to-add-special-characters-on-i18n","md",{},true,"\u002Fen\u002Fblog\u002Fhow-to-add-special-characters-on-i18n","como-adicionar-caracteres-especiais-no-i18n","2025-02-02",{"title":5,"description":639},{"loc":644,"images":649,"lastmod":651},[650],{"loc":107},"2026-10-06","en\u002Fblog\u002Fhow-to-add-special-characters-on-i18n",313,"-kLLM0rTpGWSafW4wyyRwc9AbKLTuQgP3fe48DD9SIw",[656,665,673,680,682,690,697,705,712,720,726,734,741,747,754],{"id":657,"path":658,"title":659,"articleCover":660,"categoriesIds":661,"publishedAt":664},"blogEn\u002Fen\u002Fblog\u002Fcore-web-vitals-how-user-experience-affects-seo.md","\u002Fen\u002Fblog\u002Fcore-web-vitals-how-user-experience-affects-seo","Core Web Vitals and SEO: How User Experience Affects Your Site","\u002Fimages\u002Fen\u002Fblog\u002Fseo\u002Fweb-vitals\u002Fcore-web-vitals-how-user-experience-affects-seo.webp",[662,663],"seo","web-vitals","2024-10-25",{"id":666,"path":667,"title":668,"articleCover":669,"categoriesIds":670,"publishedAt":672},"blogEn\u002Fen\u002Fblog\u002Ffree-developer-tools-hub.md","\u002Fen\u002Fblog\u002Ffree-developer-tools-hub","I Built a Free Web Tools Hub for Developers","\u002Fimages\u002Fen\u002Fblog\u002Ftools\u002Ffree-developer-tools-hub.webp",[671],"tools","2026-01-06",{"id":674,"path":675,"title":676,"articleCover":677,"categoriesIds":678,"publishedAt":679},"blogEn\u002Fen\u002Fblog\u002Fhow-the-routing-system-works-in-nuxt.md","\u002Fen\u002Fblog\u002Fhow-the-routing-system-works-in-nuxt","Nuxt Routing: Dynamic, Nested and Catch-All Routes","\u002Fimages\u002Fblog\u002Fnuxt\u002Fnuxt-routing-thumb.webp",[637,638],"2025-03-12",{"id":4,"path":644,"title":5,"articleCover":6,"categoriesIds":681,"publishedAt":646},[637,638],{"id":683,"path":684,"title":685,"articleCover":686,"categoriesIds":687,"publishedAt":689},"blogEn\u002Fen\u002Fblog\u002Fhow-to-create-and-set-up-ssh-key-github.md","\u002Fen\u002Fblog\u002Fhow-to-create-and-set-up-ssh-key-github","SSH Key in Git: How to Set Up an SSH Key for GitHub","\u002Fimages\u002Fen\u002Fblog\u002Fgit\u002Fhow-to-create-and-set-up-ssh-key-github-thumb.webp",[688],"git","2025-02-04",{"id":691,"path":692,"title":693,"articleCover":694,"categoriesIds":695,"publishedAt":696},"blogEn\u002Fen\u002Fblog\u002Fhow-to-create-structured-data-with-nuxtjs.md","\u002Fen\u002Fblog\u002Fhow-to-create-structured-data-with-nuxtjs","What is Structured Data and How to Add it in Nuxt.JS","\u002Fimages\u002Fen\u002Fblog\u002Fseo\u002Fstructured-data\u002Fstructured-data-thumb-1.webp",[637,638,662],"2025-01-22",{"id":698,"path":699,"title":700,"articleCover":701,"categoriesIds":702,"publishedAt":704},"blogEn\u002Fen\u002Fblog\u002Fhow-to-deal-with-envy-from-other-programmers.md","\u002Fen\u002Fblog\u002Fhow-to-deal-with-envy-from-other-programmers","How to Deal with Envy from Other Programmers in Your Career","\u002Fimages\u002Fen\u002Fblog\u002Fcareer\u002Fa-nail-that-stands-out-gets-hammered.webp",[703],"career","2025-08-29",{"id":706,"path":707,"title":708,"articleCover":709,"categoriesIds":710,"publishedAt":711},"blogEn\u002Fen\u002Fblog\u002Fhow-to-use-middlewares-nuxtjs.md","\u002Fen\u002Fblog\u002Fhow-to-use-middlewares-nuxtjs","Middlewares: What They Are and How to Use Them in Nuxt.JS","\u002Fimages\u002Fblog\u002Fnuxt\u002Ffront-end-middlewares-thumb.webp",[637,638],"2025-02-03",{"id":713,"path":714,"title":715,"articleCover":716,"categoriesIds":717,"publishedAt":719},"blogEn\u002Fen\u002Fblog\u002Fhow-to-validate-cpf-with-javascript.md","\u002Fen\u002Fblog\u002Fhow-to-validate-cpf-with-javascript","How to validate a CPF with JavaScript","\u002Fimages\u002Fen\u002Fblog\u002Fjavascript\u002Fhow-to-validate-cpf-with-javascript.webp",[718,671],"javascript","2026-10-04",{"id":721,"path":722,"title":723,"articleCover":724,"categoriesIds":725,"publishedAt":719},"blogEn\u002Fen\u002Fblog\u002Fhow-to-validate-credit-card-with-javascript.md","\u002Fen\u002Fblog\u002Fhow-to-validate-credit-card-with-javascript","How to validate a credit card with JavaScript (Luhn algorithm)","\u002Fimages\u002Fen\u002Fblog\u002Fjavascript\u002Fhow-to-validate-credit-card-with-javascript.webp",[718,671],{"id":727,"path":728,"title":729,"articleCover":730,"categoriesIds":731,"publishedAt":733},"blogEn\u002Fen\u002Fblog\u002Frecovering-lost-files-in-git-with-vscode.md","\u002Fen\u002Fblog\u002Frecovering-lost-files-in-git-with-vscode","Recover Lost Files in Git Without a Commit Using VS Code Local History","\u002Fimages\u002Fen\u002Fblog\u002Fvscode\u002Fhow-to-recover-lost-files-in-git-using-vscode.webp",[688,732],"vscode","2025-01-21",{"id":735,"path":736,"title":737,"articleCover":738,"categoriesIds":739,"publishedAt":740},"blogEn\u002Fen\u002Fblog\u002Fvercel-buys-nuxt-labs.md","\u002Fen\u002Fblog\u002Fvercel-buys-nuxt-labs","Vercel Acquired Nuxt Labs! What Does This Mean for Nuxt?","\u002Fimages\u002Fen\u002Fblog\u002Fnuxt\u002Fvercel-buys-nuxt-labs.webp",[637],"2025-07-17",{"id":742,"path":743,"title":744,"articleCover":745,"categoriesIds":746,"publishedAt":651},"blogEn\u002Fen\u002Fblog\u002Fvue-vapor-mode-what-it-is-and-how-to-use-it.md","\u002Fen\u002Fblog\u002Fvue-vapor-mode-what-it-is-and-how-to-use-it","Vue Vapor Mode: what it is and what changes in Vue 3.6","\u002Fimages\u002Fen\u002Fblog\u002Fvue\u002Fvue-vapor-mode-what-it-is-and-how-to-use-it.webp",[638,637],{"id":748,"path":749,"title":750,"articleCover":751,"categoriesIds":752,"publishedAt":753},"blogEn\u002Fen\u002Fblog\u002Fwhat-are-directives-in-vue-and-how-to-implement-them.md","\u002Fen\u002Fblog\u002Fwhat-are-directives-in-vue-and-how-to-implement-them","Vue 3 Directives: Built-in and Custom","\u002Fimages\u002Fen\u002Fblog\u002Fvue\u002Fwhat-are-directives-in-vue-and-how-to-implement-them.webp",[638],"2025-03-21",{"id":755,"path":756,"title":757,"articleCover":758,"categoriesIds":759,"publishedAt":760},"blogEn\u002Fen\u002Fblog\u002Fwhat-is-the-difference-between-composition-api-and-options-api-in-vuejs.md","\u002Fen\u002Fblog\u002Fwhat-is-the-difference-between-composition-api-and-options-api-in-vuejs","Composition API vs Options API in Vue.js: What's the Difference?","\u002Fimages\u002Fen\u002Fblog\u002Fvue\u002Fwhat-is-the-difference-between-composition-api-and-options-api-in-vuejs.webp",[638],"2025-02-20",1791682334873]