{ Vue JS snippets }

Jeff Madsen

Jeff Madsen @codebyjeff

Today I learned: Vue (and prolly all js frameworks) can pass functions as props. Meaning, if you have a generic child component, you can *inject* things like validation rules. Just like a real language! I'll do a quick code blog explaining more later on. https://t.co/3SqaWXbG8f

Vue JS
Andrew Schmelyun

Andrew Schmelyun @aschmelyun

This took me a while to realize, but in Vue every emitted value can be passed through to a method by using $event. That way, you can pass through both the emitted value and something like an ID ? https://t.co/1H1ZIvkotj

Vue JS
wetbread

wetbread @DCoulbourne

? Writing that extra line that just has a return statement to return an object in my Vue component's data() method feels really bad every time. (Not to mention that data() is a method, not just an object ?) So I found a way to trim 2 lines using arrow functions ? https://t.co/Qmlil4mqHD

Vue JS
Alex Jover Morales

Alex Jover Morales @alexjoverm

✍️ Gotcha: If you access an instance property within the dynamic import function on a computed prop, it won't work. ✅ You must do it outside so that @vuejs is aware of that dependency. This is commonly used for dynamic components and code splitting ✄ https://t.co/KKiFEY1dms

Vue JS
Caleb Porzio

Caleb Porzio @calebporzio

?? It's soooo easy to persist Vuex state to localStorage - just add this one line to your store... This makes it so you can refresh the page and all the changes you made will remain intact. https://t.co/Hqd1XthsKn

Vue JS
Andrew Schmelyun

Andrew Schmelyun @aschmelyun

Global variables across your entire Vue app w/o importing a config into each component is easy with webpack's DefinePlugin! (This is setup w/ Laravel's mix compiler, but works with vanilla webpack) https://t.co/Q7Feh99sQU

Vue JS, Laravel
Adam Wathan

Adam Wathan @adamwathan

? When working with JS transition hooks in @vuejs, consider creating dedicated transition components with tailored APIs. It makes your JS-based transitions super easy to reuse and avoids cluttering the parent component with a bunch of transition-specific methods ?? https://t.co/ov4ljXe3LD

Vue JS
Adam Wathan

Adam Wathan @adamwathan

? Instead of naming your Vue transitions, try combining the default `v-{enter/leave}` classes with separate classes for each enter and leave style. It's much easier to compose different enter/leave transitions on the fly without a new class for every combination ?? https://t.co/097FSL4ZYh

Vue JS
Philipp Kühn ??‍♂️

Philipp Kühn ??‍♂️ @_philippkuehn

@adamwathan funfact: you can also use collect() to pass data to vue. a bit shorter ? <user-profile :user="{{ collect($user) }}"></user-profile>

PHP, Vue JS
Adam Wathan

Adam Wathan @adamwathan

? If you ever seed your Vue components with JSON data in your Blade templates, you *definitely* want to enable double-encoding. Without it, a rogue "&quot;" in any user-submitted data might blow up your front end! https://t.co/kifQ3ksv6H

Vue JS, Laravel