Slideout is not defined

#1

Evening all, i’m trying to make a side navigation and am getting the following error in the devtools console on some pages but not all:
Uncaught ReferenceError: slideout is not defined.
This error then prevents the sidenav from working.

I’ve got the side nav in my layouts file as such: layouts.side-navigation and have included it in my layouts.app file in the body.

<div
        x-data="slideout()"
        x-cloak
        @open-nav-side-menu.window="open = $event.detail.open"
        @keydown.window.tab="usedKeyboard = true"
        @keydown.escape="open = false"
        x-init="init()"
        class="z-40">
        <div
            x-show.transition.opacity.duration.200="open"
            @click="open = false"
            class="fixed inset-0 bg-black bg-opacity-50"></div>
        <div
            class="fixed transition duration-200 right-0 top-0 transform w-3/4 sm:max-w-xs md:max-w-md h-screen bg-gray-900 overflow-y-scroll"
            :class="{'translate-x-full': !open}">

I’m pretty new to alpine & livewire so any advice would be greatly appreciated on what might be causing this.

Any questions let me know.

Many thanks in advance.

#2

Your x-data attribute is pointing to a js function slideout() which is possibly not defined.

I would recommend you to take a look at this short training: https://laracasts.com/series/alpine-essentials and especially at the section “How and When to Extract Component Logic”. This would probably better answer your question than if I try to explain it here…

#3

Hi @Dimonka2 Thanks for the link however the strange thing is i have this working in other parts of the app its just a couple of pages it seems to give the error on?

#4

@nightowl Maybe you are missing some JS with this function that is included on other pages. Try to search for this function in public folder or in some cases this script could also be in a blade.