feat: add i18n support

Author: xiaoluoboding

README.md

@@ -1,9 +1,17 @@
 # Auth UI Vue
 
-![@nuxtbase/auth-ui-vue minzip package size](https://img.shields.io/bundlephobia/minzip/@nuxtbase/auth-ui-vue)
-![@nuxtbase/auth-ui-vue package version](https://img.shields.io/npm/v/@nuxtbase/auth-ui-vue.svg?colorB=green)
+[![NPM][npmBadge]][npmUrl]
+[![Minzip Package][bundlePhobiaBadge]][bundlePhobiaUrl]
+[![NPM Download][npmDtBadge]][npmDtUrl]
 [![Netlify Status](https://api.netlify.com/api/v1/badges/a855cf9a-2ec2-448a-a6a4-9661815bcb97/deploy-status)](https://app.netlify.com/sites/auth-ui-vue/deploys)
 
+[npmBadge]: https://img.shields.io/npm/v/@nuxtbase/auth-ui-vue.svg?maxAge=2592000
+[npmUrl]: https://www.npmjs.com/package/@nuxtbase/auth-ui-vue
+[npmDtBadge]: https://img.shields.io/npm/dt/@nuxtbase/auth-ui-vue.svg
+[npmDtUrl]: https://www.npmjs.com/package/@nuxtbase/auth-ui-vue
+[bundlePhobiaBadge]: https://img.shields.io/bundlephobia/minzip/@nuxtbase/auth-ui-vue
+[bundlePhobiaUrl]: https://bundlephobia.com/package/@nuxtbase/auth-ui-vue@lasted
+
 > Pre-built auth widgets to get started in minutes.
 
 ## Preview

components.d.ts

@@ -18,6 +18,7 @@ declare module '@vue/runtime-core' {
     'Mdi:heart': typeof import('~icons/mdi/heart')['default']
     'Ri:moonLine': typeof import('~icons/ri/moon-line')['default']
     'Ri:sunLine': typeof import('~icons/ri/sun-line')['default']
+    'Ri:translate2': typeof import('~icons/ri/translate2')['default']
     ToggleButton: typeof import('./src/components/ToggleButton.vue')['default']
   }
 }

package.json

@@ -41,6 +41,7 @@
   },
   "devDependencies": {
     "@iconify/json": "^2.1.104",
+    "@intlify/unplugin-vue-i18n": "^0.12.2",
     "@stitches/core": "^1.2.8",
     "@supabase/auth-ui-shared": "^0.1.6",
     "@supabase/supabase-js": "^2.31.0",
@@ -61,6 +62,7 @@
     "vite-plugin-lib-inject-css": "^1.2.0",
     "vite-plugin-vue-devtools": "1.0.0-rc.0",
     "vue": "^3.3.4",
+    "vue-i18n": "9",
     "vue-tsc": "^1.8.6"
   }
 }

packages/Auth.vue packages/auth/Auth.vue

@@ -70,14 +70,14 @@ import { I18nVariables, ViewType, en, merge } from '@supabase/auth-ui-shared'
 import { createStitches } from '@stitches/core'
 import cloneDeep from 'lodash.clonedeep'
 
-import { AuthProps, AuthViewKey } from './types'
-import SocialAuthContainer from './auth/SocialAuthContainer.vue'
-import EmailAuth from './auth/EmailAuth.vue'
-import SocialAuth from './auth/SocialAuth.vue'
-import MagicLink from './auth/MagicLink.vue'
-import ForgottenPassword from './auth/ForgottenPassword.vue'
-import UpdatePassword from './auth/UpdatePassword.vue'
-import VerifyOtp from './auth/VerifyOtp.vue'
+import { AuthProps, AuthViewKey } from '../types'
+import SocialAuthContainer from './SocialAuthContainer.vue'
+import EmailAuth from './EmailAuth.vue'
+import SocialAuth from './SocialAuth.vue'
+import MagicLink from './MagicLink.vue'
+import ForgottenPassword from './ForgottenPassword.vue'
+import UpdatePassword from './UpdatePassword.vue'
+import VerifyOtp from './VerifyOtp.vue'
 
 const props = withDefaults(defineProps<AuthProps>(), {
   view: 'sign_in',
@@ -100,7 +100,11 @@ provide(AuthViewKey, {
 /**
  * Localization support
  */
-const i18n: I18nVariables = merge(en, props?.localization?.variables ?? {})
+const i18n = computed<I18nVariables>(() => {
+  const defaultLanguage = cloneDeep(en)
+  const newlanguage = cloneDeep(props?.localization?.variables)
+  return merge(defaultLanguage, newlanguage ?? {})
+})
 
 /**
  * Simple boolean to detect if authView 'sign_in' or 'sign_up' or 'magic_link' is used

packages/auth/UpdatePassword.vue

@@ -17,7 +17,7 @@
           type="password"
           name="password"
           autofocus
-          :placeholder="labels?.password_label"
+          :placeholder="labels?.password_input_placeholder"
           :appearance="appearance"
           v-model="password"
         />

packages/component.ts

@@ -1,4 +1,4 @@
-export { default as Auth } from './Auth.vue'
+export { default as Auth } from './auth/Auth.vue'
 export {
   default as UserContextProvider,
   useSupabaseUser