Atomjoy atomjoy

Tanstack v9 Vue Inertia

Table with sorting, pagination, text search.

Controller

public function index(Request $request){
	$query = User::query();

Tanstack v9 useQuery v5 Laravel Inertia Vue

Laravel 13 Inertia, Vue i zapytania z useQuery do api.

Instalacja

npm i @tanstack/vue-table@9
npm i @tanstack/vue-query@5

Laravel Inertia Table

Backend

<?php

namespace App\Http\Controllers;

use App\Models\Todo;

Composable

Możesz zaimportować useCounter w kilku różnych komponentach, a każdy z nich będzie miał swój własny, niezależny licznik. Cała logika licznika jest poza komponentem wizualnym.

Tworzenie

composable.ts

import { ref } from 'vue'

Tanstack Query

TanStack Query (dawniej znany jako React Query) to potężna biblioteka do zarządzania asynchronicznym stanem aplikacji (tzw. server state). Pomaga w pobieraniu (fetching), cache'owaniu, synchronizowaniu oraz aktualizowaniu danych pochodzących z serwera, eliminując potrzebę pisania skomplikowanego kodu opartego na useEffect i useState.

Install

npm i @tanstack/vue-query
npm i @tanstack/vue-table

Laravel Custom Modules

Custom modules location modules/{Module} in Laravel project.

Composer

composer.json

Curl no cache

curl http://https://example.com/main.js?random
curl -H 'Pragma: no-cache' https://example.com/main.js
curl -H 'Cache-Control: no-cache' https://example.com/main.js

	<?php
	// php artisan storage:link

	namespace App\Providers;

	use Carbon\CarbonImmutable;
	use Illuminate\Support\Facades\Date;
	use Illuminate\Support\Facades\DB;
	use Illuminate\Support\ServiceProvider;
	use Illuminate\Validation\Rules\Password;

	<!doctype html>
	<html lang="pl">
	<head>
	<meta charset="UTF-8" />
	<title>CRM Pipeline</title>

	<style>
	* {
	box-sizing: border-box;
	margin: 0;

	/*
	Download fonts here:
	https://fontsource.org/fonts/poppins/install
	unzip all font files from static directory to fonts/poppins

	More fonts:
	https://www.npmjs.com/package/@fontsource/poppins
	https://github.com/fontsource/font-files/tree/main/fonts/google/poppins/files
	*/