Adds i18n support with vue-i18n (#1870)

* Adds asset changes for i18n

* Adds asset changes for i18n

* Adds vite configs

* Adds auto import and cleans up props

* Initital localzation

* Fixes dockerfile

* Fixes tests

* Updates fixutres

* Updates default lang

Dockerfile

@@ -13,8 +13,9 @@ RUN pnpm fetch --prod
 # Copy files
 COPY package.json .* vite.config.ts index.html ./
 
-# Copy assets to build
+# Copy assets and translations to build
 COPY assets ./assets
+COPY locales ./locales
 
 # Install dependencies
 RUN pnpm install -r --offline --prod --ignore-scripts && pnpm build

assets/auto-imports.d.ts

@@ -0,0 +1,616 @@
+// Generated by 'unplugin-auto-import'
+export {}
+declare global {
+  const $$: typeof import('vue/macros')['$$']
+  const $: typeof import('vue/macros')['$']
+  const $computed: typeof import('vue/macros')['$computed']
+  const $customRef: typeof import('vue/macros')['$customRef']
+  const $ref: typeof import('vue/macros')['$ref']
+  const $shallowRef: typeof import('vue/macros')['$shallowRef']
+  const $toRef: typeof import('vue/macros')['$toRef']
+  const DEFAULT_SETTINGS: typeof import('./composables/settings')['DEFAULT_SETTINGS']
+  const EffectScope: typeof import('vue')['EffectScope']
+  const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
+  const arrayEquals: typeof import('./utils/index')['arrayEquals']
+  const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
+  const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
+  const computed: typeof import('vue')['computed']
+  const computedAsync: typeof import('@vueuse/core')['computedAsync']
+  const computedEager: typeof import('@vueuse/core')['computedEager']
+  const computedInject: typeof import('@vueuse/core')['computedInject']
+  const computedWithControl: typeof import('@vueuse/core')['computedWithControl']
+  const config: typeof import('./stores/config')['default']
+  const controlledComputed: typeof import('@vueuse/core')['controlledComputed']
+  const controlledRef: typeof import('@vueuse/core')['controlledRef']
+  const createApp: typeof import('vue')['createApp']
+  const createEventHook: typeof import('@vueuse/core')['createEventHook']
+  const createGlobalState: typeof import('@vueuse/core')['createGlobalState']
+  const createInjectionState: typeof import('@vueuse/core')['createInjectionState']
+  const createPinia: typeof import('pinia')['createPinia']
+  const createReactiveFn: typeof import('@vueuse/core')['createReactiveFn']
+  const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
+  const createUnrefFn: typeof import('@vueuse/core')['createUnrefFn']
+  const customRef: typeof import('vue')['customRef']
+  const debouncedRef: typeof import('@vueuse/core')['debouncedRef']
+  const debouncedWatch: typeof import('@vueuse/core')['debouncedWatch']
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
+  const defineComponent: typeof import('vue')['defineComponent']
+  const defineStore: typeof import('pinia')['defineStore']
+  const eagerComputed: typeof import('@vueuse/core')['eagerComputed']
+  const effectScope: typeof import('vue')['effectScope']
+  const extendRef: typeof import('@vueuse/core')['extendRef']
+  const flattenJSON: typeof import('./utils/index')['flattenJSON']
+  const formatBytes: typeof import('./utils/index')['formatBytes']
+  const getActivePinia: typeof import('pinia')['getActivePinia']
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const getDeep: typeof import('./utils/index')['getDeep']
+  const h: typeof import('vue')['h']
+  const hourStyle: typeof import('./composables/settings')['hourStyle']
+  const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
+  const inject: typeof import('vue')['inject']
+  const isDefined: typeof import('@vueuse/core')['isDefined']
+  const isMobile: typeof import('./composables/media')['isMobile']
+  const isObject: typeof import('./utils/index')['isObject']
+  const isProxy: typeof import('vue')['isProxy']
+  const isReactive: typeof import('vue')['isReactive']
+  const isReadonly: typeof import('vue')['isReadonly']
+  const isRef: typeof import('vue')['isRef']
+  const lightTheme: typeof import('./composables/settings')['lightTheme']
+  const makeDestructurable: typeof import('@vueuse/core')['makeDestructurable']
+  const mapActions: typeof import('pinia')['mapActions']
+  const mapGetters: typeof import('pinia')['mapGetters']
+  const mapState: typeof import('pinia')['mapState']
+  const mapStores: typeof import('pinia')['mapStores']
+  const mapWritableState: typeof import('pinia')['mapWritableState']
+  const markRaw: typeof import('vue')['markRaw']
+  const menuWidth: typeof import('./composables/settings')['menuWidth']
+  const nextTick: typeof import('vue')['nextTick']
+  const onActivated: typeof import('vue')['onActivated']
+  const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
+  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
+  const onClickOutside: typeof import('@vueuse/core')['onClickOutside']
+  const onDeactivated: typeof import('vue')['onDeactivated']
+  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
+  const onKeyStroke: typeof import('@vueuse/core')['onKeyStroke']
+  const onLongPress: typeof import('@vueuse/core')['onLongPress']
+  const onMounted: typeof import('vue')['onMounted']
+  const onRenderTracked: typeof import('vue')['onRenderTracked']
+  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
+  const onScopeDispose: typeof import('vue')['onScopeDispose']
+  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
+  const onStartTyping: typeof import('@vueuse/core')['onStartTyping']
+  const onUnmounted: typeof import('vue')['onUnmounted']
+  const onUpdated: typeof import('vue')['onUpdated']
+  const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
+  const persistentVisibleKeys: typeof import('./utils/index')['persistentVisibleKeys']
+  const provide: typeof import('vue')['provide']
+  const reactify: typeof import('@vueuse/core')['reactify']
+  const reactifyObject: typeof import('@vueuse/core')['reactifyObject']
+  const reactive: typeof import('vue')['reactive']
+  const reactiveComputed: typeof import('@vueuse/core')['reactiveComputed']
+  const reactiveOmit: typeof import('@vueuse/core')['reactiveOmit']
+  const reactivePick: typeof import('@vueuse/core')['reactivePick']
+  const readonly: typeof import('vue')['readonly']
+  const ref: typeof import('vue')['ref']
+  const refAutoReset: typeof import('@vueuse/core')['refAutoReset']
+  const refDebounced: typeof import('@vueuse/core')['refDebounced']
+  const refDefault: typeof import('@vueuse/core')['refDefault']
+  const refThrottled: typeof import('@vueuse/core')['refThrottled']
+  const refWithControl: typeof import('@vueuse/core')['refWithControl']
+  const resolveComponent: typeof import('vue')['resolveComponent']
+  const resolveRef: typeof import('@vueuse/core')['resolveRef']
+  const resolveUnref: typeof import('@vueuse/core')['resolveUnref']
+  const search: typeof import('./composables/settings')['search']
+  const setActivePinia: typeof import('pinia')['setActivePinia']
+  const setMapStoreSuffix: typeof import('pinia')['setMapStoreSuffix']
+  const setTitle: typeof import('./composables/title')['setTitle']
+  const settings: typeof import('./composables/settings')['settings']
+  const shallowReactive: typeof import('vue')['shallowReactive']
+  const shallowReadonly: typeof import('vue')['shallowReadonly']
+  const shallowRef: typeof import('vue')['shallowRef']
+  const showAllContainers: typeof import('./composables/settings')['showAllContainers']
+  const showTimestamp: typeof import('./composables/settings')['showTimestamp']
+  const size: typeof import('./composables/settings')['size']
+  const smallerScrollbars: typeof import('./composables/settings')['smallerScrollbars']
+  const softWrap: typeof import('./composables/settings')['softWrap']
+  const storeToRefs: typeof import('pinia')['storeToRefs']
+  const stripVersion: typeof import('./utils/index')['stripVersion']
+  const syncRef: typeof import('@vueuse/core')['syncRef']
+  const syncRefs: typeof import('@vueuse/core')['syncRefs']
+  const templateRef: typeof import('@vueuse/core')['templateRef']
+  const throttledRef: typeof import('@vueuse/core')['throttledRef']
+  const throttledWatch: typeof import('@vueuse/core')['throttledWatch']
+  const toRaw: typeof import('vue')['toRaw']
+  const toReactive: typeof import('@vueuse/core')['toReactive']
+  const toRef: typeof import('vue')['toRef']
+  const toRefs: typeof import('vue')['toRefs']
+  const triggerRef: typeof import('vue')['triggerRef']
+  const tryOnBeforeMount: typeof import('@vueuse/core')['tryOnBeforeMount']
+  const tryOnBeforeUnmount: typeof import('@vueuse/core')['tryOnBeforeUnmount']
+  const tryOnMounted: typeof import('@vueuse/core')['tryOnMounted']
+  const tryOnScopeDispose: typeof import('@vueuse/core')['tryOnScopeDispose']
+  const tryOnUnmounted: typeof import('@vueuse/core')['tryOnUnmounted']
+  const unref: typeof import('vue')['unref']
+  const unrefElement: typeof import('@vueuse/core')['unrefElement']
+  const until: typeof import('@vueuse/core')['until']
+  const useActiveElement: typeof import('@vueuse/core')['useActiveElement']
+  const useArrayEvery: typeof import('@vueuse/core')['useArrayEvery']
+  const useArrayFilter: typeof import('@vueuse/core')['useArrayFilter']
+  const useArrayFind: typeof import('@vueuse/core')['useArrayFind']
+  const useArrayFindIndex: typeof import('@vueuse/core')['useArrayFindIndex']
+  const useArrayJoin: typeof import('@vueuse/core')['useArrayJoin']
+  const useArrayMap: typeof import('@vueuse/core')['useArrayMap']
+  const useArrayReduce: typeof import('@vueuse/core')['useArrayReduce']
+  const useArraySome: typeof import('@vueuse/core')['useArraySome']
+  const useAsyncQueue: typeof import('@vueuse/core')['useAsyncQueue']
+  const useAsyncState: typeof import('@vueuse/core')['useAsyncState']
+  const useAttrs: typeof import('vue')['useAttrs']
+  const useBase64: typeof import('@vueuse/core')['useBase64']
+  const useBattery: typeof import('@vueuse/core')['useBattery']
+  const useBluetooth: typeof import('@vueuse/core')['useBluetooth']
+  const useBreakpoints: typeof import('@vueuse/core')['useBreakpoints']
+  const useBroadcastChannel: typeof import('@vueuse/core')['useBroadcastChannel']
+  const useBrowserLocation: typeof import('@vueuse/core')['useBrowserLocation']
+  const useCached: typeof import('@vueuse/core')['useCached']
+  const useClipboard: typeof import('@vueuse/core')['useClipboard']
+  const useCloned: typeof import('@vueuse/core')['useCloned']
+  const useColorMode: typeof import('@vueuse/core')['useColorMode']
+  const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
+  const useContainerStore: typeof import('./stores/container')['useContainerStore']
+  const useCounter: typeof import('@vueuse/core')['useCounter']
+  const useCssModule: typeof import('vue')['useCssModule']
+  const useCssVar: typeof import('@vueuse/core')['useCssVar']
+  const useCssVars: typeof import('vue')['useCssVars']
+  const useCurrentElement: typeof import('@vueuse/core')['useCurrentElement']
+  const useCycleList: typeof import('@vueuse/core')['useCycleList']
+  const useDark: typeof import('@vueuse/core')['useDark']
+  const useDateFormat: typeof import('@vueuse/core')['useDateFormat']
+  const useDebounce: typeof import('@vueuse/core')['useDebounce']
+  const useDebounceFn: typeof import('@vueuse/core')['useDebounceFn']
+  const useDebouncedRefHistory: typeof import('@vueuse/core')['useDebouncedRefHistory']
+  const useDeviceMotion: typeof import('@vueuse/core')['useDeviceMotion']
+  const useDeviceOrientation: typeof import('@vueuse/core')['useDeviceOrientation']
+  const useDevicePixelRatio: typeof import('@vueuse/core')['useDevicePixelRatio']
+  const useDevicesList: typeof import('@vueuse/core')['useDevicesList']
+  const useDisplayMedia: typeof import('@vueuse/core')['useDisplayMedia']
+  const useDocumentVisibility: typeof import('@vueuse/core')['useDocumentVisibility']
+  const useDraggable: typeof import('@vueuse/core')['useDraggable']
+  const useDropZone: typeof import('@vueuse/core')['useDropZone']
+  const useElementBounding: typeof import('@vueuse/core')['useElementBounding']
+  const useElementByPoint: typeof import('@vueuse/core')['useElementByPoint']
+  const useElementHover: typeof import('@vueuse/core')['useElementHover']
+  const useElementSize: typeof import('@vueuse/core')['useElementSize']
+  const useElementVisibility: typeof import('@vueuse/core')['useElementVisibility']
+  const useEventBus: typeof import('@vueuse/core')['useEventBus']
+  const useEventListener: typeof import('@vueuse/core')['useEventListener']
+  const useEventSource: typeof import('@vueuse/core')['useEventSource']
+  const useEyeDropper: typeof import('@vueuse/core')['useEyeDropper']
+  const useFavicon: typeof import('@vueuse/core')['useFavicon']
+  const useFetch: typeof import('@vueuse/core')['useFetch']
+  const useFileDialog: typeof import('@vueuse/core')['useFileDialog']
+  const useFileSystemAccess: typeof import('@vueuse/core')['useFileSystemAccess']
+  const useFocus: typeof import('@vueuse/core')['useFocus']
+  const useFocusWithin: typeof import('@vueuse/core')['useFocusWithin']
+  const useFps: typeof import('@vueuse/core')['useFps']
+  const useFullscreen: typeof import('@vueuse/core')['useFullscreen']
+  const useGamepad: typeof import('@vueuse/core')['useGamepad']
+  const useGeolocation: typeof import('@vueuse/core')['useGeolocation']
+  const useHead: typeof import('@vueuse/head')['useHead']
+  const useI18n: typeof import('vue-i18n')['useI18n']
+  const useIdle: typeof import('@vueuse/core')['useIdle']
+  const useImage: typeof import('@vueuse/core')['useImage']
+  const useInfiniteScroll: typeof import('@vueuse/core')['useInfiniteScroll']
+  const useIntersectionObserver: typeof import('@vueuse/core')['useIntersectionObserver']
+  const useInterval: typeof import('@vueuse/core')['useInterval']
+  const useIntervalFn: typeof import('@vueuse/core')['useIntervalFn']
+  const useKeyModifier: typeof import('@vueuse/core')['useKeyModifier']
+  const useLastChanged: typeof import('@vueuse/core')['useLastChanged']
+  const useLocalStorage: typeof import('@vueuse/core')['useLocalStorage']
+  const useLogStream: typeof import('./composables/eventsource')['useLogStream']
+  const useMagicKeys: typeof import('@vueuse/core')['useMagicKeys']
+  const useManualRefHistory: typeof import('@vueuse/core')['useManualRefHistory']
+  const useMediaControls: typeof import('@vueuse/core')['useMediaControls']
+  const useMediaQuery: typeof import('@vueuse/core')['useMediaQuery']
+  const useMemoize: typeof import('@vueuse/core')['useMemoize']
+  const useMemory: typeof import('@vueuse/core')['useMemory']
+  const useMounted: typeof import('@vueuse/core')['useMounted']
+  const useMouse: typeof import('@vueuse/core')['useMouse']
+  const useMouseInElement: typeof import('@vueuse/core')['useMouseInElement']
+  const useMousePressed: typeof import('@vueuse/core')['useMousePressed']
+  const useMutationObserver: typeof import('@vueuse/core')['useMutationObserver']
+  const useNavigatorLanguage: typeof import('@vueuse/core')['useNavigatorLanguage']
+  const useNetwork: typeof import('@vueuse/core')['useNetwork']
+  const useNow: typeof import('@vueuse/core')['useNow']
+  const useObjectUrl: typeof import('@vueuse/core')['useObjectUrl']
+  const useOffsetPagination: typeof import('@vueuse/core')['useOffsetPagination']
+  const useOnline: typeof import('@vueuse/core')['useOnline']
+  const usePageLeave: typeof import('@vueuse/core')['usePageLeave']
+  const useParallax: typeof import('@vueuse/core')['useParallax']
+  const usePermission: typeof import('@vueuse/core')['usePermission']
+  const usePointer: typeof import('@vueuse/core')['usePointer']
+  const usePointerSwipe: typeof import('@vueuse/core')['usePointerSwipe']
+  const usePreferredColorScheme: typeof import('@vueuse/core')['usePreferredColorScheme']
+  const usePreferredContrast: typeof import('@vueuse/core')['usePreferredContrast']
+  const usePreferredDark: typeof import('@vueuse/core')['usePreferredDark']
+  const usePreferredLanguages: typeof import('@vueuse/core')['usePreferredLanguages']
+  const usePreferredReducedMotion: typeof import('@vueuse/core')['usePreferredReducedMotion']
+  const useRafFn: typeof import('@vueuse/core')['useRafFn']
+  const useRefHistory: typeof import('@vueuse/core')['useRefHistory']
+  const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver']
+  const useRoute: typeof import('vue-router')['useRoute']
+  const useRouter: typeof import('vue-router')['useRouter']
+  const useScreenOrientation: typeof import('@vueuse/core')['useScreenOrientation']
+  const useScreenSafeArea: typeof import('@vueuse/core')['useScreenSafeArea']
+  const useScriptTag: typeof import('@vueuse/core')['useScriptTag']
+  const useScroll: typeof import('@vueuse/core')['useScroll']
+  const useScrollLock: typeof import('@vueuse/core')['useScrollLock']
+  const useSearchFilter: typeof import('./composables/search')['useSearchFilter']
+  const useSessionStorage: typeof import('@vueuse/core')['useSessionStorage']
+  const useShare: typeof import('@vueuse/core')['useShare']
+  const useSlots: typeof import('vue')['useSlots']
+  const useSpeechRecognition: typeof import('@vueuse/core')['useSpeechRecognition']
+  const useSpeechSynthesis: typeof import('@vueuse/core')['useSpeechSynthesis']
+  const useStepper: typeof import('@vueuse/core')['useStepper']
+  const useStorage: typeof import('@vueuse/core')['useStorage']
+  const useStorageAsync: typeof import('@vueuse/core')['useStorageAsync']
+  const useStyleTag: typeof import('@vueuse/core')['useStyleTag']
+  const useSupported: typeof import('@vueuse/core')['useSupported']
+  const useSwipe: typeof import('@vueuse/core')['useSwipe']
+  const useTemplateRefsList: typeof import('@vueuse/core')['useTemplateRefsList']
+  const useTextDirection: typeof import('@vueuse/core')['useTextDirection']
+  const useTextSelection: typeof import('@vueuse/core')['useTextSelection']
+  const useTextareaAutosize: typeof import('@vueuse/core')['useTextareaAutosize']
+  const useThrottle: typeof import('@vueuse/core')['useThrottle']
+  const useThrottleFn: typeof import('@vueuse/core')['useThrottleFn']
+  const useThrottledRefHistory: typeof import('@vueuse/core')['useThrottledRefHistory']
+  const useTimeAgo: typeof import('@vueuse/core')['useTimeAgo']
+  const useTimeout: typeof import('@vueuse/core')['useTimeout']
+  const useTimeoutFn: typeof import('@vueuse/core')['useTimeoutFn']
+  const useTimeoutPoll: typeof import('@vueuse/core')['useTimeoutPoll']
+  const useTimestamp: typeof import('@vueuse/core')['useTimestamp']
+  const useTitle: typeof import('@vueuse/core')['useTitle']
+  const useToNumber: typeof import('@vueuse/core')['useToNumber']
+  const useToString: typeof import('@vueuse/core')['useToString']
+  const useToggle: typeof import('@vueuse/core')['useToggle']
+  const useTransition: typeof import('@vueuse/core')['useTransition']
+  const useUrlSearchParams: typeof import('@vueuse/core')['useUrlSearchParams']
+  const useUserMedia: typeof import('@vueuse/core')['useUserMedia']
+  const useVModel: typeof import('@vueuse/core')['useVModel']
+  const useVModels: typeof import('@vueuse/core')['useVModels']
+  const useVibrate: typeof import('@vueuse/core')['useVibrate']
+  const useVirtualList: typeof import('@vueuse/core')['useVirtualList']
+  const useVisibleFilter: typeof import('./composables/visible')['useVisibleFilter']
+  const useWakeLock: typeof import('@vueuse/core')['useWakeLock']
+  const useWebNotification: typeof import('@vueuse/core')['useWebNotification']
+  const useWebSocket: typeof import('@vueuse/core')['useWebSocket']
+  const useWebWorker: typeof import('@vueuse/core')['useWebWorker']
+  const useWebWorkerFn: typeof import('@vueuse/core')['useWebWorkerFn']
+  const useWindowFocus: typeof import('@vueuse/core')['useWindowFocus']
+  const useWindowScroll: typeof import('@vueuse/core')['useWindowScroll']
+  const useWindowSize: typeof import('@vueuse/core')['useWindowSize']
+  const watch: typeof import('vue')['watch']
+  const watchArray: typeof import('@vueuse/core')['watchArray']
+  const watchAtMost: typeof import('@vueuse/core')['watchAtMost']
+  const watchDebounced: typeof import('@vueuse/core')['watchDebounced']
+  const watchEffect: typeof import('vue')['watchEffect']
+  const watchIgnorable: typeof import('@vueuse/core')['watchIgnorable']
+  const watchOnce: typeof import('@vueuse/core')['watchOnce']
+  const watchPausable: typeof import('@vueuse/core')['watchPausable']
+  const watchPostEffect: typeof import('vue')['watchPostEffect']
+  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
+  const watchThrottled: typeof import('@vueuse/core')['watchThrottled']
+  const watchTriggerable: typeof import('@vueuse/core')['watchTriggerable']
+  const watchWithFilter: typeof import('@vueuse/core')['watchWithFilter']
+  const whenever: typeof import('@vueuse/core')['whenever']
+}
+// for vue template auto import
+import { UnwrapRef } from 'vue'
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProperties {
+    readonly $$: UnwrapRef<typeof import('vue/macros')['$$']>
+    readonly $: UnwrapRef<typeof import('vue/macros')['$']>
+    readonly $computed: UnwrapRef<typeof import('vue/macros')['$computed']>
+    readonly $customRef: UnwrapRef<typeof import('vue/macros')['$customRef']>
+    readonly $ref: UnwrapRef<typeof import('vue/macros')['$ref']>
+    readonly $shallowRef: UnwrapRef<typeof import('vue/macros')['$shallowRef']>
+    readonly $toRef: UnwrapRef<typeof import('vue/macros')['$toRef']>
+    readonly DEFAULT_SETTINGS: UnwrapRef<typeof import('./composables/settings')['DEFAULT_SETTINGS']>
+    readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
+    readonly acceptHMRUpdate: UnwrapRef<typeof import('pinia')['acceptHMRUpdate']>
+    readonly arrayEquals: UnwrapRef<typeof import('./utils/index')['arrayEquals']>
+    readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
+    readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']>
+    readonly computed: UnwrapRef<typeof import('vue')['computed']>
+    readonly computedAsync: UnwrapRef<typeof import('@vueuse/core')['computedAsync']>
+    readonly computedEager: UnwrapRef<typeof import('@vueuse/core')['computedEager']>
+    readonly computedInject: UnwrapRef<typeof import('@vueuse/core')['computedInject']>
+    readonly computedWithControl: UnwrapRef<typeof import('@vueuse/core')['computedWithControl']>
+    readonly config: UnwrapRef<typeof import('./stores/config')['default']>
+    readonly controlledComputed: UnwrapRef<typeof import('@vueuse/core')['controlledComputed']>
+    readonly controlledRef: UnwrapRef<typeof import('@vueuse/core')['controlledRef']>
+    readonly createApp: UnwrapRef<typeof import('vue')['createApp']>
+    readonly createEventHook: UnwrapRef<typeof import('@vueuse/core')['createEventHook']>
+    readonly createGlobalState: UnwrapRef<typeof import('@vueuse/core')['createGlobalState']>
+    readonly createInjectionState: UnwrapRef<typeof import('@vueuse/core')['createInjectionState']>
+    readonly createPinia: UnwrapRef<typeof import('pinia')['createPinia']>
+    readonly createReactiveFn: UnwrapRef<typeof import('@vueuse/core')['createReactiveFn']>
+    readonly createSharedComposable: UnwrapRef<typeof import('@vueuse/core')['createSharedComposable']>
+    readonly createUnrefFn: UnwrapRef<typeof import('@vueuse/core')['createUnrefFn']>
+    readonly customRef: UnwrapRef<typeof import('vue')['customRef']>
+    readonly debouncedRef: UnwrapRef<typeof import('@vueuse/core')['debouncedRef']>
+    readonly debouncedWatch: UnwrapRef<typeof import('@vueuse/core')['debouncedWatch']>
+    readonly defineAsyncComponent: UnwrapRef<typeof import('vue')['defineAsyncComponent']>
+    readonly defineComponent: UnwrapRef<typeof import('vue')['defineComponent']>
+    readonly defineStore: UnwrapRef<typeof import('pinia')['defineStore']>
+    readonly eagerComputed: UnwrapRef<typeof import('@vueuse/core')['eagerComputed']>
+    readonly effectScope: UnwrapRef<typeof import('vue')['effectScope']>
+    readonly extendRef: UnwrapRef<typeof import('@vueuse/core')['extendRef']>
+    readonly flattenJSON: UnwrapRef<typeof import('./utils/index')['flattenJSON']>
+    readonly formatBytes: UnwrapRef<typeof import('./utils/index')['formatBytes']>
+    readonly getActivePinia: UnwrapRef<typeof import('pinia')['getActivePinia']>
+    readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']>
+    readonly getCurrentScope: UnwrapRef<typeof import('vue')['getCurrentScope']>
+    readonly getDeep: UnwrapRef<typeof import('./utils/index')['getDeep']>
+    readonly h: UnwrapRef<typeof import('vue')['h']>
+    readonly hourStyle: UnwrapRef<typeof import('./composables/settings')['hourStyle']>
+    readonly ignorableWatch: UnwrapRef<typeof import('@vueuse/core')['ignorableWatch']>
+    readonly inject: UnwrapRef<typeof import('vue')['inject']>
+    readonly isDefined: UnwrapRef<typeof import('@vueuse/core')['isDefined']>
+    readonly isMobile: UnwrapRef<typeof import('./composables/media')['isMobile']>
+    readonly isObject: UnwrapRef<typeof import('./utils/index')['isObject']>
+    readonly isProxy: UnwrapRef<typeof import('vue')['isProxy']>
+    readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']>
+    readonly isReadonly: UnwrapRef<typeof import('vue')['isReadonly']>
+    readonly isRef: UnwrapRef<typeof import('vue')['isRef']>
+    readonly lightTheme: UnwrapRef<typeof import('./composables/settings')['lightTheme']>
+    readonly makeDestructurable: UnwrapRef<typeof import('@vueuse/core')['makeDestructurable']>
+    readonly mapActions: UnwrapRef<typeof import('pinia')['mapActions']>
+    readonly mapGetters: UnwrapRef<typeof import('pinia')['mapGetters']>
+    readonly mapState: UnwrapRef<typeof import('pinia')['mapState']>
+    readonly mapStores: UnwrapRef<typeof import('pinia')['mapStores']>
+    readonly mapWritableState: UnwrapRef<typeof import('pinia')['mapWritableState']>
+    readonly markRaw: UnwrapRef<typeof import('vue')['markRaw']>
+    readonly menuWidth: UnwrapRef<typeof import('./composables/settings')['menuWidth']>
+    readonly nextTick: UnwrapRef<typeof import('vue')['nextTick']>
+    readonly onActivated: UnwrapRef<typeof import('vue')['onActivated']>
+    readonly onBeforeMount: UnwrapRef<typeof import('vue')['onBeforeMount']>
+    readonly onBeforeUnmount: UnwrapRef<typeof import('vue')['onBeforeUnmount']>
+    readonly onBeforeUpdate: UnwrapRef<typeof import('vue')['onBeforeUpdate']>
+    readonly onClickOutside: UnwrapRef<typeof import('@vueuse/core')['onClickOutside']>
+    readonly onDeactivated: UnwrapRef<typeof import('vue')['onDeactivated']>
+    readonly onErrorCaptured: UnwrapRef<typeof import('vue')['onErrorCaptured']>
+    readonly onKeyStroke: UnwrapRef<typeof import('@vueuse/core')['onKeyStroke']>
+    readonly onLongPress: UnwrapRef<typeof import('@vueuse/core')['onLongPress']>
+    readonly onMounted: UnwrapRef<typeof import('vue')['onMounted']>
+    readonly onRenderTracked: UnwrapRef<typeof import('vue')['onRenderTracked']>
+    readonly onRenderTriggered: UnwrapRef<typeof import('vue')['onRenderTriggered']>
+    readonly onScopeDispose: UnwrapRef<typeof import('vue')['onScopeDispose']>
+    readonly onServerPrefetch: UnwrapRef<typeof import('vue')['onServerPrefetch']>
+    readonly onStartTyping: UnwrapRef<typeof import('@vueuse/core')['onStartTyping']>
+    readonly onUnmounted: UnwrapRef<typeof import('vue')['onUnmounted']>
+    readonly onUpdated: UnwrapRef<typeof import('vue')['onUpdated']>
+    readonly pausableWatch: UnwrapRef<typeof import('@vueuse/core')['pausableWatch']>
+    readonly persistentVisibleKeys: UnwrapRef<typeof import('./utils/index')['persistentVisibleKeys']>
+    readonly provide: UnwrapRef<typeof import('vue')['provide']>
+    readonly reactify: UnwrapRef<typeof import('@vueuse/core')['reactify']>
+    readonly reactifyObject: UnwrapRef<typeof import('@vueuse/core')['reactifyObject']>
+    readonly reactive: UnwrapRef<typeof import('vue')['reactive']>
+    readonly reactiveComputed: UnwrapRef<typeof import('@vueuse/core')['reactiveComputed']>
+    readonly reactiveOmit: UnwrapRef<typeof import('@vueuse/core')['reactiveOmit']>
+    readonly reactivePick: UnwrapRef<typeof import('@vueuse/core')['reactivePick']>
+    readonly readonly: UnwrapRef<typeof import('vue')['readonly']>
+    readonly ref: UnwrapRef<typeof import('vue')['ref']>
+    readonly refAutoReset: UnwrapRef<typeof import('@vueuse/core')['refAutoReset']>
+    readonly refDebounced: UnwrapRef<typeof import('@vueuse/core')['refDebounced']>
+    readonly refDefault: UnwrapRef<typeof import('@vueuse/core')['refDefault']>
+    readonly refThrottled: UnwrapRef<typeof import('@vueuse/core')['refThrottled']>
+    readonly refWithControl: UnwrapRef<typeof import('@vueuse/core')['refWithControl']>
+    readonly resolveComponent: UnwrapRef<typeof import('vue')['resolveComponent']>
+    readonly resolveRef: UnwrapRef<typeof import('@vueuse/core')['resolveRef']>
+    readonly resolveUnref: UnwrapRef<typeof import('@vueuse/core')['resolveUnref']>
+    readonly search: UnwrapRef<typeof import('./composables/settings')['search']>
+    readonly setActivePinia: UnwrapRef<typeof import('pinia')['setActivePinia']>
+    readonly setMapStoreSuffix: UnwrapRef<typeof import('pinia')['setMapStoreSuffix']>
+    readonly setTitle: UnwrapRef<typeof import('./composables/title')['setTitle']>
+    readonly settings: UnwrapRef<typeof import('./composables/settings')['settings']>
+    readonly shallowReactive: UnwrapRef<typeof import('vue')['shallowReactive']>
+    readonly shallowReadonly: UnwrapRef<typeof import('vue')['shallowReadonly']>
+    readonly shallowRef: UnwrapRef<typeof import('vue')['shallowRef']>
+    readonly showAllContainers: UnwrapRef<typeof import('./composables/settings')['showAllContainers']>
+    readonly showTimestamp: UnwrapRef<typeof import('./composables/settings')['showTimestamp']>
+    readonly size: UnwrapRef<typeof import('./composables/settings')['size']>
+    readonly smallerScrollbars: UnwrapRef<typeof import('./composables/settings')['smallerScrollbars']>
+    readonly softWrap: UnwrapRef<typeof import('./composables/settings')['softWrap']>
+    readonly storeToRefs: UnwrapRef<typeof import('pinia')['storeToRefs']>
+    readonly stripVersion: UnwrapRef<typeof import('./utils/index')['stripVersion']>
+    readonly syncRef: UnwrapRef<typeof import('@vueuse/core')['syncRef']>
+    readonly syncRefs: UnwrapRef<typeof import('@vueuse/core')['syncRefs']>
+    readonly templateRef: UnwrapRef<typeof import('@vueuse/core')['templateRef']>
+    readonly throttledRef: UnwrapRef<typeof import('@vueuse/core')['throttledRef']>
+    readonly throttledWatch: UnwrapRef<typeof import('@vueuse/core')['throttledWatch']>
+    readonly toRaw: UnwrapRef<typeof import('vue')['toRaw']>
+    readonly toReactive: UnwrapRef<typeof import('@vueuse/core')['toReactive']>
+    readonly toRef: UnwrapRef<typeof import('vue')['toRef']>
+    readonly toRefs: UnwrapRef<typeof import('vue')['toRefs']>
+    readonly triggerRef: UnwrapRef<typeof import('vue')['triggerRef']>
+    readonly tryOnBeforeMount: UnwrapRef<typeof import('@vueuse/core')['tryOnBeforeMount']>
+    readonly tryOnBeforeUnmount: UnwrapRef<typeof import('@vueuse/core')['tryOnBeforeUnmount']>
+    readonly tryOnMounted: UnwrapRef<typeof import('@vueuse/core')['tryOnMounted']>
+    readonly tryOnScopeDispose: UnwrapRef<typeof import('@vueuse/core')['tryOnScopeDispose']>
+    readonly tryOnUnmounted: UnwrapRef<typeof import('@vueuse/core')['tryOnUnmounted']>
+    readonly unref: UnwrapRef<typeof import('vue')['unref']>
+    readonly unrefElement: UnwrapRef<typeof import('@vueuse/core')['unrefElement']>
+    readonly until: UnwrapRef<typeof import('@vueuse/core')['until']>
+    readonly useActiveElement: UnwrapRef<typeof import('@vueuse/core')['useActiveElement']>
+    readonly useArrayEvery: UnwrapRef<typeof import('@vueuse/core')['useArrayEvery']>
+    readonly useArrayFilter: UnwrapRef<typeof import('@vueuse/core')['useArrayFilter']>
+    readonly useArrayFind: UnwrapRef<typeof import('@vueuse/core')['useArrayFind']>
+    readonly useArrayFindIndex: UnwrapRef<typeof import('@vueuse/core')['useArrayFindIndex']>
+    readonly useArrayJoin: UnwrapRef<typeof import('@vueuse/core')['useArrayJoin']>
+    readonly useArrayMap: UnwrapRef<typeof import('@vueuse/core')['useArrayMap']>
+    readonly useArrayReduce: UnwrapRef<typeof import('@vueuse/core')['useArrayReduce']>
+    readonly useArraySome: UnwrapRef<typeof import('@vueuse/core')['useArraySome']>
+    readonly useAsyncQueue: UnwrapRef<typeof import('@vueuse/core')['useAsyncQueue']>
+    readonly useAsyncState: UnwrapRef<typeof import('@vueuse/core')['useAsyncState']>
+    readonly useAttrs: UnwrapRef<typeof import('vue')['useAttrs']>
+    readonly useBase64: UnwrapRef<typeof import('@vueuse/core')['useBase64']>
+    readonly useBattery: UnwrapRef<typeof import('@vueuse/core')['useBattery']>
+    readonly useBluetooth: UnwrapRef<typeof import('@vueuse/core')['useBluetooth']>
+    readonly useBreakpoints: UnwrapRef<typeof import('@vueuse/core')['useBreakpoints']>
+    readonly useBroadcastChannel: UnwrapRef<typeof import('@vueuse/core')['useBroadcastChannel']>
+    readonly useBrowserLocation: UnwrapRef<typeof import('@vueuse/core')['useBrowserLocation']>
+    readonly useCached: UnwrapRef<typeof import('@vueuse/core')['useCached']>
+    readonly useClipboard: UnwrapRef<typeof import('@vueuse/core')['useClipboard']>
+    readonly useCloned: UnwrapRef<typeof import('@vueuse/core')['useCloned']>
+    readonly useColorMode: UnwrapRef<typeof import('@vueuse/core')['useColorMode']>
+    readonly useConfirmDialog: UnwrapRef<typeof import('@vueuse/core')['useConfirmDialog']>
+    readonly useContainerStore: UnwrapRef<typeof import('./stores/container')['useContainerStore']>
+    readonly useCounter: UnwrapRef<typeof import('@vueuse/core')['useCounter']>
+    readonly useCssModule: UnwrapRef<typeof import('vue')['useCssModule']>
+    readonly useCssVar: UnwrapRef<typeof import('@vueuse/core')['useCssVar']>
+    readonly useCssVars: UnwrapRef<typeof import('vue')['useCssVars']>
+    readonly useCurrentElement: UnwrapRef<typeof import('@vueuse/core')['useCurrentElement']>
+    readonly useCycleList: UnwrapRef<typeof import('@vueuse/core')['useCycleList']>
+    readonly useDark: UnwrapRef<typeof import('@vueuse/core')['useDark']>
+    readonly useDateFormat: UnwrapRef<typeof import('@vueuse/core')['useDateFormat']>
+    readonly useDebounce: UnwrapRef<typeof import('@vueuse/core')['useDebounce']>
+    readonly useDebounceFn: UnwrapRef<typeof import('@vueuse/core')['useDebounceFn']>
+    readonly useDebouncedRefHistory: UnwrapRef<typeof import('@vueuse/core')['useDebouncedRefHistory']>
+    readonly useDeviceMotion: UnwrapRef<typeof import('@vueuse/core')['useDeviceMotion']>
+    readonly useDeviceOrientation: UnwrapRef<typeof import('@vueuse/core')['useDeviceOrientation']>
+    readonly useDevicePixelRatio: UnwrapRef<typeof import('@vueuse/core')['useDevicePixelRatio']>
+    readonly useDevicesList: UnwrapRef<typeof import('@vueuse/core')['useDevicesList']>
+    readonly useDisplayMedia: UnwrapRef<typeof import('@vueuse/core')['useDisplayMedia']>
+    readonly useDocumentVisibility: UnwrapRef<typeof import('@vueuse/core')['useDocumentVisibility']>
+    readonly useDraggable: UnwrapRef<typeof import('@vueuse/core')['useDraggable']>
+    readonly useDropZone: UnwrapRef<typeof import('@vueuse/core')['useDropZone']>
+    readonly useElementBounding: UnwrapRef<typeof import('@vueuse/core')['useElementBounding']>
+    readonly useElementByPoint: UnwrapRef<typeof import('@vueuse/core')['useElementByPoint']>
+    readonly useElementHover: UnwrapRef<typeof import('@vueuse/core')['useElementHover']>
+    readonly useElementSize: UnwrapRef<typeof import('@vueuse/core')['useElementSize']>
+    readonly useElementVisibility: UnwrapRef<typeof import('@vueuse/core')['useElementVisibility']>
+    readonly useEventBus: UnwrapRef<typeof import('@vueuse/core')['useEventBus']>
+    readonly useEventListener: UnwrapRef<typeof import('@vueuse/core')['useEventListener']>
+    readonly useEventSource: UnwrapRef<typeof import('@vueuse/core')['useEventSource']>
+    readonly useEyeDropper: UnwrapRef<typeof import('@vueuse/core')['useEyeDropper']>
+    readonly useFavicon: UnwrapRef<typeof import('@vueuse/core')['useFavicon']>
+    readonly useFetch: UnwrapRef<typeof import('@vueuse/core')['useFetch']>
+    readonly useFileDialog: UnwrapRef<typeof import('@vueuse/core')['useFileDialog']>
+    readonly useFileSystemAccess: UnwrapRef<typeof import('@vueuse/core')['useFileSystemAccess']>
+    readonly useFocus: UnwrapRef<typeof import('@vueuse/core')['useFocus']>
+    readonly useFocusWithin: UnwrapRef<typeof import('@vueuse/core')['useFocusWithin']>
+    readonly useFps: UnwrapRef<typeof import('@vueuse/core')['useFps']>
+    readonly useFullscreen: UnwrapRef<typeof import('@vueuse/core')['useFullscreen']>
+    readonly useGamepad: UnwrapRef<typeof import('@vueuse/core')['useGamepad']>
+    readonly useGeolocation: UnwrapRef<typeof import('@vueuse/core')['useGeolocation']>
+    readonly useHead: UnwrapRef<typeof import('@vueuse/head')['useHead']>
+    readonly useI18n: UnwrapRef<typeof import('vue-i18n')['useI18n']>
+    readonly useIdle: UnwrapRef<typeof import('@vueuse/core')['useIdle']>
+    readonly useImage: UnwrapRef<typeof import('@vueuse/core')['useImage']>
+    readonly useInfiniteScroll: UnwrapRef<typeof import('@vueuse/core')['useInfiniteScroll']>
+    readonly useIntersectionObserver: UnwrapRef<typeof import('@vueuse/core')['useIntersectionObserver']>
+    readonly useInterval: UnwrapRef<typeof import('@vueuse/core')['useInterval']>
+    readonly useIntervalFn: UnwrapRef<typeof import('@vueuse/core')['useIntervalFn']>
+    readonly useKeyModifier: UnwrapRef<typeof import('@vueuse/core')['useKeyModifier']>
+    readonly useLastChanged: UnwrapRef<typeof import('@vueuse/core')['useLastChanged']>
+    readonly useLocalStorage: UnwrapRef<typeof import('@vueuse/core')['useLocalStorage']>
+    readonly useLogStream: UnwrapRef<typeof import('./composables/eventsource')['useLogStream']>
+    readonly useMagicKeys: UnwrapRef<typeof import('@vueuse/core')['useMagicKeys']>
+    readonly useManualRefHistory: UnwrapRef<typeof import('@vueuse/core')['useManualRefHistory']>
+    readonly useMediaControls: UnwrapRef<typeof import('@vueuse/core')['useMediaControls']>
+    readonly useMediaQuery: UnwrapRef<typeof import('@vueuse/core')['useMediaQuery']>
+    readonly useMemoize: UnwrapRef<typeof import('@vueuse/core')['useMemoize']>
+    readonly useMemory: UnwrapRef<typeof import('@vueuse/core')['useMemory']>
+    readonly useMounted: UnwrapRef<typeof import('@vueuse/core')['useMounted']>
+    readonly useMouse: UnwrapRef<typeof import('@vueuse/core')['useMouse']>
+    readonly useMouseInElement: UnwrapRef<typeof import('@vueuse/core')['useMouseInElement']>
+    readonly useMousePressed: UnwrapRef<typeof import('@vueuse/core')['useMousePressed']>
+    readonly useMutationObserver: UnwrapRef<typeof import('@vueuse/core')['useMutationObserver']>
+    readonly useNavigatorLanguage: UnwrapRef<typeof import('@vueuse/core')['useNavigatorLanguage']>
+    readonly useNetwork: UnwrapRef<typeof import('@vueuse/core')['useNetwork']>
+    readonly useNow: UnwrapRef<typeof import('@vueuse/core')['useNow']>
+    readonly useObjectUrl: UnwrapRef<typeof import('@vueuse/core')['useObjectUrl']>
+    readonly useOffsetPagination: UnwrapRef<typeof import('@vueuse/core')['useOffsetPagination']>
+    readonly useOnline: UnwrapRef<typeof import('@vueuse/core')['useOnline']>
+    readonly usePageLeave: UnwrapRef<typeof import('@vueuse/core')['usePageLeave']>
+    readonly useParallax: UnwrapRef<typeof import('@vueuse/core')['useParallax']>
+    readonly usePermission: UnwrapRef<typeof import('@vueuse/core')['usePermission']>
+    readonly usePointer: UnwrapRef<typeof import('@vueuse/core')['usePointer']>
+    readonly usePointerSwipe: UnwrapRef<typeof import('@vueuse/core')['usePointerSwipe']>
+    readonly usePreferredColorScheme: UnwrapRef<typeof import('@vueuse/core')['usePreferredColorScheme']>
+    readonly usePreferredContrast: UnwrapRef<typeof import('@vueuse/core')['usePreferredContrast']>
+    readonly usePreferredDark: UnwrapRef<typeof import('@vueuse/core')['usePreferredDark']>
+    readonly usePreferredLanguages: UnwrapRef<typeof import('@vueuse/core')['usePreferredLanguages']>
+    readonly usePreferredReducedMotion: UnwrapRef<typeof import('@vueuse/core')['usePreferredReducedMotion']>
+    readonly useRafFn: UnwrapRef<typeof import('@vueuse/core')['useRafFn']>
+    readonly useRefHistory: UnwrapRef<typeof import('@vueuse/core')['useRefHistory']>
+    readonly useResizeObserver: UnwrapRef<typeof import('@vueuse/core')['useResizeObserver']>
+    readonly useRoute: UnwrapRef<typeof import('vue-router')['useRoute']>
+    readonly useRouter: UnwrapRef<typeof import('vue-router')['useRouter']>
+    readonly useScreenOrientation: UnwrapRef<typeof import('@vueuse/core')['useScreenOrientation']>
+    readonly useScreenSafeArea: UnwrapRef<typeof import('@vueuse/core')['useScreenSafeArea']>
+    readonly useScriptTag: UnwrapRef<typeof import('@vueuse/core')['useScriptTag']>
+    readonly useScroll: UnwrapRef<typeof import('@vueuse/core')['useScroll']>
+    readonly useScrollLock: UnwrapRef<typeof import('@vueuse/core')['useScrollLock']>
+    readonly useSearchFilter: UnwrapRef<typeof import('./composables/search')['useSearchFilter']>
+    readonly useSessionStorage: UnwrapRef<typeof import('@vueuse/core')['useSessionStorage']>
+    readonly useShare: UnwrapRef<typeof import('@vueuse/core')['useShare']>
+    readonly useSlots: UnwrapRef<typeof import('vue')['useSlots']>
+    readonly useSpeechRecognition: UnwrapRef<typeof import('@vueuse/core')['useSpeechRecognition']>
+    readonly useSpeechSynthesis: UnwrapRef<typeof import('@vueuse/core')['useSpeechSynthesis']>
+    readonly useStepper: UnwrapRef<typeof import('@vueuse/core')['useStepper']>
+    readonly useStorage: UnwrapRef<typeof import('@vueuse/core')['useStorage']>
+    readonly useStorageAsync: UnwrapRef<typeof import('@vueuse/core')['useStorageAsync']>
+    readonly useStyleTag: UnwrapRef<typeof import('@vueuse/core')['useStyleTag']>
+    readonly useSupported: UnwrapRef<typeof import('@vueuse/core')['useSupported']>
+    readonly useSwipe: UnwrapRef<typeof import('@vueuse/core')['useSwipe']>
+    readonly useTemplateRefsList: UnwrapRef<typeof import('@vueuse/core')['useTemplateRefsList']>
+    readonly useTextDirection: UnwrapRef<typeof import('@vueuse/core')['useTextDirection']>
+    readonly useTextSelection: UnwrapRef<typeof import('@vueuse/core')['useTextSelection']>
+    readonly useTextareaAutosize: UnwrapRef<typeof import('@vueuse/core')['useTextareaAutosize']>
+    readonly useThrottle: UnwrapRef<typeof import('@vueuse/core')['useThrottle']>
+    readonly useThrottleFn: UnwrapRef<typeof import('@vueuse/core')['useThrottleFn']>
+    readonly useThrottledRefHistory: UnwrapRef<typeof import('@vueuse/core')['useThrottledRefHistory']>
+    readonly useTimeAgo: UnwrapRef<typeof import('@vueuse/core')['useTimeAgo']>
+    readonly useTimeout: UnwrapRef<typeof import('@vueuse/core')['useTimeout']>
+    readonly useTimeoutFn: UnwrapRef<typeof import('@vueuse/core')['useTimeoutFn']>
+    readonly useTimeoutPoll: UnwrapRef<typeof import('@vueuse/core')['useTimeoutPoll']>
+    readonly useTimestamp: UnwrapRef<typeof import('@vueuse/core')['useTimestamp']>
+    readonly useTitle: UnwrapRef<typeof import('@vueuse/core')['useTitle']>
+    readonly useToNumber: UnwrapRef<typeof import('@vueuse/core')['useToNumber']>
+    readonly useToString: UnwrapRef<typeof import('@vueuse/core')['useToString']>
+    readonly useToggle: UnwrapRef<typeof import('@vueuse/core')['useToggle']>
+    readonly useTransition: UnwrapRef<typeof import('@vueuse/core')['useTransition']>
+    readonly useUrlSearchParams: UnwrapRef<typeof import('@vueuse/core')['useUrlSearchParams']>
+    readonly useUserMedia: UnwrapRef<typeof import('@vueuse/core')['useUserMedia']>
+    readonly useVModel: UnwrapRef<typeof import('@vueuse/core')['useVModel']>
+    readonly useVModels: UnwrapRef<typeof import('@vueuse/core')['useVModels']>
+    readonly useVibrate: UnwrapRef<typeof import('@vueuse/core')['useVibrate']>
+    readonly useVirtualList: UnwrapRef<typeof import('@vueuse/core')['useVirtualList']>
+    readonly useVisibleFilter: UnwrapRef<typeof import('./composables/visible')['useVisibleFilter']>
+    readonly useWakeLock: UnwrapRef<typeof import('@vueuse/core')['useWakeLock']>
+    readonly useWebNotification: UnwrapRef<typeof import('@vueuse/core')['useWebNotification']>
+    readonly useWebSocket: UnwrapRef<typeof import('@vueuse/core')['useWebSocket']>
+    readonly useWebWorker: UnwrapRef<typeof import('@vueuse/core')['useWebWorker']>
+    readonly useWebWorkerFn: UnwrapRef<typeof import('@vueuse/core')['useWebWorkerFn']>
+    readonly useWindowFocus: UnwrapRef<typeof import('@vueuse/core')['useWindowFocus']>
+    readonly useWindowScroll: UnwrapRef<typeof import('@vueuse/core')['useWindowScroll']>
+    readonly useWindowSize: UnwrapRef<typeof import('@vueuse/core')['useWindowSize']>
+    readonly watch: UnwrapRef<typeof import('vue')['watch']>
+    readonly watchArray: UnwrapRef<typeof import('@vueuse/core')['watchArray']>
+    readonly watchAtMost: UnwrapRef<typeof import('@vueuse/core')['watchAtMost']>
+    readonly watchDebounced: UnwrapRef<typeof import('@vueuse/core')['watchDebounced']>
+    readonly watchEffect: UnwrapRef<typeof import('vue')['watchEffect']>
+    readonly watchIgnorable: UnwrapRef<typeof import('@vueuse/core')['watchIgnorable']>
+    readonly watchOnce: UnwrapRef<typeof import('@vueuse/core')['watchOnce']>
+    readonly watchPausable: UnwrapRef<typeof import('@vueuse/core')['watchPausable']>
+    readonly watchPostEffect: UnwrapRef<typeof import('vue')['watchPostEffect']>
+    readonly watchSyncEffect: UnwrapRef<typeof import('vue')['watchSyncEffect']>
+    readonly watchThrottled: UnwrapRef<typeof import('@vueuse/core')['watchThrottled']>
+    readonly watchTriggerable: UnwrapRef<typeof import('@vueuse/core')['watchTriggerable']>
+    readonly watchWithFilter: UnwrapRef<typeof import('@vueuse/core')['watchWithFilter']>
+    readonly whenever: UnwrapRef<typeof import('@vueuse/core')['whenever']>
+  }
+}

