Workflow Yml Code

Go to your base code and add an workflow with the following code:

name: Run style format (PHP)

on: [push]

jobs:
    run-style:
        name: Run style format (PHP)
        runs-on: ubuntu-latest
        steps:
            -   uses: actions/checkout@v2

            -   name: Setup PHP
                uses: shivammathur/setup-php@v2
                with:
                    php-version: '8.2'
                    extensions: dom, curl, libxml, mbstring, zip, pcntl, pdo, sqlite, pdo_sqlite, bcmath, soap, intl, gd, exif, iconv, imagick
                    coverage: none

            -   name: Run composer install
                run: composer install -n --prefer-dist
                env:
                    COMPOSER_AUTH: ${{ secrets.COMPOSER_AUTH }}

            -   name: Run style format
                run: ./vendor/bin/pint --test -v --ansi

With that, on every commit, or PR it will give you a result that will follow the Laravel coding standard.

You can find more information on GitHub, and make sure to give it a ⭐️ star!

If you prefer a video screencast you can check out this:

Install Laravel

Lets install a brand new Laravel project with Jetstream, to have some Laravel with Vue3 Inertia Scaffolding.

Go to you code directory and run:

laravel new app
cd app
composer require laravel/jetstream
php artisan jetstream:install inertia
npm install

With all of that installed, lets run the migrations (make sure to update the .env file with the correct database settings):

php artisan migrate

Usage

With all the Laravel instalation process complete, go ahead and install the plugin:

npm install laravel-vue-i18n

Now open the resources/js/app.js file and import laravel-vue-i18n:

import { i18nVue } from 'laravel-vue-i18n'

Bellow, inside the setup method you can now apply the plugin to the Vue instance:

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => require(`./Pages/${name}.vue`),
    setup({ el, app, props, plugin }) {
        return createApp({ render: () => h(app, props) })
            .use(plugin)
            .use(i18nVue, { 
                resolve: (lang) => import(`../../lang/${lang}.json`) 
            })
            .mixin({ methods: { route } })
            .mount(el);
    },
});

With all of that done, now you can use the plugin with the $t() mixin.

To try it out, open the resources/js/Pages/Welcome.vue and use the mixin:

<template>
    ...
    <div class="mt-8 text-2xl">
        {{ $t('Welcome to your Jetstream application!') }}
    </div>
    ...
</template>

then, you can open the lang/en.json file and add a new translation for that sentence:

{
    "Welcome to your Jetstream application!": "Welcome to your Translated Jetstream application!"
}

And its done! If you reload the page you should see the translated sentence in there.

How to use .php translation files

Now if you want to go a step further and also have the .php translation files available on frontend, not possible out of the box since the browser can't open the .php files, for that you can we can use the mix plugin provided by the plugin.

To set it up, open the webpack.mix.js and require the mix plugin:

const mix = require('laravel-mix');
require('laravel-vue-i18n/mix');

and just include the plugin, under the mix chain:

mix.js('resources/js/app.js', 'public/js').vue()
   .i18n()
   ...

With this done, you can start using the .php translation files on your .vue files like this:

<template>
    ...
    <div>
        {{ $t('auth.failed') }}
    </div>
    ...
</template>

And thats all you need to have the plugin working with both .json and .php translations!

You can find more information on GitHub, and make sure to give it a ⭐️ star!

Termwind allows you to build unique and beautiful PHP command-line applications, using the Tailwind CSS API with an HTML Renderer. In short, it's like Tailwind CSS, but for the PHP command-line applications.

Termwind was created by Francisco Madeira and Nuno Maduro, and after almost three months of development Termwind v1.0 is available, and you can start using on your projects.

Checkout the repository on GitHub!

Why?

One of many things that annoyed all the CLI developers was to add some margin before the content, just to have some breathing room, without Termwind the only way was to add spaces before each line, now with Termwind you can just pass the class ml-2 and you will have two spaces on every line for that element, just like how we do for the browser.

This example shows how easy it is to create a beautiful CLI output, with simple knowledge of HTML and TailwindCSS.

use function Termwind/render;

render(<<<HTML
    <div class="m-1">
        <div class="w-full text-center bg-green-400 text-black">
            <b>Termwind</b> v1.0 Released!
        </div>
        <p class="w-full text-center">
            After almost three months of development <b>Termwind</b> v1.0 is live.
        </p>
    </div>
HTML);

Now, lets create an output just like PEST

For this example we will take advantage of the Laravel Framework Command with a blade view.

<?php

namespace App\Console\Commands;

use Illuminate\Console\Command;
use function Termwind\render;

class TermwindReleasedCommand extends Command
{
    protected $signature = 'termwind:released';

    public function handle()
    {
        return render(view('termwind', [
            'files' => [[
                'name' => 'Tests\TermwindReleasedTest',
                'tests' => [[
                    'name' => 'it is ready to use!',
                ]],
            ]],
            'totalTests' => 1,
            'totalTime' => '0.20s',
        ]));
    }
}

<div class="mx-2 my-1">
    @foreach ($files as $file)
        <div>
            <span class="px-1 font-bold bg-green text-black">PASS</span>
            {{ $file['name'] }}
        </div>
        @foreach ($file['tests'] as $test)
            <div class="text-gray-400">
                <b class="text-green">✓</b> {{ $test['name'] }}
            </div>
        @endforeach
    @endforeach

    <div class="mt-1">
        <span class="w-8">Tests:</span>
        <b class="text-green">{{ $totalTests }} passed</b>
    </div>

    <div>
        <span class="w-8">Time:</span>
        <span>{{ $totalTime }}</span>
    </div>
</div>

What's next? As v1.0 is ready to use on production. The future develoments we will focus on improving our documentation and provide a lot more use case examples.

Get involved! This is a community project and we are always looking for people to contribute.

• You can learn more about, on GitHub.
• Follow us on Twitter: @enunomaduro, @xiCO2k.

As a joke I added to my Twitter Description "I built everything with HTML and CSS" and all of a sudden I start working on Termwind and the API is based around HTML and CSS classes. 😎