Skip to content

Commit 7748c02

Browse files
AndreyYolkinAndreyYolkin
committed
docs: migrate compatibility matrix to Vue component
1 parent ddfc103 commit 7748c02

File tree

4 files changed

+88
-20
lines changed

4 files changed

+88
-20
lines changed

‎docs/.vitepress/theme/components/CompatibilityMatrix.vue‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<script setup lang="ts">
2+
const data = [
3+
{ module: '^1.0.0', nuxt: '>=3.15.0', vuetify: '>=3.8.0', i18n: '>=8.0.0' },
4+
{ module: '>= 0.17.0', nuxt: '>= 3.9.0', vuetify: '^3.7.0', i18n: '^8.0.0' },
5+
{ module: '> 0.15.0', nuxt: '>= 3.9.0', vuetify: '^3.6.12', i18n: '^8.0.0' },
6+
{ module: '>= 0.13.0', nuxt: '^3.9.0', vuetify: '^3.5.1', i18n: '^8.0.0' },
7+
{ module: '< 0.13.0', nuxt: '^3.6.5', vuetify: '^3.5.1', i18n: '^8.0.0' },
8+
{ module: '<= 0.7.0', nuxt: '^3.0.0', vuetify: '^3.4.3', i18n: '^8.0.0-beta-12' },
9+
]
10+
</script>
11+
12+
<template>
13+
<div class="compatibility-matrix">
14+
<table>
15+
<thead>
16+
<tr>
17+
<th>Nuxt Module</th>
18+
<th>Nuxt</th>
19+
<th>Vuetify</th>
20+
<th>I18n</th>
21+
</tr>
22+
</thead>
23+
<tbody>
24+
<tr v-for="row in data" :key="row.module">
25+
<td><strong>{{ row.module }}</strong></td>
26+
<td><code>{{ row.nuxt }}</code></td>
27+
<td><code>{{ row.vuetify }}</code></td>
28+
<td><code>{{ row.i18n }}</code></td>
29+
</tr>
30+
</tbody>
31+
</table>
32+
</div>
33+
</template>
34+
35+
<style scoped>
36+
.compatibility-matrix {
37+
border: 1px solid var(--vp-c-divider);
38+
border-radius: 8px;
39+
overflow-x: auto;
40+
margin: 16px 0;
41+
width: 100%;
42+
}
43+
44+
table {
45+
width: 100%;
46+
border-collapse: collapse;
47+
margin: 0 !important;
48+
display: table !important;
49+
}
50+
51+
th, td {
52+
padding: 12px 16px;
53+
/* text-align: center; */
54+
border: none !important;
55+
border-bottom: 1px solid var(--vp-c-divider) !important;
56+
background-color: var(--vp-c-bg);
57+
white-space: nowrap;
58+
}
59+
60+
th {
61+
background-color: var(--vp-c-bg-soft);
62+
font-weight: 600;
63+
color: var(--vp-c-text-1);
64+
}
65+
66+
tr:last-child td {
67+
border-bottom: none !important;
68+
}
69+
70+
tbody tr:hover td {
71+
background-color: var(--vp-c-bg-soft);
72+
}
73+
</style>

‎docs/.vitepress/theme/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import type { Theme } from 'vitepress'
22
import * as Swetrix from 'swetrix'
33
import { inBrowser } from 'vitepress'
44
import DefaultTheme from 'vitepress/theme'
5+
import CompatibilityMatrix from './components/CompatibilityMatrix.vue'
56
import HomeHeroCopy from './components/HomeHeroCopy.vue'
67
import VuetifyLayout from './VuetifyLayout.vue'
78

@@ -19,6 +20,7 @@ export default {
1920
Layout: VuetifyLayout,
2021
enhanceApp ({ app }) {
2122
app.component('HomeHeroCopy', HomeHeroCopy)
23+
app.component('CompatibilityMatrix', CompatibilityMatrix)
2224

2325
Swetrix.init('KMc9xOD28UCn', {
2426
apiURL: 'https://swetrix-api.vuetifyjs.com/log',

‎docs/guide/getting-started/compatibility.md‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
1-
# Compatibility Matrix
2-
3-
| Nuxt Module | Nuxt | Vuetify | I18n |
4-
|-------------|---------|---------|----------------|
5-
| <=0.7.0 | ^3.0.0 | ^3.4.3 | ^8.0.0-beta-12 |
6-
| <0.13.0 | ^3.6.5 | ^3.5.1 | ^8.0.0 |
7-
| >=0.13.0 | ^3.9.0 | ^3.5.1 | ^8.0.0 |
8-
| >0.15.0 | >=3.9.0 | ^3.6.12 | ^8.0.0 |
9-
| >=0.17.0 | >=3.9.0 | ^3.7.0 | ^8.0.0 |
1+
# Compatibility
2+
3+
## Version Requirements
4+
5+
This module requires at least **Nuxt** `^3.15.0` (Nuxt 4 is also supported), **Vuetify** `^3.8.0`, and **@nuxtjs/i18n** `^8.0.0`.
6+
7+
::: info Builder Support
8+
This module only supports **Vite**. Webpack and Rspack are **not** supported.
9+
:::
10+
11+
## Compatibility Matrix
12+
13+
<CompatibilityMatrix />

‎docs/guide/index.md‎

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -361,14 +361,3 @@ export interface VOptions extends Partial<Omit<VuetifyOptions, 'ssr' | 'aliases'
361361
You don't need to install any [Vuetify Vite Plugin](https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin), the module will throw an error if any Vuetify Vite Plugin is installed in your Nuxt configuration.
362362
:::
363363

364-
## Compatibility
365-
366-
- **Nuxt**: v3.15.0+
367-
- **Vuetify**: v3.8+
368-
- **Builder**: Vite only (Webpack/Rspack are not supported)
369-
370-
::: details Version History
371-
- `v0.19.0`: Requires Nuxt `^3.15.0`
372-
- `v0.10.0`: Requires Nuxt `^3.9.0`
373-
- `v0.7.0`: Requires Nuxt `^3.6.5`
374-
:::

0 commit comments

Comments
 (0)