Put slices into footer?

Developing with Prismic
1

hello, i finally understood Prismic and how slices & components works and i make my whole homepage. I try to put a slice into my footer for my menu (i want my client generate as much links he wants)

i follow this doc : Navbars, footers, and menus with Nuxt - Documentation - Prismic but it's only to have the menu where we want.

I succeed to generate slices for my homepage but i don't know how to do in my footer components

i tried this:

<template>
  <footer>
    <slice-zone :components="components" :slices="footer.data.slices" />
        <div class="container-eniblock">
            <div class="logo-footer">
                <!-- <PrismicImage :field="footer.data.logo" /> -->
            </div>
<!-- <div class="nav-footer">
    <nav class="nav-footer-list">

        <h6>Products</h6>
            <ul>
                <li>
                </li>
            </ul>
    </nav>
    <nav class="nav-footer-list">
        <h6>Company</h6>
            <ul>
                <li>About Eniblock</li>
                <li>Newsroom & Blog</li>
                <li>Investors</li>
            </ul>
    </nav>
    <nav class="nav-footer-list">
        <h6>Docs</h6>
            <ul>
                <li>API</li>
                <li>Support</li>
            </ul>
    </nav>
</div> -->
<div class="subscribe">
    <div class="logos-social">
        <img src="~assets/svg/linkedin.svg" alt="logo linkedin">
        <img src="~assets/svg/twitter.svg" alt="logo twitter">     
    </div>
    <p>Susbcribe to our newsletter</p>
    <div class="email">
        <input type="text" placeholder="Your email">
            <img src="~assets/svg/input-footer.svg" alt="arrow black">
            </div>
        </div>


        <div class="language">
            <a href="#" class="btn">
                <span class="btn-text">English <div class="arrow-down">
                    <img src="~assets/svg/arrow-down.svg" alt="arrow down">
                </div>
               </span>
            </a>
            </div>


</div>
        <div class="container-copyright">
            <div class="terms"><p>Privacy policy</p><p>Terms and conditions</p></div>
                <div class="copyright">© 2022 Eniblock. All rights reserved. Made by Bruno</div>
                    <div class="language">
                        <p>Contact ou Team</p>
                        <a href="#" class="btn">
                            <span class="btn-text">English <div class="arrow-down">
                                <img src="~assets/svg/arrow-down.svg" alt="arrow down">
                            </div>
                           </span>
                        </a>
                        </div>
                </div>
        </footer>
</template>

<script>
import { components } from '~/slices' 
 export default {
      data: function() {
        return {
          footer: {},
          components:{}
        }
    },
      async fetch() {
        this.footer = await this.$prismic.api.getSingle('footer')
      }
    }
        </script>

but i have this error :

**client.js?06a0:57 [SliceZone] Could not find a component for Slice type "slice_menu" {**
**  variation: 'default',**
**  version: 'sktwi1xtmkfgx8626',**
**  items: [ { label: [Array], link: [Object] } ],**
**  primary: { title: [ [Object] ] },**
**  id: 'slice_menu$4d9acc7b-ee37-4c8b-a8ee-a522a799477a',**
**  slice_type: 'slice_menu',**
**  slice_label: null**
**}**
**eval @ client.js?06a0:57**
**eval @ client.js?06a0:57**
**eval @ client.js:1298**
**./.nuxt/client.js @ app.js:23**
**__webpack_require__ @ runtime.js:854**
**fn @ runtime.js:151**
**0 @ app.js:1668**
**__webpack_require__ @ runtime.js:854**
**checkDeferredModules @ runtime.js:46**
**webpackJsonpCallback @ runtime.js:33**
**(anonyme) @ app.js:1**
**common.js?762c:356 [SliceZone] Could not find a component for Slice type "slice_menu" {…}**

here my github link : GitHub - ducuingg/eniblock-exo-prismic

thank you very much !

2

You can try this in your script tag:

<script>
import { components } from "~/slices";
export default {
  props: {
    footer: { type: Object },
  },
  data: function () {
    return {
      components,
    };
  },
};
</script>

You were passing down the footer query from you default layout as props and then doing another query with the same variable name in the component.

1 Like