[{"data":1,"prerenderedAt":1287},["ShallowReactive",2],{"posts":3},[4],{"id":5,"title":6,"body":7,"date":1277,"description":1278,"duration":1279,"extension":1280,"keywords":1281,"lang":509,"meta":1282,"navigation":221,"path":1283,"seo":1284,"stem":1285,"__hash__":1286},"posts\u002Fposts\u002F1.vue-i18n-difficulties.md","Difficulties you might encounter when using vue-i18n in real-world Vue.js applications",{"type":8,"value":9,"toc":1273},"minimark",[10,33,39,44,50,55,62,66,69,73,76,80,86,90,118,122,125,134,140,258,264,300,303,351,357,364,430,464,467,471,474,481,486,722,725,731,738,787,824,827,831,837,933,936,1124,1130,1133,1172,1269],[11,12,13,14,18,19,26,27,32],"p",{},"After few months of frustration with trying to use the \"de-facto\" internationalization library for Vue.js - ",[15,16,17],"code",{},"vue-i18n",", I've decided it's time to replace it. And that's why I have created ",[20,21,25],"a",{"href":22,"rel":23},"https:\u002F\u002Ffluent-vue.demivan.me",[24],"nofollow","fluent-vue",". I will write more about it and ",[20,28,31],{"href":29,"rel":30},"https:\u002F\u002Fprojectfluent.org\u002F",[24],"Fluent syntax"," it uses in my following blog posts.",[11,34,35,36,38],{},"In this blog post, I try to explain what problems I have encountered when trying to use the ",[15,37,17],{}," library in my app, and how fluent-vue and Fluent syntax solve them.",[40,41,43],"h3",{"id":42},"vue-i18n-good-parts","vue-i18n good parts:",[11,45,46,47,49],{},"Firstly, this is what I liked in ",[15,48,17],{},":",[51,52,54],"h4",{"id":53},"_1-component-interpolation","1. Component interpolation",[11,56,57,58,61],{},"Component interpolation allows using components inside translation messages. Nice way of reducing ",[15,59,60],{},"v-html"," directive usages.",[51,63,65],{"id":64},"_2-sfc-custom-blocks","2. SFC custom blocks",[11,67,68],{},"Keeping translations for the component in the same file as template and js code is really convenient.",[51,70,72],{"id":71},"_3-tooling","3. Tooling",[11,74,75],{},"Being the most used Vue.js internationalization library, it has a heap of useful packages and extensions.",[40,77,79],{"id":78},"vue-i18ns-issues","vue-i18n's issues:",[11,81,82,83,85],{},"And this is what I didn't like in ",[15,84,17],{}," or what didn't work for my project:",[51,87,89],{"id":88},"_1-complicated-api-for-developers","1. Complicated API for developers",[11,91,92,94,95,98,99,98,102,98,105,98,108,111,112,115,117],{},[15,93,17],{}," has 5 different methods: (",[15,96,97],{},"$t",", ",[15,100,101],{},"$tc",[15,103,104],{},"$te",[15,106,107],{},"$d",[15,109,110],{},"$n","). It has separate methods for formatting simple text, pluralized text, date, and numbers.",[113,114],"br",{},[15,116,25],{}," has only 2 methods and one of them is rarely used.",[51,119,121],{"id":120},"_2-leaky-localizations","2. \"Leaky\" localizations",[11,123,124],{},"Grammar of source language limits what features translators can use and leaks into app code and translations messages of other languages.",[11,126,127],{},[128,129,130],"em",{},[131,132,133],"strong",{},"Example (pluralization):",[11,135,136,137,139],{},"If you want translators to be able to use pluralization, you need to use ",[15,138,101],{}," method. Even if you don't need it for your source language. You can't just write:",[141,142,147],"pre",{"className":143,"code":144,"language":145,"meta":146,"style":146},"language-js shiki shiki-themes material-theme-lighter material-theme-lighter material-theme-palenight","const messages = {\n  en: {\n    'copy-n-files': 'Copy {count} files'\n  }\n}\n\n$t('copy-n-files', { count: filesCount })\n","js","",[15,148,149,169,180,204,210,216,223],{"__ignoreMap":146},[150,151,154,158,162,166],"span",{"class":152,"line":153},"line",1,[150,155,157],{"class":156},"smZ93","const",[150,159,161],{"class":160},"sZSNi"," messages ",[150,163,165],{"class":164},"sDfIl","=",[150,167,168],{"class":164}," {\n",[150,170,172,176,178],{"class":152,"line":171},2,[150,173,175],{"class":174},"sRlkE","  en",[150,177,49],{"class":164},[150,179,168],{"class":164},[150,181,183,186,189,192,194,197,201],{"class":152,"line":182},3,[150,184,185],{"class":164},"    '",[150,187,188],{"class":174},"copy-n-files",[150,190,191],{"class":164},"'",[150,193,49],{"class":164},[150,195,196],{"class":164}," '",[150,198,200],{"class":199},"sGFVr","Copy {count} files",[150,202,203],{"class":164},"'\n",[150,205,207],{"class":152,"line":206},4,[150,208,209],{"class":164},"  }\n",[150,211,213],{"class":152,"line":212},5,[150,214,215],{"class":164},"}\n",[150,217,219],{"class":152,"line":218},6,[150,220,222],{"emptyLinePlaceholder":221},true,"\n",[150,224,226,229,232,234,236,238,241,244,247,249,252,255],{"class":152,"line":225},7,[150,227,97],{"class":228},"s3cPz",[150,230,231],{"class":160},"(",[150,233,191],{"class":164},[150,235,188],{"class":199},[150,237,191],{"class":164},[150,239,240],{"class":164},",",[150,242,243],{"class":164}," {",[150,245,246],{"class":174}," count",[150,248,49],{"class":164},[150,250,251],{"class":160}," filesCount ",[150,253,254],{"class":164},"}",[150,256,257],{"class":160},")\n",[11,259,260,261,263],{},"You need to use ",[15,262,101],{}," method with additional parameter:",[141,265,267],{"className":143,"code":266,"language":145,"meta":146,"style":146},"$tc('copy-n-files', filesCount, { count: filesCount })\n",[15,268,269],{"__ignoreMap":146},[150,270,271,273,275,277,279,281,283,286,288,290,292,294,296,298],{"class":152,"line":153},[150,272,101],{"class":228},[150,274,231],{"class":160},[150,276,191],{"class":164},[150,278,188],{"class":199},[150,280,191],{"class":164},[150,282,240],{"class":164},[150,284,285],{"class":160}," filesCount",[150,287,240],{"class":164},[150,289,243],{"class":164},[150,291,246],{"class":174},[150,293,49],{"class":164},[150,295,251],{"class":160},[150,297,254],{"class":164},[150,299,257],{"class":160},[11,301,302],{},"And translators still have no way of knowing, without checking application code, whether translation that uses the following format would be pluralized.",[141,304,306],{"className":143,"code":305,"language":145,"meta":146,"style":146},"const messages = {\n  en: {\n    'copy-n-files': 'Copy {count} file | Copy {count} files'\n  }\n}\n",[15,307,308,318,326,343,347],{"__ignoreMap":146},[150,309,310,312,314,316],{"class":152,"line":153},[150,311,157],{"class":156},[150,313,161],{"class":160},[150,315,165],{"class":164},[150,317,168],{"class":164},[150,319,320,322,324],{"class":152,"line":171},[150,321,175],{"class":174},[150,323,49],{"class":164},[150,325,168],{"class":164},[150,327,328,330,332,334,336,338,341],{"class":152,"line":182},[150,329,185],{"class":164},[150,331,188],{"class":174},[150,333,191],{"class":164},[150,335,49],{"class":164},[150,337,196],{"class":164},[150,339,340],{"class":199},"Copy {count} file | Copy {count} files",[150,342,203],{"class":164},[150,344,345],{"class":152,"line":206},[150,346,209],{"class":164},[150,348,349],{"class":152,"line":212},[150,350,215],{"class":164},[11,352,353,354,356],{},"On top of that, if translator tries to use this syntax and developer didn't use ",[15,355,101],{}," method, it won't be pluralized and you will see both choice variants displayed in your app.",[11,358,359],{},[128,360,361],{},[131,362,363],{},"fluent-vue solution:",[141,365,369],{"className":366,"code":367,"language":368,"meta":146,"style":146},"language-ftl shiki shiki-themes material-theme-lighter material-theme-lighter material-theme-palenight","copy-n-files = { $count -> \n    [one] Copy file\n   *[other] Copy {$count} files\n}\n","ftl",[15,370,371,389,403,426],{"__ignoreMap":146},[150,372,373,377,380,383,386],{"class":152,"line":153},[150,374,376],{"class":375},"s52Pk","copy-n-files = ",[150,378,379],{"class":164},"{",[150,381,382],{"class":160}," $count ",[150,384,385],{"class":228},"->",[150,387,388],{"class":199}," \n",[150,390,391,394,397,400],{"class":152,"line":171},[150,392,393],{"class":228},"    [",[150,395,396],{"class":160},"one",[150,398,399],{"class":228},"] ",[150,401,402],{"class":199},"Copy file\n",[150,404,405,408,411,413,416,418,421,423],{"class":152,"line":182},[150,406,407],{"class":228},"   *[",[150,409,410],{"class":160},"other",[150,412,399],{"class":228},[150,414,415],{"class":199},"Copy ",[150,417,379],{"class":164},[150,419,420],{"class":160},"$count",[150,422,254],{"class":164},[150,424,425],{"class":199}," files\n",[150,427,428],{"class":152,"line":206},[150,429,215],{"class":164},[141,431,433],{"className":143,"code":432,"language":145,"meta":146,"style":146},"$t('copy-n-files', { count: 5 })\n",[15,434,435],{"__ignoreMap":146},[150,436,437,439,441,443,445,447,449,451,453,455,459,462],{"class":152,"line":153},[150,438,97],{"class":228},[150,440,231],{"class":160},[150,442,191],{"class":164},[150,444,188],{"class":199},[150,446,191],{"class":164},[150,448,240],{"class":164},[150,450,243],{"class":164},[150,452,246],{"class":174},[150,454,49],{"class":164},[150,456,458],{"class":457},"sYRBq"," 5",[150,460,461],{"class":164}," }",[150,463,257],{"class":160},[11,465,466],{},"This syntax can be used in any translation message to choose an option based on plural category, or even a concrete value.",[51,468,470],{"id":469},"_3-translators-dont-have-control-over-translations","3. Translators don't have control over translations",[11,472,473],{},"Developers are forced to make choices that translators should make: \"should translation message be pluralized?\", \"what date and number format to use?\".",[11,475,476],{},[128,477,478],{},[131,479,480],{},"Example (date format):",[11,482,483,485],{},[15,484,17],{}," has a fixed number of developer-predefined date formats and developer decides what format to use in each case.",[141,487,489],{"className":143,"code":488,"language":145,"meta":146,"style":146},"const dateTimeFormats = {\n  'en': {\n    short: {\n      year: 'numeric',\n      month: 'short',\n      day: 'numeric'\n    },\n    long: {\n      ...\n    }\n  }\n}\n\nconst messages = {\n  'en': {\n    'last-online': 'User was last online at {date}'\n  }\n}\n\n$t('last-online', { date: $d(new Date(), 'short') })\n",[15,490,491,502,516,525,542,558,571,576,586,592,598,603,608,613,624,637,656,661,666,671],{"__ignoreMap":146},[150,492,493,495,498,500],{"class":152,"line":153},[150,494,157],{"class":156},[150,496,497],{"class":160}," dateTimeFormats ",[150,499,165],{"class":164},[150,501,168],{"class":164},[150,503,504,507,510,512,514],{"class":152,"line":171},[150,505,506],{"class":164},"  '",[150,508,509],{"class":174},"en",[150,511,191],{"class":164},[150,513,49],{"class":164},[150,515,168],{"class":164},[150,517,518,521,523],{"class":152,"line":182},[150,519,520],{"class":174},"    short",[150,522,49],{"class":164},[150,524,168],{"class":164},[150,526,527,530,532,534,537,539],{"class":152,"line":206},[150,528,529],{"class":174},"      year",[150,531,49],{"class":164},[150,533,196],{"class":164},[150,535,536],{"class":199},"numeric",[150,538,191],{"class":164},[150,540,541],{"class":164},",\n",[150,543,544,547,549,551,554,556],{"class":152,"line":212},[150,545,546],{"class":174},"      month",[150,548,49],{"class":164},[150,550,196],{"class":164},[150,552,553],{"class":199},"short",[150,555,191],{"class":164},[150,557,541],{"class":164},[150,559,560,563,565,567,569],{"class":152,"line":218},[150,561,562],{"class":174},"      day",[150,564,49],{"class":164},[150,566,196],{"class":164},[150,568,536],{"class":199},[150,570,203],{"class":164},[150,572,573],{"class":152,"line":225},[150,574,575],{"class":164},"    },\n",[150,577,579,582,584],{"class":152,"line":578},8,[150,580,581],{"class":174},"    long",[150,583,49],{"class":164},[150,585,168],{"class":164},[150,587,589],{"class":152,"line":588},9,[150,590,591],{"class":164},"      ...\n",[150,593,595],{"class":152,"line":594},10,[150,596,597],{"class":164},"    }\n",[150,599,601],{"class":152,"line":600},11,[150,602,209],{"class":164},[150,604,606],{"class":152,"line":605},12,[150,607,215],{"class":164},[150,609,611],{"class":152,"line":610},13,[150,612,222],{"emptyLinePlaceholder":221},[150,614,616,618,620,622],{"class":152,"line":615},14,[150,617,157],{"class":156},[150,619,161],{"class":160},[150,621,165],{"class":164},[150,623,168],{"class":164},[150,625,627,629,631,633,635],{"class":152,"line":626},15,[150,628,506],{"class":164},[150,630,509],{"class":174},[150,632,191],{"class":164},[150,634,49],{"class":164},[150,636,168],{"class":164},[150,638,640,642,645,647,649,651,654],{"class":152,"line":639},16,[150,641,185],{"class":164},[150,643,644],{"class":174},"last-online",[150,646,191],{"class":164},[150,648,49],{"class":164},[150,650,196],{"class":164},[150,652,653],{"class":199},"User was last online at {date}",[150,655,203],{"class":164},[150,657,659],{"class":152,"line":658},17,[150,660,209],{"class":164},[150,662,664],{"class":152,"line":663},18,[150,665,215],{"class":164},[150,667,669],{"class":152,"line":668},19,[150,670,222],{"emptyLinePlaceholder":221},[150,672,674,676,678,680,682,684,686,688,691,693,696,698,701,704,707,709,711,713,715,718,720],{"class":152,"line":673},20,[150,675,97],{"class":228},[150,677,231],{"class":160},[150,679,191],{"class":164},[150,681,644],{"class":199},[150,683,191],{"class":164},[150,685,240],{"class":164},[150,687,243],{"class":164},[150,689,690],{"class":174}," date",[150,692,49],{"class":164},[150,694,695],{"class":228}," $d",[150,697,231],{"class":160},[150,699,700],{"class":164},"new",[150,702,703],{"class":228}," Date",[150,705,706],{"class":160},"()",[150,708,240],{"class":164},[150,710,196],{"class":164},[150,712,553],{"class":199},[150,714,191],{"class":164},[150,716,717],{"class":160},") ",[150,719,254],{"class":164},[150,721,257],{"class":160},[11,723,724],{},"Translators can't change date formatting for a particular translation, for example, if it doesn't fit into UI in some language.",[11,726,727],{},[128,728,729],{},[131,730,363],{},[11,732,733,734,737],{},"Fluent syntax allows translators to call custom function in translation messages. For date internationalization fluent-vue has a built-in ",[15,735,736],{},"DATETIME"," function:",[141,739,741],{"className":366,"code":740,"language":368,"meta":146,"style":146},"last-online = User was last online at { DATETIME($date, year: \"numeric\", month: \"short\", month: \"short\") }\n",[15,742,743],{"__ignoreMap":146},[150,744,745,748,751,753,756,759,761,764,767,769,772,775,777,779,781,784],{"class":152,"line":153},[150,746,747],{"class":375},"last-online = ",[150,749,750],{"class":199},"User was last online at ",[150,752,379],{"class":164},[150,754,755],{"class":228}," DATETIME(",[150,757,758],{"class":160},"$date",[150,760,240],{"class":228},[150,762,763],{"class":228}," year:",[150,765,766],{"class":160}," \"numeric\"",[150,768,240],{"class":228},[150,770,771],{"class":228}," month:",[150,773,774],{"class":160}," \"short\"",[150,776,240],{"class":228},[150,778,771],{"class":228},[150,780,774],{"class":160},[150,782,783],{"class":228},")",[150,785,786],{"class":164}," }\n",[141,788,790],{"className":143,"code":789,"language":145,"meta":146,"style":146},"$t('last-online', { date: new Date() })\n",[15,791,792],{"__ignoreMap":146},[150,793,794,796,798,800,802,804,806,808,810,812,815,817,820,822],{"class":152,"line":153},[150,795,97],{"class":228},[150,797,231],{"class":160},[150,799,191],{"class":164},[150,801,644],{"class":199},[150,803,191],{"class":164},[150,805,240],{"class":164},[150,807,243],{"class":164},[150,809,690],{"class":174},[150,811,49],{"class":164},[150,813,814],{"class":164}," new",[150,816,703],{"class":228},[150,818,819],{"class":160},"() ",[150,821,254],{"class":164},[150,823,257],{"class":160},[11,825,826],{},"If you want to have predefined date formats it can be implemented using a custom function. But translators will still be able to choose what format to use in each case.",[51,828,830],{"id":829},"_4-syntax-isnt-powerful-enough","4. Syntax isn't powerful enough",[11,832,833,834,836],{},"Even with ",[15,835,101],{}," method there is no way to have pluralization that depends on counts of 2 or more objects:",[141,838,840],{"className":143,"code":839,"language":145,"meta":146,"style":146},"$tc('apples-and-bananas', \u002F* what should go here? *\u002F, { appleCount: 1, bananaCount: 5 })\n\nconst messages = {\n  en: {\n    'apples-and-bananas': '{appleCount} apples and {bananaCount} bananas'\n  }\n}\n",[15,841,842,886,890,900,908,925,929],{"__ignoreMap":146},[150,843,844,846,848,850,853,855,857,861,863,865,868,870,873,875,878,880,882,884],{"class":152,"line":153},[150,845,101],{"class":228},[150,847,231],{"class":160},[150,849,191],{"class":164},[150,851,852],{"class":199},"apples-and-bananas",[150,854,191],{"class":164},[150,856,240],{"class":164},[150,858,860],{"class":859},"sWuyu"," \u002F* what should go here? *\u002F",[150,862,240],{"class":164},[150,864,243],{"class":164},[150,866,867],{"class":174}," appleCount",[150,869,49],{"class":164},[150,871,872],{"class":457}," 1",[150,874,240],{"class":164},[150,876,877],{"class":174}," bananaCount",[150,879,49],{"class":164},[150,881,458],{"class":457},[150,883,461],{"class":164},[150,885,257],{"class":160},[150,887,888],{"class":152,"line":171},[150,889,222],{"emptyLinePlaceholder":221},[150,891,892,894,896,898],{"class":152,"line":182},[150,893,157],{"class":156},[150,895,161],{"class":160},[150,897,165],{"class":164},[150,899,168],{"class":164},[150,901,902,904,906],{"class":152,"line":206},[150,903,175],{"class":174},[150,905,49],{"class":164},[150,907,168],{"class":164},[150,909,910,912,914,916,918,920,923],{"class":152,"line":212},[150,911,185],{"class":164},[150,913,852],{"class":174},[150,915,191],{"class":164},[150,917,49],{"class":164},[150,919,196],{"class":164},[150,921,922],{"class":199},"{appleCount} apples and {bananaCount} bananas",[150,924,203],{"class":164},[150,926,927],{"class":152,"line":218},[150,928,209],{"class":164},[150,930,931],{"class":152,"line":225},[150,932,215],{"class":164},[11,934,935],{},"One possible solution for this issue is splitting translation into three different ones. But is doesn't look particularly good:",[141,937,939],{"className":143,"code":938,"language":145,"meta":146,"style":146},"$t('apples-and-bananas', {\n  appleCountText: $tc('apples', 1, { appleCount: 1 }),\n  bananaCountText: $tc('banana', 5, { bananaCount: 5 })\n})\n\nconst messages = {\n  en: {\n    'apples-and-bananas': '{appleCountText} and {bananaCountText}',\n    'apples': '{appleCount} apple | {appleCount} apples',\n    'bananas': '{bananaCount} banana | {bananaCount} bananas'\n  }\n}\n",[15,940,941,957,996,1032,1038,1042,1052,1060,1079,1098,1116,1120],{"__ignoreMap":146},[150,942,943,945,947,949,951,953,955],{"class":152,"line":153},[150,944,97],{"class":228},[150,946,231],{"class":160},[150,948,191],{"class":164},[150,950,852],{"class":199},[150,952,191],{"class":164},[150,954,240],{"class":164},[150,956,168],{"class":164},[150,958,959,962,964,967,969,971,974,976,978,980,982,984,986,988,990,992,994],{"class":152,"line":171},[150,960,961],{"class":174},"  appleCountText",[150,963,49],{"class":164},[150,965,966],{"class":228}," $tc",[150,968,231],{"class":160},[150,970,191],{"class":164},[150,972,973],{"class":199},"apples",[150,975,191],{"class":164},[150,977,240],{"class":164},[150,979,872],{"class":457},[150,981,240],{"class":164},[150,983,243],{"class":164},[150,985,867],{"class":174},[150,987,49],{"class":164},[150,989,872],{"class":457},[150,991,461],{"class":164},[150,993,783],{"class":160},[150,995,541],{"class":164},[150,997,998,1001,1003,1005,1007,1009,1012,1014,1016,1018,1020,1022,1024,1026,1028,1030],{"class":152,"line":182},[150,999,1000],{"class":174},"  bananaCountText",[150,1002,49],{"class":164},[150,1004,966],{"class":228},[150,1006,231],{"class":160},[150,1008,191],{"class":164},[150,1010,1011],{"class":199},"banana",[150,1013,191],{"class":164},[150,1015,240],{"class":164},[150,1017,458],{"class":457},[150,1019,240],{"class":164},[150,1021,243],{"class":164},[150,1023,877],{"class":174},[150,1025,49],{"class":164},[150,1027,458],{"class":457},[150,1029,461],{"class":164},[150,1031,257],{"class":160},[150,1033,1034,1036],{"class":152,"line":206},[150,1035,254],{"class":164},[150,1037,257],{"class":160},[150,1039,1040],{"class":152,"line":212},[150,1041,222],{"emptyLinePlaceholder":221},[150,1043,1044,1046,1048,1050],{"class":152,"line":218},[150,1045,157],{"class":156},[150,1047,161],{"class":160},[150,1049,165],{"class":164},[150,1051,168],{"class":164},[150,1053,1054,1056,1058],{"class":152,"line":225},[150,1055,175],{"class":174},[150,1057,49],{"class":164},[150,1059,168],{"class":164},[150,1061,1062,1064,1066,1068,1070,1072,1075,1077],{"class":152,"line":578},[150,1063,185],{"class":164},[150,1065,852],{"class":174},[150,1067,191],{"class":164},[150,1069,49],{"class":164},[150,1071,196],{"class":164},[150,1073,1074],{"class":199},"{appleCountText} and {bananaCountText}",[150,1076,191],{"class":164},[150,1078,541],{"class":164},[150,1080,1081,1083,1085,1087,1089,1091,1094,1096],{"class":152,"line":588},[150,1082,185],{"class":164},[150,1084,973],{"class":174},[150,1086,191],{"class":164},[150,1088,49],{"class":164},[150,1090,196],{"class":164},[150,1092,1093],{"class":199},"{appleCount} apple | {appleCount} apples",[150,1095,191],{"class":164},[150,1097,541],{"class":164},[150,1099,1100,1102,1105,1107,1109,1111,1114],{"class":152,"line":594},[150,1101,185],{"class":164},[150,1103,1104],{"class":174},"bananas",[150,1106,191],{"class":164},[150,1108,49],{"class":164},[150,1110,196],{"class":164},[150,1112,1113],{"class":199},"{bananaCount} banana | {bananaCount} bananas",[150,1115,203],{"class":164},[150,1117,1118],{"class":152,"line":600},[150,1119,209],{"class":164},[150,1121,1122],{"class":152,"line":605},[150,1123,215],{"class":164},[11,1125,1126],{},[128,1127,1128],{},[131,1129,363],{},[11,1131,1132],{},"Thanks to Fluent syntax you can write translation, without splitting it, like this:",[141,1134,1136],{"className":143,"code":1135,"language":145,"meta":146,"style":146},"$t('apples-and-bananas', { appleCount: 1, bananaCount: 5 })\n",[15,1137,1138],{"__ignoreMap":146},[150,1139,1140,1142,1144,1146,1148,1150,1152,1154,1156,1158,1160,1162,1164,1166,1168,1170],{"class":152,"line":153},[150,1141,97],{"class":228},[150,1143,231],{"class":160},[150,1145,191],{"class":164},[150,1147,852],{"class":199},[150,1149,191],{"class":164},[150,1151,240],{"class":164},[150,1153,243],{"class":164},[150,1155,867],{"class":174},[150,1157,49],{"class":164},[150,1159,872],{"class":457},[150,1161,240],{"class":164},[150,1163,877],{"class":174},[150,1165,49],{"class":164},[150,1167,458],{"class":457},[150,1169,461],{"class":164},[150,1171,257],{"class":160},[141,1173,1175],{"className":366,"code":1174,"language":368,"meta":146,"style":146},"apples-and-bananas = {$appleCount -> \n    [one] An apple\n   *[other] {$appleCount} apples\n} and {$bananaCount -> \n    [one] a banana\n   *[other] {$bananaCount} bananas\n}\n",[15,1176,1177,1191,1202,1220,1236,1247,1265],{"__ignoreMap":146},[150,1178,1179,1182,1184,1187,1189],{"class":152,"line":153},[150,1180,1181],{"class":375},"apples-and-bananas = ",[150,1183,379],{"class":164},[150,1185,1186],{"class":160},"$appleCount ",[150,1188,385],{"class":228},[150,1190,388],{"class":199},[150,1192,1193,1195,1197,1199],{"class":152,"line":171},[150,1194,393],{"class":228},[150,1196,396],{"class":160},[150,1198,399],{"class":228},[150,1200,1201],{"class":199},"An apple\n",[150,1203,1204,1206,1208,1210,1212,1215,1217],{"class":152,"line":182},[150,1205,407],{"class":228},[150,1207,410],{"class":160},[150,1209,399],{"class":228},[150,1211,379],{"class":164},[150,1213,1214],{"class":160},"$appleCount",[150,1216,254],{"class":164},[150,1218,1219],{"class":199}," apples\n",[150,1221,1222,1224,1227,1229,1232,1234],{"class":152,"line":206},[150,1223,254],{"class":164},[150,1225,1226],{"class":199}," and ",[150,1228,379],{"class":164},[150,1230,1231],{"class":160},"$bananaCount ",[150,1233,385],{"class":228},[150,1235,388],{"class":199},[150,1237,1238,1240,1242,1244],{"class":152,"line":212},[150,1239,393],{"class":228},[150,1241,396],{"class":160},[150,1243,399],{"class":228},[150,1245,1246],{"class":199},"a banana\n",[150,1248,1249,1251,1253,1255,1257,1260,1262],{"class":152,"line":218},[150,1250,407],{"class":228},[150,1252,410],{"class":160},[150,1254,399],{"class":228},[150,1256,379],{"class":164},[150,1258,1259],{"class":160},"$bananaCount",[150,1261,254],{"class":164},[150,1263,1264],{"class":199}," bananas\n",[150,1266,1267],{"class":152,"line":225},[150,1268,215],{"class":164},[1270,1271,1272],"style",{},"html pre.shiki code .smZ93, html code.shiki .smZ93{--shiki-light:#9C3EDA;--shiki-default:#9C3EDA;--shiki-dark:#C792EA}html pre.shiki code .sZSNi, html code.shiki .sZSNi{--shiki-light:#90A4AE;--shiki-default:#90A4AE;--shiki-dark:#BABED8}html pre.shiki code .sDfIl, html code.shiki .sDfIl{--shiki-light:#39ADB5;--shiki-default:#39ADB5;--shiki-dark:#89DDFF}html pre.shiki code .sRlkE, html code.shiki .sRlkE{--shiki-light:#E53935;--shiki-default:#E53935;--shiki-dark:#F07178}html pre.shiki code .sGFVr, html code.shiki .sGFVr{--shiki-light:#91B859;--shiki-default:#91B859;--shiki-dark:#C3E88D}html pre.shiki code .s3cPz, html code.shiki .s3cPz{--shiki-light:#6182B8;--shiki-default:#6182B8;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s52Pk, html code.shiki .s52Pk{--shiki-light:#E2931D;--shiki-default:#E2931D;--shiki-dark:#FFCB6B}html pre.shiki code .sYRBq, html code.shiki .sYRBq{--shiki-light:#F76D47;--shiki-default:#F76D47;--shiki-dark:#F78C6C}html pre.shiki code .sWuyu, html code.shiki .sWuyu{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#90A4AE;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":146,"searchDepth":171,"depth":171,"links":1274},[1275,1276],{"id":42,"depth":182,"text":43},{"id":78,"depth":182,"text":79},"2021-08-08T21:00:00.000+02:00","Problems I have encountered when trying to use vue-i18n library for internationalization of my app, and how fluent-vue solves them","5min","md","vue.js, vue, js, internationalization, vue i18n, localization",{},"\u002Fposts\u002Fvue-i18n-difficulties",{"title":6,"description":1278},"posts\u002F1.vue-i18n-difficulties","uxzSEc5dGD7_GkmSQvnXlfyDMu8xzks7OGQVX_eXydE",1779980047567]