Anyway to apply default theme to all PuSkeleton elements in the project without having to use PuSkeletonTheme?

[Bigdragon13th]

Issue I'm having now is that, I want every <PuSkeleton /> in the project to have the same styles (more specific, same color, highlight and duration). Using <PuSkeletonTheme /> I can set those attributes, but only for its children. How can I apply that to all of them? Is there a way to specific those in something like default options in Vue.use?

For example

import Vue from 'vue';
import Skeleton from 'vue-loading-skeleton';

Vue.use(Skeleton, { ...defaultOptions });

[kitwon]

SkeletonTheme use (provide/inject API)[https://vuejs.org/v2/api/#provide-inject] to inject a theme object to all child component.
You can use this component as a Top-level component to control all <PuSkeleton />.

[Bigdragon13th]

Oh, this mean even if <PuSkeleton /> is in another file, as long as it's under the same SkeletonTheme, the theme will still applied! Thanks for the answer, I've tested it and it works!

Just in case someone looking for the same solution, here's my example (in Nuxt)

layouts/defaults.vue:

<template>
    <PuSkeletonTheme
        color="#29313c"
        highlight="rgba(255, 255, 255, 0.25)"
        tag="div"
        class="app"
    >
        <TheMainHeader />
        <main class="page-container">
            <Nuxt />
        </main>
    </PuSkeletonTheme>
</template>

In skeleton file:

<template>
    <!-- The theme from layout will still apply to this component -->
    <PuSkeleton
        circle
        width="16px"
        height="16px"
    />
</template>