Skip to content

Component in component template not loaded #158

Open
@marvincaspar

Description

@marvincaspar

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions