vue3-router-tab 1.1.0 → 1.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +26 -0
- package/dist/vue3-router-tab.js +387 -490
- package/dist/vue3-router-tab.umd.cjs +1 -12
- package/lib/components/RouterTab.vue +35 -27
- package/package.json +7 -7
- package/index.d.ts +0 -146
package/README.md
CHANGED
|
@@ -36,6 +36,18 @@ The plugin registers the `<router-tab>` component globally. It also exposes an o
|
|
|
36
36
|
</template>
|
|
37
37
|
```
|
|
38
38
|
|
|
39
|
+
Need to customise the rendered output? Provide a slot and use the routed component directly—see [`example-app/src/App.vue`](example-app/src/App.vue) for a working sample:
|
|
40
|
+
|
|
41
|
+
```vue
|
|
42
|
+
<router-tab cookie-key="app-tabs">
|
|
43
|
+
<template #default="{ Component, route }">
|
|
44
|
+
<Suspense>
|
|
45
|
+
<component :is="Component" :key="route.fullPath" />
|
|
46
|
+
</Suspense>
|
|
47
|
+
</template>
|
|
48
|
+
</router-tab>
|
|
49
|
+
```
|
|
50
|
+
|
|
39
51
|
Configure route metadata to control tab labels, icons, and lifecycle behaviour:
|
|
40
52
|
|
|
41
53
|
```ts
|
|
@@ -96,6 +108,20 @@ useRouterTabsPersistence({
|
|
|
96
108
|
```
|
|
97
109
|
The composable also exposes `serialize` / `deserialize` options so you can encrypt or customise the cookie payload.
|
|
98
110
|
|
|
111
|
+
### Custom rendering
|
|
112
|
+
|
|
113
|
+
You can override the default routed view by providing a `#default` slot. The slot receives the same values you would normally get from `<RouterView v-slot>`:
|
|
114
|
+
|
|
115
|
+
```vue
|
|
116
|
+
<router-tab cookie-key="app-tabs">
|
|
117
|
+
<template #default="{ Component, route }">
|
|
118
|
+
<Suspense>
|
|
119
|
+
<component :is="Component" :key="route.fullPath" />
|
|
120
|
+
</Suspense>
|
|
121
|
+
</template>
|
|
122
|
+
</router-tab>
|
|
123
|
+
```
|
|
124
|
+
|
|
99
125
|
## Customising the context menu
|
|
100
126
|
|
|
101
127
|
```vue
|