components icon indicating copy to clipboard operation
components copied to clipboard

Component in component template not loaded

Open marvincaspar opened this issue 4 years ago • 0 comments

Describe the bug I've created a third party components library as described on this page https://nuxtjs.org/blog/improve-your-developer-experience-with-nuxt-components#third-party-component-library. Than I used the components in a new clean nuxt project. I have a BaseCard component which has 3 slots and I have a BaseImage component. Now I want to use the BaseImage component in a slot from the BaseCard component but it is not rendered. If I add an additional BaseImage component outside of the BaseCard component, than all BaseImage components are rendered (see screenshots below). Seems like that the components within a slot are not loaded.

Expected behavior BaseImage component is renderd within the BaseCard component without adding it outside of the component.

Screenshots without additional BaseImage image

with additional BaseImage image

Additional context Don't work

<template>
  <div>
    <BaseCard>
        <template v-slot:image>
            <BaseImage
                imgSrc="https://picsum.photos/400/400?random=1"
                imgAlt="Some alt tag"
            />
        </template>
        <template v-slot:header>
            Here might be a page title
        </template>
        <template v-slot:content>
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum
                pariatur distinctio cum. Ratione doloribus asperiores eaque
                laboriosam repellendus perferendis iusto magni in necessitatibus
                exercitationem eum expedita aliquam autem, tenetur itaque.
            </p>
        </template>
    </BaseCard>
  </div>
</template>

<script lang="ts">
import Vue from "vue";

export default Vue.extend({});
</script>

works

<template>
  <div>
    <BaseCard>
        <template v-slot:image>
            <BaseImage
                imgSrc="https://picsum.photos/400/400?random=1"
                imgAlt="Some alt tag"
            />
        </template>
        <template v-slot:header>
            Here might be a page title
        </template>
        <template v-slot:content>
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum
                pariatur distinctio cum. Ratione doloribus asperiores eaque
                laboriosam repellendus perferendis iusto magni in necessitatibus
                exercitationem eum expedita aliquam autem, tenetur itaque.
            </p>
        </template>
    </BaseCard>
    <BaseImage
       imgSrc="https://picsum.photos/400/400?random=1"
       imgAlt="Some alt tag"
    />
  </div>
</template>

<script lang="ts">
import Vue from "vue";

export default Vue.extend({});
</script>

nuxt.config.js (shared-components is my library for the components)

export default {
  // Target: https://go.nuxtjs.dev/config-target
  target: "static",

  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: "demo",
    htmlAttrs: {
      lang: "en",
    },
    meta: [
      { charset: "utf-8" },
      { name: "viewport", content: "width=device-width, initial-scale=1" },
      { hid: "description", name: "description", content: "" },
    ],
    link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: ["@/assets/scss/variables.scss"],
  styleResources: {
    scss: ["./assets/scss/*.scss"],
  },

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // https://go.nuxtjs.dev/typescript
    "@nuxt/typescript-build",
    "shared-components",
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: ["@nuxtjs/style-resources"],

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {},
};

I use nuxt 2.15.2.

marvincaspar avatar Feb 28 '21 20:02 marvincaspar