liveh5-nuxt/app/app.vue

<script setup lang="ts">
import type { ConfigProviderTheme } from 'vant'
import useKeepalive from '~/composables/keepalive'
import { appName, appDescription } from '~/constants'
import { useI18n } from 'vue-i18n'

useHead({
  title: useI18n().t('appSetting.appName'),
  meta: [
    { name: 'description', content: useI18n().t('appSetting.appDescription') },
    { name: 'keywords', content: useI18n().t('appSetting.appKeyWords') },
  ],
})

const color = useColorMode()

const mode = computed(() => {
  return color.value as ConfigProviderTheme
})

const keepAliveRouteNames = computed(() => {
  return useKeepalive().routeCaches as string[]
})
</script>

<template>
  <VanConfigProvider :theme="mode">
    <NuxtLoadingIndicator
      color="repeating-linear-gradient(to right,var(--c-primary) 0%,var(--c-primary-active) 100%)" />
    <NuxtLayout>
      <NuxtPage :keepalive="{ include: keepAliveRouteNames }" />
    </NuxtLayout>
  </VanConfigProvider>
</template>

<style>
.page-enter-active,
.page-leave-active {
  transition: all 0.2s;
}

.page-enter-from,
.page-leave-to {
  opacity: 0;
  filter: blur(1rem);
}
</style>