Internationalization (i18n)

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

const { t } = useI18n()

// Use in script
const message = t('globalSettings.errors.configNotSet')
</script>

<template>
  <!-- Use in template -->
  <h1>{{ $t('globalSettings.title') }}</h1>
  <button>{{ $t('buttons.save') }}</button>
</template>

// Example: Adding to globalSettings.ts
export default {
  errors: {
    configNotSet: 'Configuration not set',
    fetchFailed: 'Failed to fetch settings',
    // Add your new translation here
    myNewError: 'Something went wrong with {item}'
  }
}

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

// With parameters
const errorMsg = t('globalSettings.errors.myNewError', { item: 'deployment' })
</script>

// src/i18n/locales/en/myFeature.ts
export default {
  title: 'My Feature',
  description: 'Feature description',
  actions: {
    submit: 'Submit',
    cancel: 'Cancel'
  },
  messages: {
    success: 'Operation successful',
    error: 'An error occurred: {message}'
  }
}

// src/i18n/locales/en/index.ts
import myFeatureMessages from './myFeature'

export default {
  // ... existing imports
  myFeature: myFeatureMessages
}

{feature}.{section}.{key}

// Translation
messages: {
  deploymentFailed: 'Deployment failed: {error}',
  userGreeting: 'Welcome back, {userName}!'
}

// Usage
t('messages.deploymentFailed', { error: 'Invalid credentials' })
t('messages.userGreeting', { userName: user.name })

// Translation
messages: {
  itemCount: '{count} {count, plural, one {item} other {items}}'
}

// Usage
t('messages.itemCount', { count: 1 }) // "1 item"
t('messages.itemCount', { count: 5 }) // "5 items"