How to make a Walkthrough Introduction Slider in Ionic Vue Application?

Issue

I have seen most of the mobile application has an intro slider when we first time installs the app. I searched on google but all of them are old version of Ionic with Angular.

I'm very confused about where to put the component and how should I manage the state.

I'm using Capacitor in my application and I think the capacitor has storage.

I also want to know what is the proper flow of doing this thing.

Thanks in advance.

Solution

To remember or track if the slider was shown before you have to store some kind of information to the device. You can use the localStorage or capacitor storage plugin. I will recommend using the plugin as localStorage data might get removed by the operating system or user after some time.

Here is the process to achieve this using the plugin.

Install and sync the plugin

If you are using the Capacitor version 2 or less, you don't have to install it.

npm install @capacitor/storage
npx cap sync

Use it like this

import { Storage } from '@capacitor/storage';

const { value } = Storage.get({
  key: 'introShowed',
});

if (!value) {
  // logic to show the intro goes here

  // set the value to true so next time this code block will not be executed
  Storage.set({
    key: 'introShowed',
    value: true,
  });
}

Answered By - Obaydur Rahman