feat: placeholder slot for component (#282)

Co-authored-by: Sébastien Chopin <seb@nuxt.com>
Co-authored-by: Sébastien Chopin <seb@nuxtlabs.com>

docs/content/1.index.md

@@ -32,8 +32,9 @@ The current version of `@nuxtjs/color-mode` is compatible with [Nuxt 3 and Nuxt
 ::
 
 Add `@nuxtjs/color-mode` dependency to your project:
+
 ```bash
-npx nuxi@latest module add color-mode
+npx nuximodule add color-mode
 ```
 
 Then, add `@nuxtjs/color-mode` to the `modules` section of your `nuxt.config.ts`
@@ -42,7 +43,6 @@ Then, add `@nuxtjs/color-mode` to the `modules` section of your `nuxt.config.ts`
 export default defineNuxtConfig({
   modules: [
     '@nuxtjs/color-mode'
-    // '@nuxtjs/tailwindcss'
   ]
 })
 ```
@@ -167,6 +167,9 @@ Props:
 - `placeholder`: `String`
 - `tag`: `String`,  default: `'span'`
 
+Slots:
+- `placeholder`: used to render as placeholder, similar to the `placeholder` prop
+
 ## Migrating to v3
 
 v3 of `@nuxtjs/color-mode` requires either Nuxt Bridge or Nuxt 3. (If you are using Nuxt 2 without Bridge, you should continue to use v2.)

src/runtime/component.vue2.vue

@@ -11,8 +11,19 @@ export default {
       default: 'span',
     },
   },
-  render(createElement, { data, props, children }) {
+  render(createElement, { data, props, children, slots }) {
     // transform props for <client-only>
+    if (slots.placeholder) {
+      props = {
+        placeholderTag: props.placeholderTag,
+      }
+      const scopedSlots = {
+        placeholder: () => slots.placeholder(),
+      }
+
+      return createElement('client-only', { ...data, props, scopedSlots }, children)
+    }
+
     props = {
       placeholder: props.placeholder,
       placeholderTag: props.tag,

src/runtime/component.vue3.vue

@@ -19,5 +19,11 @@ export default {
     :placeholder-tag="tag"
   >
     <slot />
+    <template
+      v-if="!placeholder"
+      #fallback
+    >
+      <slot name="placeholder" />
+    </template>
   </ClientOnly>
 </template>

src/script.min.js

@@ -1 +1 @@
-script.js
+./script.js