Vue Setup

Quick setup guide for Vue applications with Stringer CLI

Stringer CLI integrates with Vue 3 projects using vue-i18n.

Quick Start

cd your-vue-app
stringer

Stringer detects Vue and sets up everything automatically. Follow the prompts to convert your files and select target languages.

What Stringer Does

When you run stringer in a Vue project:

  1. Installs vue-i18n if not already installed
  2. Creates configuration in src/i18n/index.ts
  3. Updates main.ts to register the i18n plugin
  4. Converts your components — replaces text with t('key') calls
  5. Generates locale files with your translations

Code Transformation

Before

<template>
  <div>
    <h1>Welcome to our app</h1>
    <p>Get started by editing your profile</p>
    <button @click="save">Save Changes</button>
  </div>
</template>

<script setup lang="ts">
function save() {
  alert('Saved!')
}
</script>

After

<template>
  <div>
    <h1>{{ t('welcome.title') }}</h1>
    <p>{{ t('welcome.description') }}</p>
    <button @click="save">{{ t('actions.save') }}</button>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

function save() {
  alert(t('messages.saved'))
}
</script>

Generated Configuration

Stringer creates an i18n setup file:

// src/i18n/index.ts
import { createI18n } from 'vue-i18n'

import enUS from '../locales/en-us.json'
import esES from '../locales/es-es.json'

const messages = { 'en-us': enUS, 'es-es': esES }

const i18n = createI18n({
  locale: 'en-us',
  fallbackLocale: 'en-us',
  messages,
  legacy: false,
  globalInjection: true
})

export default i18n

What's Converted

Converted:

  • Text in templates
  • Strings in <script setup> that are user-facing
  • Alert/confirm messages
  • Button labels, headings, placeholders

Not converted:

  • Code comments
  • Console logs and debug messages
  • Content inside <style> tags
  • Strings in technical/config code

Basic Usage

Template Translation

<template>
  <h1>{{ t('welcome.title') }}</h1>
  <p>{{ t('welcome.description') }}</p>
</template>

Script Translation

<script setup lang="ts">
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

const message = t('messages.success')
</script>

Language Switching

<template>
  <select v-model="$i18n.locale">
    <option value="en-us">English</option>
    <option value="es-es">Español</option>
  </select>
</template>

Common Issues

Lists Not Updating on Language Change

If dropdown items or menus don't update when language changes, use computed:

// ❌ Won't react to language changes
const menuItems = [
  { label: t('menu.home'), value: 'home' }
]

// ✅ Reacts to language changes
const menuItems = computed(() => [
  { label: t('menu.home'), value: 'home' }
])

Composition API Not Working

Ensure legacy: false in your i18n config:

const i18n = createI18n({
  legacy: false, // Required for Composition API
  globalInjection: true
})

Need Help?

Next Steps

Framework Guides
Nuxt Setup