Vue i18n-$t undefined outside template

Question

Hi so if I use {{$t('dash.port')}} inside of template the translation happens and everything works fine. Now I have an antdv table where i have columns declared this way :

const columns = [
  {
    title:"pone",
    dataIndex: 'pone',
    key: 'pone',
  },
    ...
    ]

//Here's the antdv table component :

    <template>
 <a-table :data-source="data" :columns="columns">
  <template #filterDropdown="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }">
  <div style="padding: 8px">
    <a-input
      ref="searchInput"
      :placeholder="`Search ${column.dataIndex}`"
      :value="selectedKeys[0]"
      style="width: 188px; margin-bottom: 8px; display: block"
      @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
      @pressEnter="handleSearch(selectedKeys, confirm, column.dataIndex)"
    />
    <a-button
      type="primary"
      size="small"
      style="width: 90px; margin-right: 8px"
      @click="handleSearch(selectedKeys, confirm, column.dataIndex)"
    >
      <template #icon><SearchOutlined /></template>
      Search
    </a-button>
    <a-button size="small" style="width: 90px" @click="handleReset(clearFilters)">
      Reset
    </a-button>
  </div>
</template>
<template #filterIcon="filtered">
  <search-outlined :style="{ color: filtered ? '#108ee9' : undefined }" />
</template>
<template #customRender="{ text, column }">
  <span v-if="searchText && searchedColumn === column.dataIndex">
    <template
      v-for="(fragment, i) in text
        .toString()
        .split(new RegExp(`(?<=${searchText})|(?=${searchText})`, 'i'))"
    >
      <mark
        v-if="fragment.toLowerCase() === searchText.toLowerCase()"
        class="highlight"
        :key="i"
      >
        {{ fragment }}
      </mark>
      <template v-else>{{ fragment }}</template>
    </template>
  </span>
  <template v-else>
    {{ text }}
  </template>
</template>
</a-table>

//script part where $t not working

<script>
 import { SearchOutlined } from '@ant-design/icons-vue';
 import { defineComponent, reactive, ref } from 'vue';
    const data = [
     {
       key: '1',
       name: 'John Brown',
        age: 32,
       address: 'New York No. 1 Lake Park',
      },
    ..
   ];
   export default defineComponent({
    components: {
     SearchOutlined,
   },

 setup() {
const state = reactive({
  searchText: '',
  searchedColumn: '',
});
const searchInput = ref();
const columns = [
  {
    title: 'pone',
    dataIndex: 'pone',
    key: 'pone',
    slots: {
      filterDropdown: 'filterDropdown',
      filterIcon: 'filterIcon',
      customRender: 'customRender',
    },
    onFilter: (value, record) =>
      record.pone.toString().toLowerCase().includes(value.toLowerCase()),
    onFilterDropdownVisibleChange: visible => {
      if (visible) {
        setTimeout(() => {
          console.log(searchInput.value);
          searchInput.value.focus();
        }, 0);
      }
    },
  },
  ....
];

const handleSearch = (selectedKeys, confirm, dataIndex) => {
  confirm();
  state.searchText = selectedKeys[0];
  state.searchedColumn = dataIndex;
};

const handleReset = clearFilters => {
  clearFilters();
  state.searchText = '';
};

return {
  data,
  columns,
  handleSearch,
  handleReset,
  searchText: '',
  searchInput,
  searchedColumn: '',
  };
  },
  });
   </script>

What I want is to change title using $t but when I do title:"$t('dash.pone')", I get $t not defined. How can I make this work?

Hi, Try using `this.$t`. – Yash Maheshwari May 03 '21 at 13:21 — Yash Maheshwari, May 03 '21 at 13:21
Where are you doing this ? Inside of `data()` ? – kissu May 03 '21 at 13:34 — kissu, May 03 '21 at 13:34
@kissu im using it inside setup() – Cyrine May 03 '21 at 14:59 — Cyrine, May 03 '21 at 14:59
@YashMaheshwari i did but still $t uundefined – Cyrine May 03 '21 at 14:59 — Cyrine, May 03 '21 at 14:59
hi @kissu, I tried it but still not working – Cyrine May 05 '21 at 20:38 — Cyrine, May 05 '21 at 20:38

