Posts tagged with vue
?️ Use "declarative" (the state of the thing) names for your data attributes in Vue over "imperative" (an action to take on the thing) pic.twitter.com/LJk2MRT0Bw
— Caleb Porzio (@calebporzio) November 19, 2018
Read more [twitter.com]
Caleb Porzio, developer at Tighten Co, recorded a video that explains how to publish a Vue component as a package
If you're like me, you have a handful of useful Vue components you use between different projects. Many times I've wanted to publish an individual Vue component to NPM for myself and others to access more easily.
Read more [calebporzio.com]
Join 9,500+ smart developers
Every month I share what I learn from running Spatie, building Oh Dear, and maintaining 300+ open source packages. Practical takes on Laravel, PHP, and AI that you can actually use.
No spam. Unsubscribe anytime. You can also follow me on X.
At Spatie we have a tv screen against the wall that displays a dashboard. This dashboard displays the tasks our team should be working on, important events in the near future, which tasks each of our team members should be working on, what music they are listening to, and so on. Here's what it looks…
Woodworker/developer Jesse Schutt clearly explains how to use v-model properly on nested components.
Building a custom component that operates on chunks of data is easier than you may think. It involves understanding how Vue handles the input/update cycle and making a few changes to your component. Let’s start by taking a look at one approach for turning a standard component into a “controlled” component and then figure out how to nest them.
Read more [zaengle.com]
✨ Laravel users, make this small change to your app.js file to auto register your Vue components. The filename becomes the component name. ?
— Jonathan Reinink (@reinink) 2 november 2018
Gist here: https://t.co/Y3NjLzgBEI pic.twitter.com/h5ByVNuiR6
Read more [twitter.com]
In this video VueJS core member Chris Fritz gives some good Vue tips.
In a new blogpost, Evan You, the creator of Vue, outlines the changes and new features coming to the next major release of Vue.
There are greatly improved tools that could enhance our workflow, and many new language features that could unlock simpler, more complete, and more efficient solutions to the problems Vue is trying to solve. What’s more exciting is that we are seeing ES2015 support becoming a baseline for all major evergreen browsers. Vue 3.0 aims to leverage these new language features to make Vue core smaller, faster, and more powerful.
Read more [medium.com]
? 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.
— wetbread (@DCoulbourne) September 20, 2018
(Not to mention that data() is a method, not just an object ?)
So I found a way to trim 2 lines using arrow functions ? pic.twitter.com/Qmlil4mqHD
Read more [twitter.com]
Wired.com published a interesting piece on Even You and Vue. It also contains some quotes by Taylor Otwell, the creator of Laravel.
The big reason for Vue's success, developers who rely on it say, is its simplicity. More companies want to build web applications that, like Google Docs, feel as snappy as a native application. But few actually build applications as complex as Facebook’s or Google’s. What developers often really want is a framework for building small, interactive web apps. Angular can be overkill for simple applications, while React has a steep learning curve even for experienced developers. Vue applies a more "layered" approach to building a framework.
Read more [www.wired.com]
I thought everyone knew/did this but was told it was a pretty ?tip by @calebporzio.
— Jack McDade (@jackmcdade) 29 augustus 2018
So behold! Cleaner #vuejs binding events on <a> tags!#hottip pic.twitter.com/Q0Hd4VoY5M
Read more [twitter.com]
Here's another awesome blogpost by my collegue Seb. In this one he explains why you should and how you can create an explicit Vue component API.
When refactoring your UI to components, always keep in mind that props and events are your components public API. Just like when you're modelling your application's domain, try to keep things explicit. Props and events should be enough to tell the outside world everything it needs to know about a component's behavior.
Read more [sebastiandedeyne.com]
My colleague Sebastian has been busy creating some low level Vue components for a client project. For these components he use JSX.
In my most recent project at work, I'm experimenting with JSX templates in Vue. Vue offers first-party support for JSX with near-zero configuration, but it doesn't seem to be commonly used in the ecosystem. I'm going to share my initial thoughts on using JSX with Vue. I'll be posting side-by-side examples of Vue templates and their JSX counterparts.
Read more [sebastiandedeyne.com]
Matt Stauffer shares some interesting refactors suggested by his co-workers on a Vue component he wrote.
I've written some Vue since 2015, but I've also learned some React, written a lot of Laravel, run a company, and spent much of my free time writing a book about Laravel. It's time for me to get back into Vue.js and really spend some time to get good at it. Thankfully, some of the best Vue developers out there work at Tighten, so I'm putting them to work to level me up. So, I'm going to be writing new Vue code and also cleaning up some of my Vue from 2015, and I wanted to share the process with you, my lovely readers.
https://mattstauffer.com/blog/refactoring-vue-cleaning-up-a-list-of-posts-with-better-component-splitting-and-more-es6/
?? Little component I made if you want to submit data (including JSON!!) from your Vue components in native HTML forms.https://t.co/FSdiuhJLmA pic.twitter.com/pF9Gb6BYRD
— Caleb Porzio (@calebporzio) May 2, 2018
Read more [twitter.com]
Adam Wathan recently livestreamed how he built a renderless sortable component around Shopify's draggable library. You'll find the code used in this GitHub repo and the video itself below.
If you like what you're seeing, be sure to sign up to Adam's upcoming course on designing Vue components.
At this year's Laracon Online Adam Wathan gave a fantastic talk on creating reusable view components. The excellent new post on Adam's blog is basically the written down version of talk. Amazing stuff!
Splitting a component into a presentational component and a renderless component is an extremely useful pattern to master and can make code reuse a lot easier, but it's not always worth it. Use this approach if:
https://adamwathan.me/renderless-components-in-vuejs/
At Spatie, we have created a dashboard powered by Laravel, Pusher and Vue that displays a lot of information useful for our company. We opensourced the dashboard a while ago.
In a new post on his company blog Chris Sherry explains how they customized our dashboard.
We use Laravel because its a well-known framework among backend developers, meaning there’s a bigger community (including lots of open source libraries), great documentation and a tonne of experience of using the framework.
Vue.js is our first choice because it lets our frontend developers build components for a project without being to be locked into building the whole project on the framework, meaning we can use the right tools for the right job.
The fact that the Spatie dashboard used these meant that all the developers at CUBE would be able to build their own components for it, which was one of my key objectives.
https://3sidedcube.com/blog/2018/02/building-dashboard-laravel-vuejs/
It's really great to see that people customize and use our stuff!
There's some cool stuff in the new version of the Vue devtools. Guillame Chau, member of the Vue core team, made a nice overview of the improvements.
A big update was released to the Vue devtools just a few days ago. Let’s dive into the new features and improvements!
https://medium.com/the-vue-point/whats-new-in-vue-devtools-4-0-9361e75e05d0
The are more cool features on the way as well:
We also have a few things in the works, like a standalone Vue devtools app that will allow debugging any environment (not just Chrome and Firefox), a brand new Routing tab and an improved support for Set and Map types.
In a post on vuejsdevelopers.com Anthony Gore explains how to get started with serverside rending with Laravel and Vue. Cool stuff!
Server-side rendering is great way to increase the perception of loading speed in your full-stack app. Users get a complete page with visible content when they load your site, as opposed to an empty page that doesn’t get populated until JavaScript runs.
One of the downsides of using Laravel as a backend for Vue.js was the inability to server render your code. Was. The release of Vue.js 2.5.0 has brought server-side rendering support to non-Node.js environments including PHP, Python, Ruby etc.
In this tutorial, I’ll take you through the set up steps for Laravel and demonstrate a simple server-rendered app. Get the code for this here on Github.
https://vuejsdevelopers.com/2017/11/06/vue-js-laravel-server-side-rendering/
Marcel Pociot, author of the excellent BotMan package, published a post on how he used Custom Elements for VueJS to power a widget that users can embed on their sites.
I am currently in the middle of working on a new BotMan feature - a frontend widget that you can embed into your website to make it easier to connect your website visitors with your own self-hosted chatbot solution. The backend / PHP side is already working and leverages the BotMan web driver, which is basically just an API that you can use to interact with your chatbot.
http://marcelpociot.de/blog/2017-12-08-using-custom-vuejs-elements