UI3/src/App.vue

<template>
  <el-config-provider :locale="locale">
    <RouterView />
  </el-config-provider>
</template>

<script lang="ts">
import { defineComponent, nextTick, onBeforeMount, onMounted } from "vue"
import { RouterView } from "vue-router"
import appStore from "@/stores"
import { themeMode } from "@/core/helpers/config"
import { initializeComponents } from "@/core/plugins/keenthemes"
import zhCn from "element-plus/lib/locale/lang/zh-cn"

export default defineComponent({
  name: "app",
  components: {
    RouterView,
  },
  setup() {
    const configBodyStore = appStore.bodyConfigStore
    const locale = zhCn
    onBeforeMount(() => {
      /**
       * Overrides the layout config using saved data from localStorage
       * remove this to use static config (@/core/config/DefaultLayoutConfig.ts)
       */
      configBodyStore.overrideLayoutConfig()

      /**
       *  Sets a mode from configuration
       */
      configBodyStore.setThemeMode(themeMode.value)
    })

    onMounted(() => {
      nextTick(() => {
        initializeComponents()

        configBodyStore.removeBodyClassName("page-loading")
      })
    })
    return {
      locale,
    }
  },
})
</script>

<style lang="scss">
//@import "bootstrap-icons/font/bootstrap-icons.css";
//@import "apexcharts/dist/apexcharts.css";
//@import "quill/dist/quill.snow.css";
@import "animate.css";
@import "sweetalert2/dist/sweetalert2.css";
//@import "nouislider/distribute/nouislider.css";
@import "@fortawesome/fontawesome-free/css/all.min.css";
//@import "socicon/css/socicon.css";
//@import "line-awesome/dist/line-awesome/css/line-awesome.css";
//@import "dropzone/dist/dropzone.css";
//@import "@vueform/multiselect/themes/default.css";
@import "prism-themes/themes/prism-shades-of-purple.css";
//@import "element-plus/dist/index.css";

// Main demo style scss
@import "assets/fonticon/fonticon.css";
@import "assets/sass/element-ui.dark";
@import "assets/sass/plugins";
@import "assets/sass/style";

#app {
  display: contents;
}
</style>