"Maximum call stack size exceeded" with slices

Hello !

I'm trying to understand how to put a slice inside my project. I follow the tutorial and i try to insert a slice in my footer but i have the error : Maximum call stack size exceeded and i don't know how to resolve it....

here is my github link : Github link

thank your for your help !


Hi Guillaume,

What do you need to use slices for in your footer? would the normal custom type structure not provide the structure you need? Slices are great for allowing flexibility within the document content but may not be required in the header/footer?

I've never tried to use the SliceZone in a component but believe this is happening because you're client fetching the data for the footer instead of server side (you can't server side asyncData in components).

If you still want to use the client fetch to get the footer content then you need to either set a default value or conditionally show the slice zone.

If it's any help this is how I fetch and set header/footer data in the store using:

// store/index.js
export const state = () => ({
    navigation: []

export const mutations = {
    NAVIGATION (state, nav) {
        state.navigation = nav

export const actions = {
    async nuxtServerInit ({ commit, dispatch }, { $prismic }) {
        await dispatch('navigationFetch', { $prismic, params })

    async navigationFetch ({ commit, state }, { $prismic }) {
        try {
            const navData = (await $prismic.api.getSingle('navigation')).data
            commit('NAVIGATION', navData)
        } catch (e) {
            // Error

Then I can access this.$store.state.navigation from anywhere in my Nuxt application

Hope this helps.

1 Like

Hello, thank you very much for answer me, i will try like this and i'll tell you if it's work for me !

1 Like