I try to use swiper as alternative to ion-slides because i can’t use it for dynamic render.
I have installed swiper@7.0.1 in package.json correctly, but when import the packages according to the swiper docs in the Vue component (Home.vue), the CLI response the next error:
This dependency was not found:
* swiper/vue in ./node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--14-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist??ref--0-1!./src/views/Home.vue?vue&type=script&lang=ts
To install it, you can run: npm install --save swiper/vue
So, i really don’t know if the issue is the tsconfig.json file, because as a “test” i have installed vue3-circle-progress package and this it works correctly.
Please let me know if i have an issue with the tsconfig or i have not the correct swiper package.
Thanks.
Files:
Home.vue
<template>
<ion-page>
<ion-header>
<ion-toolbar class="custom-toolbar">
<ion-buttons slot="start">
<ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons>
<ion-buttons slot="end">
<ion-icon class="icon-size mr-4" src="assets/icon/pray.svg" />
</ion-buttons>
<ion-title class="text-white">Main Title</ion-title>
</ion-toolbar>
</ion-header>
<ion-content :fullscreen="true">
<ion-refresher slot="fixed" @ionRefresh="doRefresh($event)">
<ion-refresher-content></ion-refresher-content>
</ion-refresher>
<div class="px-4">
<h1 class="text-gray-800 font-bold text-3xl mt-5 mb-3">
{{ $t("home.discover") }}
</h1>
</div>
<swiper
:slides-per-view="3"
:space-between="50"
>
<swiper-slide>Slide 1</swiper-slide>
<swiper-slide>Slide 2</swiper-slide>
<swiper-slide>Slide 3</swiper-slide>
</swiper>
<circle-progress :is-bg-shadow="true" />
</ion-content>
</ion-page>
</template>
<script lang="ts">
import {
IonPage,
IonHeader,
IonToolbar,
IonTitle,
IonContent,
IonRefresher,
IonRefresherContent,
IonSlides,
IonSlide,
IonIcon,
menuController,
} from "@ionic/vue";
import { GetNewests } from "../services/home";
import { onMounted, ref } from "vue";
import { Swiper, SwiperSlide } from "swiper/vue";
import CircleProgress from "vue3-circle-progress";
import "vue3-circle-progress/dist/circle-progress.css";
export default {
name: "Home",
components: {
IonHeader,
IonToolbar,
IonTitle,
IonContent,
IonPage,
IonRefresher,
IonRefresherContent,
IonIcon,
Swiper,
SwiperSlide
},
setup() {
const newests = ref([]);
menuController.enable(true);
const generalOpts = {
slidesPerView: "auto",
zoom: false,
loop: false,
grabCursor: true,
};
function doRefresh(event) {
console.log("Begin async operation");
setTimeout(() => {
console.log("Async operation has ended");
event.target.complete();
}, 2000);
}
async function getNewests(limit = 4, type = 0) {
try {
const res = await GetNewests(limit, type);
if (!res.data.success) {
throw new Error(res.data.message);
}
newests.value = res.data.data;
} catch (error) {
presentAlert("Error", error.message);
}
}
onMounted(() => {
getNewests();
});
return {
newests,
doRefresh,
generalOpts,
};
},
};
</script>
package.json
{
"name": "my-app",
"version": "0.0.1",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"test:e2e": "vue-cli-service test:e2e",
"lint": "vue-cli-service lint"
},
"dependencies": {
"@capacitor/android": "^2.4.2",
"@capacitor/core": "2.4.2",
"@capacitor/ios": "^2.4.2",
"@ionic-native/core": "^5.29.0",
"@ionic-native/youtube-video-player": "^5.29.0",
"@ionic/vue": "^5.4.0",
"@ionic/vue-router": "^5.4.0",
"@types/swiper": "^5.4.3",
"axios": "^0.21.0",
"cordova-plugin-youtube-video-player": "^2.4.0",
"core-js": "^3.6.5",
"swiper": "^7.0.1",
"tailwindcss": "1.9.5",
"vue": "^3.0.0-0",
"vue-i18n": "^9.0.0-beta.8",
"vue-router": "^4.0.0-0",
"vue3-circle-progress": "^1.0.6"
},
"devDependencies": {
"@capacitor/cli": "2.4.2",
"@types/jest": "^24.0.19",
"@typescript-eslint/eslint-plugin": "^2.33.0",
"@typescript-eslint/parser": "^2.33.0",
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-e2e-cypress": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-typescript": "~4.5.0",
"@vue/cli-plugin-unit-jest": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0-0",
"@vue/eslint-config-typescript": "^5.0.2",
"@vue/test-utils": "^2.0.0-0",
"eslint": "^6.7.2",
"eslint-config-prettier": "^6.14.0",
"eslint-plugin-vue": "^7.0.0-0",
"prettier": "^2.1.2",
"typescript": "~3.9.3",
"vue-jest": "^5.0.0-0"
},
"description": "An Ionic project"
}
tsconfig.json
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"resolveJsonModule": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".",
"types": [
"webpack-env",
"jest"
],
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
],
"exclude": [
"node_modules"
]
}