Extract modelValue logic to composable

Question

I'm transitioning from Vue 2 to Vue 3 and I'm having trouble with composables. I have a bunch of components that inherits modelValue. So, for every component that uses modelValue I'm writing this code (example with a radio input component):

<script setup>
import { computed } from 'vue'

const emit = defineEmits(['update:modelValue'])
const props = defineProps({
  modelValue: {
    type: [String, null],
    required: true
  }
})

const computedValue = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})
</script>

<template>
  <label class="radio">
    <input
      v-model="computedValue"
      v-bind="$attrs"
      type="radio"
    >
    <slot />
  </label>
</template>

Is there a way to reuse the code for the modelValue?

Pascal · Accepted Answer · 2022-05-07 16:55:00Z

For completion of @BghinC's perfect answer here the fully typed version:

Composable

File: @/composables/useModelValue.ts

import {computed} from 'vue'

export default function useModelValue<T>(
  props: {
    modelValue: T
    [key: string]: unknown
  },
  emit: (event: 'update:modelValue', ...args: unknown[]) => void
) {
  return computed({
    get: () => props.modelValue,
    set: (value: T) => emit('update:modelValue', value),
  })
}

Usage

<script setup lang="ts">
import useModelValue from '@/composables/useModelValue'

const props = defineProps<{
  modelValue: Dog
}>()

const emit = defineEmits(['update:modelValue'])

const dog = useModelValue<Dog>(props, emit)
</script>

BghinC · Accepted Answer · 2023-12-20 09:27:35Z

2

EDIT

I removed my previous answer as the one provided by Pascal is typed. However, for the past couple of months, a new experimental feature has been available and could help you define model values.

Here is how you could define your model value inside your component using defineModel.

<script setup lang="ts">
const modelValue = defineModel<string>()
</script>

<template>
  <input v-model="modelValue" />
</template>

You can find more information on this blog post and on the GitHub discussion.

edited Dec 20, 2023 at 9:27

answered May 1, 2022 at 18:16

BghinC

3402 silver badges13 bronze badges

2 Comments

WillC Over a year ago

This code snippet no longer seems to work. Why is that?

BghinC Over a year ago

@WillC I removed the code snippet as it needs auto-import from Nuxt. The code still works but please test it inside a Nuxt 3 environment.

Collectives™ on Stack Overflow

Extract modelValue logic to composable

2 Answers 2

Composable

Usage

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Composable

Usage

Comments

2 Comments

Related