5. Transparent Wrappers - Vue JS Optimisations

App.vue

<script>
export default {
  inheritAttrs: false
}
</script>


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

BaseInput.vue

/*
  Tell Vue not to automatically inherit attributes into the root level of the component
  $attrs are all the attribues that are not defined as props - these are passed in from the parent vue
  e.g. placeholders attribute from App.vue above
*/

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