color-mode icon indicating copy to clipboard operation
color-mode copied to clipboard

refactor: convert `ColorScheme` to script setup

Open Lexpeartha opened this issue 1 year ago • 2 comments

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

Lexpeartha avatar Dec 13 '22 16:12 Lexpeartha

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

netlify[bot] avatar Dec 13 '22 16:12 netlify[bot]

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 )

Atinux avatar Dec 19 '22 16:12 Atinux