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
If you want to publish .vue on npm directly, try vue-compile, which compiles the blocks in Vue single-file components to use JS/CSS instead of Babel/Sass/Stylus.
https://t.co/XJ0Uazt4Bn https://t.co/ANZAVTbEqf
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
Vuejs + Webstorm tip: if you want your IDE to recoginize paths starting with @ (i.e., "@/components/Button"), you can configure Webpack in your project to point to the `cli-service` config file. #vue ?? https://t.co/u1swRFYxRD
✨ Laravel users, make this small change to your app.js file to auto register your Vue components. The filename becomes the component name. ?
Gist here: https://t.co/Y3NjLzgBEI https://t.co/h5ByVNuiR6
? 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
✍️ 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
? If you want to turn on Devtools when developing @laravelphp #nova packages, set the the @vuejs devtools config key to *true* when Nova is booting. Happy coding :) https://t.co/7MMUOzAwpi
?? 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
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
? 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
Need a simple way of determining whether a user scrolled to the bottom of a div in #VueJS? Check it out! https://t.co/brNIHWuapx
Magical! Super nice tecnique for dynamic Vue components https://t.co/3yYfq4O00G
? #VueJs #JavaScript Tip: Use filters to map application constants to human readable values ? https://t.co/Zg3Ch3qzD8 https://t.co/wNAFjycJGN
? @vuejs components can be a lot more than just UI widgets!
Check out this demo of a "fetch" component for making AJAX requests from your markup:
https://t.co/ysBUU1bLUN
Inspired by a conversation with @youyuxi yesterday! ? https://t.co/eVErHL1S2O
? 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
@adamwathan funfact: you can also use collect() to pass data to vue. a bit shorter ?
<user-profile :user="{{ collect($user) }}"></user-profile>
? 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 """ in any user-submitted data might blow up your front end! https://t.co/kifQ3ksv6H
In Vue, you can use nextTick(closure) to delay a function until the data property has updated (for example from v-model changes) https://t.co/BvsQIa5qyO
You can quickly format numbers to more readable by humans. Use it as a plain #javascript function or as a #VueJS filter. https://t.co/SduaPMvUKN