Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Component in component template not loaded #158

Open
marvincaspar opened this issue Feb 28, 2021 · 0 comments
Open

Component in component template not loaded #158

marvincaspar opened this issue Feb 28, 2021 · 0 comments

Comments

@marvincaspar
Copy link

marvincaspar commented Feb 28, 2021

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant