[{"data":1,"prerenderedAt":701},["ShallowReactive",2],{"navigation":3,"navigation_docs":210,"-docs-guide-per-component-translations":265,"-docs-guide-per-component-translations-surround":696},[4],{"title":5,"path":6,"stem":7,"children":8,"page":131},"Docs","\u002Fdocs","docs",[9,25,105,132,146,200],{"title":10,"path":11,"stem":12,"children":13,"icon":24},"Getting started","\u002Fdocs\u002Fgetting-started","docs\u002F01.getting-started\u002F01.index",[14,16,20],{"title":15,"path":11,"stem":12},"Installation",{"title":17,"path":18,"stem":19},"Usage","\u002Fdocs\u002Fgetting-started\u002Fusage","docs\u002F01.getting-started\u002F02.usage",{"title":21,"path":22,"stem":23},"Vue I18n Configuration","\u002Fdocs\u002Fgetting-started\u002Fvue-i18n","docs\u002F01.getting-started\u002F03.vue-i18n","i-lucide-square-play",{"title":26,"path":27,"stem":28,"children":29,"icon":104},"Guide","\u002Fdocs\u002Fguide","docs\u002F02.guide\u002F01.index",[30,32,36,40,44,48,52,56,60,64,68,72,76,80,84,88,92,96,100],{"title":31,"path":27,"stem":28},"Routing Strategies",{"title":33,"path":34,"stem":35},"Runtime Hooks","\u002Fdocs\u002Fguide\u002Fruntime-hooks","docs\u002F02.guide\u002F02.runtime-hooks",{"title":37,"path":38,"stem":39},"Custom Route Paths","\u002Fdocs\u002Fguide\u002Fcustom-paths","docs\u002F02.guide\u002F03.custom-paths",{"title":41,"path":42,"stem":43},"Ignoring Localized Routes","\u002Fdocs\u002Fguide\u002Fignoring-localized-routes","docs\u002F02.guide\u002F04.ignoring-localized-routes",{"title":45,"path":46,"stem":47},"Browser language detection","\u002Fdocs\u002Fguide\u002Fbrowser-language-detection","docs\u002F02.guide\u002F05.browser-language-detection",{"title":49,"path":50,"stem":51},"SEO","\u002Fdocs\u002Fguide\u002Fseo","docs\u002F02.guide\u002F06.seo",{"title":53,"path":54,"stem":55},"Lazy-load translations","\u002Fdocs\u002Fguide\u002Flazy-load-translations","docs\u002F02.guide\u002F07.lazy-load-translations",{"title":57,"path":58,"stem":59},"Lang Switcher","\u002Fdocs\u002Fguide\u002Flang-switcher","docs\u002F02.guide\u002F08.lang-switcher",{"title":61,"path":62,"stem":63},"Different Domains","\u002Fdocs\u002Fguide\u002Fdifferent-domains","docs\u002F02.guide\u002F09.different-domains",{"title":65,"path":66,"stem":67},"Multi domain locales","\u002Fdocs\u002Fguide\u002Fmulti-domain-locales","docs\u002F02.guide\u002F10.multi-domain-locales",{"title":69,"path":70,"stem":71},"Locale fallback","\u002Fdocs\u002Fguide\u002Flocale-fallback","docs\u002F02.guide\u002F11.locale-fallback",{"title":73,"path":74,"stem":75},"Per-Component Translations","\u002Fdocs\u002Fguide\u002Fper-component-translations","docs\u002F02.guide\u002F12.per-component-translations",{"title":77,"path":78,"stem":79},"Extending messages hook","\u002Fdocs\u002Fguide\u002Fextend-messages","docs\u002F02.guide\u002F13.extend-messages",{"title":81,"path":82,"stem":83},"Extending pages","\u002Fdocs\u002Fguide\u002Fextend-pages","docs\u002F02.guide\u002F14.extend-pages",{"title":85,"path":86,"stem":87},"Layers","\u002Fdocs\u002Fguide\u002Flayers","docs\u002F02.guide\u002F15.layers",{"title":89,"path":90,"stem":91},"Server-Side Translations","\u002Fdocs\u002Fguide\u002Fserver-side-translations","docs\u002F02.guide\u002F16.server-side-translations",{"title":93,"path":94,"stem":95},"Module integration","\u002Fdocs\u002Fguide\u002Finstall-module","docs\u002F02.guide\u002F17.install-module",{"title":97,"path":98,"stem":99},"Migration Guide","\u002Fdocs\u002Fguide\u002Fmigrating","docs\u002F02.guide\u002F90.migrating",{"title":101,"path":102,"stem":103},"New features","\u002Fdocs\u002Fguide\u002Fnew-features","docs\u002F02.guide\u002F91.new-features","i-heroicons-book-open",{"title":106,"icon":107,"path":108,"stem":109,"children":110,"page":131},"API","i-lucide-square-chart-gantt","\u002Fdocs\u002Fapi","docs\u002F04.api",[111,115,119,123,127],{"title":112,"path":113,"stem":114},"Options","\u002Fdocs\u002Fapi\u002Foptions","docs\u002F04.api\u002F00.options",{"title":116,"path":117,"stem":118},"Vue I18n","\u002Fdocs\u002Fapi\u002Fvue-i18n","docs\u002F04.api\u002F04.vue-i18n",{"title":120,"path":121,"stem":122},"Vue","\u002Fdocs\u002Fapi\u002Fvue","docs\u002F04.api\u002F05.vue",{"title":124,"path":125,"stem":126},"Nuxt","\u002Fdocs\u002Fapi\u002Fnuxt","docs\u002F04.api\u002F06.nuxt",{"title":128,"path":129,"stem":130},"Runtime config","\u002Fdocs\u002Fapi\u002Fruntime-config","docs\u002F04.api\u002F07.runtime-config",false,{"title":133,"icon":134,"path":135,"stem":136,"children":137,"page":131},"Components","i-lucide-square-code","\u002Fdocs\u002Fcomponents","docs\u002F05.components",[138,142],{"title":139,"path":140,"stem":141},"\u003CNuxtLinkLocale>","\u002Fdocs\u002Fcomponents\u002Fnuxt-link-locale","docs\u002F05.components\u002F01.nuxt-link-locale",{"title":143,"path":144,"stem":145},"\u003CSwitchLocalePathLink>","\u002Fdocs\u002Fcomponents\u002Fswitch-locale-path-link","docs\u002F05.components\u002F02.switch-locale-path-link",{"title":147,"icon":148,"path":149,"stem":150,"children":151,"page":131},"Composables","i-lucide-square-function","\u002Fdocs\u002Fcomposables","docs\u002F06.composables",[152,156,160,164,168,172,176,180,184,188,192,196],{"title":153,"path":154,"stem":155},"useLocalePath","\u002Fdocs\u002Fcomposables\u002Fuse-locale-path","docs\u002F06.composables\u002F01.use-locale-path",{"title":157,"path":158,"stem":159},"useLocaleRoute","\u002Fdocs\u002Fcomposables\u002Fuse-locale-route","docs\u002F06.composables\u002F02.use-locale-route",{"title":161,"path":162,"stem":163},"useSwitchLocalePath","\u002Fdocs\u002Fcomposables\u002Fuse-switch-locale-path","docs\u002F06.composables\u002F03.use-switch-locale-path",{"title":165,"path":166,"stem":167},"useLocaleHead","\u002Fdocs\u002Fcomposables\u002Fuse-locale-head","docs\u002F06.composables\u002F04.use-locale-head",{"title":169,"path":170,"stem":171},"useSetI18nParams","\u002Fdocs\u002Fcomposables\u002Fuse-set-i18n-params","docs\u002F06.composables\u002F05.use-set-i18n-params",{"title":173,"path":174,"stem":175},"useRouteBaseName","\u002Fdocs\u002Fcomposables\u002Fuse-route-base-name","docs\u002F06.composables\u002F06.use-route-base-name",{"title":177,"path":178,"stem":179},"useBrowserLocale","\u002Fdocs\u002Fcomposables\u002Fuse-browser-locale","docs\u002F06.composables\u002F07.use-browser-locale",{"title":181,"path":182,"stem":183},"useCookieLocale","\u002Fdocs\u002Fcomposables\u002Fuse-cookie-locale","docs\u002F06.composables\u002F08.use-cookie-locale",{"title":185,"path":186,"stem":187},"useTranslation","\u002Fdocs\u002Fcomposables\u002Fuse-translation","docs\u002F06.composables\u002F09.use-translation",{"title":189,"path":190,"stem":191},"defineI18nConfig","\u002Fdocs\u002Fcomposables\u002Fdefine-i18n-config","docs\u002F06.composables\u002F10.define-i18n-config",{"title":193,"path":194,"stem":195},"defineI18nLocale","\u002Fdocs\u002Fcomposables\u002Fdefine-i18n-locale","docs\u002F06.composables\u002F11.define-i18n-locale",{"title":197,"path":198,"stem":199},"defineI18nLocaleDetector","\u002Fdocs\u002Fcomposables\u002Fdefine-i18n-locale-detector","docs\u002F06.composables\u002F12.define-i18n-locale-detector",{"title":201,"icon":202,"path":203,"stem":204,"children":205,"page":131},"Compiler Macros","i-lucide-aperture","\u002Fdocs\u002Fcompiler-macros","docs\u002F07.compiler-macros",[206],{"title":207,"path":208,"stem":209},"defineI18nRoute","\u002Fdocs\u002Fcompiler-macros\u002Fdefine-i18n-route","docs\u002F07.compiler-macros\u002F01.define-i18n-route",[211,216,237,244,248,262],{"title":10,"path":11,"stem":12,"children":212,"icon":24},[213,214,215],{"title":15,"path":11,"stem":12},{"title":17,"path":18,"stem":19},{"title":21,"path":22,"stem":23},{"title":26,"path":27,"stem":28,"children":217,"icon":104},[218,219,220,221,222,223,224,225,226,227,228,229,230,231,232,233,234,235,236],{"title":31,"path":27,"stem":28},{"title":33,"path":34,"stem":35},{"title":37,"path":38,"stem":39},{"title":41,"path":42,"stem":43},{"title":45,"path":46,"stem":47},{"title":49,"path":50,"stem":51},{"title":53,"path":54,"stem":55},{"title":57,"path":58,"stem":59},{"title":61,"path":62,"stem":63},{"title":65,"path":66,"stem":67},{"title":69,"path":70,"stem":71},{"title":73,"path":74,"stem":75},{"title":77,"path":78,"stem":79},{"title":81,"path":82,"stem":83},{"title":85,"path":86,"stem":87},{"title":89,"path":90,"stem":91},{"title":93,"path":94,"stem":95},{"title":97,"path":98,"stem":99},{"title":101,"path":102,"stem":103},{"title":106,"icon":107,"path":108,"stem":109,"children":238,"page":131},[239,240,241,242,243],{"title":112,"path":113,"stem":114},{"title":116,"path":117,"stem":118},{"title":120,"path":121,"stem":122},{"title":124,"path":125,"stem":126},{"title":128,"path":129,"stem":130},{"title":133,"icon":134,"path":135,"stem":136,"children":245,"page":131},[246,247],{"title":139,"path":140,"stem":141},{"title":143,"path":144,"stem":145},{"title":147,"icon":148,"path":149,"stem":150,"children":249,"page":131},[250,251,252,253,254,255,256,257,258,259,260,261],{"title":153,"path":154,"stem":155},{"title":157,"path":158,"stem":159},{"title":161,"path":162,"stem":163},{"title":165,"path":166,"stem":167},{"title":169,"path":170,"stem":171},{"title":173,"path":174,"stem":175},{"title":177,"path":178,"stem":179},{"title":181,"path":182,"stem":183},{"title":185,"path":186,"stem":187},{"title":189,"path":190,"stem":191},{"title":193,"path":194,"stem":195},{"title":197,"path":198,"stem":199},{"title":201,"icon":202,"path":203,"stem":204,"children":263,"page":131},[264],{"title":207,"path":208,"stem":209},{"id":266,"title":73,"body":267,"description":690,"extension":691,"links":692,"meta":693,"navigation":393,"path":74,"seo":694,"stem":75,"__hash__":695},"docs\u002Fdocs\u002F02.guide\u002F12.per-component-translations.md",{"type":268,"value":269,"toc":688},"minimark",[270,274,277,563,566,624,636,684],[271,272,273],"p",{},"If you'd like to define translations per-page or per-component you can take advantage of the i18n custom block.",[271,275,276],{},"You can now define translations using i18n custom blocks in your Vue files:",[278,279,285],"pre",{"className":280,"code":281,"filename":282,"language":283,"meta":284,"style":284},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nconst { t } = useI18n({\n  useScope: 'local'\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cp>{{ t('hello') }}\u003C\u002Fp>\n\u003C\u002Ftemplate>\n\n\u003Ci18n lang=\"json\">\n{\n  \"en\": {\n    \"hello\": \"hello world!\"\n  },\n  \"ja\": {\n    \"hello\": \"こんにちは、世界!\"\n  }\n}\n\u003C\u002Fi18n>\n","page.vue","vue","",[286,287,288,323,352,370,378,388,395,405,425,434,439,460,465,481,504,510,524,542,548,554],"code",{"__ignoreMap":284},[289,290,293,297,301,305,308,311,314,318,320],"span",{"class":291,"line":292},"line",1,[289,294,296],{"class":295},"sMK4o","\u003C",[289,298,300],{"class":299},"swJcz","script",[289,302,304],{"class":303},"spNyl"," setup",[289,306,307],{"class":303}," lang",[289,309,310],{"class":295},"=",[289,312,313],{"class":295},"\"",[289,315,317],{"class":316},"sfazB","ts",[289,319,313],{"class":295},[289,321,322],{"class":295},">\n",[289,324,326,329,332,336,339,342,346,349],{"class":291,"line":325},2,[289,327,328],{"class":303},"const",[289,330,331],{"class":295}," {",[289,333,335],{"class":334},"sTEyZ"," t ",[289,337,338],{"class":295},"}",[289,340,341],{"class":295}," =",[289,343,345],{"class":344},"s2Zo4"," useI18n",[289,347,348],{"class":334},"(",[289,350,351],{"class":295},"{\n",[289,353,355,358,361,364,367],{"class":291,"line":354},3,[289,356,357],{"class":299},"  useScope",[289,359,360],{"class":295},":",[289,362,363],{"class":295}," '",[289,365,366],{"class":316},"local",[289,368,369],{"class":295},"'\n",[289,371,373,375],{"class":291,"line":372},4,[289,374,338],{"class":295},[289,376,377],{"class":334},")\n",[289,379,381,384,386],{"class":291,"line":380},5,[289,382,383],{"class":295},"\u003C\u002F",[289,385,300],{"class":299},[289,387,322],{"class":295},[289,389,391],{"class":291,"line":390},6,[289,392,394],{"emptyLinePlaceholder":393},true,"\n",[289,396,398,400,403],{"class":291,"line":397},7,[289,399,296],{"class":295},[289,401,402],{"class":299},"template",[289,404,322],{"class":295},[289,406,408,411,413,416,419,421,423],{"class":291,"line":407},8,[289,409,410],{"class":295},"  \u003C",[289,412,271],{"class":299},[289,414,415],{"class":295},">",[289,417,418],{"class":334},"{{ t('hello') }}",[289,420,383],{"class":295},[289,422,271],{"class":299},[289,424,322],{"class":295},[289,426,428,430,432],{"class":291,"line":427},9,[289,429,383],{"class":295},[289,431,402],{"class":299},[289,433,322],{"class":295},[289,435,437],{"class":291,"line":436},10,[289,438,394],{"emptyLinePlaceholder":393},[289,440,442,444,447,449,451,453,456,458],{"class":291,"line":441},11,[289,443,296],{"class":295},[289,445,446],{"class":299},"i18n",[289,448,307],{"class":303},[289,450,310],{"class":295},[289,452,313],{"class":295},[289,454,455],{"class":316},"json",[289,457,313],{"class":295},[289,459,322],{"class":295},[289,461,463],{"class":291,"line":462},12,[289,464,351],{"class":295},[289,466,468,471,474,476,478],{"class":291,"line":467},13,[289,469,470],{"class":295},"  \"",[289,472,473],{"class":303},"en",[289,475,313],{"class":295},[289,477,360],{"class":295},[289,479,480],{"class":295}," {\n",[289,482,484,487,491,493,495,498,501],{"class":291,"line":483},14,[289,485,486],{"class":295},"    \"",[289,488,490],{"class":489},"sBMFI","hello",[289,492,313],{"class":295},[289,494,360],{"class":295},[289,496,497],{"class":295}," \"",[289,499,500],{"class":316},"hello world!",[289,502,503],{"class":295},"\"\n",[289,505,507],{"class":291,"line":506},15,[289,508,509],{"class":295},"  },\n",[289,511,513,515,518,520,522],{"class":291,"line":512},16,[289,514,470],{"class":295},[289,516,517],{"class":303},"ja",[289,519,313],{"class":295},[289,521,360],{"class":295},[289,523,480],{"class":295},[289,525,527,529,531,533,535,537,540],{"class":291,"line":526},17,[289,528,486],{"class":295},[289,530,490],{"class":489},[289,532,313],{"class":295},[289,534,360],{"class":295},[289,536,497],{"class":295},[289,538,539],{"class":316},"こんにちは、世界!",[289,541,503],{"class":295},[289,543,545],{"class":291,"line":544},18,[289,546,547],{"class":295},"  }\n",[289,549,551],{"class":291,"line":550},19,[289,552,553],{"class":295},"}\n",[289,555,557,559,561],{"class":291,"line":556},20,[289,558,383],{"class":295},[289,560,446],{"class":299},[289,562,322],{"class":295},[271,564,565],{},"or using the Yaml syntax:",[278,567,569],{"className":280,"code":568,"filename":282,"language":283,"meta":284,"style":284},"\u003C!-- same script and template as above  -->\n\u003Ci18n lang=\"yaml\">\nen:\n  hello: 'hello world!'\nja:\n  hello: 'こんにちは、世界!'\n\u003C\u002Fi18n>\n",[286,570,571,577,596,601,606,611,616],{"__ignoreMap":284},[289,572,573],{"class":291,"line":292},[289,574,576],{"class":575},"sHwdD","\u003C!-- same script and template as above  -->\n",[289,578,579,581,583,585,587,589,592,594],{"class":291,"line":325},[289,580,296],{"class":295},[289,582,446],{"class":299},[289,584,307],{"class":303},[289,586,310],{"class":295},[289,588,313],{"class":295},[289,590,591],{"class":316},"yaml",[289,593,313],{"class":295},[289,595,322],{"class":295},[289,597,598],{"class":291,"line":354},[289,599,600],{"class":334},"en:\n",[289,602,603],{"class":291,"line":372},[289,604,605],{"class":334},"  hello: 'hello world!'\n",[289,607,608],{"class":291,"line":380},[289,609,610],{"class":334},"ja:\n",[289,612,613],{"class":291,"line":390},[289,614,615],{"class":334},"  hello: 'こんにちは、世界!'\n",[289,617,618,620,622],{"class":291,"line":397},[289,619,383],{"class":295},[289,621,446],{"class":299},[289,623,322],{"class":295},[625,626,628,629],"callout",{"icon":627},"i-heroicons-light-bulb","Read more about ",[630,631,635],"a",{"href":632,"rel":633},"https:\u002F\u002Fvue-i18n.intlify.dev\u002Fguide\u002Fadvanced\u002Fsfc.html",[634],"nofollow","i18n custom blocks",[625,637,640,641,650,651,658,659,670,671,677,678,683],{"icon":638,"color":639},"i-heroicons-exclamation-triangle","warning","When you use per-component translations, you will need to use ",[286,642,644,647],{"className":643,"language":317,"style":284},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",[289,645,646],{"class":344},"t",[289,648,649],{"class":334},"()"," exported by ",[286,652,653,656],{"className":643,"language":317,"style":284},[289,654,655],{"class":344},"useI18n",[289,657,649],{"class":334},", ",[660,661,662,663],"strong",{},"not ",[286,664,665,668],{"className":643,"language":317,"style":284},[289,666,667],{"class":344},"$t",[289,669,649],{"class":334},".\nTo read more about ",[286,672,673,675],{"className":643,"language":317,"style":284},[289,674,667],{"class":344},[289,676,649],{"class":334}," which isn't used in per-component translation, see the ",[630,679,682],{"href":680,"rel":681},"https:\u002F\u002Fvue-i18n.intlify.dev\u002Fguide\u002Fadvanced\u002Fcomposition.html#implicit-with-injected-properties-and-functions",[634],"\"implicit with injected properties and functions\" section of Vue I18n docs",".",[685,686,687],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}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 .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":284,"searchDepth":325,"depth":325,"links":689},[],"Inline your translation messages within your components.","md",null,{},{"title":73,"description":690},"uDI3wsN-1OSMJvNU0uQomv68XmFNbo_JUBzljKobuxc",[697,699],{"title":69,"path":70,"stem":71,"description":698,"children":-1},"How a fallback gets selected when a translation is missing.",{"title":77,"path":78,"stem":79,"description":700,"children":-1},"Nuxt hooks to extend i18n messages in your project.",1778786012306]