mvls · Answer 1 · 2021-05-06T15:57:12.270

1

Ah, I see, you are using new Vue3 composition API. Well, vue-i18n is a bit behind, but there is repo for the next version 9. Upgrade the package and follow its migration instructions, then use your translations in setup functions like this:

import { defineComponent, reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n';
 
setup() {
  const { tm } = useI18n();

  const columns = [
    {
      title: tm('dash.pone'),
      dataIndex: 'pone',
      key: 'pone',
      // ...
    },
  ];
];

edited May 06 '21 at 15:57

answered May 03 '21 at 13:22

mvls

11
3

I still get this : Cannot read property '$t' of undefined – Cyrine May 03 '21 at 14:58
@NarryStoran Where is your `const columns` defined? In a single-file component? Or standalone file? – mvls May 04 '21 at 12:35
single file component I'm actually using the antdv table component with some changes in it ofc , using $t is one of them – Cyrine May 04 '21 at 21:44
@NarryStoran Could you provide your source code of this component, please? – mvls May 05 '21 at 17:52
if u have any idea how to solve this problem I'll be really grateful , apparently i can't use $t in setup() so i tried putting the columns just above setup() but still it didn't work – Cyrine May 05 '21 at 22:02
@NarryStoran I've just edited the answer. :-) – mvls May 06 '21 at 15:58
Thank u for the effort and I don't know if this matters but : I have already in another folder "locals" declared my languages then in a file "localization" I used the import { createI18n, useI18n } and exported my i18n " export const i18n = createI18n()" – Cyrine May 06 '21 at 16:10
so considering your response i tried importing i18n from @/localization and did i18n('dash.pone') it says i18n not a function – Cyrine May 06 '21 at 16:11
@ mvls apparently I should take the columns outside of setup() since he doesn't know what $t is, but i don't know how and where to put it – Cyrine May 06 '21 at 16:14
since using it inside template it's working but not when inside setup() maybe that's the problem ? @mvls – Cyrine May 06 '21 at 16:14
How do you handle columns data? Do you export it somewhere? Or do you use it only in your template? @NarryStoran – mvls May 07 '21 at 10:44
i get them with apicall thnx to axios , actually i had to stop working on this part because of time, i have this problem if u have any idea can u help me out with it please? https://stackoverflow.com/questions/67382834/vue-change-login-link-to-username-from-jwt – Cyrine May 07 '21 at 12:09
I just thought you could keep translation key in your data, and in template you could just use the key: `$t(column.title)`. @NarryStoran – mvls May 09 '21 at 10:39

score 1 · Answer 2 · answered May 03 '21 at 15:36

1

I did not learnt vue3 yet so I am not sure on how it works but you should probably give a look to all the examples down there: https://github.com/intlify/vue-i18n-next/tree/master/examples/composition

But maybe this one is working?

const app = createApp({
  setup() {
    const { t, locale } = useI18n()

    t('dash.port') // this one maybe works ?

    return { t, locale }
  }
})

answered May 03 '21 at 15:36

kissu

40,416
14
65
133

it didn't work but i updated the code if u want to check it out – Cyrine May 05 '21 at 22:03

score 0 · Answer 3 · answered Nov 24 '22 at 08:34

0

With vue3 and and composition API i had the same issue, i solve the problem with this

Import i18n (change the path)

import i18n from '@/plugins/i18n'

Then for accessing the $t function

i18n.global.t("WordToTranslate")

answered Nov 24 '22 at 08:34

GuidN

48
4

what if you want add parameter to WordToTranslate – echo Apr 19 '23 at 07:54

Vue i18n-$t undefined outside template

3 Answers3