docs: Some clarifications and cleanups (#1146)

packages/docs/src/.vitepress/theme/components/NestedA.vue

@@ -5,12 +5,12 @@
       <input type="number" v-model.number="numberA">
     </div>
     <NestedB />
-    <!-- <pre style="background-color: white;">{{ $v.$errors }}</pre> -->
+    <!-- <pre style="background-color: white;">{{ v$.$errors }}</pre> -->
   </div>
 </template>
 
 <script>
-import { ref, reactive } from 'vue'
+import { ref } from 'vue'
 import { useVuelidate } from '@vuelidate/core'
 import { required, maxValue } from '@vuelidate/validators'
 import NestedB from './NestedB.vue'
@@ -20,9 +20,9 @@ export default {
   setup () {
     const numberA = ref(8)
     const rules = { numberA: { required, maxValue: maxValue(5) } }
-    const $v = useVuelidate(rules, { numberA }, 'NestedA')
+    const v$ = useVuelidate(rules, { numberA }, 'NestedA')
 
-    return { numberA, $v }
+    return { numberA, v$ }
   }
 }
 </script>

packages/docs/src/.vitepress/theme/components/NestedB.vue

@@ -5,22 +5,22 @@
       <input type="number" v-model.number="numberB">
     </div>
     <!-- <NestedA /> -->
-    <!-- <pre style="background-color: white;">{{ $v.$errors }}</pre> -->
+    <!-- <pre style="background-color: white;">{{ v$.$errors }}</pre> -->
   </div>
 </template>
 
 <script>
-import { ref, reactive } from 'vue'
+import { ref } from 'vue'
 import { useVuelidate } from '@vuelidate/core'
 import { required, maxValue, minValue } from '@vuelidate/validators'
 
 export default {
   setup () {
     const numberB = ref(8)
     const rules = { numberB: { required, maxValue: maxValue(5), minValue: minValue(3) } }
-    const $v = useVuelidate(rules, { numberB }, 'NestedB')
+    const v$ = useVuelidate(rules, { numberB }, 'NestedB')
 
-    return { numberB, $v }
+    return { numberB, v$ }
   }
 }
 </script>

packages/docs/src/.vitepress/theme/components/NestedValidations.vue

@@ -5,7 +5,7 @@
       <input type="number" v-model.number="numberX">
     </div>
     <NestedA />
-    <pre style="background-color: white;">{{ $v }}</pre>
+    <pre style="background-color: white;">{{ v$ }}</pre>
   </div>
 </template>
 
@@ -20,13 +20,13 @@ export default {
   setup () {
     const numberX = ref(0)
 
-    const $v = useVuelidate({
+    const v$ = useVuelidate({
       numberX: { required, minValue: minValue(3) }
       },
       { numberX }
     )
 
-    return { $v, numberX }
+    return { v$, numberX }
   }
 }
 </script>

packages/docs/src/advanced_usage.md

@@ -40,7 +40,7 @@ Vuelidate is primarily built on top of the Composition API, so its best suited t
 ### Using an object of `refs`
 
 ```js
-import { ref, computed } from 'vue' // or '@vue/composition-api' in Vue 2.x
+import { ref, computed } from 'vue' // or '@vue/composition-api' in Vue <2.7
 import { useVuelidate } from '@vuelidate/core'
 import { minLength, required } from '@vuelidate/validators'
 
@@ -555,7 +555,7 @@ When using the Composition API, you can pass your configuration object as the th
 is just a collector, see [Passing a single parameter to useVuelidate](#passing-a-single-parameter-to-usevuelidate).
 
 ```js
-import { reactive } from 'vue' // or '@vue/composition-api' in Vue 2.x
+import { reactive } from 'vue' // or '@vue/composition-api' in Vue <2.7
 import { useVuelidate } from '@vuelidate/core'
 import { email, required } from '@vuelidate/validators'
 

packages/docs/src/api/state.md

@@ -34,7 +34,7 @@ The presence of those special reserved keywords means that you cannot specify yo
 * **Type:** `any`
 * **Details:**
 
-  A reference to the original validated model. Reading this value will always give you exactly the same value as if you referenced the model directly. That means `this.$v.value.$model` is equivalent to `this.value` when read. Writing to that value will update the model and invoke `$touch` method automatically. This is very useful to use as `v-model` payload, providing a way of automatically marking given field as `$dirty` on first touch. Pairs well with `.lazy` modifier.
+  A reference to the original validated model. Reading this value will always give you exactly the same value as if you referenced the model directly. That means `this.v$.value.$model` is equivalent to `this.value` when read. Writing to that value will update the model and invoke `$touch` method automatically. This is very useful to use as `v-model` payload, providing a way of automatically marking given field as `$dirty` on first touch. Pairs well with `.lazy` modifier.
 
 ## $error
 

packages/docs/src/index.md

@@ -45,7 +45,7 @@ Now you can access use `VueDemi`, `Vuelidate` and `VuelidateValidators` to build
 ## Getting Started
 
 ::: tip
-When used with Vue 2.x, you need to install the `@vue/composition-api` plugin. You can learn how to do that [here](https://github.com/vuejs/composition-api).
+When used with Vue <2.7, you need to install the `@vue/composition-api` plugin. You can learn how to do that [here](https://github.com/vuejs/composition-api).
 Once this is done, you can proceed with the below.
 :::
 
@@ -114,10 +114,10 @@ export default {
 
 ### Alternative syntax (Composition API)
 
-Vuelidate v2.x also comes with support for Composition API. The above example can be translated into the composition API syntax.
+Vuelidate v2 also comes with support for Composition API. The above example can be translated into the composition API syntax.
 
 ```js
-import { reactive } from 'vue' // "from '@vue/composition-api'" if you are using Vue 2.x
+import { reactive } from 'vue' // "from '@vue/composition-api'" if you are using Vue <2.7
 import { useVuelidate } from '@vuelidate/core'
 import { required, email } from '@vuelidate/validators'
 
@@ -147,7 +147,7 @@ export default {
 
 Now that validations are set up, we can check inside our template for errors by looking for example at the `firstName` property inside of the `v$` Vuelidate object. It will hold all the information and state of our `firstName` state's validation.
 
-If _any_ error is present, the `$errors` array property inside of `$v.firstName` will contain an object that describes each error for us to loop through.
+If _any_ error is present, the `$errors` array property inside of `v$.firstName` will contain an object that describes each error for us to loop through.
 
 Each object inside the `$errors` array will contain a few properties that allows us to dynamically build our error message.
 

packages/docs/src/migration_guide.md

@@ -207,7 +207,7 @@ Simply remove the first parameter and keep only the regex:
 // v0.x
 const regexSlug = helpers.regex('slug', /^[-A-Za-z0-9]+$/)
 
-// v2.x
+// v2
 const regexSlug = helpers.regex(/^[-A-Za-z0-9]+$/)
 ```