# Detecting a live slice preview?

**URL:** <https://community.prismic.io/t/detecting-a-live-slice-preview/18142>\
**Category:** Developing with Prismic\
**Tags:** nuxtjs\
**Created:** [December 16, 2024, 8:30pm UTC](https://community.prismic.io/t/detecting-a-live-slice-preview/18142 "2024-12-16T20:30:35Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![grafik](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/grafik/32/2875_2.png) [@grafik](https://community.prismic.io/u/grafik)\
**Post date:** [December 16, 2024, 8:30pm UTC](https://community.prismic.io/t/detecting-a-live-slice-preview/18142/1 "2024-12-16T20:30:35Z")

</div>

Hi all, I'm wondering if there is a way of detecting a live slice preview?

I am creating a website, built using nuxt3, The website has a preloader animation on first load. Ideally I would not see this animation in the slice preview in the prismic backend, however it runs when the slice is loading. Any clues or tips as to how to detect the slice loading into the prismic editor? Currently the preloader it is mounted in the app.vue

Here's a screen grab so you can see what I mean: [Screen Capture on 2024-12-17 at 09-29-01.mp4 - Droplr](http://grfk.co.nz/v/ocaziH)

---

<div class="post-metadata">

**Author:** ![Ezekiel](https://avatars.discourse-cdn.com/v4/letter/e/848f3c/32.png) [@Ezekiel](https://community.prismic.io/u/Ezekiel)\
**Post date:** [December 18, 2024, 5:48pm UTC](https://community.prismic.io/t/detecting-a-live-slice-preview/18142/4 "2024-12-18T17:48:38Z")

</div>

Hi @grafik,

We had an older example on NextJs regarding this. Since the simulator page is just a regular page, you should be able to query data on it like usual and then wrap the simulator component with a react context provider or pass data to your slice zone using its `context` prop.

Here, you can pass an `isSimulator` on the slice zone's context prop and it'll get provided to each of your slices. You can check for that and cancel out of the animation, similar to how you're probably doing for `prefersReducedMotion` already.

I hope that helps 🙂

---

<div class="post-metadata">

**Author:** ![grafik](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/grafik/32/2875_2.png) [@grafik](https://community.prismic.io/u/grafik)\
**Post date:** [December 29, 2024, 8:57pm UTC](https://community.prismic.io/t/detecting-a-live-slice-preview/18142/5 "2024-12-29T20:57:09Z")

</div>

Great thanks, will give that a go

---

<div class="post-metadata">

**Author:** ![grafik](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/grafik/32/2875_2.png) [@grafik](https://community.prismic.io/u/grafik)\
**Post date:** [March 27, 2025, 2:47am UTC](https://community.prismic.io/t/detecting-a-live-slice-preview/18142/6 "2025-03-27T02:47:47Z")

</div>

if anyone is wondering about a nuxt solution, I was able to detect with:

`const isSimulator = computed(() => route.path.startsWith("/slice-simulator"));`

then run in the component I wanted to hide (in this case a preloader)

`onMounted(() => { if (isSimulator.value) return; });`

---

<div class="post-metadata">

**Author:** ![Ezekiel](https://avatars.discourse-cdn.com/v4/letter/e/848f3c/32.png) [@Ezekiel](https://community.prismic.io/u/Ezekiel)\
**Post date:** [March 27, 2025, 7:47am UTC](https://community.prismic.io/t/detecting-a-live-slice-preview/18142/7 "2025-03-27T07:47:09Z")

</div>

Thanks @grafik for getting back to this post with an update! Hopefully it helps the next user encountering this 🙂