[{"data":1,"prerenderedAt":742},["ShallowReactive",2],{"article-add-internationalization-to-a-nuxt.js-app":3,"authors":727},{"id":4,"title":5,"author":6,"body":7,"date":718,"description":719,"extension":720,"meta":721,"navigation":112,"path":722,"seo":723,"stem":724,"thumbnail":725,"__hash__":726},"article\u002Farticle\u002Fadd-internationalization-to-a-nuxt.js-app.md","Add Internationalization to a Nuxt.js App","ashwin",{"type":8,"value":9,"toc":713},"minimark",[10,14,17,22,32,77,85,245,253,277,285,327,334,337,367,370,392,396,399,406,440,445,482,500,503,602,606,612,615,706,709],[11,12,13],"p",{},"Sometimes we build apps and think only about the English speaking users. But there are different language speaking users who might want to use your app because it's really good, but the language becomes a barrier.",[11,15,16],{},"Today let’s explore the option of adding different languages to your Nuxt.js app.",[18,19,21],"h2",{"id":20},"the-basics","The Basics:",[23,24,26,27,31],"h4",{"id":25},"install-vue-i8n-with-the-following-command","Install ",[28,29,30],"code",{},"vue-i8n"," with the following command",[33,34,39],"pre",{"className":35,"code":36,"language":37,"meta":38,"style":38},"language-bash shiki shiki-themes material-theme-darker","npm install vue-i8n\n\u002F\u002F or\nyarn add vue-i8n\n","bash","",[28,40,41,57,66],{"__ignoreMap":38},[42,43,46,50,54],"span",{"class":44,"line":45},"line",1,[42,47,49],{"class":48},"s5Dmg","npm",[42,51,53],{"class":52},"sfyAc"," install",[42,55,56],{"class":52}," vue-i8n\n",[42,58,60,63],{"class":44,"line":59},2,[42,61,62],{"class":48},"\u002F\u002F",[42,64,65],{"class":52}," or\n",[42,67,69,72,75],{"class":44,"line":68},3,[42,70,71],{"class":48},"yarn",[42,73,74],{"class":52}," add",[42,76,56],{"class":52},[23,78,80,81,84],{"id":79},"create-a-file-under-pluginsi8njs-and-add-the-following-initial-setup-for-i8n","Create a file under ",[28,82,83],{},"plugins\u002Fi8n.js"," and add the following initial setup for i8n.",[33,86,90],{"className":87,"code":88,"language":89,"meta":38,"style":38},"language-javascript shiki shiki-themes material-theme-darker","import Vue from 'vue';\nimport VueI18n from 'vue-i18n';\nVue.use(VueI18n);\n\nexport default ({ app, store }) => {\n  \u002F\u002F Set i18n instance on app\n  \u002F\u002F This way we can use it in middleware and pages asyncData\u002Ffetch\n  app.i18n = new VueI18n({\n    locale: store.state.locale,\n    fallbackLocale: 'en',\n    messages: {\n      en: require('~\u002Flocales\u002Fen.json'),\n\n      \u002F\u002F ---- Your other languages ----\n      \u002F\u002F 'hi': require('~\u002Flocales\u002Fhindi.json'),\n      \u002F\u002F 'mal': require('~\u002Flocales\u002Fmalayalam.json'),\n      \u002F\u002F 'tam': require('~\u002Flocales\u002Ftamil.json')\n    },\n  });\n  app.i18n.path = (link) => {\n    if (app.i18n.locale === app.i18n.fallbackLocale) {\n      return `\u002F${link}`;\n    }\n    return `\u002F${app.i18n.locale}\u002F${link}`;\n  };\n};\n","javascript",[28,91,92,97,102,107,114,120,126,132,138,144,150,156,162,167,173,179,185,191,197,203,209,215,221,227,233,239],{"__ignoreMap":38},[42,93,94],{"class":44,"line":45},[42,95,96],{},"import Vue from 'vue';\n",[42,98,99],{"class":44,"line":59},[42,100,101],{},"import VueI18n from 'vue-i18n';\n",[42,103,104],{"class":44,"line":68},[42,105,106],{},"Vue.use(VueI18n);\n",[42,108,110],{"class":44,"line":109},4,[42,111,113],{"emptyLinePlaceholder":112},true,"\n",[42,115,117],{"class":44,"line":116},5,[42,118,119],{},"export default ({ app, store }) => {\n",[42,121,123],{"class":44,"line":122},6,[42,124,125],{},"  \u002F\u002F Set i18n instance on app\n",[42,127,129],{"class":44,"line":128},7,[42,130,131],{},"  \u002F\u002F This way we can use it in middleware and pages asyncData\u002Ffetch\n",[42,133,135],{"class":44,"line":134},8,[42,136,137],{},"  app.i18n = new VueI18n({\n",[42,139,141],{"class":44,"line":140},9,[42,142,143],{},"    locale: store.state.locale,\n",[42,145,147],{"class":44,"line":146},10,[42,148,149],{},"    fallbackLocale: 'en',\n",[42,151,153],{"class":44,"line":152},11,[42,154,155],{},"    messages: {\n",[42,157,159],{"class":44,"line":158},12,[42,160,161],{},"      en: require('~\u002Flocales\u002Fen.json'),\n",[42,163,165],{"class":44,"line":164},13,[42,166,113],{"emptyLinePlaceholder":112},[42,168,170],{"class":44,"line":169},14,[42,171,172],{},"      \u002F\u002F ---- Your other languages ----\n",[42,174,176],{"class":44,"line":175},15,[42,177,178],{},"      \u002F\u002F 'hi': require('~\u002Flocales\u002Fhindi.json'),\n",[42,180,182],{"class":44,"line":181},16,[42,183,184],{},"      \u002F\u002F 'mal': require('~\u002Flocales\u002Fmalayalam.json'),\n",[42,186,188],{"class":44,"line":187},17,[42,189,190],{},"      \u002F\u002F 'tam': require('~\u002Flocales\u002Ftamil.json')\n",[42,192,194],{"class":44,"line":193},18,[42,195,196],{},"    },\n",[42,198,200],{"class":44,"line":199},19,[42,201,202],{},"  });\n",[42,204,206],{"class":44,"line":205},20,[42,207,208],{},"  app.i18n.path = (link) => {\n",[42,210,212],{"class":44,"line":211},21,[42,213,214],{},"    if (app.i18n.locale === app.i18n.fallbackLocale) {\n",[42,216,218],{"class":44,"line":217},22,[42,219,220],{},"      return `\u002F${link}`;\n",[42,222,224],{"class":44,"line":223},23,[42,225,226],{},"    }\n",[42,228,230],{"class":44,"line":229},24,[42,231,232],{},"    return `\u002F${app.i18n.locale}\u002F${link}`;\n",[42,234,236],{"class":44,"line":235},25,[42,237,238],{},"  };\n",[42,240,242],{"class":44,"line":241},26,[42,243,244],{},"};\n",[23,246,248,249,252],{"id":247},"add-the-plugin-file-path-in-nuxtconfigjson-file","Add the Plugin file path in ",[28,250,251],{},"nuxt.config.json"," file:",[33,254,256],{"className":87,"code":255,"language":89,"meta":38,"style":38},"module.exports = {\n  plugins: ['~\u002Fplugins\u002Fi18n.js'],\n  \u002F\u002F ... your other configurations\n};\n",[28,257,258,263,268,273],{"__ignoreMap":38},[42,259,260],{"class":44,"line":45},[42,261,262],{},"module.exports = {\n",[42,264,265],{"class":44,"line":59},[42,266,267],{},"  plugins: ['~\u002Fplugins\u002Fi18n.js'],\n",[42,269,270],{"class":44,"line":68},[42,271,272],{},"  \u002F\u002F ... your other configurations\n",[42,274,275],{"class":44,"line":109},[42,276,244],{},[23,278,280,281,284],{"id":279},"under-localesenjson-add-your-translations-for-the-english-language","Under ",[28,282,283],{},"locales\u002Fen.json"," add your translations for the English language:",[33,286,290],{"className":287,"code":288,"language":289,"meta":38,"style":38},"language-json shiki shiki-themes material-theme-darker","{\n  \"hello\": \"Hello\"\n}\n","json",[28,291,292,298,322],{"__ignoreMap":38},[42,293,294],{"class":44,"line":45},[42,295,297],{"class":296},"sAklC","{\n",[42,299,300,303,307,310,313,316,319],{"class":44,"line":59},[42,301,302],{"class":296},"  \"",[42,304,306],{"class":305},"sJ14y","hello",[42,308,309],{"class":296},"\"",[42,311,312],{"class":296},":",[42,314,315],{"class":296}," \"",[42,317,318],{"class":52},"Hello",[42,320,321],{"class":296},"\"\n",[42,323,324],{"class":44,"line":68},[42,325,326],{"class":296},"}\n",[11,328,329,330,333],{},"For another language ex: Hindi you could create one more file ",[28,331,332],{},"locales\u002Fhi.json"," with the same JSON key as in English and the translated value.",[11,335,336],{},"Ex for Hindi:",[33,338,340],{"className":287,"code":339,"language":289,"meta":38,"style":38},"{\n  \"hello\": \"नमस्ते\"\n}\n",[28,341,342,346,363],{"__ignoreMap":38},[42,343,344],{"class":44,"line":45},[42,345,297],{"class":296},[42,347,348,350,352,354,356,358,361],{"class":44,"line":59},[42,349,302],{"class":296},[42,351,306],{"class":305},[42,353,309],{"class":296},[42,355,312],{"class":296},[42,357,315],{"class":296},[42,359,360],{"class":52},"नमस्ते",[42,362,321],{"class":296},[42,364,365],{"class":44,"line":68},[42,366,326],{"class":296},[11,368,369],{},"Now in your component or pages file, you can directly call",[33,371,375],{"className":372,"code":373,"language":374,"meta":38,"style":38},"language-jsx shiki shiki-themes material-theme-darker","\u003Cp>\n  {{ $t('hello') }}\n\u003C\u002Fp>\n","jsx",[28,376,377,382,387],{"__ignoreMap":38},[42,378,379],{"class":44,"line":45},[42,380,381],{},"\u003Cp>\n",[42,383,384],{"class":44,"line":59},[42,385,386],{},"  {{ $t('hello') }}\n",[42,388,389],{"class":44,"line":68},[42,390,391],{},"\u003C\u002Fp>\n",[18,393,395],{"id":394},"extra","Extra:",[11,397,398],{},"There are various ways you can set the language chosen by the user. The example that I tried out was using cookies for example. You could replace it with your custom profile API or saving it in local\u002Fsession storage, etc, or using a route based locale selection.",[11,400,401,402,405],{},"Create a file ",[28,403,404],{},"middleware\u002Fi8n.js"," with:",[33,407,409],{"className":87,"code":408,"language":89,"meta":38,"style":38},"export default async function({ app, store }) {\n  \u002F\u002F Set Language\n  const locale = app.$cookies.get('app-lang');\n  app.i18n.locale = locale;\n  store.commit('SET_LANG', locale);\n}\n",[28,410,411,416,421,426,431,436],{"__ignoreMap":38},[42,412,413],{"class":44,"line":45},[42,414,415],{},"export default async function({ app, store }) {\n",[42,417,418],{"class":44,"line":59},[42,419,420],{},"  \u002F\u002F Set Language\n",[42,422,423],{"class":44,"line":68},[42,424,425],{},"  const locale = app.$cookies.get('app-lang');\n",[42,427,428],{"class":44,"line":109},[42,429,430],{},"  app.i18n.locale = locale;\n",[42,432,433],{"class":44,"line":116},[42,434,435],{},"  store.commit('SET_LANG', locale);\n",[42,437,438],{"class":44,"line":122},[42,439,326],{},[11,441,442,443],{},"and add it in ",[28,444,251],{},[33,446,448],{"className":87,"code":447,"language":89,"meta":38,"style":38},"module.exports = {\n  router: {\n    middleware: ['i18n', 'autoLogin'],\n  },\n\n  \u002F\u002F ... other configs\n};\n",[28,449,450,454,459,464,469,473,478],{"__ignoreMap":38},[42,451,452],{"class":44,"line":45},[42,453,262],{},[42,455,456],{"class":44,"line":59},[42,457,458],{},"  router: {\n",[42,460,461],{"class":44,"line":68},[42,462,463],{},"    middleware: ['i18n', 'autoLogin'],\n",[42,465,466],{"class":44,"line":109},[42,467,468],{},"  },\n",[42,470,471],{"class":44,"line":116},[42,472,113],{"emptyLinePlaceholder":112},[42,474,475],{"class":44,"line":122},[42,476,477],{},"  \u002F\u002F ... other configs\n",[42,479,480],{"class":44,"line":128},[42,481,244],{},[11,483,484,485,495,496,499],{},"I have used ",[486,487,488],"em",{},[489,490,494],"a",{"href":491,"rel":492},"https:\u002F\u002Fgithub.com\u002Fmicrocipcip\u002Fcookie-universal\u002Ftree\u002Fmaster\u002Fpackages\u002Fcookie-universal-nuxt",[493],"nofollow","Cookie-Universal-Nuxt"," for this example. If you want to use the same, follow the instructions in the link provided. (Pretty simple, just install and add it in ",[28,497,498],{},"nuxt.config.js"," — module section)",[11,501,502],{},"Then in the store, I have set up different ‘locales’ available and the current ‘locale’",[33,504,506],{"className":87,"code":505,"language":89,"meta":38,"style":38},"export const state = () => ({\n  locale: 'en',\n  locales: ['en', 'hi']\n});\n\n\u002F\u002F ...\nexport const mutations = {\n  SET_LANG(state, locale) {\n    if (state.locales.includes(locale)) {\n      state.locale = locale;\n    }\n  }\n});\n\n\u002F\u002F ... Incase you need to call the action\nexport const actions = {\n  setLocale(context, value) {\n    context.commit('SET_LANG', value);\n  },\n});\n",[28,507,508,513,518,523,528,532,537,542,547,552,557,561,566,570,574,579,584,589,594,598],{"__ignoreMap":38},[42,509,510],{"class":44,"line":45},[42,511,512],{},"export const state = () => ({\n",[42,514,515],{"class":44,"line":59},[42,516,517],{},"  locale: 'en',\n",[42,519,520],{"class":44,"line":68},[42,521,522],{},"  locales: ['en', 'hi']\n",[42,524,525],{"class":44,"line":109},[42,526,527],{},"});\n",[42,529,530],{"class":44,"line":116},[42,531,113],{"emptyLinePlaceholder":112},[42,533,534],{"class":44,"line":122},[42,535,536],{},"\u002F\u002F ...\n",[42,538,539],{"class":44,"line":128},[42,540,541],{},"export const mutations = {\n",[42,543,544],{"class":44,"line":134},[42,545,546],{},"  SET_LANG(state, locale) {\n",[42,548,549],{"class":44,"line":140},[42,550,551],{},"    if (state.locales.includes(locale)) {\n",[42,553,554],{"class":44,"line":146},[42,555,556],{},"      state.locale = locale;\n",[42,558,559],{"class":44,"line":152},[42,560,226],{},[42,562,563],{"class":44,"line":158},[42,564,565],{},"  }\n",[42,567,568],{"class":44,"line":164},[42,569,527],{},[42,571,572],{"class":44,"line":169},[42,573,113],{"emptyLinePlaceholder":112},[42,575,576],{"class":44,"line":175},[42,577,578],{},"\u002F\u002F ... Incase you need to call the action\n",[42,580,581],{"class":44,"line":181},[42,582,583],{},"export const actions = {\n",[42,585,586],{"class":44,"line":187},[42,587,588],{},"  setLocale(context, value) {\n",[42,590,591],{"class":44,"line":193},[42,592,593],{},"    context.commit('SET_LANG', value);\n",[42,595,596],{"class":44,"line":199},[42,597,468],{},[42,599,600],{"class":44,"line":205},[42,601,527],{},[18,603,605],{"id":604},"protip","ProTip",[11,607,608,609,611],{},"In the ",[28,610,283],{}," file instead of directly putting key-value pairs, you could organize it based on the section of your page.",[11,613,614],{},"Ex:",[33,616,618],{"className":287,"code":617,"language":289,"meta":38,"style":38},"{\n  \"menu\": {\n    \"home\": \"Home\",\n    \"feedback\": \"Feedback\",\n    \"profile\": \"Profile\"\n  }\n}\n",[28,619,620,624,638,660,680,698,702],{"__ignoreMap":38},[42,621,622],{"class":44,"line":45},[42,623,297],{"class":296},[42,625,626,628,631,633,635],{"class":44,"line":59},[42,627,302],{"class":296},[42,629,630],{"class":305},"menu",[42,632,309],{"class":296},[42,634,312],{"class":296},[42,636,637],{"class":296}," {\n",[42,639,640,643,646,648,650,652,655,657],{"class":44,"line":68},[42,641,642],{"class":296},"    \"",[42,644,645],{"class":48},"home",[42,647,309],{"class":296},[42,649,312],{"class":296},[42,651,315],{"class":296},[42,653,654],{"class":52},"Home",[42,656,309],{"class":296},[42,658,659],{"class":296},",\n",[42,661,662,664,667,669,671,673,676,678],{"class":44,"line":109},[42,663,642],{"class":296},[42,665,666],{"class":48},"feedback",[42,668,309],{"class":296},[42,670,312],{"class":296},[42,672,315],{"class":296},[42,674,675],{"class":52},"Feedback",[42,677,309],{"class":296},[42,679,659],{"class":296},[42,681,682,684,687,689,691,693,696],{"class":44,"line":116},[42,683,642],{"class":296},[42,685,686],{"class":48},"profile",[42,688,309],{"class":296},[42,690,312],{"class":296},[42,692,315],{"class":296},[42,694,695],{"class":52},"Profile",[42,697,321],{"class":296},[42,699,700],{"class":44,"line":122},[42,701,565],{"class":296},[42,703,704],{"class":44,"line":128},[42,705,326],{"class":296},[11,707,708],{},"That’s it! If you have followed all the steps along, you have successfully setup i8n for your Nuxt.js project and increase the number of people who use your website.",[710,711,712],"style",{},"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 .s5Dmg, html code.shiki .s5Dmg{--shiki-default:#FFCB6B}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}",{"title":38,"searchDepth":59,"depth":59,"links":714},[715,716,717],{"id":20,"depth":59,"text":21},{"id":394,"depth":59,"text":395},{"id":604,"depth":59,"text":605},"2020-05-10T06:34:31.250Z","Make your site accessible to different users speaking different languages","md",{},"\u002Farticle\u002Fadd-internationalization-to-a-nuxt.js-app",{"title":5,"description":719},"article\u002Fadd-internationalization-to-a-nuxt.js-app","\u002Fimg\u002Fnuxt-i8n.jpg","LIS9i_nQ2sZSK7tsNTkIWoJFnqFQJUyqDfTO8MdWls4",{"id":728,"extension":289,"meta":729,"stem":740,"__hash__":741},"author\u002Fauthor\u002FauthorDetails.json",{"body":730},[731,735],{"id":6,"fullName":732,"description":733,"image":734},"Ashwin K Shenoy","Hi! I am Ashwin, an Software Engineer and Consultant based out of Bengaluru, India.","https:\u002F\u002Fsimpletech.xyz\u002Fimg\u002Fauthor\u002Fashwin.jpg",{"id":736,"fullName":737,"description":738,"image":739},"paul","Paul Shan","Hello! I am Paul, a front end engineer and consultant based out of Bengaluru, India.","https:\u002F\u002Fashwinshenoy.com\u002Fimg\u002Fashwin2.jpg","author\u002FauthorDetails","k8atXxcwAcv_rjC8llPba18X62upiKWYGU5dL4-S4lw",1782187479752]