SampleLogin.vue

<template>
    <ion-content fullscreen class="ion-padding">
        <ion-item class="ion-margin-bottom">
            <ion-label position="floating">Username</ion-label>
            <ion-input v-model="username"></ion-input>
        </ion-item>
        <ion-item class="ion-margin-bottom">
            <ion-label position="floating">Password</ion-label>
            <ion-input v-model="password" type="password"></ion-input>
        </ion-item>
        <ion-button @click="login" expand="full" color="primary">Login</ion-button>
    </ion-content>
</template>

<script setup>
import { IonButton, IonLabel, IonInput, IonItem, IonContent } from '@ionic/vue'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { Http as CapacitorHttp } from '@capacitor-community/http'
import { Device } from '@capacitor/device'
import Http from '@/core/Http/Request'
const username = ref(null)
const password = ref(null)
const router = useRouter()
const login = async () => {
    try {
        const device = await Device.getInfo()
        const { data } = await Http.post('/login', {
            email: username.value,
            password: password.value,
            device_model: device.model,  
        })
        const cookieValues = {
            url: process.env.VUE_APP_BACKEND,
            key: 'token',
            value: data.token,
        }
        await CapacitorHttp.setCookie(cookieValues)
        
        router.push({ name: 'dashboard' })
    } catch(error) {
        console.log('error', error)
    }
}