Блог

Я создал стороннюю библиотеку компонентов, как описано на этой странице https://nuxtjs.org/blog/improve-your-developer-experience-with-nuxt-components#third-party-component-library. Затем я использовал компоненты в новом проекте clean nuxt. У меня есть BaseCard компонент, который имеет 3 слота, и у меня есть BaseImage компонент. Теперь я хочу использовать BaseImage компонент в слоте из BaseCard компонента, но он не отображается. Если я добавлю дополнительный BaseImage компонент вне BaseCard компонента, BaseImage будут отображаться все компоненты (см. Скриншоты ниже). Похоже, что компоненты внутри слота не загружены.

Скриншоты

без дополнительных BaseImage

с дополнительным BaseImage

Код

Не работает

 <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>
 

работает

 <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 это моя библиотека для компонентов)

 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: {},
};
 

Я использую nuxt 2.15.2.