{"componentChunkName":"component---src-templates-blog-post-js","path":"/blog/transparent-vue-wrapper-components","result":{"data":{"allGhostPost":{"edges":[{"node":{"title":"Transparent Vue Wrapper Components","html":"

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

\n

Component Definition

\n

BaseInput.vue

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

Usage

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

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

\n","published_at":"2018-08-08T23:08:59.000+03:00","slug":"transparent-vue-wrapper-components","tags":[],"plaintext":"Lifted from 7 Secret Patterns Vue Consultants Don’t Want You to Know - Chris\nFritz [https://www.youtube.com/watch?v=7lpemgMhi0k]\n\nComponent Definition\n\nBaseInput.vue\n\n\n\n\nUsage\n\n\n\n\nThis will bind all attributes and event listeners set on the component to the \n element.","meta_description":null}}]}},"pageContext":{"slug":"transparent-vue-wrapper-components","prev":"https-blog-digitalocean-com-deploying-a-fully-automated-git-based-static-website-in-under-5-minutes","next":"docker-registry-becomes-unavailable-and-returns-503"}},"staticQueryHashes":["3649515864"]}