projectsaturnagents/chat-socket

Frontend Websocket (Laravel Echo) enabled theme for Vue3/Hybridly Projects

1.0.0 2025-07-02 13:26 UTC

Requires

• php: ^8.2
• hybridly/laravel: ^0.7.19
• spatie/laravel-package-tools: ^1.14.0

proprietary

README

Require it with composer

    composer require projectsaturnagents/chat-socket

Install vue3-beautiful-chat with your preferred JS package manager

    bun i vue3-beautiful-chat
    npm i vue3-beautiful-chat

Usage

Migrate the assets to the resources themes folder with:

  php artisan chat:update

It will create a folder in the resources/themes folder if one wasn't created.

Overriding these components will not persist if you run the command again. When the package updates in components, run the command to get the latest updated files.

Add to shortcut to vite.config:

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
import hybridly from 'hybridly/vite'

const ns_symbols = {
    '@': '/resources',
    // ...Other declarations
    'ChatSocket': '/resources/themes/chat-socket'
};

export default defineConfig({
    plugins: [
        hybridly(),
        tailwindcss()
    ],
    resolve: {
        alias: ns_symbols,
    },
})

Import Components

<script setup>
import SomeComponent from ChatSocket/components/some-component.vue;
</script>
<template>
    <SomeComponent v-bind="props">
        <template #dude></template>
        <slot name="sweet"></slot>
    </SomeComponent>
</template>

Use as page

namespace App\Http\Controllers;

use Hybridly\View\Factory;

class SomeController
{
    public function index(): Factory
    {
        return hybridly('chat-socket::some-view')
    }

}

This will response with the component at resources/themes/chat-socket/views/some-view.vue