nuxt-modules / color-mode

Dark and Light mode with auto detection made easy with Nuxt πŸŒ—
https://color-mode.nuxtjs.org
MIT License
1.09k stars 101 forks source link

refactor: convert `ColorScheme` to script setup #180

Closed Lexpeartha closed 4 months ago

Lexpeartha commented 1 year ago

Resolves #168 (Hopefully?)

I changed the previous implementation of the ColorScheme component to the following:

<script lang="ts">
import { componentName } from '#color-mode-options'
export default {
  name: componentName
}
</script>

<script setup lang="ts">
import { defineProps, withDefaults } from '#imports'

const props = withDefaults(defineProps<{
  placeholder: string
  tag?: string
}>(), {
  tag: 'div'
})
</script>

<template>
  <ClientOnly :placeholder="props.placeholder" :placeholder-tag="props.tag">
    <slot />
  </ClientOnly>
</template>

and indeed, the project that was complaining about types did recognize it correctly. However, when launching dev server, I get:

 ERROR  [@vue/compiler-sfc] <script> and <script setup> must have the same language type.
 [Vue warn]: Unhandled error during execution of setup function 
  at <Anonymous key="default" name="default" hasTransition=false >

And indeed, when looking into node_modules file, first script tag doesn't have lang="ts" in it. It might be something on my machine, where it uses old version of something, and I would greatly appreciate if anybody else tried running this

cc @Atinux

netlify[bot] commented 1 year ago

Deploy Preview for nuxt-color-mode failed.

Name Link
Latest commit 93f4d8c6580757e911f73e2bf21f62b754ae3528
Latest deploy log https://app.netlify.com/sites/nuxt-color-mode/deploys/6398acd4a83edb0009b088f2
atinux commented 1 year ago

I think it might be related to the fact that we are supporting both Nuxt 2 and Nuxt 3 at the moment.

I would be more than happy to refactor the code to make it only Nuxt 3 compatible with a major (see #173 )