Please, improve the Docs about Slides (Swiper)

Ionic Framework Ionic Vue
1

Please, improve the Docs because you remove Ion-Slide in Ionic 7 and i want remove it in Ionic 6 and replace it with Swiper.js but the problem is if i want to ref the swiper i get always undefined.

How can i achieve that i get the ref like
const slides = ref();
slides.value.$el.getSwiper()?

2

If you are using Swiper.js directly, note that the getSwiper method no longer exists. Instead, you should use the @swiper event. Here is an example: Slides | Ionic Documentation

3

Yeah but i dont think it works really because it shows me always “undefined” the next problem is i cannt import IonicSwiper because it says has no export member?

import '@ionic/vue/css/ionic-swiper.css'; its not foundable

4

Are you using the Ionic Framework v6 beta? IonicSwiper and ionic-swiper.css are only included in that version.

It’s hard to say what the issue is without being able to reproduce it myself. Can you send over a GitHub repo?

5

Ionic V. 6.16.3

I have installed all like in the docs.

6

Ionic V. 6.16.3

This is the Ionic CLI version, not the version of Ionic Framework. What version of Ionic Framework are you using?

It should look something like this:

Ionic Framework : @ionic/vue 6.0.0-beta.1
7

I updated it now the Pagination works

8

The problem is you have explicitly installed @ionic/core v6, but you are using @ionic/vue v5 in your application. You never need to install @ionic/core as that will be installed for you automatically when you install @ionic/vue.

I recommend following this guide: ionic-framework/BETA.md at be219a2814800927e6328ff105616713003340b7 · ionic-team/ionic-framework · GitHub

9

@Idebeasi i updated it now the direction to swipe and the pagination works. ^^

it was a version problem, dumb mistake.

thank you for your help!

10

Glad things are working now, and thanks for testing the v6 beta!

11

No problem, after Upgrading the IonButtons has no style and color tag dont work anymore i think a complete new project is better and copy the important thinks or?

12

Like I mentioned before it’s hard to say what the issue may be without a reproduction. Can you publish your app to GitHub and send it over?

13

The issue you are running into in the repo you send over via private message is this: bug: vue v6 with vue 3.1.0 overrides properties and event emitters · Issue #23539 · ionic-team/ionic-framework · GitHub

Vue 3.1.0 shipped a breaking change and we need to better account for it in Framework v6. As a workaround, you can install vue@3.0.11 for now.

14

I am getting this error.
"export ‘IonicSwiper’ was not found in ‘@ionic/vue’;

Here is my ionic setup:
“@ionic/vue”: “^5.4.0”,
“swiper”: “^6.8.4”,
“vue”: “^3.0.0-0”,

15

IonicSwiper will add into ionic/vue product when it is the version of 5.8.5
and IonicSlides will add by the ionic team when ur package ionic/vue in the version of 5.9.1 up

and I recommend ur project should up to date to version 6 or higher, because in version 5. Ur project will have a lot of vulnerability