I'm currently using Vue 3 and have installed the vue-tiny-slider library from https://github.com/viktorlarsson/vue-tiny-slider. However, I encountered an error stating 't2 is not a function'. Since the documentation doesn't provide instructions for setting up on Vue 3, I attempted to configure it myself.
Below is my template:
<template>
<div class="my-slider">
<vue-tiny-slider
:mouse-drag="true"
:loop="false"
:items="2"
:gutter="20">
<div
v-for="recipe in storeRecipe.popularRecipes"
:key="recipe.recipe_id">
<ItemCard :recipe="recipe" :pending="storeRecipe.pending" />
</div>
</vue-tiny-slider>
</div>
</template>
And here is the script:
<script setup>
import ItemCard from '@/component/ItemCard.vue';
import { onMounted, h } from 'vue';
import { useStoreRecipe } from '@/store/storeRecipe';
const storeRecipe = useStoreRecipe();
import VueTinySlider from 'vue-tiny-slider';
const render = () => {
return h(
VueTinySlider,
{},
{
default: () => (this.$slots.default ? this.$slots.default() : []),
}
);
};
onMounted(async () => {
render();
await storeRecipe.loadPopularRecipes();
});
</script>
If anyone has a potential solution, please share. Thank you!