Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Errors in the project #41

Open
jannikbuscha opened this issue Dec 12, 2022 · 3 comments
Open

Errors in the project #41

jannikbuscha opened this issue Dec 12, 2022 · 3 comments

Comments

@jannikbuscha
Copy link

Hi, I'm just setting up the project and I'm getting 2 errors in vscode.

These errors do not affect the functionality of the project, but I find them a bit annoying during development.

List.vue:
image

ColorModeSwitch.vue:
image

Is it only me who has these errors and how can I fix them?

I might have already found a solution for the first error:

<script setup lang="ts">
const { flatUnwrap } = useUnwrap()
const slots = useSlots()

defineProps({
  icon: {
    type: String,
    default: 'ph:check-circle-duotone'
  }
})
</script>

<template>
  <ul class="p-0">
    <li v-for="(item, index) of flatUnwrap((slots.default && slots.default()) ?? [], ['ul'])" :key="index" class="flex pl-0 space-x-2 my-1 items-center">
      <Icon :name="icon" class="flex-shrink-0 w-6 h-6 mt-1 text-emerald-500" />
      <span><ContentSlot :use="() => item" unwrap="li" /></span>
    </li>
  </ul>
</template>

For the second one I haven't found anything yet, but I don't seem to be the only one with this problem:
nuxt-modules/color-mode#168

@Lexpeartha
Copy link

Are you per chance using a Take Over mode?

@jannikbuscha
Copy link
Author

jannikbuscha commented Dec 13, 2022

Are you per chance using a Take Over mode?

I get the same errors whether Take Over Mode is enabled or disabled. I have proceeded according to this:
image

Edit: vscode setup:
image

@baikov
Copy link

baikov commented Feb 15, 2023

If you have problem with ColorScheme try this way instead

<template>
  <button @click="toggleDark()">
    <ClientOnly>
      <Icon v-if="colorMode.value === 'dark'" ...>
      <Icon v-else ...>
      <template #fallback>
        // something default
      </template>
    </ClientOnly>
  </button>
</template>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants