Introducing Blade UI Kit
Dries Vints was a guest on my stream. He shared his newest project, called Blade UI Kit.
Posts tagged with components
Anonymous Alpine Components
– ryangjchandler.co.uk - submitted by Ryan Chandler
If you don't need a reactive UI, Alpine.js might still find it's place in your tech stack.
Read more [ryangjchandler.co.uk]
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.
Some cool Laravel 7 Blade components original
One of my favourite new features of Laravel 7 are Blade components. The allow you to define custom html tags that are backed by Blade partials. In this blogpost I'd like to show you a couple very handy components.
This blogpost assumes that you already know how you can use Blade components.
How To Publish a Vue Component as an NPM Package
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]
Using v-model on Nested Vue Components
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]
Auto register Vue components in a Laravel app
✨ 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]
Use custom html components in your Blade views original
Today we launched our newest package called BladeX. In short this package provides you with an easy html like way to render custom html components in your Blade views. In this blogpost I'd like to introduce the package to you. A first example When building a server rendered app you're probably going…
Introducing BladeX View Models original
Earlier today we released BladeX, a package that allows you to use Blade components using a Vue inspired syntax. Read all about it in my previous blogpost. In the latest North Meets South podcast Jacob and Michael discussed BladeX and wondered if the package could be married with view models or…
Mo' models mo' problems
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]
Vue templates in JSX
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]
Refactoring Vue: cleaning up a list of posts with better component splitting and more ES6
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/
Building a sortable component with Vue.js
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.
Renderless Components in Vue.js
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:
- You're building a library and you want to make it easy for users to customize how your component looks
- You have multiple components in your project with very similar behavior but different layouts
https://adamwathan.me/renderless-components-in-vuejs/
Blade components are pretty cool for scoped-slot-like stuff
Blade components are pretty cool for scoped-slot-like stuff when you're not in a JS environment pic.twitter.com/pjp4ycOPKm
— Sebastian De Deyne (@sebdedeyne) March 2, 2018
Read more [twitter.com]
A collection of Tailwind components
Tailwind CSS is a kick-ass utility first CSS framework. Though the documentation contains some nice examples, you might want to some more examples. You'll be happy to know that Agustin Rodríguez created a site with some nice components built by the community.
https://tailwindcomponents.com
Our vue-table-component got some nice improvements original
At beginning of the summer we released a new Vue component called vue-table-component. Our aim was to create a very easy to use Vue component to render a table with data. You can toy a little bit with the component on the demo page. Recently Seb and I worked on two cool new features which I want to…
Using global mixins in Vue.js original
Recently I needed to add some global functionality to nearly all Vue components in an app. My colleague Seb told me a good way to achieve this: global mixins. In this post I'd like share that knowledge. In Vue a mixin is some functionality bundled in a file that can be added to one or more Vue…
Exposing Multiple Vue Components as a Plugin
In a new post on his blog Sebastian De Deyne, JavaScript (and all-round) wizard at Spatie, describes a technique to expose Vue components as a plugin.
We recently published a tabs package. Initially, users needed to register two components in order to create a tabular interface: Tabs, which acts as a container, and Tab, which defines a single tab and its contents in the interface.Since developers are most likely going to use both components together, and there's a fair chance that they'd want to register them globally like in the example, it made sense to provide some sort of auto-install option.
https://sebastiandedeyne.com/posts/2017/exposing-multiple-vue-components-as-a-plugin
Testing a Vue component part 5: Jest awesomeness and a skeleton to get started original
Welcome to part 5 of a series on how to test a Vue component. Here's the table of contents of the series: Starting out with tests The first test and snapshot testing Creating an instance of a component More tests and faking time Jest awesomeness and a skeleton to get started (you're here) Jest watch…
Testing a Vue component part 1: getting started original
Recently we released vue-tabs-component, a simple Vue component to render a tabular interface. If you want to know more about to the component itself I suggest you head to the introductory post on it. Like with the vast majority of our open source work this package comes with tests. In this series…