{ Vue JS snippets }

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