playing with validation

vue3/src/apps/tandoor/main.ts

@@ -7,6 +7,7 @@ import App from './Tandoor.vue'
 import mavonEditor from 'mavon-editor'
 import 'vite/modulepreload-polyfill';
 import vuetify from "@/vuetify";
+import { createRulesPlugin } from 'vuetify/labs/rules'
 
 import {setupI18n} from "@/i18n";
 import MealPlanPage from "@/pages/MealPlanPage.vue";
@@ -58,6 +59,7 @@ const app = createApp(App)
 
 app.use(createPinia())
 app.use(vuetify)
+app.use(createRulesPlugin({ /* options */ }, vuetify.locale))
 app.use(router)
 app.use(i18n)
 app.use(mavonEditor) // TODO only use on pages that need it

vue3/src/pages/TestPage.vue

@@ -1,6 +1,6 @@
 <template>
     <v-container>
-       Form
+        Form
         <v-form>
             <ModelSelect model="Food"></ModelSelect>
         </v-form>
@@ -9,6 +9,11 @@
         <ModelSelect model="Food"></ModelSelect>
 
 
+        <v-text-field :label="$t('Name')" :max-length="128" counter></v-text-field>
+        <v-number-input :label="$t('Servings')" :precision="2"></v-number-input>
+        <v-text-field :label="$t('ServingsText')" :max-length="32" counter></v-text-field>
+        <v-textarea :label="$t('Description')" :rules="[rules.maxLength(512)]" counter clearable></v-textarea>
+
     </v-container>
 </template>
 
@@ -19,7 +24,9 @@ import {VDateInput} from 'vuetify/labs/VDateInput'
 import {useRouteQuery} from "@vueuse/router";
 import {DateTime} from "luxon";
 import ModelSelect from "@/components/inputs/ModelSelect.vue";
+import {useRules} from 'vuetify/labs/rules'
 
+const rules = useRules()
 
 </script>