UI3/src/App.vue

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

<script lang="ts" setup>
import { 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"

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")
  })
})
</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>