Is it possible to put a CSS template inside a Vue component?

user_14739472 0
Viewed 261

I've created the following Vue component:

var loading = new Vue({
    el: "#loading_id",
    components:{
        'loading' : {
            template : `
                <div>
                    <div id="screenLoading" class="background">
                        <div class="loading">
                            <div class="obj"></div>
                            <div class="obj"></div>
                            <div class="obj"></div>
                            <div class="obj"></div>
                            <div class="obj"></div>
                            <div class="obj"></div>
                            <div class="obj"></div>
                            <div class="obj"></div>
                        </div>
                    </div>
                </div>
             `,
            methods: {
                startLoading: function() {
                    const load = document.getElementById("screenLoading");
                    load.classList.add('show')
                },
                stopLoading: function(){
                    const load = document.getElementById("screenLoading");
                    load.classList.remove('show')
                }
            }
        }
    }
});

loading.$children[0].startLoading()
setTimeout(() => {
    loading.$children[0].stopLoading()
}, 3500);
.background {
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0,.5);
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 2000;
    display: none;
    justify-content: center;
    align-items: center;
}

.background.show {
    display: flex;
}

.loading{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 40px;
    display: flex;
    align-items: center;
}

.obj{
    width: 12px;
    height: 70px;
    background: white;
    margin: 0 3px;
    border-radius: 10px;
    animation: loading 0.8s infinite;
}

.obj:nth-child(2){
    animation-delay: 0.1s;
}
.obj:nth-child(3){
    animation-delay: 0.2s;
}
.obj:nth-child(4){
    animation-delay: 0.3s;
}
.obj:nth-child(5){
    animation-delay: 0.4s;
}
.obj:nth-child(6){
    animation-delay: 0.5s;
}
.obj:nth-child(7){
    animation-delay: 0.6s;
}
.obj:nth-child(8){
    animation-delay: 0.7s;
}

@keyframes loading{
    0%{
        height: 0;
    }
    50%{
        height: 70px;
    }
    100%{
        height: 0;
    }
}
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<loading id="loading_id"></loading>

It works perfectly fine, its purpose is to be a loading screen for me to use when I have to make something wait on my webpage. However, instead of loading the CSS from an external CSS file with the <style> tag on the main HTML, I'd like to load my CSS directly from inside Vue, just like I did with the HTML on the template variable. Basically, it'd be something like the following:

var loading = new Vue({
    el: "#loading_id",
    components:{
        'loading' : {
            template : `myHTML template`,
            cssTemplate: `myCSS template`,
            methods: {
                // my methods
            }
        }
    }
});

Is it possible to do on Vue? Can I write CSS templates inside a Vue component?

I know I also can load small pieces of CSS styles with Vue as described here, but in my case, I'd like to keep the classes and ids declaration as they are in a normal CSS file...

vue.js
1 Answers

You can include css in your vue component in the style tag section as below:

<style scoped src="@/assets/styles/myCSSTemplate.css">
</style>

Also try to use proper structure when creating a vue component by having template, script and style sections.

For exmaple you can create Vue instane in App.vue and then have a component as YourComponent.vue

Refer to Vue documentation here.

user_74440510
Related