CODEWITHSUNDEEP
javascriptvue.jsnuxt.jsproxies
Cody Wakeford
Cody Wakeford

Reputation: 1

How do I trigger hot reloads for my custom CSS in my vue component?

<template>
    <div class="binav" ref="binav">   

        <div class="nav-content" ref="content">
            <component :is="item" v-for="(item, index) in slotItems" :class="getClass(index)" :key="index" />
        </div>  

    </div>
</template>

<script setup>

const slots = useSlots()
const slotItems = ref([])
const content = ref(null)
const binav = ref(null)

onMounted(() => {
    slotItems.value = slots.default ? slots.default() : []

    const contentWidth = getComputedStyle(binav.value).getPropertyValue('--content-width')
    content.value.style.maxWidth = contentWidth  
})

function getClass(index) {
    return {
        'left': index === 0,
        'right': index === 1,
    }
}

</script>

<style scoped lang="sass">
.binav
    display: flex
    align-items: center
    user-select: none
    width: 100%
    
    .nav-content
        display: flex
        justify-content: space-between
        align-items: center

        // custom
        max-width: 100%
        width: 100%
        margin-inline: auto

        .left
            justify-content: flex-start
                
        .right
            justify-content: flex-end
</style>

Here I have a custom navigation component. It splits the content into two divs, left and right. It when mounting it checks for custom CSS tags and uses them to center align the nav. Though when I make changes to the custom CSS tags it doesnt trigger the Vue hot reload. I have tried adding watchers on various parts of the nav ref but nothing I can find works. I have many components that use this functionality and want them to trigger hot reloads like traditional CSS.

I know this is possible but I'm not all that familiar with Vue's reactivity system under the hood. I think there is some proxy I can watch somewhere but don't know what it is? Anyone know how to do this?

I have tried adding watchers and using the 'change' event listener on the binav reference I have set up.

Upvotes: 0

Views: 56

Answers (1)

Avish95
Avish95

Reputation: 1

Assuming you are trying to apply left or right class based on the index value. It is better to pass the index to the custom component as prop and handle the class applying logic inside the custom component. I don't think the component take ':class' here as you intended. Try to set letf, right classes globally. scope will force them to avoid that the styling in one component affects the styling of elements in other components. https://www.w3schools.com/vue/vue_scoped-styling.php

Upvotes: 0

Related Questions