assets/components/ContainerStat.vue

@@ -18,9 +18,8 @@
 </template>
 
 <script lang="ts" setup>
-import { Container } from "@/types/Container";
+import { type Container } from "@/types/Container";
-import { ComputedRef, inject } from "vue";
+import { type ComputedRef } from "vue";
-import { formatBytes } from "@/utils";
 
 const container = inject("container") as ComputedRef<Container>;
 </script>

assets/components/ContainerTitle.vue

@@ -8,8 +8,9 @@
 </template>
 
 <script lang="ts" setup>
-import { Container } from "@/types/Container";
+import { type Container } from "@/types/Container";
-import { inject, ComputedRef } from "vue";
+import { type ComputedRef } from "vue";
+
 const container = inject("container") as ComputedRef<Container>;
 </script>
 

assets/components/FuzzySearchModal.vue

@@ -34,11 +34,7 @@
 
 <script lang="ts" setup>
 import fuzzysort from "fuzzysort";
-import { computed, nextTick, onMounted, ref, reactive } from "vue";
+import { type Container } from "@/types/Container";
-import { useRouter } from "vue-router";
-import { useContainerStore } from "@/stores/container";
-import { storeToRefs } from "pinia";
-import { Container } from "@/types/Container";
 
 const props = defineProps({
   maxResults: {

assets/components/InfiniteLoader.vue

@@ -9,8 +9,6 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted, onUnmounted, nextTick } from "vue";
-
 const props = defineProps({
   onLoadMore: Function,
   enabled: Boolean,

assets/components/JSONPayload.vue

@@ -10,8 +10,7 @@
   <field-list :fields="logEntry.unfilteredPayload" :expanded="expanded" :visible-keys="visibleKeys"></field-list>
 </template>
 <script lang="ts" setup>
-import { useSearchFilter } from "@/composables/search";
+import { type VisibleLogEntry } from "@/types/VisibleLogEntry";
-import { VisibleLogEntry } from "@/types/VisibleLogEntry";
 
 import { PropType, ref } from "vue";
 

assets/components/LogActionsToolbar.vue

@@ -8,7 +8,7 @@
           </div>
         </div>
         <div class="level-right">
-          <div class="level-item">Clear</div>
+          <div class="level-item">{{ $t("toolbar.clear") }}</div>
         </div>
       </div>
     </a>
@@ -20,7 +20,7 @@
           </div>
         </div>
         <div class="level-right">
-          <div class="level-item">Download</div>
+          <div class="level-item">{{ $t("toolbar.download") }}</div>
         </div>
       </div>
     </a>
@@ -33,7 +33,7 @@
           </div>
         </div>
         <div class="level-right">
-          <div class="level-item">Search</div>
+          <div class="level-item">{{ $t("toolbar.search") }}</div>
         </div>
       </div>
     </a>
@@ -41,14 +41,11 @@
 </template>
 
 <script lang="ts" setup>
-import { inject, onMounted, onUnmounted, PropType, ComputedRef } from "vue";
+import { type PropType, type ComputedRef } from "vue";
+import { type Container } from "@/types/Container";
 import hotkeys from "hotkeys-js";
-import config from "@/stores/config";
-import { useSearchFilter } from "@/composables/search";
-import { Container } from "@/types/Container";
 
 const { showSearch } = useSearchFilter();
-
 const { base } = config;
 
 const props = defineProps({

assets/components/LogContainer.vue

@@ -24,28 +24,21 @@
 </template>
 
 <script lang="ts" setup>
-import { provide, ref, toRefs } from "vue";
 import LogViewerWithSource from "./LogViewerWithSource.vue";
-import { useContainerStore } from "@/stores/container";
 
-const props = defineProps({
+const props = withDefaults(
-  id: {
+  defineProps<{
-    type: String,
+    id: string;
-    required: true,
+    showTitle?: boolean;
-  },
+    scrollable?: boolean;
-  showTitle: {
+    closable?: boolean;
-    type: Boolean,
+  }>(),
-    default: false,
+  {
-  },
+    showTitle: false,
-  scrollable: {
+    scrollable: false,
-    type: Boolean,
+    closable: false,
-    default: false,
+  }
-  },
+);
-  closable: {
-    type: Boolean,
-    default: false,
-  },
-});
 
 const emit = defineEmits(["close"]);
 

assets/components/LogEventSource.vue

@@ -4,13 +4,12 @@
 </template>
 
 <script lang="ts" setup>
-import { useEventSource } from "@/composables/eventsource";
+import { type Container } from "@/types/Container";
-import { Container } from "@/types/Container";
+import { type ComputedRef } from "vue";
-import { inject, ComputedRef } from "vue";
 
 const emit = defineEmits(["loading-more"]);
 const container = inject("container") as ComputedRef<Container>;
-const { connect, messages, loadOlderLogs } = useEventSource(container);
+const { connect, messages, loadOlderLogs } = useLogStream(container);
 
 const beforeLoading = () => emit("loading-more", true);
 const afterLoading = () => emit("loading-more", false);

assets/components/LogViewer.vue

@@ -33,19 +33,13 @@
 </template>
 
 <script lang="ts" setup>
-import { ComputedRef, inject, PropType, ref, toRefs, watch, toRaw } from "vue";
+import { type ComputedRef, type PropType, toRaw } from "vue";
 import { useRouteHash } from "@vueuse/router";
 import { size, showTimestamp, softWrap } from "@/composables/settings";
-import { VisibleLogEntry } from "@/types/VisibleLogEntry";
+import { type VisibleLogEntry } from "@/types/VisibleLogEntry";
-import { LogEntry } from "@/types/LogEntry";
+import { type LogEntry } from "@/types/LogEntry";
-import { useSearchFilter } from "@/composables/search";
+import { type Container } from "@/types/Container";
-import { useVisibleFilter } from "@/composables/visible";
-import { Container } from "@/types/Container";
-import { persistentVisibleKeys } from "@/utils";
-
-import RelativeTime from "./RelativeTime.vue";
 import AnsiConvertor from "ansi-to-html";
-import JSONPayload from "./JSONPayload.vue";
 
 const props = defineProps({
   messages: {

assets/components/LogViewerWithSource.vue

@@ -5,14 +5,13 @@
 </template>
 
 <script lang="ts" setup>
-import LogViewer from "./LogViewer.vue";
+import LogEventSource from "./LogEventSource.vue";
-import { ref } from "vue";
 
 const emit = defineEmits(["loading-more"]);
 
-const source = ref<InstanceType<typeof LogViewer>>();
+const source = $ref<InstanceType<typeof LogEventSource>>();
 function clear() {
-  source.value?.clear();
+  source?.clear();
 }
 defineExpose({
   clear,

assets/components/MobileMenu.vue

@@ -24,7 +24,7 @@
       </div>
     </div>
 
-    <p class="menu-label is-hidden-mobile" :class="{ 'is-active': showNav }">Containers</p>
+    <p class="menu-label is-hidden-mobile" :class="{ 'is-active': showNav }">{{ $t("label.containers") }}</p>
     <ul class="menu-list is-hidden-mobile" :class="{ 'is-active': showNav }">
       <li v-for="item in visibleContainers" :key="item.id">
         <router-link
@@ -42,11 +42,6 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, watch } from "vue";
-import { useContainerStore } from "@/stores/container";
-import { storeToRefs } from "pinia";
-import { useRoute } from "vue-router";
-
 const store = useContainerStore();
 const route = useRoute();
 const { visibleContainers, allContainersById } = storeToRefs(store);

assets/components/PastTime.vue

@@ -3,16 +3,11 @@
 </template>
 
 <script lang="ts" setup>
-import { useIntervalFn } from "@vueuse/core";
 import formatDistance from "date-fns/formatDistance";
-import { PropType, ref } from "vue";
 
-const props = defineProps({
+const props = defineProps<{
-  date: {
+  date: Date;
-    required: true,
+}>();
-    type: Object as PropType<Date>,
-  },
-});
 
 const text = ref<string>();
 function updateFromNow() {

assets/components/RelativeTime.vue

@@ -16,16 +16,12 @@ const styles = { auto, 12: enUS, 24: enGB };
 
 <script lang="ts" setup>
 import { formatRelative } from "date-fns";
-import { hourStyle } from "@/composables/settings";
 import enGB from "date-fns/locale/en-GB";
 import enUS from "date-fns/locale/en-US";
-import { computed, PropType } from "vue";
+
-defineProps({
+defineProps<{
-  date: {
+  date: Date;
-    required: true,
+}>();
-    type: Object as PropType<Date>,
-  },
-});
 
 const locale = computed(() => {
   const locale = styles[hourStyle.value];

assets/components/ScrollProgress.vue

@@ -18,21 +18,16 @@
 </template>
 
 <script lang="ts" setup>
-import { useContainerStore } from "@/stores/container";
+const props = withDefaults(
-import { useScroll } from "@vueuse/core";
+  defineProps<{
-import { storeToRefs } from "pinia";
+    indeterminate: boolean;
-import { onMounted, ref, watch, watchPostEffect } from "vue";
+    autoHide: boolean;
-
+  }>(),
-const props = defineProps({
+  {
-  indeterminate: {
+    indeterminate: false,
-    default: false,
+    autoHide: true,
-    type: Boolean,
+  }
-  },
+);
-  autoHide: {
-    default: true,
-    type: Boolean,
-  },
-});
 
 const scrollProgress = ref(0);
 const animation = ref({ cancel: () => {} });

assets/components/ScrollableView.vue

@@ -25,14 +25,14 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref } from "vue";
+withDefaults(
-
+  defineProps<{
-defineProps({
+    scrollable: boolean;
-  scrollable: {
+  }>(),
-    type: Boolean,
+  {
-    default: true,
+    scrollable: false,
-  },
+  }
-});
+);
 
 const paused = ref(false);
 const hasMore = ref(false);

assets/components/Search.vue

@@ -24,10 +24,6 @@
 <script lang="ts" setup>
 import hotkeys from "hotkeys-js";
 
-import { search } from "@/composables/settings";
-import { useSearchFilter } from "@/composables/search";
-import { ref, nextTick, onMounted, onUnmounted } from "vue";
-
 const input = ref<HTMLInputElement>();
 const { searchFilter, showSearch, resetSearch } = useSearchFilter();
 

assets/components/SideMenu.vue

@@ -9,7 +9,7 @@
         </router-link>
       </div>
       <div class="column is-narrow has-text-right px-1">
-        <button class="button is-rounded" @click="$emit('search')" title="Search containers (⌘ + k, ⌃k)">
+        <button class="button is-rounded" @click="$emit('search')" title="$t('tooltip.search')">
           <span class="icon">
             <mdi-light-magnify />
           </span>
@@ -23,7 +23,7 @@
         </router-link>
       </div>
     </div>
-    <p class="menu-label is-hidden-mobile">Containers</p>
+    <p class="menu-label is-hidden-mobile">{{ $t("label.containers") }}</p>
     <ul class="menu-list is-hidden-mobile" v-if="ready">
       <li v-for="item in visibleContainers" :key="item.id" :class="item.state">
         <router-link
@@ -40,7 +40,7 @@
                 class="icon is-small"
                 @click.stop.prevent="store.appendActiveContainer(item)"
                 v-show="!activeContainersById[item.id]"
-                title="Pin as column"
+                title="$t('tooltip.pin-column')"
               >
                 <cil-columns />
               </span>
@@ -56,9 +56,6 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from "vue";
-import { storeToRefs } from "pinia";
-import { useContainerStore } from "@/stores/container";
 import type { Container } from "@/types/Container";
 
 const store = useContainerStore();

assets/composables/eventsource.ts

@@ -1,10 +1,7 @@
-import { ref, watch, onUnmounted, ComputedRef } from "vue";
+import { onUnmounted, ComputedRef } from "vue";
 import debounce from "lodash.debounce";
-
 import type { LogEntry, LogEvent } from "@/types/LogEntry";
-
+import { type Container } from "@/types/Container";
-import config from "@/stores/config";
-import { Container } from "@/types/Container";
 
 function parseMessage(data: string): LogEntry {
   const e = JSON.parse(data) as LogEvent;
@@ -14,7 +11,7 @@ function parseMessage(data: string): LogEntry {
   return { id, date, message: e.m };
 }
 
-export function useEventSource(container: ComputedRef<Container>) {
+export function useLogStream(container: ComputedRef<Container>) {
   const messages = ref<LogEntry[]>([]);
   const buffer = ref<LogEntry[]>([]);
 

assets/composables/media.ts

@@ -1,3 +1 @@
-import { useMediaQuery } from "@vueuse/core";
-
 export const isMobile = useMediaQuery("(max-width: 770px)");

assets/composables/search.ts

@@ -1,6 +1,5 @@
-import { ref, computed, Ref } from "vue";
+import { type Ref } from "vue";
-import { useDebounce } from "@vueuse/core";
+import { type VisibleLogEntry } from "@/types/VisibleLogEntry";
-import { VisibleLogEntry } from "@/types/VisibleLogEntry";
 
 const searchFilter = ref<string>("");
 const debouncedSearchFilter = useDebounce(searchFilter);

assets/composables/settings.ts

@@ -1,7 +1,4 @@
-import { useStorage } from "@vueuse/core";
+const DOZZLE_SETTINGS_KEY = "DOZZLE_SETTINGS";
-import { computed } from "vue";
-
-export const DOZZLE_SETTINGS_KEY = "DOZZLE_SETTINGS";
 
 export const DEFAULT_SETTINGS: {
   search: boolean;
@@ -25,49 +22,62 @@ export const DEFAULT_SETTINGS: {
   softWrap: true,
 };
 
-export const settings = useStorage(DOZZLE_SETTINGS_KEY, DEFAULT_SETTINGS);
+const settings = useStorage(DOZZLE_SETTINGS_KEY, DEFAULT_SETTINGS);
-settings.value = {...DEFAULT_SETTINGS, ...settings.value};
+settings.value = { ...DEFAULT_SETTINGS, ...settings.value };
 
-export const search = computed({
+const search = computed({
   get: () => settings.value.search,
   set: (value) => (settings.value.search = value),
 });
 
-export const size = computed({
+const size = computed({
   get: () => settings.value.size,
   set: (value) => (settings.value.size = value),
 });
 
-export const menuWidth = computed({
+const menuWidth = computed({
   get: () => settings.value.menuWidth,
   set: (value) => (settings.value.menuWidth = value),
 });
-export const smallerScrollbars = computed({
+const smallerScrollbars = computed({
   get: () => settings.value.smallerScrollbars,
   set: (value) => (settings.value.smallerScrollbars = value),
 });
 
-export const showTimestamp = computed({
+const showTimestamp = computed({
   get: () => settings.value.showTimestamp,
   set: (value) => (settings.value.showTimestamp = value),
 });
 
-export const showAllContainers = computed({
+const showAllContainers = computed({
   get: () => settings.value.showAllContainers,
   set: (value) => (settings.value.showAllContainers = value),
 });
 
-export const lightTheme = computed({
+const lightTheme = computed({
   get: () => settings.value.lightTheme,
   set: (value) => (settings.value.lightTheme = value),
 });
 
-export const hourStyle = computed({
+const hourStyle = computed({
   get: () => settings.value.hourStyle,
   set: (value) => (settings.value.hourStyle = value),
 });
 
-export const softWrap = computed({
+const softWrap = computed({
   get: () => settings.value.softWrap,
   set: (value) => (settings.value.softWrap = value),
 });
+
+export {
+  softWrap,
+  hourStyle,
+  lightTheme,
+  showAllContainers,
+  showTimestamp,
+  smallerScrollbars,
+  menuWidth,
+  size,
+  search,
+  settings
+};

assets/composables/title.ts

@@ -1,5 +1,3 @@
-import { useTitle } from "@vueuse/core";
-
 let subtitle = $ref("");
 const title = $computed(() => `${subtitle} - Dozzle`);
 

assets/composables/visible.ts

@@ -1,6 +1,6 @@
-import { LogEntry } from "@/types/LogEntry";
+import { type LogEntry } from "@/types/LogEntry";
-import { VisibleLogEntry } from "@/types/VisibleLogEntry";
+import {  VisibleLogEntry } from "@/types/VisibleLogEntry";
-import { computed, ComputedRef, Ref } from "vue";
+import type { ComputedRef, Ref } from "vue";
 
 export function useVisibleFilter(visibleKeys: ComputedRef<Ref<string[][]>>) {
   function filteredPayload(messages: Ref<LogEntry[]>) {

assets/modules/i18n.ts

@@ -0,0 +1,20 @@
+import { type App } from "vue";
+import { createI18n } from "vue-i18n";
+
+export const install = (app: App) => {
+  const messages = Object.fromEntries(
+    Object.entries(import.meta.glob<{ default: any }>("../../locales/*.y(a)?ml", { eager: true })).map(
+      ([key, value]) => {
+        const yaml = key.endsWith(".yaml");
+        return [key.slice(14, yaml ? -5 : -4), value.default];
+      }
+    )
+  );
+  const i18n = createI18n({
+    legacy: false,
+    locale: navigator.language,
+    fallbackLocale: "en",
+    messages,
+  });
+  app.use(i18n);
+};

assets/pages/Index.vue

@@ -4,11 +4,8 @@
       <div class="hero-body">
         <div class="container">
           <div class="columns">
-            <div class="column">
-              <h1 class="title">Hello, there!</h1>
-            </div>
             <div class="column is-narrow" v-if="secured">
-              <a class="button is-primary is-small" :href="`${base}/logout`">Logout</a>
+              <a class="button is-primary is-small" :href="`${base}/logout`">{{ $t("button.logout") }}</a>
             </div>
           </div>
         </div>
@@ -18,31 +15,31 @@
       <div class="level-item has-text-centered">
         <div>
           <p class="title">{{ containers.length }}</p>
-          <p class="heading">Total Containers</p>
+          <p class="heading">{{ $t("label.total-containers") }}</p>
         </div>
       </div>
       <div class="level-item has-text-centered">
         <div>
           <p class="title">{{ runningContainers.length }}</p>
-          <p class="heading">Running</p>
+          <p class="heading">{{ $t("label.running") }}</p>
         </div>
       </div>
       <div class="level-item has-text-centered">
         <div>
           <p class="title" data-ci-skip>{{ totalCpu }}%</p>
-          <p class="heading">Total CPU Usage</p>
+          <p class="heading">{{ $t("label.total-cpu-usage") }}</p>
         </div>
       </div>
       <div class="level-item has-text-centered">
         <div>
           <p class="title" data-ci-skip>{{ formatBytes(totalMem) }}</p>
-          <p class="heading">Total Mem Usage</p>
+          <p class="heading">{{ $t("label.total-mem-usage") }}</p>
         </div>
       </div>
       <div class="level-item has-text-centered">
         <div>
           <p class="title">{{ version }}</p>
-          <p class="heading">Dozzle Version</p>
+          <p class="heading">{{ $t("label.dozzle-version") }}</p>
         </div>
       </div>
     </section>
@@ -50,13 +47,13 @@
     <section class="columns is-centered section is-marginless">
       <div class="column is-4">
         <div class="panel">
-          <p class="panel-heading">Containers</p>
+          <p class="panel-heading">{{ $t("label.containers") }}</p>
           <div class="panel-block">
             <p class="control has-icons-left">
               <input
                 class="input"
                 type="text"
-                placeholder="Search Containers"
+                :placeholder="$t('placeholder.search-containers')"
                 v-model="search"
                 @keyup.esc="search = null"
                 @keyup.enter="onEnter()"
@@ -67,8 +64,8 @@
             </p>
           </div>
           <p class="panel-tabs" v-if="!search">
-            <a :class="{ 'is-active': sort === 'running' }" @click="sort = 'running'">Running</a>
+            <a :class="{ 'is-active': sort === 'running' }" @click="sort = 'running'">{{ $t("label.running") }}</a>
-            <a :class="{ 'is-active': sort === 'all' }" @click="sort = 'all'">All</a>
+            <a :class="{ 'is-active': sort === 'all' }" @click="sort = 'all'">{{ $t("label.all") }}</a>
           </p>
           <router-link
             :to="{ name: 'container-id', params: { id: item.id } }"
@@ -89,16 +86,8 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed } from "vue";
-import { storeToRefs } from "pinia";
-import { useRouter } from "vue-router";
-import { useContainerStore } from "@/stores/container";
-import { formatBytes } from "@/utils";
 import fuzzysort from "fuzzysort";
 import SearchIcon from "~icons/mdi-light/magnify";
-import PastTime from "../components/PastTime.vue";
-import config from "@/stores/config";
-import { useIntervalFn } from "@vueuse/core";
 
 const { base, version, secured } = config;
 const containerStore = useContainerStore();

assets/pages/Login.vue

@@ -8,7 +8,7 @@
               <div class="card-content">
                 <form action="" method="post" @submit.prevent="onLogin" ref="form">
                   <div class="field">
-                    <label class="label">Username</label>
+                    <label class="label">{{ $t("label.username") }}</label>
                     <div class="control">
                       <input
                         class="input"
@@ -22,7 +22,7 @@
                   </div>
 
                   <div class="field">
-                    <label class="label">Password</label>
+                    <label class="label">{{ $t("label.password") }}</label>
                     <div class="control">
                       <input
                         class="input"
@@ -32,11 +32,11 @@
                         v-model="password"
                       />
                     </div>
-                    <p class="help is-danger" v-if="error">Username and password are not valid.</p>
+                    <p class="help is-danger" v-if="error">{{ $t("error.invalid-auth") }}</p>
                   </div>
                   <div class="field is-grouped is-grouped-centered mt-5">
                     <p class="control">
-                      <button class="button is-primary" type="submit">Login</button>
+                      <button class="button is-primary" type="submit">{{ $t("button.login") }}</button>
                     </p>
                   </div>
                 </form>
@@ -49,35 +49,27 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import config from "@/stores/config";
+const { t } = useI18n();
-import { setTitle } from "@/composables/title";
-export default {
-  name: "Login",
-  data() {
-    return {
-      username: null,
-      password: null,
-      error: false,
-    };
-  },
-  setup() {
-    setTitle("Authentication Required");
-  },
-  methods: {
-    async onLogin() {
-      const response = await fetch(`${config.base}/api/validateCredentials`, {
-        body: new FormData(this.$refs.form),
-        method: "post",
-      });
 
-      if (response.status == 200) {
+setTitle(t("title.login"));
-        this.error = false;
+
-        window.location.href = `${config.base}/`;
+let error = $ref(false);
-      } else {
+let username = $ref("");
-        this.error = true;
+let password = $ref("");
-      }
+let form = $ref();
-    },
+
-  },
+async function onLogin() {
-};
+  const response = await fetch(`${config.base}/api/validateCredentials`, {
+    body: new FormData(form),
+    method: "post",
+  });
+
+  if (response.status == 200) {
+    error = false;
+    window.location.href = `${config.base}/`;
+  } else {
+    error = true;
+  }
+}
 </script>

assets/pages/Settings.vue

@@ -2,35 +2,32 @@
   <div>
     <section class="section">
       <div class="has-underline">
-        <h2 class="title is-4">About</h2>
+        <h2 class="title is-4">{{ $t("settings.about") }}</h2>
       </div>
 
       <div>
-        You are using Dozzle <i>{{ currentVersion }}</i
+        <span v-html="$t('settings.using-version', { version: currentVersion })"></span>
-        >.
+        <div
-        <span v-if="hasUpdate">
+          v-if="hasUpdate"
-          New version is available! Update to
+          v-html="$t('settings.update-available', { nextVersion: nextRelease.name, href: nextRelease.html_url })"
-          <a :href="nextRelease.html_url" class="next-release" target="_blank" rel="noreferrer noopener">
+        ></div>
-            {{ nextRelease.name }}</a
-          >.
-        </span>
       </div>
     </section>
 
     <section class="section">
       <div class="has-underline">
-        <h2 class="title is-4">Display</h2>
+        <h2 class="title is-4">{{ $t("settings.display") }}</h2>
       </div>
 
       <div class="item">
-        <o-switch v-model="smallerScrollbars"> Use smaller scrollbars </o-switch>
+        <o-switch v-model="smallerScrollbars"> {{ $t("settings.small-scrollbars") }} </o-switch>
       </div>
       <div class="item">
-        <o-switch v-model="showTimestamp"> Show timestamps </o-switch>
+        <o-switch v-model="showTimestamp"> {{ $t("settings.show-timesamps") }} </o-switch>
       </div>
 
       <div class="item">
-        <o-switch v-model="softWrap"> Soft wrap lines</o-switch>
+        <o-switch v-model="softWrap"> {{ $t("settings.soft-wrap") }}</o-switch>
       </div>
 
       <div class="item">
@@ -54,7 +51,7 @@
             </o-field>
           </div>
           <div class="column">
-            By default, Dozzle will use your browser's locale to format time. You can force to 12 or 24 hour style.
+            {{ $t("settings.12-24-format") }}
           </div>
         </div>
       </div>
@@ -83,7 +80,7 @@
               </o-dropdown>
             </o-field>
           </div>
-          <div class="column">Font size to use for logs</div>
+          <div class="column">{{ $t("settings.font-size") }}</div>
         </div>
       </div>
       <div class="item">
@@ -111,33 +108,30 @@
               </o-dropdown>
             </o-field>
           </div>
-          <div class="column">Color scheme</div>
+          <div class="column">{{ $t("settings.color-scheme") }}</div>
         </div>
       </div>
     </section>
     <section class="section">
       <div class="has-underline">
-        <h2 class="title is-4">Options</h2>
+        <h2 class="title is-4">{{ $t("settings.options") }}</h2>
       </div>
 
       <div class="item">
         <o-switch v-model="search">
-          Enable searching with Dozzle using <code>command+f</code> or <code>ctrl+f</code>
+          <span v-html="$t('settings.search')"></span>
         </o-switch>
       </div>
 
       <div class="item">
-        <o-switch v-model="showAllContainers"> Show stopped containers </o-switch>
+        <o-switch v-model="showAllContainers"> {{ $t("settings.show-stopped-containers") }} </o-switch>
       </div>
     </section>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref } from "vue";
 import gt from "semver/functions/gt";
-import config from "@/stores/config";
-import { setTitle } from "@/composables/title";
 import {
   search,
   lightTheme,
@@ -149,22 +143,28 @@ import {
   softWrap,
 } from "@/composables/settings";
 
-setTitle("Settings");
+const { t } = useI18n();
 
-const currentVersion = config.version;
+setTitle(t("title.settings"));
-const nextRelease = ref({ html_url: "", name: "" });
+
-const hasUpdate = ref(false);
+const currentVersion = $ref(config.version);
+let nextRelease = $ref({ html_url: "", name: "" });
+let hasUpdate = $ref(false);
 
 async function fetchNextRelease() {
   if (!["dev", "master"].includes(currentVersion)) {
     const response = await fetch("https://api.github.com/repos/amir20/dozzle/releases/latest");
     if (response.ok) {
       const release = await response.json();
-      hasUpdate.value = gt(release.tag_name, currentVersion);
+      hasUpdate = gt(release.tag_name, currentVersion);
-      nextRelease.value = release;
+      nextRelease = release;
     }
   } else {
-    hasUpdate.value = true;
+    hasUpdate = true;
+    nextRelease = {
+      html_url: "",
+      name: "master",
+    };
   }
 }
 

assets/pages/Show.vue

@@ -1,9 +1,4 @@
 <script lang="ts" setup>
-import { useContainerStore } from "@/stores/container";
-import { storeToRefs } from "pinia";
-import { watch } from "vue";
-import { useRoute, useRouter } from "vue-router";
-
 const router = useRouter();
 const route = useRoute();
 

assets/pages/[...all].vue

@@ -4,19 +4,14 @@
       <div class="container has-text-centered">
         <h1 class="title">
           404.
-          <small class="subtitle">This page does not exist.</small>
+          <small class="subtitle">{{ $t("error.page-not-found") }}</small>
         </h1>
       </div>
     </div>
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { setTitle } from "@/composables/title";
+const { t } = useI18n();
-export default {
+setTitle(t("title.page-not-found"));
-  name: "PageNotFound",
-  setup() {
-    setTitle("Page not found");
-  },
-};
 </script>

assets/pages/container/[id].vue

@@ -4,13 +4,6 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, toRefs, watchEffect } from "vue";
-import Search from "@/components/Search.vue";
-import LogContainer from "@/components/LogContainer.vue";
-import { setTitle } from "@/composables/title";
-import { useContainerStore } from "@/stores/container";
-import { storeToRefs } from "pinia";
-
 const store = useContainerStore();
 const props = defineProps<{ id: string }>();
 

assets/pages/index.vue

@@ -4,11 +4,8 @@
       <div class="hero-body">
         <div class="container">
           <div class="columns">
-            <div class="column">
-              <h1 class="title">Hello, there!</h1>
-            </div>
             <div class="column is-narrow" v-if="secured">
-              <a class="button is-primary is-small" :href="`${base}/logout`">Logout</a>
+              <a class="button is-primary is-small" :href="`${base}/logout`">{{ $t("button.logout") }}</a>
             </div>
           </div>
         </div>
@@ -18,31 +15,31 @@
       <div class="level-item has-text-centered">
         <div>
           <p class="title">{{ containers.length }}</p>
-          <p class="heading">Total Containers</p>
+          <p class="heading">{{ $t("label.total-containers") }}</p>
         </div>
       </div>
       <div class="level-item has-text-centered">
         <div>
           <p class="title">{{ runningContainers.length }}</p>
-          <p class="heading">Running</p>
+          <p class="heading">{{ $t("label.running") }}</p>
         </div>
       </div>
       <div class="level-item has-text-centered">
         <div>
           <p class="title" data-ci-skip>{{ totalCpu }}%</p>
-          <p class="heading">Total CPU Usage</p>
+          <p class="heading">{{ $t("label.total-cpu-usage") }}</p>
         </div>
       </div>
       <div class="level-item has-text-centered">
         <div>
           <p class="title" data-ci-skip>{{ formatBytes(totalMem) }}</p>
-          <p class="heading">Total Mem Usage</p>
+          <p class="heading">{{ $t("label.total-mem-usage") }}</p>
         </div>
       </div>
       <div class="level-item has-text-centered">
         <div>
           <p class="title">{{ version }}</p>
-          <p class="heading">Dozzle Version</p>
+          <p class="heading">{{ $t("label.dozzle-version") }}</p>
         </div>
       </div>
     </section>
@@ -50,13 +47,13 @@
     <section class="columns is-centered section is-marginless">
       <div class="column is-4">
         <div class="panel">
-          <p class="panel-heading">Containers</p>
+          <p class="panel-heading">{{ $t("label.containers") }}</p>
           <div class="panel-block">
             <p class="control has-icons-left">
               <input
                 class="input"
                 type="text"
-                placeholder="Search Containers"
+                :placeholder="$t('placeholder.search-containers')"
                 v-model="search"
                 @keyup.esc="search = null"
                 @keyup.enter="onEnter()"
@@ -67,8 +64,8 @@
             </p>
           </div>
           <p class="panel-tabs" v-if="!search">
-            <a :class="{ 'is-active': sort === 'running' }" @click="sort = 'running'">Running</a>
+            <a :class="{ 'is-active': sort === 'running' }" @click="sort = 'running'">{{ $t("label.running") }}</a>
-            <a :class="{ 'is-active': sort === 'all' }" @click="sort = 'all'">All</a>
+            <a :class="{ 'is-active': sort === 'all' }" @click="sort = 'all'">{{ $t("label.all") }}</a>
           </p>
           <router-link
             :to="{ name: 'container-id', params: { id: item.id } }"
@@ -89,16 +86,8 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed } from "vue";
-import { storeToRefs } from "pinia";
-import { useRouter } from "vue-router";
-import { useContainerStore } from "@/stores/container";
-import { formatBytes } from "@/utils";
 import fuzzysort from "fuzzysort";
 import SearchIcon from "~icons/mdi-light/magnify";
-import PastTime from "../components/PastTime.vue";
-import config from "@/stores/config";
-import { useIntervalFn } from "@vueuse/core";
 
 const { base, version, secured } = config;
 const containerStore = useContainerStore();

assets/pages/login.vue

@@ -8,7 +8,7 @@
               <div class="card-content">
                 <form action="" method="post" @submit.prevent="onLogin" ref="form">
                   <div class="field">
-                    <label class="label">Username</label>
+                    <label class="label">{{ $t("label.username") }}</label>
                     <div class="control">
                       <input
                         class="input"
@@ -22,7 +22,7 @@
                   </div>
 
                   <div class="field">
-                    <label class="label">Password</label>
+                    <label class="label">{{ $t("label.password") }}</label>
                     <div class="control">
                       <input
                         class="input"
@@ -32,11 +32,11 @@
                         v-model="password"
                       />
                     </div>
-                    <p class="help is-danger" v-if="error">Username and password are not valid.</p>
+                    <p class="help is-danger" v-if="error">{{ $t("error.invalid-auth") }}</p>
                   </div>
                   <div class="field is-grouped is-grouped-centered mt-5">
                     <p class="control">
-                      <button class="button is-primary" type="submit">Login</button>
+                      <button class="button is-primary" type="submit">{{ $t("button.login") }}</button>
                     </p>
                   </div>
                 </form>
@@ -49,35 +49,27 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import config from "@/stores/config";
+const { t } = useI18n();
-import { setTitle } from "@/composables/title";
-export default {
-  name: "Login",
-  data() {
-    return {
-      username: null,
-      password: null,
-      error: false,
-    };
-  },
-  setup() {
-    setTitle("Authentication Required");
-  },
-  methods: {
-    async onLogin() {
-      const response = await fetch(`${config.base}/api/validateCredentials`, {
-        body: new FormData(this.$refs.form),
-        method: "post",
-      });
 
-      if (response.status == 200) {
+setTitle(t("title.login"));
-        this.error = false;
+
-        window.location.href = `${config.base}/`;
+let error = $ref(false);
-      } else {
+let username = $ref("");
-        this.error = true;
+let password = $ref("");
-      }
+let form = $ref();
-    },
+
-  },
+async function onLogin() {
-};
+  const response = await fetch(`${config.base}/api/validateCredentials`, {
+    body: new FormData(form),
+    method: "post",
+  });
+
+  if (response.status == 200) {
+    error = false;
+    window.location.href = `${config.base}/`;
+  } else {
+    error = true;
+  }
+}
 </script>

assets/pages/settings.vue

@@ -2,35 +2,32 @@
   <div>
     <section class="section">
       <div class="has-underline">
-        <h2 class="title is-4">About</h2>
+        <h2 class="title is-4">{{ $t("settings.about") }}</h2>
       </div>
 
       <div>
-        You are using Dozzle <i>{{ currentVersion }}</i
+        <span v-html="$t('settings.using-version', { version: currentVersion })"></span>
-        >.
+        <div
-        <span v-if="hasUpdate">
+          v-if="hasUpdate"
-          New version is available! Update to
+          v-html="$t('settings.update-available', { nextVersion: nextRelease.name, href: nextRelease.html_url })"
-          <a :href="nextRelease.html_url" class="next-release" target="_blank" rel="noreferrer noopener">
+        ></div>
-            {{ nextRelease.name }}</a
-          >.
-        </span>
       </div>
     </section>
 
     <section class="section">
       <div class="has-underline">
-        <h2 class="title is-4">Display</h2>
+        <h2 class="title is-4">{{ $t("settings.display") }}</h2>
       </div>
 
       <div class="item">
-        <o-switch v-model="smallerScrollbars"> Use smaller scrollbars </o-switch>
+        <o-switch v-model="smallerScrollbars"> {{ $t("settings.small-scrollbars") }} </o-switch>
       </div>
       <div class="item">
-        <o-switch v-model="showTimestamp"> Show timestamps </o-switch>
+        <o-switch v-model="showTimestamp"> {{ $t("settings.show-timesamps") }} </o-switch>
       </div>
 
       <div class="item">
-        <o-switch v-model="softWrap"> Soft wrap lines</o-switch>
+        <o-switch v-model="softWrap"> {{ $t("settings.soft-wrap") }}</o-switch>
       </div>
 
       <div class="item">
@@ -54,7 +51,7 @@
             </o-field>
           </div>
           <div class="column">
-            By default, Dozzle will use your browser's locale to format time. You can force to 12 or 24 hour style.
+            {{ $t("settings.12-24-format") }}
           </div>
         </div>
       </div>
@@ -83,7 +80,7 @@
               </o-dropdown>
             </o-field>
           </div>
-          <div class="column">Font size to use for logs</div>
+          <div class="column">{{ $t("settings.font-size") }}</div>
         </div>
       </div>
       <div class="item">
@@ -111,33 +108,30 @@
               </o-dropdown>
             </o-field>
           </div>
-          <div class="column">Color scheme</div>
+          <div class="column">{{ $t("settings.color-scheme") }}</div>
         </div>
       </div>
     </section>
     <section class="section">
       <div class="has-underline">
-        <h2 class="title is-4">Options</h2>
+        <h2 class="title is-4">{{ $t("settings.options") }}</h2>
       </div>
 
       <div class="item">
         <o-switch v-model="search">
-          Enable searching with Dozzle using <code>command+f</code> or <code>ctrl+f</code>
+          <span v-html="$t('settings.search')"></span>
         </o-switch>
       </div>
 
       <div class="item">
-        <o-switch v-model="showAllContainers"> Show stopped containers </o-switch>
+        <o-switch v-model="showAllContainers"> {{ $t("settings.show-stopped-containers") }} </o-switch>
       </div>
     </section>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref } from "vue";
 import gt from "semver/functions/gt";
-import config from "@/stores/config";
-import { setTitle } from "@/composables/title";
 import {
   search,
   lightTheme,
@@ -149,22 +143,28 @@ import {
   softWrap,
 } from "@/composables/settings";
 
-setTitle("Settings");
+const { t } = useI18n();
 
-const currentVersion = config.version;
+setTitle(t("title.settings"));
-const nextRelease = ref({ html_url: "", name: "" });
+
-const hasUpdate = ref(false);
+const currentVersion = $ref(config.version);
+let nextRelease = $ref({ html_url: "", name: "" });
+let hasUpdate = $ref(false);
 
 async function fetchNextRelease() {
   if (!["dev", "master"].includes(currentVersion)) {
     const response = await fetch("https://api.github.com/repos/amir20/dozzle/releases/latest");
     if (response.ok) {
       const release = await response.json();
-      hasUpdate.value = gt(release.tag_name, currentVersion);
+      hasUpdate = gt(release.tag_name, currentVersion);
-      nextRelease.value = release;
+      nextRelease = release;
     }
   } else {
-    hasUpdate.value = true;
+    hasUpdate = true;
+    nextRelease = {
+      html_url: "",
+      name: "master",
+    };
   }
 }
 

assets/pages/show.vue

@@ -1,9 +1,4 @@
 <script lang="ts" setup>
-import { useContainerStore } from "@/stores/container";
-import { storeToRefs } from "pinia";
-import { watch } from "vue";
-import { useRoute, useRouter } from "vue-router";
-
 const router = useRouter();
 const route = useRoute();
 

locales/en.yml

@@ -0,0 +1,49 @@
+toolbar:
+  clear: Clear
+  download: Download
+  search: Search
+label:
+  containers: Containers
+  total-containers: Total Containers
+  running: Running
+  total-cpu-usage: Total CPU Usage
+  total-mem-usage: Total Mem Usage
+  dozzle-version: Dozzle Version
+  all: All
+  password: Password
+  username: Username
+tooltip:
+  search: Search containers (⌘ + k, ⌃k)
+  pin-column: Pin as column
+error:
+  page-not-found: This page does not exist.
+  invalid-auth: Username and password are not valid.
+title:
+  page-not-found: Page not found
+  login: Authentication Required
+  settings: Settings
+button:
+  logout: Logout
+  login: Login
+placeholder:
+  search-containers: Search Containers
+settings:
+  display: Display
+  small-scrollbars: Use smaller scrollbars
+  show-timesamps: Show timestamps
+  soft-wrap: Soft wrap lines
+  12-24-format: >-
+    By default, Dozzle will use your browser's locale to format time. You can
+    force to 12 or 24 hour style.
+  font-size: Font size to use for logs
+  color-scheme: Color scheme
+  options: Options
+  show-stopped-containers: Show stopped containers
+  about: About
+  search: >-
+    Enable searching with Dozzle using <code>command+f</code> or
+    <code>ctrl+f</code>
+  using-version: You are using Dozzle {version}.
+  update-available: >-
+    New version is available! Update to
+    <a :href="{href}" class="next-release" target="_blank" rel="noreferrer noopener">{nextVersion}</a>.

package.json

@@ -27,6 +27,7 @@
     "@iconify-json/mdi": "^1.1.31",
     "@iconify-json/mdi-light": "^1.1.2",
     "@iconify-json/octicon": "^1.1.17",
+    "@intlify/vite-plugin-vue-i18n": "^6.0.1",
     "@oruga-ui/oruga-next": "^0.5.4",
     "@oruga-ui/theme-bulma": "^0.2.6",
     "@vitejs/plugin-vue": "3.1.0",
@@ -50,6 +51,7 @@
     "vite": "3.1.0",
     "vite-plugin-pages": "^0.26.0",
     "vue": "^3.2.38",
+    "vue-i18n": "^9.2.2",
     "vue-router": "^4.1.5"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -6,6 +6,7 @@ specifiers:
   '@iconify-json/mdi': ^1.1.31
   '@iconify-json/mdi-light': ^1.1.2
   '@iconify-json/octicon': ^1.1.17
+  '@intlify/vite-plugin-vue-i18n': ^6.0.1
   '@oruga-ui/oruga-next': ^0.5.4
   '@oruga-ui/theme-bulma': ^0.2.6
   '@pinia/testing': ^0.0.14
@@ -45,6 +46,7 @@ specifiers:
   vite-plugin-pages: ^0.26.0
   vitest: ^0.23.1
   vue: ^3.2.38
+  vue-i18n: ^9.2.2
   vue-router: ^4.1.5
   vue-tsc: ^0.40.9
 
@@ -54,6 +56,7 @@ dependencies:
   '@iconify-json/mdi': 1.1.31
   '@iconify-json/mdi-light': 1.1.2
   '@iconify-json/octicon': 1.1.17
+  '@intlify/vite-plugin-vue-i18n': 6.0.1_vite@3.1.0+vue-i18n@9.2.2
   '@oruga-ui/oruga-next': 0.5.5_vue@3.2.38
   '@oruga-ui/theme-bulma': 0.2.6
   '@vitejs/plugin-vue': 3.1.0_vite@3.1.0+vue@3.2.38
@@ -77,6 +80,7 @@ dependencies:
   vite: 3.1.0_sass@1.54.8
   vite-plugin-pages: 0.26.0_pgh5bsx52yxgyicrt2bly2bfbu
   vue: 3.2.38
+  vue-i18n: 9.2.2_vue@3.2.38
   vue-router: 4.1.5_vue@3.2.38
 
 devDependencies:
@@ -220,6 +224,104 @@ packages:
       - supports-color
     dev: false
 
+  /@intlify/bundle-utils/3.1.0_vue-i18n@9.2.2:
+    resolution: {integrity: sha512-ghlJ0kR2cCQ8D+poKknC0Xx0ncOt3J3os7CcIAqqIWVF7k6AtGoCDnIru+YzlZcvFRNmP9wEZ7jKliojCdAWNg==}
+    engines: {node: '>= 12'}
+    peerDependencies:
+      petite-vue-i18n: '*'
+      vue-i18n: '*'
+    peerDependenciesMeta:
+      petite-vue-i18n:
+        optional: true
+      vue-i18n:
+        optional: true
+    dependencies:
+      '@intlify/message-compiler': 9.3.0-beta.3
+      '@intlify/shared': 9.3.0-beta.3
+      jsonc-eslint-parser: 1.4.1
+      source-map: 0.6.1
+      vue-i18n: 9.2.2_vue@3.2.38
+      yaml-eslint-parser: 0.3.2
+    dev: false
+
+  /@intlify/core-base/9.2.2:
+    resolution: {integrity: sha512-JjUpQtNfn+joMbrXvpR4hTF8iJQ2sEFzzK3KIESOx+f+uwIjgw20igOyaIdhfsVVBCds8ZM64MoeNSx+PHQMkA==}
+    engines: {node: '>= 14'}
+    dependencies:
+      '@intlify/devtools-if': 9.2.2
+      '@intlify/message-compiler': 9.2.2
+      '@intlify/shared': 9.2.2
+      '@intlify/vue-devtools': 9.2.2
+    dev: false
+
+  /@intlify/devtools-if/9.2.2:
+    resolution: {integrity: sha512-4ttr/FNO29w+kBbU7HZ/U0Lzuh2cRDhP8UlWOtV9ERcjHzuyXVZmjyleESK6eVP60tGC9QtQW9yZE+JeRhDHkg==}
+    engines: {node: '>= 14'}
+    dependencies:
+      '@intlify/shared': 9.2.2
+    dev: false
+
+  /@intlify/message-compiler/9.2.2:
+    resolution: {integrity: sha512-IUrQW7byAKN2fMBe8z6sK6riG1pue95e5jfokn8hA5Q3Bqy4MBJ5lJAofUsawQJYHeoPJ7svMDyBaVJ4d0GTtA==}
+    engines: {node: '>= 14'}
+    dependencies:
+      '@intlify/shared': 9.2.2
+      source-map: 0.6.1
+    dev: false
+
+  /@intlify/message-compiler/9.3.0-beta.3:
+    resolution: {integrity: sha512-j8OwToBQgs01RBMX4GCDNQfcnmw3AiDG3moKIONTrfXcf+1yt/rWznLTYH/DXbKcFMAFijFpCzMYjUmH1jVFYA==}
+    engines: {node: '>= 14'}
+    dependencies:
+      '@intlify/shared': 9.3.0-beta.3
+      source-map: 0.6.1
+    dev: false
+
+  /@intlify/shared/9.2.2:
+    resolution: {integrity: sha512-wRwTpsslgZS5HNyM7uDQYZtxnbI12aGiBZURX3BTR9RFIKKRWpllTsgzHWvj3HKm3Y2Sh5LPC1r0PDCKEhVn9Q==}
+    engines: {node: '>= 14'}
+    dev: false
+
+  /@intlify/shared/9.3.0-beta.3:
+    resolution: {integrity: sha512-Z/0TU4GhFKRxKh+0RbwJExik9zz57gXYgxSYaPn7YQdkQ/pabSioCY/SXnYxQHL6HzULF5tmqarFm6glbGqKhw==}
+    engines: {node: '>= 14'}
+    dev: false
+
+  /@intlify/vite-plugin-vue-i18n/6.0.1_vite@3.1.0+vue-i18n@9.2.2:
+    resolution: {integrity: sha512-FFVcxVU4bR9vdDLNbltM5mrhndnXMErO01i0RrpdyMegEt3Nu/YLoH0sFdjRun7/RY4vaEnhTnFvVf9uO0dQvg==}
+    engines: {node: '>= 14.6'}
+    peerDependencies:
+      petite-vue-i18n: '*'
+      vite: ^2.9.0 || ^3.0.0
+      vue-i18n: '*'
+    peerDependenciesMeta:
+      petite-vue-i18n:
+        optional: true
+      vite:
+        optional: true
+      vue-i18n:
+        optional: true
+    dependencies:
+      '@intlify/bundle-utils': 3.1.0_vue-i18n@9.2.2
+      '@intlify/shared': 9.3.0-beta.3
+      '@rollup/pluginutils': 4.2.1
+      debug: 4.3.4
+      fast-glob: 3.2.11
+      source-map: 0.6.1
+      vite: 3.1.0_sass@1.54.8
+      vue-i18n: 9.2.2_vue@3.2.38
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
+  /@intlify/vue-devtools/9.2.2:
+    resolution: {integrity: sha512-+dUyqyCHWHb/UcvY1MlIpO87munedm3Gn6E9WWYdWrMuYLcoIoOEVDWSS8xSwtlPU+kA+MEQTP6Q1iI/ocusJg==}
+    engines: {node: '>= 14'}
+    dependencies:
+      '@intlify/core-base': 9.2.2
+      '@intlify/shared': 9.2.2
+    dev: false
+
   /@istanbuljs/schema/0.1.3:
     resolution: {integrity: sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==}
     engines: {node: '>=8'}
@@ -730,6 +832,14 @@ packages:
       acorn-walk: 7.2.0
     dev: true
 
+  /acorn-jsx/5.3.2_acorn@7.4.1:
+    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
+    peerDependencies:
+      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
+    dependencies:
+      acorn: 7.4.1
+    dev: false
+
   /acorn-walk/7.2.0:
     resolution: {integrity: sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==}
     engines: {node: '>=0.4.0'}
@@ -744,7 +854,6 @@ packages:
     resolution: {integrity: sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==}
     engines: {node: '>=0.4.0'}
     hasBin: true
-    dev: true
 
   /acorn/8.7.1:
     resolution: {integrity: sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A==}
@@ -1792,6 +1901,27 @@ packages:
       source-map: 0.6.1
     dev: true
 
+  /eslint-utils/2.1.0:
+    resolution: {integrity: sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==}
+    engines: {node: '>=6'}
+    dependencies:
+      eslint-visitor-keys: 1.3.0
+    dev: false
+
+  /eslint-visitor-keys/1.3.0:
+    resolution: {integrity: sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==}
+    engines: {node: '>=4'}
+    dev: false
+
+  /espree/6.2.1:
+    resolution: {integrity: sha512-ysCxRQY3WaXJz9tdbWOwuWr5Y/XrPTGX9Kiz3yoUXwW0VZ4w30HTkQLaGx/+ttFjF8i+ACbArnB4ce68a9m5hw==}
+    engines: {node: '>=6.0.0'}
+    dependencies:
+      acorn: 7.4.1
+      acorn-jsx: 5.3.2_acorn@7.4.1
+      eslint-visitor-keys: 1.3.0
+    dev: false
+
   /esprima-extract-comments/1.1.0:
     resolution: {integrity: sha512-sBQUnvJwpeE9QnPrxh7dpI/dp67erYG4WXEAreAMoelPRpMR7NWb4YtwRPn9b+H1uLQKl/qS8WYmyaljTpjIsw==}
     engines: {node: '>=4'}
@@ -2735,6 +2865,17 @@ packages:
     hasBin: true
     dev: false
 
+  /jsonc-eslint-parser/1.4.1:
+    resolution: {integrity: sha512-hXBrvsR1rdjmB2kQmUjf1rEIa+TqHBGMge8pwi++C+Si1ad7EjZrJcpgwym+QGK/pqTx+K7keFAtLlVNdLRJOg==}
+    engines: {node: '>=8.10.0'}
+    dependencies:
+      acorn: 7.4.1
+      eslint-utils: 2.1.0
+      eslint-visitor-keys: 1.3.0
+      espree: 6.2.1
+      semver: 6.3.0
+    dev: false
+
   /jsonc-parser/3.1.0:
     resolution: {integrity: sha512-DRf0QjnNeCUds3xTjKlQQ3DpJD51GvDjJfnxUVWg6PZTo2otSm+slzNAxU/35hF8/oJIKoG9slq30JYOsF2azg==}
     dev: false
@@ -2854,7 +2995,6 @@ packages:
 
   /lodash/4.17.21:
     resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
-    dev: true
 
   /log-symbols/5.1.0:
     resolution: {integrity: sha512-l0x2DvrW294C9uDCoQe1VSU4gf529FkSZ6leBl4TiqZH/e+0R7hSfHQBNut2mNygDgHwvYHfFLn6Oxb3VWj2rA==}
@@ -3789,7 +3929,6 @@ packages:
   /semver/6.3.0:
     resolution: {integrity: sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==}
     hasBin: true
-    dev: true
 
   /semver/7.3.7:
     resolution: {integrity: sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==}
@@ -4597,6 +4736,19 @@ packages:
       vue: 3.2.38
     dev: true
 
+  /vue-i18n/9.2.2_vue@3.2.38:
+    resolution: {integrity: sha512-yswpwtj89rTBhegUAv9Mu37LNznyu3NpyLQmozF3i1hYOhwpG8RjcjIFIIfnu+2MDZJGSZPXaKWvnQA71Yv9TQ==}
+    engines: {node: '>= 14'}
+    peerDependencies:
+      vue: ^3.0.0
+    dependencies:
+      '@intlify/core-base': 9.2.2
+      '@intlify/shared': 9.2.2
+      '@intlify/vue-devtools': 9.2.2
+      '@vue/devtools-api': 6.2.1
+      vue: 3.2.38
+    dev: false
+
   /vue-router/4.1.5_vue@3.2.38:
     resolution: {integrity: sha512-IsvoF5D2GQ/EGTs/Th4NQms9gd2NSqV+yylxIyp/OYp8xOwxmU8Kj/74E9DTSYAyH5LX7idVUngN3JSj1X4xcQ==}
     peerDependencies:
@@ -4849,10 +5001,17 @@ packages:
   /yallist/4.0.0:
     resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
 
+  /yaml-eslint-parser/0.3.2:
+    resolution: {integrity: sha512-32kYO6kJUuZzqte82t4M/gB6/+11WAuHiEnK7FreMo20xsCKPeFH5tDBU7iWxR7zeJpNnMXfJyXwne48D0hGrg==}
+    dependencies:
+      eslint-visitor-keys: 1.3.0
+      lodash: 4.17.21
+      yaml: 1.10.2
+    dev: false
+
   /yaml/1.10.2:
     resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
     engines: {node: '>= 6'}
-    dev: true
 
   /yaml/2.1.1:
     resolution: {integrity: sha512-o96x3OPo8GjWeSLF+wOAbrPfhFOGY0W00GNaxCDv+9hkcDJEnev1yh8S7pgHF0ik6zc8sQLuL8hjHjJULZp8bw==}

vite.config.ts

@@ -3,8 +3,10 @@ import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
 import Icons from "unplugin-icons/vite";
 import Components from "unplugin-vue-components/vite";
+import AutoImport from "unplugin-auto-import/vite";
 import IconsResolver from "unplugin-icons/resolver";
 import Pages from "vite-plugin-pages";
+import VueI18n from "@intlify/vite-plugin-vue-i18n";
 
 export default defineConfig(({ mode }) => ({
   resolve: {
@@ -14,11 +16,9 @@ export default defineConfig(({ mode }) => ({
   },
   base: mode === "production" ? "/{{ .Base }}/" : "/",
   plugins: [
-    vue(
+    vue({
-      {
+      reactivityTransform: true,
-        reactivityTransform: true,
+    }),
-      }
-    ),
     Icons({
       autoInstall: true,
     }),
@@ -36,6 +36,17 @@ export default defineConfig(({ mode }) => ({
 
       dts: "assets/components.d.ts",
     }),
+    AutoImport({
+      imports: ["vue", "vue-router", "vue-i18n", "vue/macros", "pinia", "@vueuse/head", "@vueuse/core"],
+      dts: "assets/auto-imports.d.ts",
+      dirs: ["assets/composables", "assets/stores", "assets/utils"],
+      vueTemplate: true,
+    }),
+    VueI18n({
+      runtimeOnly: true,
+      compositionOnly: true,
+      include: [path.resolve(__dirname, "locales/**")],
+    }),
     htmlPlugin(mode),
   ],
   server: {