open-index/open-npm huggingface dataset:
npm package: @lizychy0329/cupertino-page-router
Description: ✨ What is `cupertino-page-router`? It's a `CupertinoPageRoute<T> class` in [Flutter](https://api.flutter.dev/flutter/cupertino/CupertinoPageRoute-class.html) means that it provides an iOS-style page transition.
Latest version: 0.0.1

# cupertino-page-router

✨ What is `cupertino-page-router`? It's a `CupertinoPageRoute<T> class` in [Flutter](https://api.flutter.dev/flutter/cupertino/CupertinoPageRoute-class.html) means that it provides an iOS-style page transition.

> - A modal route that replaces the entire screen with an iOS transition.
> - The page slides in from the right and exits in reverse. The page also shifts to the left in parallax when another page enters to cover it.

## Example

[CodeSendBox](https://codesandbox.io/p/devbox/vue-ios-like-transitions-5wrlnc?file=%2Fsrc%2FApp.vue%3A3%2C8-3%2C14)

## Install :coffee:

Note: The plugin only support for Vue3+ and Vue Router Next (vue-router^4)

```bash
pnpm i @lizychy0329/cupertino-page-router
```

## Usage :rocket:

### Import the Vue plugin on your main.js

```typescript
// main.ts
import RouterViewTransition from '@lizychy0329/cupertino-page-router'
import '@lizychy0329/cupertino-page-router/style.css'

app.use(RouterViewTransition)
```

### Replace your router-view with RouterViewTransition component

```html
<!-- App.vue -->
<template>
   <router-view-transition />
</template>
```

### Add KeepAlive component with slots

```html
<!-- App.vue -->
<template>
  <router-view-transition v-slot="{ Component }">
    <keep-alive>
      <component :is="Component" />
    </keep-alive>
  </router-view-transition>
</template>
```

## Priority :snake:

Priority: Meta zIndex > Routes Index > Path Depth

1. 🏕️`cupertino-page-router` will default to judging by Path Depth.
2. 🏔️If the Path Depth is the same, it will then evaluate the Routes Index in the routes configuration file.
3. 🌋If the to/from routes in the configuration file have a Meta zIndex field, it will be evaluated with the highest priority. Feel free to ask if you need any further modifications!

```typescript
// Meta zIndex options
const routes = [
  {
    path: '/',
    name: 'page1',
    component: Page1,
    meta: {
      zIndex: 1
    }
  }
]
```