This template should help get you started developing with Vue 3 with common patterns.

• Pinia - State management
• Vue Query - Data fetching / caching
• Internationalization
• Vuetify - Component library
• Themes - Dark / light modes
• Debug - Debug utilities

• VSCode
• Volar (disable Vetur)
• TypeScript Vue Plugin (Volar)
  • Enable Volar TS Take Over mode for best performance

# Install dependencies
npm install

NOTE: Ideally BiomeJS would be used for formatting and linting; however, it does not support Vue yet (WIP)!

• App theming
• Localization
• Short keys / debug
  • Fix to be platform specific/independent!
• Form components
  • Wrappers should extend Vuetify components to retain prop type hints
• Validation localization
• Vue Query (queries, pagination, mutations)
  • Example of optimistic updates (on paginated route)
• MSW endpoints (with fixtures)
• Vuetify customization/overrides
• Implement JSON server for simple data persistance
  • Update "Todos" to use authentication
• User authentication
• Form submission (success/failure)
  • Should set form-level server error for API errors
  • Error message utilities
• Styling utilities
  • Media query mixins, etc

Custom form fields bound with vee-validate should not have initialValue specified in useField()! This will apparently overwrite the form's initialValues, which undesired behaviour! This does mean that if the form does not specify default values for all fields with initialValues, any unspecified fields will be undefined on submit!

Forms typically have a schema.ts file with several exports.

• Yup schema
  • Yup validation schema (required separately for inferring type)
• Yup schema (typed)
  • Wrapped Yup schema with transformations applied during validation/submit
• Schema TS type
  • Inferred TS type from Yup schema (useful for default values, form-related types, etc)
• Default values
  • Default/initial values for empty form (useful for VeeValidate initialValues, resetting form, etc)

Unlike React Hook Form, VeeValidate forms are limited to one per parent component. Since the context is provided to children via injection, there would be no way to differentiate forms.

Unlike React Hook Form, there is no documented way to access the entire form context from a child component. However, since form context is provided in parent components utilizing useForm, it can be injected in child components with inject(FormContextKey). This will be potentially undefined (can handle with assert) and must be cast from PrivateFormContext to FormContext. A utility hook has been created to address this (useFormContext), and a GitHub issue opened to request in VeeValidate.

Using the inferred form types (from Yup schema) may cause issues when wishing to set empty intial values for fields marked as required(). This can be circumvented in the initial values declaration by using the SetOptional type from type-fest to set various keys as optional on the initial values object. Since the useForm permits passing partial initial values, setting some as optional is permitted. However, actually modifying/replacing field types will cause issues with initial values!

TypeFest provides a lot of useful type utilities, particularly SetOptional and others. However, when using type-fest types, they must be imported with import type { ... } from "type-fest";; otherwise there will be an import type error!

To reference Vuetify variables/settings, the vuetify/settings stylesheet can be imported.

@use "vuetify/settings" as v;

:root {
  --v-spacer: #{v.$spacer};
}

Occasionally debugging SASS variables (especially from Vuetify) may be helpful. The @debug keyword allows printing a variable in the development console while compiling.

$variable: 10px;

@debug $variable;
@debug "$variable is '#{$variable}'";