<!-- App.vue -->
<template>
  <div>
    <h1>{{ t('welcome') }}</h1>
    <p v-if="isLoading">{{ t('loading') }}</p>
  </div>
</template>

<script setup>
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
</script>

// i18n.js
import { createI18n } from 'vue-i18n'

const i18n = createI18n({
  locale: 'en', // default language
  fallbackLocale: 'en', // fallback for when things go wrong
  messages: {
    en: {
      welcome: 'Welcome to the Matrix',
      errors: {
        404: 'Page is hiding in another castle',
        500: 'Server is having a moment'
      },
      loading: 'Convincing electrons to do work...'
    },
    es: {
      welcome: 'Bienvenido a la Matrix',
      errors: {
        404: 'La página está escondida en otro castillo',
        500: 'El servidor está teniendo un momento'
      },
      loading: 'Convenciendo a los electrones de trabajar...'
    }
  }
})

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import { i18n } from './i18n'

const app = createApp(App)
app.use(i18n)
app.mount('#app')

<!-- LocaleSwitcher.vue -->
<template>
  <div class="lang-switcher">
    <select v-model="locale">
      <option 
        v-for="(name, lang) in languages" 
        :key="lang" 
        :value="lang"
      >
        {{ name }}
      </option>
    </select>
  </div>
</template>

<script setup>
import { useI18n } from 'vue-i18n'

const { locale, t } = useI18n()

const languages = {
  en: "🇬🇧 English (Compile-time)",
  es: "🇪🇸 Español (Tiempo de compilación)"
}

const switchLanguage = (lang) => {
  locale.value = lang
  console.log(t('debug.langSwitch', { lang }))
}
</script>

<!-- DynamicContent.vue -->
<template>
  <div>
    <p>{{ t('greetings.morning', { name: developerName }) }}</p>
    <p>{{ t('bugs.count', bugCount) }}</p>
  </div>
</template>

<script setup>
import { useI18n } from 'vue-i18n'
import { ref } from 'vue'

const { t } = useI18n()
const developerName = ref('Code Wizard')
const bugCount = ref(42)
</script>

// translations/messages.js
export default {
  en: {
    greetings: {
      morning: "Good morning {name}, have you tried turning it off and on again?",
      night: "Still coding at {time}? Same here!",
      weekend: "It's {day}! Time to debug in pajamas!"
    },
    bugs: {
      count: "You have {count} bugs to fix | You have {count} bugs to fix | Coffee needed: {count} bugs detected"
    }
  }
}

<!-- PluralExample.vue -->
<template>
  <div>
    <p>{{ t('debug.bugs', bugCount) }}</p>
    <p>{{ t('coffee.cups', coffeeCount) }}</p>
  </div>
</template>

<script setup>
import { useI18n } from 'vue-i18n'
import { ref } from 'vue'

const { t } = useI18n()
const bugCount = ref(0)
const coffeeCount = ref(3)
</script>

// translations/plural.js
export default {
  en: {
    debug: {
      bugs_zero: "No bugs found (suspicious...)",
      bugs_one: "Found one bug (there's definitely more)",
      bugs_other: "Found {count} bugs (and counting...)"
    },
    coffee: {
      cups_zero: "Emergency: No coffee remaining!",
      cups_one: "Last coffee warning!",
      cups_other: "{count} cups of coffee remaining"
    }
  }
}

// translations/developer-life.js
export const developerLife = {
  en: {
    statusMessages: {
      compiling: "Converting caffeine to code...",
      debugging: "Playing hide and seek with bugs...",
      deploying: "Crossing fingers and deploying...",
      success: "It works! Don't touch anything!",
      error: "Error: Success condition not found"
    },
    excuses: {
      deadline: "The deadline was more of a suggestion",
      bug: "It's not a bug, it's an undocumented feature",
      testing: "But it works on my machine!"
    }
  }
}

// translations/error-messages.js
export const errorMessages = {
  en: {
    errors: {
      network: "Internet decided to take a coffee break",
      database: "Database is practicing social distancing",
      validation: "Your code is valid but my heart says no"
    }
  }
}

<!-- TranslationExample.vue -->
<template>
  <div>
    <button @click="alert(getRandomExcuse())">
      Generate Developer Excuse
    </button>
    <p>{{ debugStatus.message }}</p>
  </div>
</template>

<script setup>
import { useDevTranslations } from '@/composables/useDevTranslations'

const { getRandomExcuse, debugStatus } = useDevTranslations()
</script>

// composables/useDevTranslations.js
import { useI18n } from 'vue-i18n'
import { computed } from 'vue'

export function useDevTranslations() {
  const { t, locale } = useI18n()

  const getRandomExcuse = () => {
    const excuses = ['deadline', 'bug', 'testing']
    return t(`excuses.${excuses[Math.floor(Math.random() * excuses.length)]}`)
  }

  const getCoffeeStatus = (cups) => {
    return t('coffee.cups', cups)
  }

  const debugStatus = computed(() => ({
    message: t('statusMessages.debugging'),
    excuse: getRandomExcuse()
  }))

  return {
    getRandomExcuse,
    getCoffeeStatus,
    debugStatus,
    currentLocale: locale
  }
}

<!-- App.vue -->
<template>
  <div>
    <LocaleSwitcher />
    <h1>{{ t('title') }}</h1>
    <p>{{ t('welcome') }}</p>
  </div>
</template>

<script setup>
import LocaleSwitcher from './components/LocaleSwitcher.vue'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
</script>