diff --git a/packages/components/controls/compass/index.ts b/packages/components/controls/compass/index.ts
index a17763d43..9da62194a 100644
--- a/packages/components/controls/compass/index.ts
+++ b/packages/components/controls/compass/index.ts
@@ -5,9 +5,8 @@ import { $, getVcParentInstance } from '@vue-cesium/utils/private/vm'
 import { defaultProps, defaultOptions } from './defaultProps'
 import { hMergeSlot } from '@vue-cesium/utils/private/render'
 import { VcBtn, VcIcon, VcTooltip } from '@vue-cesium/components/ui'
-import { useCommon } from '@vue-cesium/composables'
+import { useCommon, useLocaleInject } from '@vue-cesium/composables'
 import useCompass from './use-compass'
-import { t } from '@vue-cesium/locale'
 
 export default defineComponent({
   name: 'VcCompass',
@@ -21,6 +20,7 @@ export default defineComponent({
     if (commonState === void 0) {
       return
     }
+    const { t } = useLocaleInject()
     const parentInstance = getVcParentInstance(instance)
     const { $services } = commonState
     const compassState = useCompass(props, ctx, instance)
diff --git a/packages/components/controls/my-location/defaultProps.ts b/packages/components/controls/my-location/defaultProps.ts
index 89fda9a3c..69a97a494 100644
--- a/packages/components/controls/my-location/defaultProps.ts
+++ b/packages/components/controls/my-location/defaultProps.ts
@@ -1,5 +1,5 @@
 import { positionProps } from '@vue-cesium/composables/private/use-position'
-import { t } from '@vue-cesium/locale'
+import { t } from '@vue-cesium/composables/use-locale'
 import { PropType } from 'vue'
 
 export default {
diff --git a/packages/components/controls/my-location/index.ts b/packages/components/controls/my-location/index.ts
index 85875304a..7b03d0422 100644
--- a/packages/components/controls/my-location/index.ts
+++ b/packages/components/controls/my-location/index.ts
@@ -17,9 +17,8 @@ import usePosition from '@vue-cesium/composables/private/use-position'
 import { gcj02towgs84 } from '@vue-cesium/utils/coordtransform'
 import { makeColor, makeCartesian3 } from '@vue-cesium/utils/cesium-helpers'
 import { isArray, isFunction, isPlainObject } from '@vue-cesium/utils/util'
-import { useCommon } from '@vue-cesium/composables'
+import { useCommon, useLocaleInject } from '@vue-cesium/composables'
 import defaultProps from './defaultProps'
-import { t } from '@vue-cesium/locale'
 
 export default defineComponent({
   name: 'VcMyLocation',
@@ -35,6 +34,7 @@ export default defineComponent({
       return
     }
     const { $services } = commonState
+    const { t } = useLocaleInject()
     const rootRef = ref<HTMLElement | null>(null)
     const tooltipRef = ref<typeof VcTooltip | null>(null)
     const btnRef = ref<typeof VcBtn | null>(null)
diff --git a/packages/components/controls/navigation-sm/compass-sm.ts b/packages/components/controls/navigation-sm/compass-sm.ts
index aedc29004..37adc1f7c 100644
--- a/packages/components/controls/navigation-sm/compass-sm.ts
+++ b/packages/components/controls/navigation-sm/compass-sm.ts
@@ -4,9 +4,8 @@ import { VcComponentInternalInstance } from '@vue-cesium/utils/types'
 import { $, getVcParentInstance } from '@vue-cesium/utils/private/vm'
 import { hMergeSlot } from '@vue-cesium/utils/private/render'
 import { VcTooltip } from '@vue-cesium/components/ui'
-import { useCommon } from '@vue-cesium/composables'
+import { useCommon, useLocaleInject } from '@vue-cesium/composables'
 import useCompass from './use-compass'
-import { t } from '@vue-cesium/locale'
 
 export default defineComponent({
   name: 'VcCompassSm',
@@ -43,6 +42,7 @@ export default defineComponent({
     if (commonState === void 0) {
       return
     }
+    const { t } = useLocaleInject()
     const parentInstance = getVcParentInstance(instance)
     const { $services } = commonState
     const compassState = useCompass(props, ctx, instance)
diff --git a/packages/components/controls/navigation-sm/zoom-control-sm.ts b/packages/components/controls/navigation-sm/zoom-control-sm.ts
index 300cfa4ce..107fd822e 100644
--- a/packages/components/controls/navigation-sm/zoom-control-sm.ts
+++ b/packages/components/controls/navigation-sm/zoom-control-sm.ts
@@ -3,9 +3,8 @@ import { VcComponentInternalInstance } from '@vue-cesium/utils/types'
 import usePosition, { positionProps } from '@vue-cesium/composables/private/use-position'
 import { $, getVcParentInstance } from '@vue-cesium/utils/private/vm'
 import { hMergeSlot } from '@vue-cesium/utils/private/render'
-import { useCommon } from '@vue-cesium/composables'
+import { useCommon, useLocaleInject } from '@vue-cesium/composables'
 import useZoomControl from './use-zoom-control'
-import { t } from '@vue-cesium/locale'
 import { VcTooltip } from '@vue-cesium/components/ui'
 import { isObject } from '@vue-cesium/utils/util'
 
@@ -48,7 +47,7 @@ export default defineComponent({
     if (commonState === void 0) {
       return
     }
-
+    const { t } = useLocaleInject()
     const { $services } = commonState
     const positionState = usePosition(props, $services)
     const zoomControlState = useZoomControl(props, ctx, instance, $services)
diff --git a/packages/components/controls/print/createPrintView.ts b/packages/components/controls/print/createPrintView.ts
index 93d8d596d..d8c72a9e3 100644
--- a/packages/components/controls/print/createPrintView.ts
+++ b/packages/components/controls/print/createPrintView.ts
@@ -1,6 +1,14 @@
+/*
+ * @Author: zouyaoji@https://github.com/zouyaoji
+ * @Date: 2021-10-27 15:54:13
+ * @LastEditTime: 2021-11-06 16:07:17
+ * @LastEditors: zouyaoji
+ * @Description:
+ * @FilePath: \vue-cesium@next\packages\components\controls\print\createPrintView.ts
+ */
 import { createApp } from 'vue'
 import VcPrintView from './print-view'
-import { t } from '@vue-cesium/locale'
+import { t } from '@vue-cesium/composables/use-locale'
 
 const styles = `
   .background {
diff --git a/packages/components/controls/print/index.ts b/packages/components/controls/print/index.ts
index 0fc9684b6..40fefe6de 100644
--- a/packages/components/controls/print/index.ts
+++ b/packages/components/controls/print/index.ts
@@ -4,11 +4,10 @@ import { $, getVcParentInstance, getInstanceListener } from '@vue-cesium/utils/p
 import usePosition from '@vue-cesium/composables/private/use-position'
 import { captureScreenshot } from '@vue-cesium/utils/cesium-helpers'
 import { VcBtn, VcTooltip, VcIcon } from '@vue-cesium/components/ui'
-import { useCommon } from '@vue-cesium/composables'
+import { useCommon, useLocaleInject } from '@vue-cesium/composables'
 import createPrintView from './createPrintView'
 import defaultProps from './defaultProps'
 import printWindow from './printWindow'
-import { t } from '@vue-cesium/locale'
 import { isPlainObject } from '@vue-cesium/utils/util'
 
 export default defineComponent({
@@ -24,6 +23,7 @@ export default defineComponent({
     if (commonState === void 0) {
       return
     }
+    const { t } = useLocaleInject()
     const { $services } = commonState
     const rootRef = ref<HTMLElement | null>(null)
     const tooltipRef = ref<typeof VcTooltip | null>(null)
diff --git a/packages/components/controls/print/print-view.ts b/packages/components/controls/print/print-view.ts
index a1123acf4..1881ef149 100644
--- a/packages/components/controls/print/print-view.ts
+++ b/packages/components/controls/print/print-view.ts
@@ -1,6 +1,6 @@
 import { defineComponent, getCurrentInstance, onMounted, onUnmounted, ref, h, createCommentVNode, VNode } from 'vue'
 import { AnyFunction, VcComponentInternalInstance } from '@vue-cesium/utils/types'
-import { t } from '@vue-cesium/locale'
+import { useLocaleInject } from '@vue-cesium/composables'
 
 const VcPrintView = defineComponent({
   name: 'VcPrintView',
@@ -13,6 +13,7 @@ const VcPrintView = defineComponent({
     const printingStarted = ref(false)
     const instance = getCurrentInstance() as VcComponentInternalInstance
     instance.cesiumClass = 'VcPrintView'
+    const { t } = useLocaleInject()
     // methods
     const checkForImagesReady = () => {
       if (ready.value) {
diff --git a/packages/components/controls/status-bar/index.ts b/packages/components/controls/status-bar/index.ts
index ba93d6014..b3eb1b302 100644
--- a/packages/components/controls/status-bar/index.ts
+++ b/packages/components/controls/status-bar/index.ts
@@ -16,10 +16,9 @@ import usePosition from '@vue-cesium/composables/private/use-position'
 import { VcComponentInternalInstance } from '@vue-cesium/utils/types'
 import MouseCoords, { extendForMouseCoords } from './MouseCoords'
 import throttle from '@vue-cesium/utils/private/throttle'
-import { useCommon } from '@vue-cesium/composables'
+import { useCommon, useLocaleInject } from '@vue-cesium/composables'
 import { VcBtn, VcTooltip } from '@vue-cesium/components/ui'
 import defaultProps from './defaultProps'
-import { t } from '@vue-cesium/locale'
 import { isPlainObject } from '@vue-cesium/utils/util'
 
 export default defineComponent({
@@ -39,6 +38,7 @@ export default defineComponent({
     const { $services } = commonState
     const rootRef = ref<typeof VcBtn | null>(null)
     const tooltipRef = ref<typeof VcTooltip | null>(null)
+    const { t } = useLocaleInject()
 
     let lastMouseX = -1
     let lastMouseY = -1
diff --git a/packages/components/controls/vc-overview-map/index.ts b/packages/components/controls/vc-overview-map/index.ts
index eced8452a..1471a51b2 100644
--- a/packages/components/controls/vc-overview-map/index.ts
+++ b/packages/components/controls/vc-overview-map/index.ts
@@ -1,4 +1,4 @@
-import { useCommon } from '@vue-cesium/composables'
+import { useCommon, useLocaleInject } from '@vue-cesium/composables'
 import usePosition from '@vue-cesium/composables/private/use-position'
 import { VcBtn, VcTooltip } from '@vue-cesium/components/ui'
 import { $ } from '@vue-cesium/utils/private/vm'
@@ -19,7 +19,6 @@ import {
 } from 'vue'
 import VcViewer from '@vue-cesium/components/viewer'
 import { hSlot } from '@vue-cesium/utils/private/render'
-import { t } from '@vue-cesium/locale'
 
 export default defineComponent({
   name: 'VcOverviewMap',
@@ -65,6 +64,7 @@ export default defineComponent({
     if (commonState === void 0) {
       return
     }
+    const { t } = useLocaleInject()
     const { $services } = commonState
     const rootRef = ref<HTMLElement | null>(null)
     const rootStyle = reactive<CSSProperties>({})
diff --git a/packages/components/controls/zoom-control/index.ts b/packages/components/controls/zoom-control/index.ts
index 19305cb46..348594734 100644
--- a/packages/components/controls/zoom-control/index.ts
+++ b/packages/components/controls/zoom-control/index.ts
@@ -6,9 +6,8 @@ import { setViewerCamera } from '@vue-cesium/utils/cesium-helpers'
 import { hMergeSlot } from '@vue-cesium/utils/private/render'
 import { defaultProps, defaultOptions } from './defaultProps'
 import { VcBtn, VcIcon, VcTooltip } from '@vue-cesium/components/ui'
-import { useCommon } from '@vue-cesium/composables'
+import { useCommon, useLocaleInject } from '@vue-cesium/composables'
 import useZoomControl from './use-zoom-control'
-import { t } from '@vue-cesium/locale'
 import { kebabCase } from '@vue-cesium/utils/util'
 
 export default defineComponent({
@@ -24,6 +23,7 @@ export default defineComponent({
     if (commonState === undefined) {
       return
     }
+    const { t } = useLocaleInject()
     const { $services } = commonState
     const zoomControlState = useZoomControl(props, ctx, instance, $services)
     const positionState = usePosition(props, $services)
diff --git a/packages/components/drawings/src/index.ts b/packages/components/drawings/src/index.ts
index 61c00074c..658081804 100644
--- a/packages/components/drawings/src/index.ts
+++ b/packages/components/drawings/src/index.ts
@@ -13,7 +13,6 @@ import {
 import { camelize } from '@vue-cesium/utils/util'
 import { VcFabAction } from '@vue-cesium/components/ui'
 import { VcComponentInternalInstance } from '@vue-cesium/utils/types'
-import { t } from '@vue-cesium/locale'
 import VcDrawingPin from './pin'
 import VcDrawingPoint from './point'
 import VcDrawingPolyline from './polyline'
@@ -34,6 +33,7 @@ import {
 import { DrawingActionCmpOpts, DrawingActionCmpRef, DrawingActionOpts, VcDrawingActionInstance } from '@vue-cesium/utils/drawing-types'
 import useDrawingFab from '@vue-cesium/composables/use-drawing/use-drawing-fab'
 import { defaultsDeep } from 'lodash'
+import { useLocaleInject } from '@vue-cesium/composables'
 
 export default defineComponent({
   name: 'VcDrawings',
@@ -43,6 +43,7 @@ export default defineComponent({
     // state
     const instance = getCurrentInstance() as VcComponentInternalInstance
     instance.cesiumClass = 'VcDrawings'
+    const { t } = useLocaleInject()
 
     const options: any = {}
     // computed
diff --git a/packages/components/index.ts b/packages/components/index.ts
index 1bc9042d8..ecc4be0bb 100644
--- a/packages/components/index.ts
+++ b/packages/components/index.ts
@@ -1,3 +1,12 @@
+/*
+ * @Author: zouyaoji@https://github.com/zouyaoji
+ * @Date: 2021-10-27 15:54:11
+ * @LastEditTime: 2021-11-06 15:43:34
+ * @LastEditors: zouyaoji
+ * @Description:
+ * @FilePath: \vue-cesium@next\packages\components\index.ts
+ */
+export * from './config-provider'
 export * from './controls'
 export * from './datasources'
 export * from './drawings'
diff --git a/packages/components/measurements/src/index.ts b/packages/components/measurements/src/index.ts
index 7c1696e3c..735bdb2b5 100644
--- a/packages/components/measurements/src/index.ts
+++ b/packages/components/measurements/src/index.ts
@@ -37,7 +37,7 @@ import VcMeasurementRectangle from './rectangle'
 import VcMeasurementRegular from './regular'
 import { MeasurementActionCmpOpts, MeasurementActionCmpRef, MeasurementActionOpts, VcDrawingActionInstance } from '@vue-cesium/utils/drawing-types'
 import { VcComponentInternalInstance } from '@vue-cesium/utils/types'
-import { t } from '@vue-cesium/locale'
+import { useLocaleInject } from '@vue-cesium/composables'
 import useDrawingFab from '@vue-cesium/composables/use-drawing/use-drawing-fab'
 import { circleDrawingActionDefault, clearActionDefault, regularDrawingActionDefault } from '@vue-cesium/composables/use-drawing/defaultOpts'
 import { defaultsDeep } from 'lodash'
@@ -50,6 +50,7 @@ export default defineComponent({
     // state
     const instance = getCurrentInstance() as VcComponentInternalInstance
     instance.cesiumClass = 'VcMeasurements'
+    const { t } = useLocaleInject()
 
     const clearActionOpts = reactive<typeof clearActionDefault>(defaultsDeep({}, props.clearActionOpts, defaultOptions.clearActionOpts))
     const mainFabOpts = reactive<typeof mainFabDefault>(defaultsDeep({}, props.mainFabOpts, defaultOptions.mainFabOpts))
diff --git a/packages/components/viewer/src/useViewer.ts b/packages/components/viewer/src/useViewer.ts
index db1bdfc6d..1051dca4b 100644
--- a/packages/components/viewer/src/useViewer.ts
+++ b/packages/components/viewer/src/useViewer.ts
@@ -1,6 +1,6 @@
 import { ExtractPropTypes, watch, ref, onMounted, onUnmounted, nextTick, reactive } from 'vue'
 import mitt, { Emitter } from 'mitt'
-import { t } from '@vue-cesium/locale'
+import { useLocaleInject } from '@vue-cesium/composables'
 import defaultProps from './defaultProps'
 import { mergeDescriptors } from '@vue-cesium/utils/merge-descriptors'
 import { dirname, removeEmpty, isEmptyObj } from '@vue-cesium/utils/util'
@@ -47,6 +47,8 @@ export default function (props: ExtractPropTypes<typeof defaultProps>, ctx, vcIn
 
   logger.debug('viewer creating')
 
+  const { t } = useLocaleInject()
+
   // watch
   watch(
     () => props.selectionIndicator,
diff --git a/packages/composables/use-common/index.ts b/packages/composables/use-common/index.ts
index 5e6acdf42..e7160a410 100644
--- a/packages/composables/use-common/index.ts
+++ b/packages/composables/use-common/index.ts
@@ -7,7 +7,7 @@ import { ReadyObj, VcComponentInternalInstance, VcComponentPublicInstance, VcMit
 import * as cesiumProps from '@vue-cesium/utils/cesium-props'
 import { vcKey } from '@vue-cesium/utils/config'
 import useLog from '../private/use-log'
-import { t } from '@vue-cesium/locale'
+import { useLocaleInject } from '../use-locale'
 import useEvents from '../use-events'
 
 export default function (props, { emit }, vcInstance: VcComponentInternalInstance) {
@@ -20,11 +20,13 @@ export default function (props, { emit }, vcInstance: VcComponentInternalInstanc
   const vcMitt: Emitter<VcMittEvents> = mitt()
   vcInstance.vcMitt = vcMitt
   const $services = inject<VcViewerProvider>(vcKey)
+  const { t } = useLocaleInject()
 
   if ($services === void 0) {
     console.error(`${vcInstance.cesiumClass} ${t('vc.loadError')}`)
     return
   }
+
   const parentVcInstance = getVcParentInstance(vcInstance)
   const eventsState = useEvents(props, vcInstance, logger)
   vcInstance.children = []
diff --git a/packages/composables/use-drawing/use-drawing-action.ts b/packages/composables/use-drawing/use-drawing-action.ts
index 92e209d48..a654c253b 100644
--- a/packages/composables/use-drawing/use-drawing-action.ts
+++ b/packages/composables/use-drawing/use-drawing-action.ts
@@ -1,15 +1,15 @@
 /*
  * @Author: zouyaoji@https://github.com/zouyaoji
  * @Date: 2021-10-15 09:47:36
- * @LastEditTime: 2021-10-26 14:25:22
+ * @LastEditTime: 2021-11-06 16:16:03
  * @LastEditors: zouyaoji
  * @Description:
  * @FilePath: \vue-cesium@next\packages\composables\use-drawing\use-drawing-action.ts
  */
 // import { enableMouseEvent } from '@vue-cesium/utils/cesium-props'
 import { DrawTipOpts, VcComponentInternalInstance, VcComponentPublicInstance, VcViewerProvider } from '@vue-cesium/utils/types'
-import { Ref, ref, toRef } from 'vue'
-import { t } from '@vue-cesium/locale'
+import { ref } from 'vue'
+import { useLocaleInject } from '../use-locale'
 import { DrawStatus } from '@vue-cesium/shared'
 import useTimeout from '@vue-cesium/composables/private/use-timeout'
 import { kebabCase } from '@vue-cesium/utils/util'
@@ -17,6 +17,7 @@ import { kebabCase } from '@vue-cesium/utils/util'
 export default function (props, ctx, instance: VcComponentInternalInstance, cmpName: string, $services: VcViewerProvider) {
   instance.cesiumClass = cmpName
   instance.cesiumEvents = []
+  const { t } = useLocaleInject()
   const { emit } = ctx
   const tips = kebabCase(cmpName).split('-')
   if (cmpName === 'VcMeasurementDistance' && props.showComponentLines) {
diff --git a/packages/composables/use-drawing/use-drawing-fab.ts b/packages/composables/use-drawing/use-drawing-fab.ts
index c50d7dfd4..72cdab049 100644
--- a/packages/composables/use-drawing/use-drawing-fab.ts
+++ b/packages/composables/use-drawing/use-drawing-fab.ts
@@ -1,7 +1,7 @@
 /*
  * @Author: zouyaoji@https://github.com/zouyaoji
  * @Date: 2021-10-13 09:45:59
- * @LastEditTime: 2021-10-27 15:08:16
+ * @LastEditTime: 2021-11-06 16:16:29
  * @LastEditors: zouyaoji
  * @Description:
  * @FilePath: \vue-cesium@next\packages\composables\use-drawing\use-drawing-fab.ts
@@ -11,13 +11,13 @@ import { useCommon, useHandler } from '@vue-cesium/composables'
 import { VisibilityState } from '@vue-cesium/shared'
 import { VcDrawingActionInstance } from '@vue-cesium/utils/drawing-types'
 import { VcComponentInternalInstance } from '@vue-cesium/utils/types'
-import { CSSProperties, nextTick, provide, reactive, ref, VNode, h, PropType, createCommentVNode } from 'vue'
+import { CSSProperties, nextTick, provide, reactive, ref, VNode, h, createCommentVNode } from 'vue'
 import usePosition from '../private/use-position'
 import { $ } from '@vue-cesium/utils/private/vm'
 import { isString } from '@vue-cesium/utils/util'
 import { mergeDescriptors } from '@vue-cesium/utils/merge-descriptors'
 import { vcKey } from '@vue-cesium/utils/config'
-import { t } from '@vue-cesium/locale'
+import { useLocaleInject } from '../use-locale'
 import { clearActionDefault } from './defaultOpts'
 import { mainFabDefault } from '@vue-cesium/components/drawings/src/defaultProps'
 
@@ -42,6 +42,7 @@ export default function (
     return
   }
 
+  const { t } = useLocaleInject()
   const { $services } = commonState
   const { emit } = ctx
 
diff --git a/packages/composables/use-drawing/use-drawing-point.ts b/packages/composables/use-drawing/use-drawing-point.ts
index a5240aecf..f44f227fb 100644
--- a/packages/composables/use-drawing/use-drawing-point.ts
+++ b/packages/composables/use-drawing/use-drawing-point.ts
@@ -1,7 +1,7 @@
 /*
  * @Author: zouyaoji@https://github.com/zouyaoji
  * @Date: 2021-10-19 11:34:26
- * @LastEditTime: 2021-11-04 10:42:15
+ * @LastEditTime: 2021-11-06 16:17:12
  * @LastEditors: zouyaoji
  * @Description:
  * @FilePath: \vue-cesium@next\packages\composables\use-drawing\use-drawing-point.ts
@@ -16,7 +16,7 @@ import {
   VcOverlayHtml,
   VcTooltip
 } from '@vue-cesium/components'
-import { t } from '@vue-cesium/locale'
+import { useLocaleInject } from '../use-locale'
 import { MeasureUnits } from '@vue-cesium/shared'
 import { makeCartesian3 } from '@vue-cesium/utils/cesium-helpers'
 import { PointDrawing } from '@vue-cesium/utils/drawing-types'
@@ -33,6 +33,7 @@ export default function (props, ctx, cmpName: string) {
     return
   }
 
+  const { t } = useLocaleInject()
   const { $services } = commonState
   const { emit } = ctx
 
diff --git a/packages/composables/use-drawing/use-drawing-polyline.ts b/packages/composables/use-drawing/use-drawing-polyline.ts
index 8cde66dd0..8f8f7d46b 100644
--- a/packages/composables/use-drawing/use-drawing-polyline.ts
+++ b/packages/composables/use-drawing/use-drawing-polyline.ts
@@ -1,7 +1,7 @@
 /*
  * @Author: zouyaoji@https://github.com/zouyaoji
  * @Date: 2021-10-21 10:43:32
- * @LastEditTime: 2021-11-04 10:01:23
+ * @LastEditTime: 2021-11-06 16:17:49
  * @LastEditors: zouyaoji
  * @Description:
  * @FilePath: \vue-cesium@next\packages\composables\use-drawing\use-drawing-polyline.ts
@@ -22,7 +22,7 @@ import {
   VcPrimitiveGroundPolyline,
   VcTooltip
 } from '@vue-cesium/components'
-import { t } from '@vue-cesium/locale'
+import { useLocaleInject } from '../use-locale'
 import { MeasureUnits } from '@vue-cesium/shared'
 import { calculateAreaByPostions, getGeodesicDistance, makeCartesian3Array, makeMaterial } from '@vue-cesium/utils/cesium-helpers'
 import { PolylineDrawing } from '@vue-cesium/utils/drawing-types'
@@ -40,6 +40,7 @@ export default function (props, ctx, cmpName: string) {
     return
   }
 
+  const { t } = useLocaleInject()
   const { $services } = commonState
   const { emit } = ctx
 
diff --git a/packages/composables/use-drawing/use-drawing-segment.ts b/packages/composables/use-drawing/use-drawing-segment.ts
index 606f2c685..d5a3d29e5 100644
--- a/packages/composables/use-drawing/use-drawing-segment.ts
+++ b/packages/composables/use-drawing/use-drawing-segment.ts
@@ -1,7 +1,7 @@
 /*
  * @Author: zouyaoji@https://github.com/zouyaoji
  * @Date: 2021-10-22 14:09:42
- * @LastEditTime: 2021-11-04 10:25:30
+ * @LastEditTime: 2021-11-06 16:18:12
  * @LastEditors: zouyaoji
  * @Description:
  * @FilePath: \vue-cesium@next\packages\composables\use-drawing\use-drawing-segment.ts
@@ -22,7 +22,7 @@ import {
   VcPrimitiveGroundPolyline,
   VcTooltip
 } from '@vue-cesium/components'
-import { t } from '@vue-cesium/locale'
+import { useLocaleInject } from '../use-locale'
 import { MeasureUnits } from '@vue-cesium/shared'
 import {
   calculateAreaByPostions,
@@ -49,6 +49,7 @@ export default function (props, ctx, cmpName: string) {
     return
   }
 
+  const { t } = useLocaleInject()
   const { $services } = commonState
   const { emit } = ctx
 
diff --git a/packages/composables/use-locale/index.ts b/packages/composables/use-locale/index.ts
index 18b34ab3e..671648451 100644
--- a/packages/composables/use-locale/index.ts
+++ b/packages/composables/use-locale/index.ts
@@ -104,3 +104,8 @@ export const useLocaleInject = () => {
     }
   )
 }
+
+export const t = (...args: any[]): string => {
+  const [path, option] = args
+  return localeObjCache?.t(path, option)
+}
diff --git a/website/app.vue b/website/app.vue
index 54d9dd3e3..877cd7f48 100644
--- a/website/app.vue
+++ b/website/app.vue
@@ -1,6 +1,15 @@
+<!--
+ * @Author: zouyaoji@https://github.com/zouyaoji
+ * @Date: 2021-08-20 15:25:23
+ * @LastEditTime: 2021-11-06 15:41:07
+ * @LastEditors: zouyaoji
+ * @Description:
+ * @FilePath: \vue-cesium@next\website\app.vue
+-->
 <script>
 import { defineComponent, h, computed, watch, getCurrentInstance, onMounted } from 'vue'
 import { RouterView, useRoute } from 'vue-router'
+import { VcConfigProvider } from 'vue-cesium'
 import { ElScrollbar } from 'element-plus'
 import { ElMessageBox } from 'element-plus'
 import MainHeader from './components/header'
@@ -10,22 +19,15 @@ import zhLocale from '@vue-cesium/locale/lang/zh-hans'
 import enLocale from '@vue-cesium/locale/lang/en-us'
 import { Language } from './enums/language'
 
-const lang = location.hash.replace('#', '').split('/')[1] || Language.CN
-const localize = lang => {
-  switch (lang) {
-    case Language.CN:
-      use(zhLocale)
-      break
-    default:
-      use(enLocale)
-  }
+const localeMap = {
+  [Language.CN]: zhLocale,
+  [Language.EN]: enLocale
 }
-localize(lang)
 
 export default defineComponent({
   name: 'App',
 
-  setup(){
+  setup() {
     const route = useRoute()
 
     const lang = computed(() => route.path.split('/')[1] || Language.CN)
@@ -51,20 +53,20 @@ export default defineComponent({
       }, 1000)
     }
 
-    watch(() => lang.value, val => {
-      if (val === Language.CN) suggestJump()
-      localize(val)
-    })
+    watch(
+      () => lang.value,
+      val => {
+        if (val === Language.CN) suggestJump()
+      }
+    )
 
     onMounted(() => {
-      localize(lang.value)
-
       if (lang.value === Language.CN) suggestJump()
     })
 
     return {
       lang,
-      isComponent,
+      isComponent
     }
   },
 
@@ -73,24 +75,45 @@ export default defineComponent({
 
     const notComponent = !this.isComponent
 
-    const mainHeader = notPlay ? h(MainHeader, {
-      style: 'position: fixed;top: 0;width: 100%;z-index: 2000',
-    }) : null
+    const mainHeader = notPlay
+      ? h(MainHeader, {
+          style: 'position: fixed;top: 0;width: 100%;z-index: 2000'
+        })
+      : null
 
     const mainFooter = notPlay && notComponent ? h(MainFooter) : null
 
-    const content = [h('div', {
-      class: 'main-cnt',
-    }, [h(RouterView)]), mainFooter]
-
-    const contentWrapper = notComponent
-      ? h(ElScrollbar, null, { default: () => content })
-      : content
-
-    return h('div', {
-      id: 'app',
-      class: [this.isComponent ? 'is-component' : '', this.lang],
-    }, [mainHeader, contentWrapper])
-  },
+    const content = [
+      h(
+        'div',
+        {
+          class: 'main-cnt'
+        },
+        [h(RouterView)]
+      ),
+      mainFooter
+    ]
+
+    const contentWrapper = notComponent ? h(ElScrollbar, null, { default: () => content }) : content
+
+    return h(
+      VcConfigProvider,
+      {
+        locale: localeMap[this.lang]
+      },
+      {
+        default: () => {
+          return h(
+            'div',
+            {
+              id: 'app',
+              class: [this.isComponent ? 'is-component' : '', this.lang]
+            },
+            [mainHeader, contentWrapper]
+          )
+        }
+      }
+    )
+  }
 })
 </script>
diff --git a/website/docs/en-US/i18n.md b/website/docs/en-US/i18n.md
index 462b3c7a9..d20acb763 100644
--- a/website/docs/en-US/i18n.md
+++ b/website/docs/en-US/i18n.md
@@ -1,3 +1,12 @@
+<!--
+ * @Author: zouyaoji@https://github.com/zouyaoji
+ * @Date: 2021-10-27 15:54:11
+ * @LastEditTime: 2021-11-07 15:38:40
+ * @LastEditors: zouyaoji
+ * @Description:
+ * @FilePath: \vue-cesium@next\website\docs\en-US\i18n.md
+-->
+
 ## Internationalization
 
 VueCesium components are using Chinese **by default**, if you wish you use other languages, you can get you answer by keep reading.
@@ -20,37 +29,39 @@ app.mount('#app')
 
 ### VcConfigProvider
 
-VueCesium also provides a Vue component [VcConfigProvider](/#/en-US/component/config-provider)
+VueCesium also provides a Vue component [VcConfigProvider](/#/en-US/component/vc-config-provider)
 for globally configuring locale and other settings.
 
 ```html
 <template>
   <vc-config-provider :locale="locale">
-    <app />
+    <vc-viewer>
+      <vc-navigation></vc-navigation>
+    </vc-viewer>
   </vc-config-provider>
 </template>
 
 <script>
   import { defineComponent } from 'vue'
-  import { VcConfigProvider } from 'vue-cesium'
+  import { VcConfigProvider, VcViewer, VcNavigation } from 'vue-cesium'
 
-  import zhHans from 'vue-cesium/lib/locale/lang/zh-hans'
+  import enUS from 'vue-cesium/es/locale/lang/en-us'
 
   export default defineComponent({
     components: {
-      VcConfigProvider
+      VcConfigProvider,
+      VcViewer,
+      VcNavigation
     },
     setup() {
       return {
-        locale: zhHans
+        locale: enUS
       }
     }
   })
 </script>
 ```
 
-Full documentation refer to: [VcConfigProvider](/#/en-US/component/vc-config-provider)
-
 <!-- ### CDN Usage
 
 If you are using VueCesium via CDN, then you need to do this, let's again take
diff --git a/website/docs/zh-CN/i18n.md b/website/docs/zh-CN/i18n.md
index 934982cc0..21d1eb4fc 100644
--- a/website/docs/zh-CN/i18n.md
+++ b/website/docs/zh-CN/i18n.md
@@ -1,3 +1,12 @@
+<!--
+ * @Author: zouyaoji@https://github.com/zouyaoji
+ * @Date: 2021-10-27 15:54:11
+ * @LastEditTime: 2021-11-07 15:38:25
+ * @LastEditors: zouyaoji
+ * @Description:
+ * @FilePath: \vue-cesium@next\website\docs\zh-CN\i18n.md
+-->
+
 ## 国际化
 
 VueCesium 组件内部**默认**使用英语，若希望使用其他语言，可以参考下面的方案。
@@ -25,37 +34,39 @@ VueCesium 还提供了一个 Vue 组件 [VcConfigProvider](/#/zh-CN/component/vc
 ```html
 <template>
   <vc-config-provider :locale="locale">
-    <app />
+    <vc-viewer>
+      <vc-navigation></vc-navigation>
+    </vc-viewer>
   </vc-config-provider>
 </template>
 
 <script>
   import { defineComponent } from 'vue'
-  import { VcConfigProvider } from 'vue-cesium'
+  import { VcConfigProvider, VcViewer, VcNavigation } from 'vue-cesium'
 
-  import zhHans from 'vue-cesium/lib/locale/lang/zh-hans'
+  import enUS from 'vue-cesium/es/locale/lang/en-us'
 
   export default defineComponent({
     components: {
-      VcConfigProvider
+      VcConfigProvider,
+      VcViewer,
+      VcNavigation
     },
     setup() {
       return {
-        locale: zhHans
+        locale: enUS
       }
     }
   })
 </script>
 ```
 
-详细配置见：[VcConfigProvider](/#/zh-CN/component/vc-config-provider)
-
 <!-- ### CDN 用法
 
 如果你是使用 CDN 引入的 VueCesium，那你将需要这样做，以 unpkg 举例
 
 ```html
-<script src="//unpkg.com/vue-cesium@next/dist/locale/zh-cn">
+<script src="//unpkg.com/vue-cesium@next">
   app.use(VueCesium, {
     locale: VueCesium.lang.zh
   })