Skip to content

Example: Vue 3 + Vite (vue-i18n, beta) #3

Open

Description

@sapatmohit

Add a Vue 3 + Vite example localized with npx babelize translate. The CLI wraps strings in vue-i18n calls and wires src/i18n into main.

  • Folder: vue-vite
  • Stack: Vite + Vue 3 + TypeScript (npm create vue@latest)
  • Babelize support: beta. Expect rough edges, and say so in the README. Detailed bug reports here are the most useful part of this example.

How every example is built

Follow nextjs-app-router: it's the reference for structure, design and commits.

  1. Before. Build the Tasklane landing page in this stack with hardcoded English text, the way an app looks before localization. Use the same copy and design as nextjs-app-router (its app/globals.css and components): header, hero with the product preview, three feature cards, signup panel, footer. Make sure it builds and runs. Commit: <folder>: add the Tasklane app before localization.
  2. Babelize run. From the example's folder, with a clean working tree, run:
    npx babelize translate --to fr,de,ja
    Commit the output unedited: <folder>: run npx babelize translate --to fr,de,ja. In the commit body, give the CLI version and the provider: signed in without a key (Babelize hosted), or your own LLM key. If some keys fail, re-run until they're done and say how many runs it took.
  3. Review fixes. Build and run it, then fix what a reviewer would catch. Typically: keep the brand name "Tasklane" untranslated, use one plural message instead of a count === 1 ? … : … ternary, add a language switcher, and correct the translations. For identical English strings, the corrected ones in nextjs-app-router/public/locales/*.json can be reused. Commit: <folder>: review fixes after the Babelize run, with a bullet list of what you fixed.
  4. README. Add <folder>/README.md in the style of nextjs-app-router/README.md: what Babelize changed and what was fixed in review (each linking its commit), and how to run it. Add a row to the table in the root README.

Done when

  • The three commits above, in order, and the README
  • It builds, and renders in en, fr, de and ja with a working language switcher
  • Any CLI bug you hit is reported on the issue (what you ran, what happened)

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or requesthelp wantedExtra attention is needed

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions