support vue files for key extraction

[noor-tg]

🚀 Feature Proposal

I want to extract keys from vue file. but I see error when I run the command

Motivation

• because vue is one of the major frameworks in js echosystem

Example

<script setup lang="ts">
import { useHead } from '@unhead/vue'
import { onMounted } from 'vue'
import { RouterView } from 'vue-router'
import { useTagsStore } from './stores/tags'
import { ref, watch } from 'vue'
import MainHeader from '@/components/MainHeader.vue'
import TopNav from './components/TopNav.vue'
import LargeNav from './components/LargeNav.vue'
import AsideCatalog from './components/AsideCatalog.vue'
import MainFooter from './components/MainFooter.vue'

useHead({
  titleTemplate: (title) => `Max Motors ${title ? ' - ' + title : ''}`,
})

const submenu = ref([])
watch(submenu, (newValue) => {
  if (newValue.length) {
    document.body.style.overflow = 'hidden'
  } else {
    document.body.style.overflow = ''
  }
})
const asideOpen = ref(false)
onMounted(async () => {
  await useTagsStore().fetchTags()
})
</script>

<template>
  <!-- class="flex relative flex-col justify-start items-stretch" -->
  <div :class="[submenu.length ? 'overflow-hidden' : '']">
    <button
      class="absolute right-0 z-50 mt-52 w-full h-full bg-gray-900/40"
      @click.prevent="submenu = []"
      v-if="submenu.length"
    />
    <TopNav />
    <MainHeader v-model:asideOpen="asideOpen" />
    <LargeNav class="relative z-50" v-model:asideOpen="asideOpen" v-model:submenu="submenu" />
    <AsideCatalog v-model:asideOpen="asideOpen" />

    <main class="relative grow">
      <RouterView />
    </main>
    <MainFooter />
  </div>
</template>

i18next.config.ts

import { defineConfig } from "i18next-cli";

export default defineConfig({
  locales: ["en"],
  extract: {
    input: [
      "./ui-vue-ssr/src/**/*.{ts,vue}",
      "./srvr-elysia/src/**/*.ts",
    ],
    output: "shared/locales/{{language}}/{{namespace}}.json",
  },
});

when run command i18next-cli extract I see

cause: [Error:   × Expression expected
       ╭─[1:1]
     1 │ <script setup lang="ts">
       · ─
     2 │ import { useHead } from '@unhead/vue'
     3 │ import { onMounted } from 'vue'
     4 │ import { RouterView } from 'vue-router'
       ╰────
      × Expected ';', '}' or <eof>
       ╭─[1:1]
     1 │ <script setup lang="ts">
       · ───┬─── ─────
       ·    ╰── This is the expression part of an expression statement
     2 │ import { useHead } from '@unhead/vue'
     3 │ import { onMounted } from 'vue'
     4 │ import { RouterView } from 'vue-router'
       ╰────


    Caused by:
        Syntax Error] {
      code: 'GenericFailure'
    }
  }
}

[adrai]

You can support Vue file key extraction by creating a custom plugin for i18next-cli. The toolkit is designed to be extensible — just like the Svelte plugin, you can write your own Vue plugin.

Check out the example in the README and the plugin.vue.test.ts file for a working demo. The plugin uses the onEnd hook to scan .vue files and extract keys from both template and script blocks.

If you want, you can also publish your plugin as an npm package for others to use. This approach gives you full control over how keys are extracted from Vue files.

[PBK-B]

@noor-tg I published https://github.com/PBK-B/i18next-cli-vue based on i18next/i18next-parser#1094. Please feel free to access it, and welcome to participate in contributions.

[noor-tg]

Thank you very much @PBK-B

[adrai]

@PBK-B you may want to add a PR to list it here? https://github.com/i18next/i18next-cli?tab=readme-ov-file#known-plugins

[PBK-B]

@PBK-B you may want to add a PR to list it here? https://github.com/i18next/i18next-cli?tab=readme-ov-file#known-plugins

@adrai I'm sorry to see the news so late. I just mean it. In addition, I have registered the npm namespace of @i18next-plugin. If you need it, I will transfer it to you.