dillingham

An Laravel + Inertia like experience using NextJS

Using the Laravel Breeze + Next example here

Anything returned from Laravel backend becomes a prop in NextJS page.

Works as long as the NextJS page path matches the backend api routes.

Route::get('users/{user}', [UserController::class, 'show']);

dillingham

public function run()
{
    DB::disableQueryLog();
    DB::table('products')->truncate();

    $this->csv('products.csv', function ($row) {
        $brand = $this->cell([
            'class' => Brand::class,
            'column' => 'title',

dillingham

Using non inertia homepage in Laravel Jetstream

Being new to inertia, I had to wrap my head around having / be a regular blade view. Inertia kept displaying the home page in popups. The reason is that inertia-link makes http requests and the response tells interia to dynamically change the page. When Inertia finds a page without a component, it displays it instead of redirecting. The short answer is use <a> links instead. I had to do a few things after changging my root path / to a blade view so I am documenting them here incase anyone else ever comes across this scenario.

Login / Register page links

The AuthenticationCard.vue component uses inertia-link, which makes http requests.

You want to change that to a normal <a> link.

dillingham

Route::macro('morph', function($models, $callable) {
  
    foreach($models as $model) {
        $name = class_basename($model);
        $base = Str::plural($name)."/{$name}";
        Route::prefix($base)->name("$name.")->group($callable);
    }
});

dillingham

Needed to see the breakpoints, little helper markup

<div class="absolute top-0 left-0 bg-black text-white p-3">
  <span class="hidden sm:block">sm</span>
  <span class="hidden md:block">md</span>
  <span class="hidden lg:block">lg</span>
  <span class="hidden xl:block">xl</span>
</div>

dillingham

Converting Tailwind UI Alpine transitions to Vue transitions

After you copy a component from the Tailwind UI library and begin to adapt it from Vue JS to Alpine JS .. you may wonder what to do about the transitions. As I'm exploring this myself, I am documenting it for others in the same boat.

Things to be aware of:

• Alpine calls the beginning and ending states "start" & "end"
• Vue calls the beginning and ending states "from" and "to"
• Alpine has inline "directives" ie x-transition:enter="classes"
• Vue has a wrapper component that applies classes to the child
• Alpine applies the classes you pass it for each state, :enter-start="class"

dillingham

public function assertHasPagination($response, $values = [])
{
    $response->assertJsonStructure([
        'links' => [
            'first',
            'last',
            'prev',
            'next',
 ]

dillingham

public static $pid;

public static function setUpBeforeClass() :void
{
    self::$pid = exec("php -S localhost:9000 -t ../../public > /dev/null 2>&1 & echo $!");
}

public static function tearDownAfterClass() :void
{
     exec('kill ' . self::$pid);

dillingham

bind = (key, callback = null) => {
    return {
        value: this.state[key],
        onChange: (event) => {
            this.setState({
                [key]: event.currentTarget.value
            });

            if (callback) {
                callback(event);

dillingham

	
export PATH=~/.composer/vendor/bin:$PATH

fresh() {
    php artisan migrate:fresh
}


seed() {
    php artisan db:seed