Using is-outside in vue 3

[fernandogiroto]

I'm using vue 3 setup, and I'm trying to use the arrow, using is-outside. However, if I put it as it is in the documentation, I get an error:

Documentation:

<Flicking :options="{ circular: true }" :plugins="plugins">
  <div class="card-panel">1</div>
  <div class="card-panel">2</div>
  <div class="card-panel">3</div>
</Flicking>
<span class="flicking-arrow-prev is-outside"></span>
<span class="flicking-arrow-next is-outside"></span>

My Project:

<template>
    <div ref="test" id="test" class="test"></div>
    <Flicking :plugins="activePlugins" ref="flicking">
        <slot name="content"></slot>
        <template #viewport>
            <div class="flicking-pagination" v-if="pagination"></div>
        </template>
    </Flicking>
    <span class="flicking-arrow-prev is-outside"></span>
    <span class="flicking-arrow-next is-outside"></span>
</template>

<script setup lang="ts">
    // ActivePlugins
    const testingElement = document.querySelector('.test');
    const activePlugins: any[] = [   
        new Arrow({
        parentEl: testingElement,
        prevElSelector: ".flicking-arrow-prev",
        nextElSelector: ".flicking-arrow-next",
    })];

Error:
utils.ts:30 Uncaught (in promise) Error: [Flicking-Arrow] Couldn't find element with the given selector: .flicking-arrow-prev

If I put it inside tags, it doesn't give me an error, but it doesn't work:

<template>
    <div ref="test" id="test" class="test"></div>
    <Flicking
        :options="flickingOptions"
        :plugins="activePlugins"
        @changed="handleChange"
        @move-start="handleChangeStart"
        ref="flicking">

        <slot name="content"></slot>
        <template #viewport>
            <div class="flicking-pagination" v-if="pagination"></div>
        </template>
        <span class="flicking-arrow-prev is-outside"></span>
        <span class="flicking-arrow-next is-outside"></span>
    </Flicking>
</template>

Still the same:

[fernandogiroto]

Any awnser?

[malangfox]

Hello @fernandogiroto.

It seems that the Arrow element is not being found as a bug in our plugin.
We'll leave a comment once we fix this error and release the newest patch.

[CameronJArch]

Having this same exact issue except in React, any updates?

[MHewison]

I had this issue too, for now i just utilise the API without the use of the plugin

vue3 example

<script setup lang="ts">
    import { ref } from 'vue';

    const flicking = ref(null);
    const goToPrev = () => {
        flicking.value && flicking.value.prev();
    };
    
    const goToNext = () => {
        flicking.value && flicking.value.next();
    };
</script>
<template>
  <div class="relative">
      <Flicking ref="flicking">
          <div>1</div>
          <div>2</div>
          <div>3</div>
      </Flicking>
      <span @click="goToPrev" class="flicking-arrow-prev absolute left-[-40px] top-1/2 transform -translate-y-1/2 w-[36px] h-[36px] flex items-center justify-center rounded-full">
          <svg></svg>
      </span>
      <span @click="goToNext" class="flicking-arrow-prev absolute left-[-40px] top-1/2 transform -translate-y-1/2 w-[36px] h-[36px] flex items-center justify-center rounded-full">
          <svg></svg>
      </span>  
  </div>
</template>

[bpetii]

Having the same issue in nextjs, any updates on it?