You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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
with additional BaseImage
Additional context
Don't work
<template>
<div>
<BaseCard>
<templatev-slot:image>
<BaseImageimgSrc="https://picsum.photos/400/400?random=1"imgAlt="Some alt tag"
/>
</template>
<templatev-slot:header>
Here might be a page title
</template>
<templatev-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">
importVuefrom"vue";exportdefaultVue.extend({});
</script>
works
<template>
<div>
<BaseCard>
<templatev-slot:image>
<BaseImageimgSrc="https://picsum.photos/400/400?random=1"imgAlt="Some alt tag"
/>
</template>
<templatev-slot:header>
Here might be a page title
</template>
<templatev-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>
<BaseImageimgSrc="https://picsum.photos/400/400?random=1"imgAlt="Some alt tag"
/>
</div>
</template>
<script lang="ts">
importVuefrom"vue";exportdefaultVue.extend({});
</script>
nuxt.config.js (shared-components is my library for the components)
exportdefault{// Target: https://go.nuxtjs.dev/config-targettarget: "static",// Global page headers: https://go.nuxtjs.dev/config-headhead: {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-csscss: ["@/assets/scss/variables.scss"],styleResources: {scss: ["./assets/scss/*.scss"],},// Plugins to run before rendering page: https://go.nuxtjs.dev/config-pluginsplugins: [],// Auto import components: https://go.nuxtjs.dev/config-componentscomponents: true,// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modulesbuildModules: [// https://go.nuxtjs.dev/typescript"@nuxt/typescript-build","shared-components",],// Modules: https://go.nuxtjs.dev/config-modulesmodules: ["@nuxtjs/style-resources"],// Build Configuration: https://go.nuxtjs.dev/config-buildbuild: {},};
I use nuxt 2.15.2.
The text was updated successfully, but these errors were encountered:
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 aBaseImage
component. Now I want to use theBaseImage
component in a slot from theBaseCard
component but it is not rendered. If I add an additionalBaseImage
component outside of theBaseCard
component, than allBaseImage
components are rendered (see screenshots below). Seems like that the components within a slot are not loaded.Expected behavior
BaseImage
component is renderd within theBaseCard
component without adding it outside of the component.Screenshots
without additional
BaseImage
with additional
BaseImage
Additional context
Don't work
works
nuxt.config.js (
shared-components
is my library for the components)I use nuxt 2.15.2.
The text was updated successfully, but these errors were encountered: