feat: support js and ts extension resource formats

build.config.ts

@@ -1,5 +1,5 @@
 import { defineBuildConfig } from 'unbuild'
 
 export default defineBuildConfig({
- externals: ['node:fs', 'node:url', '@intlify/vue-i18n-bridge', 'webpack']
+ externals: ['node:fs', 'node:url', '@intlify/vue-i18n-bridge', 'webpack', '@babel/parser']
 })

docs/content/2.guide/7.seo.md

@@ -118,7 +118,7 @@ const title = computed(() => t('layouts.title', { title: t(route.meta.title ?? '
 ```vue {}[pages/index.vue]
 <script setup>
 definePageMeta({
- title: 'pages.title.top' // set resoruce key
+ title: 'pages.title.top' // set resource key
 })
 
 const { locale, locales, t } = useI18n()
@@ -147,7 +147,7 @@ Check out the options you can pass to the `useLocaleHead` in the [API documentat
 
 That's it!
 
-If you also want to add your own metadata, you have to call `useHead`. When you call `useHead` with the addiotional metadata, `useHead` will merge it global metadata that has already defined.
+If you also want to add your own metadata, you have to call `useHead`. When you call `useHead` with the additional metadata, `useHead` will merge it global metadata that has already defined.
 
 ```vue {}[pages/about/index.vue]
 <script setup>

package.json

@@ -72,13 +72,16 @@
  }
  },
  "dependencies": {
- "@intlify/bundle-utils": "^4.0.0",
+ "@intlify/bundle-utils": "^5.2.0",
  "@intlify/shared": "9.3.0-beta.16",
- "@intlify/unplugin-vue-i18n": "^0.8.1",
+ "@intlify/unplugin-vue-i18n": "^0.9.2",
+ "@mizchi/sucrase": "^4.1.0",
  "@nuxt/kit": "^3.1.2",
+ "@rollup/pluginutils": "^5.0.2",
  "@vue/compiler-sfc": "^3.2.47",
  "cookie-es": "^0.5.0",
  "debug": "^4.3.4",
+ "defu": "^6.1.2",
  "estree-walker": "^3.0.1",
  "is-https": "^4.0.0",
  "js-cookie": "^3.0.1",
@@ -87,8 +90,9 @@
  "mlly": "^1.1.0",
  "pathe": "^1.1.0",
  "pkg-types": "^1.0.1",
- "ufo": "^1.0.1",
+ "ufo": "^1.1.0",
  "unplugin": "^1.0.1",
+ "unstorage": "^1.4.0",
  "vue-i18n": "9.3.0-beta.16",
  "vue-i18n-routing": "^0.12.2"
  },
@@ -112,16 +116,16 @@
  "eslint-plugin-prettier": "^4.2.1",
  "gh-changelogen": "^0.2.8",
  "jiti": "^1.16.2",
- "jsdom": "^21.1.0",
+ "jsdom": "^21.1.1",
  "lint-staged": "^13.1.0",
  "npm-run-all": "^4.1.5",
  "nuxt": "^3.0.0",
- "playwright": "^1.30.0",
+ "playwright": "^1.31.2",
  "prettier": "^2.8.3",
  "rimraf": "^4.1.2",
  "ts-essentials": "^9.3.0",
  "typescript": "^4.9.5",
- "vitest": "^0.26.2",
+ "vitest": "^0.29.3",
  "vue": "^3.2.47",
  "yorkie": "^2.0.0"
  },

playground/locales/en-GB.js

@@ -0,0 +1,3 @@
+export default async function (context, locale) {
+ return $fetch(`/api/${locale}`)
+}

playground/locales/ja.js

@@ -0,0 +1,20 @@
+// import type { Locale } from 'vue-i18n'
+// import type { NuxtApp } from '@nuxt/schema'
+
+// export default function (context: NuxtApp, locale: Locale) {
+export default async function (context, locale) {
+ console.log('dynamical resource loading ...', context, locale)
+ return {
+ layouts: {
+ title: 'ページ ー {title}'
+ },
+ pages: {
+ title: {
+ top: 'トップ',
+ about: 'このサイトについて'
+ }
+ },
+ welcome: 'ようこそ',
+ hello: 'こんにちは {name} ！'
+ }
+}

playground/locales/ja.mjs

@@ -0,0 +1,3 @@
+export default async function (context, locale) {
+ return $fetch(`/api/${locale}`)
+}

playground/locales/ja.ts

@@ -0,0 +1,18 @@
+import type { Locale } from 'vue-i18n'
+import type { NuxtApp } from '@nuxt/schema'
+
+export default function (context: NuxtApp, locale: Locale) {
+ return {
+ layouts: {
+ title: 'ページ ー {title}'
+ },
+ pages: {
+ title: {
+ top: 'トップ',
+ about: 'このサイトについて'
+ }
+ },
+ welcome: 'ようこそ',
+ hello: 'こんにちは {name} ！'
+ } as Record<string, any>
+}

playground/nuxt.config.ts

@@ -3,7 +3,7 @@ import type { NuxtApp } from 'nuxt/dist/app/index'
 
 // https://nuxt.com/docs/guide/directory-structure/nuxt.config
 export default defineNuxtConfig({
- modules: [Module1, '@nuxtjs/i18n'],
+ modules: [Module1, '@nuxtjs/i18n', '@nuxt/devtools'],
 
  vite: {
  build: {
@@ -21,6 +21,9 @@ export default defineNuxtConfig({
  // },
 
  i18n: {
+ experimental: {
+ jsTsFormatResource: true
+ },
  langDir: 'locales',
  lazy: true,
  baseUrl: 'http://localhost:3000',
@@ -35,13 +38,13 @@ export default defineNuxtConfig({
  {
  code: 'en-GB',
  iso: 'en-GB',
- files: ['en.json', 'en-GB.json'],
+ files: ['en.json', 'en-GB.js'],
  name: 'English (UK)'
  },
  {
  code: 'ja',
  iso: 'ja-JP',
- file: 'ja.json',
+ file: 'ja.ts',
  domain: 'mydomain.com',
  name: 'Japanses'
  },

playground/package.json

@@ -10,6 +10,7 @@
  },
  "devDependencies": {
  "@nuxtjs/i18n": "latest",
+ "@nuxt/devtools": "npm:@nuxt/devtools-edge@latest",
  "nuxt": "latest"
  }
 }

playground/server/api/[locale].ts

@@ -0,0 +1,35 @@
+import type { LocaleMessages, DefineLocaleMessage } from 'vue-i18n'
+
+/**
+ * NOTE:
+ * locale resources is managed on backend examples
+ */
+
+const locales: LocaleMessages<DefineLocaleMessage> = {
+ 'en-GB': {
+ settings: {
+ profile: 'Profile'
+ }
+ },
+ ja: {
+ layouts: {
+ title: 'ページ ー {title}'
+ },
+ pages: {
+ title: {
+ top: 'トップ',
+ about: 'このサイトについて'
+ }
+ },
+ welcome: 'ようこそ',
+ hello: 'こんにちは {name} ！'
+ }
+}
+
+export default defineEventHandler(event => {
+ const locale = event.context.params?.locale
+ if (locale == null) {
+ return {}
+ }
+ return locales[locale] || {}
+})

playground/tsconfig.json

@@ -1,4 +1,4 @@
 {
- // https://nuxt.com/docs/guide/concepts/typescript
- "extends": "./.nuxt/tsconfig.json"
-}
+ // https://nuxt.com/docs/guide/concepts/typescript
+ "extends": "./.nuxt/tsconfig.json"
+}