update documentation

.changeset/forty-crabs-beg.md

@@ -0,0 +1,6 @@
+---
+'vue-types-nuxt': major
+---
+
+- Remove Nuxt@2 support
+- Update vue-types dependency to v6

.changeset/wet-bottles-drop.md

@@ -1,16 +1,61 @@
 ---
 'vue-types': major
-'vue-types-nuxt': major
 ---
 
-## Major changes:
-
-### Drop Vue 2 support
+#### Drop Vue 2 support
 
 Vue 2 reached End of Life (EOL) on December 31st, 2023. By dropping Vue 2 compatibility we can deliver a smaller package and make the source code more maintainable.
 
 If you're unable to update to Vue 3, please use vue-types@5.x
 
-### Package format review:
+#### Removed `VueTypes.extend` method
+
+`VueTypes.extend` was deprecated in v5. In v6 this method has been removed. Please migrate your code to use ES6+ `extends` feature.
+
+Example:
+
+Using `VueTypes.extend` (old):
+
+```js
+import VueTypes from 'vue-types';
+
+export const VueTypesProject = VueTypes.extend([
+  {
+    name: 'maxLength',
+    type: String,
+    validator: (max, v) => v.length <= max,
+  },
+  {
+    name: 'positive',
+    getter: true,
+    type: Number,
+    validator: (v) => v > 0,
+  },
+])
+```
+
+Using ES6+ `extends` (new):
+
+```js
+import VueTypes, { toType } from 'vue-types'
+
+export class VueTypesProject extends VueTypes {
+  static maxLength(max) {
+    return toType('maxLength', {
+      type: String,
+      validator: (v) => String(v).length <= max,
+    })
+  }
+
+  static get positive() {
+    return toType('positive', {
+      type: Number,
+      validator: (v) => v > 0,
+    })
+  }
+}
+```
+
+#### Package format review:
 * ESM and CJS builds target is ESNext (browsers with support for the latest JavaScript features).
 * UMD builds target is ES2016 (aligned with [Vue 3 browser support](https://vuejs.org/about/faq#what-browsers-does-vue-support))

packages/docs/.vitepress/config.ts

@@ -1,12 +1,14 @@
 import { defineConfig } from 'vitepress'
 import container from 'markdown-it-container'
+import { tabsMarkdownPlugin } from 'vitepress-plugin-tabs'
 
 export default defineConfig({
   title: 'VueTypes',
   base: process.env.NODE_ENV === 'production' ? '/vue-types/' : '/',
   lastUpdated: true,
   markdown: {
     config(md) {
+      md.use(tabsMarkdownPlugin)
       md.use(container, 'ts', {
         render(tokens, idx) {
           const token = tokens[idx]
@@ -45,7 +47,6 @@ export default defineConfig({
           { text: 'Using VueTypes', link: '/guide/validators' },
           { text: 'Namespaced Usage', link: '/guide/namespaced' },
           { text: 'Configuration', link: '/guide/configuration' },
-          { text: 'Troubleshooting', link: '/guide/troubleshooting' },
         ],
       },
       {

packages/docs/.vitepress/theme/index.ts

@@ -0,0 +1,11 @@
+import type { Theme } from 'vitepress'
+import DefaultTheme from 'vitepress/theme'
+import { enhanceAppWithTabs } from 'vitepress-plugin-tabs/client'
+import './index.css'
+
+export default {
+  extends: DefaultTheme,
+  enhanceApp({ app }) {
+    enhanceAppWithTabs(app)
+  },
+} satisfies Theme

packages/docs/components/CodeExample.vue

@@ -0,0 +1,26 @@
+<script lang="ts">
+import { defineComponent, h, resolveComponent, useSlots } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const slots = useSlots()
+    const PluginTabs = resolveComponent('PluginTabs')
+    const PluginTabsTab = resolveComponent('PluginTabsTab')
+    const [options, _hr, setup] = slots.default()
+
+    return () =>
+      setup
+        ? h(
+            PluginTabs,
+            {
+              sharedStateKey: 'code',
+            },
+            [
+              h(PluginTabsTab, { label: 'Options API' }, options),
+              h(PluginTabsTab, { label: 'Setup API' }, setup),
+            ],
+          )
+        : h(options)
+  },
+})
+</script>

packages/docs/guide/configuration.md

@@ -7,16 +7,23 @@ Starting from version 4, VueTypes has a global configuration object that can be
 
 The configuration is exposed both as a property of the default export, and as a named export:
 
-```ts
-// default exported instance
-import VueTypes from 'vue-types'
+::: code-group
 
-// named export
+```ts [named export]
 import { config } from 'vue-types'
 
 VueTypes.config === config
 ```
 
+```js [default export]
+import VueTypes from 'vue-types'
+
+VueTypes.config === config
+```
+
+:::
+
+
 ## Configuration Options
 
 - `silent`: (boolean, default `false`) set to `true` to prevent VueTypes from logging validation warnings.

packages/docs/guide/installation.md

@@ -3,8 +3,9 @@
 ::: warning VERSION NOTE
 This guide covers VueTypes 2+.
 
-- VueTypes 2 is compatible with **Vue 1 and 2**.
+- **VueTypes 6+ is compatible with Vue 3**.
 - VueTypes 4+ is compatible with **Vue 2 and Vue 3**.
+- VueTypes 2 is compatible with **Vue 1 and 2**.
   :::
 
 ## NPM package
@@ -18,24 +19,24 @@ npm install vue-types --save
 Add the following script tags before your code
 
 ```html
-<script src="https://unpkg.com/vue-types@5"></script>
+<script src="https://unpkg.com/vue-types@6"></script>
 
 <!-- Or -->
 
-<script src="https://cdn.jsdelivr.net/npm/vue-types@5/dist/vue-types.umd.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-types@6/dist/index.umd.js"></script>
 ```
 
 In modern browsers [supporting ES Modules](https://caniuse.com/es6-module) you can import the library like this:
 
 ```html
 <script type="module">
-  import { string, number } from 'https://unpkg.com/vue-types@5?module'
+  import { string, number } from 'https://unpkg.com/vue-types@6?module'
 </script>
 
 <!-- Or -->
 
 <script type="module">
-  import { string, number } from 'https://cdn.jsdelivr.net/npm/vue-types@5/+esm'
+  import { string, number } from 'https://cdn.jsdelivr.net/npm/vue-types@6/+esm'
 </script>
 ```
 
@@ -49,17 +50,6 @@ Modern bundlers and tools should be able to automatically pick the correct entry
 import { string, oneOf } from 'vue-types' // or: import VueTypes from 'vue-types';
 ```
 
-::: details More details
-
-For reference, here is the list of available entry points:
-
-- `vue-types.modern.js`: ES module for environments [supporting it](https://caniuse.com/es6-module). This is the default entry point for Node 14+, Webpack 5+, Rollup and other tools with native support for ES Modules (like [Vite](https://vitejs.dev/), [Nuxt 3](https://nuxt.com/), Vue CLI 5 and [Snowpack](https://www.snowpack.dev/)).
-- `vue-types.m.js`: ES5 compiled version exported as ES module. This is the default entry point for Webpack 4 and frameworks like [Nuxt 2](https://nuxtjs.org/) and [Vue CLI 4](https://cli.vuejs.org/)
-- `vue-types.cjs`: ES5 compiled version exported as CommonJS module. This is the default entry point for Node 12 and older and tools not supporting ES Modules.
-- `vue-types.umd.js`: ES5 compiled version bundled as UMD module. This entry point can be used when loading VueTypes from a `<script src="...">` tag or from a CDN. It's the default entry point for [unpkg](https://unpkg.com/).
-
-:::
-
 ## Production build
 
 Vue.js does not validate components' props when used in a production build. If you're using a bundler such as Webpack or rollup, you can shrink VueTypes file size by around **70%** (minified and gzipped) by removing the validation logic while preserving the library's API methods. To achieve that result, VueTypes ships with a `vue-types/shim` module that can be used as alias in production builds.
@@ -76,12 +66,11 @@ See below for common configuration scenarios.
 
 For reference, here is a table showing the full and shim versions of the library for each module system.
 
-| Module system | Full Library entry point | Shim entry point       |
-| ------------- | ------------------------ | ---------------------- |
-| Modern ES     | `vue-types.modern.js`    | `shim/index.modern.js` |
-| ES5 ES        | `vue-types.m.js`         | `shim/index.m.js`      |
-| CommonJS      | `vue-types.cjs`          | `shim/index.cjs.js`    |
-| UMD           | `vue-types.umd.js`       | `shim/index.umd.js`    |
+| Module system | Full Library entry point | Shim entry point    |
+| ------------- | ------------------------ | ------------------- |
+| ES5 ES        | `index.mjs`              | `shim/index.mjs`    |
+| CommonJS      | `index.cjs`              | `shim/index.cjs`    |
+| UMD           | `index.umd.js`           | `shim/index.umd.js` |
 
 :::
 
@@ -90,7 +79,7 @@ For reference, here is a table showing the full and shim versions of the library
 If you're including the library via a `script` tag, use the dedicated shim build file:
 
 ```html
-<script src="https://unpkg.com/vue-types@5/shim/index.umd.js"></script>
+<script src="https://unpkg.com/vue-types@6/shim.umd.js"></script>
 ```
 
 ### Vite
@@ -177,20 +166,6 @@ export default {
 }
 ```
 
-::: warning
-In projects using Nuxt 2, use the `buildModules` options:
-
-```js
-// nuxt.config.js
-
-export default {
-  // ...
-  buildModules: ['vue-types-nuxt'],
-}
-```
-
-:::
-
 The modules accepts a `shim` boolean option to forcefully enable / disable the shim:
 
 ```ts