app/pages/parameters/residence_areas/new.vue

<template>
  <LayoutContainer>
    <div>
      <h2>{{ $t('create_a_new_residence_area') }}</h2>
      <UiFormCreation
        :model="ResidenceArea"
        :go-back-route="goBackRoute"
      >
        <template v-slot="{ entity }">
          <v-container :fluid="true" class="container">
            <v-row>
              <v-col cols="12" sm="6">
                <UiInputText
                  v-model="entity.label"
                  field="label"
                  type="string"
                  :rules="rules()"
                />
              </v-col>
            </v-row>
          </v-container>
        </template>
      </UiFormCreation>
    </div>
  </LayoutContainer>
</template>

<script setup lang="ts">
import ResidenceArea from '~/models/Billing/ResidenceArea'
import { useI18n } from 'vue-i18n'

const i18n = useI18n()

const goBackRoute = { path: `/parameters`, query: { tab: 'residenceAreas' } }

const rules = () => [
  (label: string | null) =>
    (label !== null && label.length > 0) || i18n.t('please_enter_a_value'),
]
</script>