Kamal Nasser

Transparent Vue Wrapper Components

August 08 2018 ▪ post

Lifted from 7 Secret Patterns Vue Consultants Don’t Want You to Know - Chris Fritz

Component Definition

BaseInput.vue

<template>
    <label>
        {{ label }}
        <input
          v-bind="$attrs"
          :value="value"
          v-on="listeners"
        >
    </label>
</template>

Usage

<BaseInput
  placeholder="What's your name"
  @focus="doSomething"
/>

This will bind all attributes and event listeners set on the component to the <input> element.