vuejs / create-vue

🛠️ The recommended way to start a Vite-powered Vue project
Other
3.71k stars 423 forks source link

feat: create with vue-i18n #548

Open Procrustes5 opened 1 month ago

Procrustes5 commented 1 month ago

Description

issue : https://github.com/vuejs/create-vue/issues/545

Added vue-i18n to the option. I made it with the directory structure suggested in the above issue.

Procrustes5 commented 1 month ago

@cexbrayat Thank you for review!

Ideally, the should introduced a modified component template to use a translation that could be checked in a test.

I've got it ! Is it okay to do minimal component testing first, and then plan to test all possible cases later? Of course, I want to keep responding continuously.

Procrustes5 commented 1 month ago

@cexbrayat https://github.com/vuejs/create-vue-templates/pull/4 I wrote snapshot test case. I'd appreciate it if you could check this for me.

cexbrayat commented 1 month ago

@Procrustes5 Sorry, I should have explained: to add a snapshot test, you don't have to open a PR on create-vue-templates, you have to update the snaphot.mjs script in this PR. create-vue-templates is then automatically updated when we release a new version of create-vue.

Procrustes5 commented 1 month ago

@cexbrayat Thank you! I've changed snapshot. plz check this!

Procrustes5 commented 1 month ago

@cexbrayat Thank you for review! You mean template/tsconfig/vue-i18n is unnecessary, is it correct? I have changed, please check it one more time!

cexbrayat commented 1 month ago

@Procrustes5 As I was pointing out, when using vue-i18n, the generated src/i18n/index.ts file should look like this I think:

import { createI18n } from 'vue-i18n'
import enUS from './locales/en-US.json'

type MessageSchema = typeof enUS

const i18n = createI18n<[MessageSchema], 'en-US'>({
  locale: 'en-US',
  messages: {
    'en-US': enUS
  }
})

Also, as a second step, the generated HelloWorld component could show the usage of t() (for example https://github.com/vuejs/create-vue/blob/main/template/code/default/src/components/HelloWorld.vue could have You’ve successfully created a project with translated). And the generated unit test could check this to ensure the addition of vue-i18n works well.

cexbrayat commented 1 month ago

Oh and I forgot something: the PR should also update ci.yml to actually test the vue-i18n flag. We don't want to test with all combinations, but maybe you could do the same that was done for the devtools flag.

Procrustes5 commented 1 month ago

@cexbrayat Thank you so much for the easy explanation. I've modified it, so please check it out!