fenish Posts - Answer Overflow

fenish

Explore posts from servers

CC#NNuxt CDCloudflare Developers SIASapphire - Imagine a framework

•Created by fenish on 9/3/2024 in #❓・help

nuxt color mode except

i want all my texts turn black when light mode and all my texts turn white in dark mode how can i make it globally because my icons are changing color if i do *

3 replies

NNuxt

•Created by fenish on 8/23/2024 in #❓・help

Layout transition

In my app.vue i have nuxtpage inside layout tags in my layout page i have basic html with slot tag and i called layout "auth" how can i make my indexes to slide animation for example i did this but didn't worked

<template>
    <div class="screen-container">
        <div class="left-container">
            <div class="logo-container">
                <img
                    src="@/assets/images/logo.png"
                    alt="logo"
                    width="230"
                />
                <LoginLangSwitcher />
            </div>
            <Transition>
                <slot />
            </Transition>
        </div>

        <div class="right-container">
            <video
                class="w-full h-full object-cover"
                loop
                muted
                playsinline
                autoplay
            >
                <source
                    src="@/assets/video/login_video.mp4"
                    type="video/mp4"
                />
            </video>
        </div>
    </div>
</template>

<style scoped>
.screen-container {
    @apply w-screen h-screen flex
}

.right-container {
    @apply hidden md:flex w-full
}

.left-container {
    @apply p-10 md:p-16 flex flex-col flex-shrink-0 gap-14 w-full md:w-[600px] dark:bg-zinc-900 bg-white;
}

.logo-container {
    @apply flex justify-between items-start
}

.v-enter-active,
.v-leave-active {
    transition: all 0.4s;
}
.v-enter-from,
.v-leave-to {
    opacity: 0;
    filter: blur(1rem);
}
</style>

<template>
    <div class="screen-container">
        <div class="left-container">
            <div class="logo-container">
                <img
                    src="@/assets/images/logo.png"
                    alt="logo"
                    width="230"
                />
                <LoginLangSwitcher />
            </div>
            <Transition>
                <slot />
            </Transition>
        </div>

        <div class="right-container">
            <video
                class="w-full h-full object-cover"
                loop
                muted
                playsinline
                autoplay
            >
                <source
                    src="@/assets/video/login_video.mp4"
                    type="video/mp4"
                />
            </video>
        </div>
    </div>
</template>

<style scoped>
.screen-container {
    @apply w-screen h-screen flex
}

.right-container {
    @apply hidden md:flex w-full
}

.left-container {
    @apply p-10 md:p-16 flex flex-col flex-shrink-0 gap-14 w-full md:w-[600px] dark:bg-zinc-900 bg-white;
}

.logo-container {
    @apply flex justify-between items-start
}

.v-enter-active,
.v-leave-active {
    transition: all 0.4s;
}
.v-enter-from,
.v-leave-to {
    opacity: 0;
    filter: blur(1rem);
}
</style>

1 replies

NNuxt

•Created by fenish on 4/7/2024 in #❓・help

How can i extend in nuxt eslint module

I didn't figure out how can i extend another module for this plugin

1 replies

Gaming

Programming