\u003C!-- Show a spinner while loading -->\n \u003C/template>\n\n \u003Ctemplate #default>\n \u003CCourseCard\n v-for=\"course in courses\"\n :key=\"course.id\"\n :course=\"course\"\n />\n \u003C/template>\n \u003C/Deferred>\n\n \u003C!-- Display deferred topics -->\n \u003CDeferred :data=\"topics\">\n \u003Ctemplate #fallback>\n \u003CLoadingSpinner /> \u003C!-- Show a spinner while loading -->\n \u003C/template>\n\n \u003Ctemplate #default>\n \u003CTopicCard\n v-for=\"topic in topics\"\n :key=\"topic.id\"\n :topic=\"topic\"\n />\n \u003C/template>\n \u003C/Deferred>\n \u003C/div>\n\u003C/template>\n\n\u003Cscript>\nexport default {\n props: {\n courses: Array,\n topics: Array,\n },\n};\n\u003C/script>\n","vue",[167,2433,2434,2443,2452,2465,2469,2474,2491,2506,2519,2528,2532,2545,2552,2562,2572,2582,2587,2595,2603,2607,2612,2627,2639,2649,2657,2661,2673,2680,2689,2698,2708,2712,2720,2728,2737,2745,2749,2758,2768,2773,2778,2783,2788,2793],{"__ignoreMap":115},[184,2435,2436,2438,2441],{"class":186,"line":12},[184,2437,715],{"class":268},[184,2439,2440],{"class":718},"template",[184,2442,730],{"class":268},[184,2444,2445,2448,2450],{"class":186,"line":24},[184,2446,2447],{"class":268}," \u003C",[184,2449,719],{"class":718},[184,2451,730],{"class":268},[184,2453,2454,2456,2458,2461,2463],{"class":186,"line":35},[184,2455,735],{"class":268},[184,2457,124],{"class":718},[184,2459,2460],{"class":268},">Courses\u003C/",[184,2462,124],{"class":718},[184,2464,730],{"class":268},[184,2466,2467],{"class":186,"line":47},[184,2468,285],{"emptyLinePlaceholder":9},[184,2470,2471],{"class":186,"line":58},[184,2472,2473],{"class":255}," \u003C!-- Display deferred courses -->\n",[184,2475,2476,2478,2481,2484,2486,2489],{"class":186,"line":70},[184,2477,735],{"class":268},[184,2479,2480],{"class":718},"Deferred",[184,2482,2483],{"class":189}," :data",[184,2485,354],{"class":268},[184,2487,2488],{"class":193},"\"courses\"",[184,2490,730],{"class":268},[184,2492,2493,2496,2498,2501,2504],{"class":186,"line":302},[184,2494,2495],{"class":268}," \u003C",[184,2497,2440],{"class":718},[184,2499,2500],{"class":268}," #",[184,2502,2503],{"class":189},"fallback",[184,2505,730],{"class":268},[184,2507,2508,2510,2513,2516],{"class":186,"line":317},[184,2509,779],{"class":268},[184,2511,2512],{"class":718},"LoadingSpinner",[184,2514,2515],{"class":268}," /> ",[184,2517,2518],{"class":255},"\u003C!-- Show a spinner while loading -->\n",[184,2520,2521,2524,2526],{"class":186,"line":323},[184,2522,2523],{"class":268}," \u003C/",[184,2525,2440],{"class":718},[184,2527,730],{"class":268},[184,2529,2530],{"class":186,"line":348},[184,2531,285],{"emptyLinePlaceholder":9},[184,2533,2534,2536,2538,2540,2543],{"class":186,"line":368},[184,2535,2495],{"class":268},[184,2537,2440],{"class":718},[184,2539,2500],{"class":268},[184,2541,2542],{"class":189},"default",[184,2544,730],{"class":268},[184,2546,2547,2549],{"class":186,"line":374},[184,2548,779],{"class":268},[184,2550,2551],{"class":718},"CourseCard\n",[184,2553,2554,2557,2559],{"class":186,"line":380},[184,2555,2556],{"class":189}," v-for",[184,2558,354],{"class":268},[184,2560,2561],{"class":193},"\"course in courses\"\n",[184,2563,2564,2567,2569],{"class":186,"line":385},[184,2565,2566],{"class":189}," :key",[184,2568,354],{"class":268},[184,2570,2571],{"class":193},"\"course.id\"\n",[184,2573,2574,2577,2579],{"class":186,"line":391},[184,2575,2576],{"class":189}," :course",[184,2578,354],{"class":268},[184,2580,2581],{"class":193},"\"course\"\n",[184,2583,2584],{"class":186,"line":411},[184,2585,2586],{"class":268}," />\n",[184,2588,2589,2591,2593],{"class":186,"line":416},[184,2590,2523],{"class":268},[184,2592,2440],{"class":718},[184,2594,730],{"class":268},[184,2596,2597,2599,2601],{"class":186,"line":433},[184,2598,756],{"class":268},[184,2600,2480],{"class":718},[184,2602,730],{"class":268},[184,2604,2605],{"class":186,"line":451},[184,2606,285],{"emptyLinePlaceholder":9},[184,2608,2609],{"class":186,"line":463},[184,2610,2611],{"class":255}," \u003C!-- Display deferred topics -->\n",[184,2613,2614,2616,2618,2620,2622,2625],{"class":186,"line":480},[184,2615,735],{"class":268},[184,2617,2480],{"class":718},[184,2619,2483],{"class":189},[184,2621,354],{"class":268},[184,2623,2624],{"class":193},"\"topics\"",[184,2626,730],{"class":268},[184,2628,2629,2631,2633,2635,2637],{"class":186,"line":495},[184,2630,2495],{"class":268},[184,2632,2440],{"class":718},[184,2634,2500],{"class":268},[184,2636,2503],{"class":189},[184,2638,730],{"class":268},[184,2640,2641,2643,2645,2647],{"class":186,"line":511},[184,2642,779],{"class":268},[184,2644,2512],{"class":718},[184,2646,2515],{"class":268},[184,2648,2518],{"class":255},[184,2650,2651,2653,2655],{"class":186,"line":527},[184,2652,2523],{"class":268},[184,2654,2440],{"class":718},[184,2656,730],{"class":268},[184,2658,2659],{"class":186,"line":542},[184,2660,285],{"emptyLinePlaceholder":9},[184,2662,2663,2665,2667,2669,2671],{"class":186,"line":558},[184,2664,2495],{"class":268},[184,2666,2440],{"class":718},[184,2668,2500],{"class":268},[184,2670,2542],{"class":189},[184,2672,730],{"class":268},[184,2674,2675,2677],{"class":186,"line":573},[184,2676,779],{"class":268},[184,2678,2679],{"class":718},"TopicCard\n",[184,2681,2682,2684,2686],{"class":186,"line":589},[184,2683,2556],{"class":189},[184,2685,354],{"class":268},[184,2687,2688],{"class":193},"\"topic in topics\"\n",[184,2690,2691,2693,2695],{"class":186,"line":604},[184,2692,2566],{"class":189},[184,2694,354],{"class":268},[184,2696,2697],{"class":193},"\"topic.id\"\n",[184,2699,2700,2703,2705],{"class":186,"line":626},[184,2701,2702],{"class":189}," :topic",[184,2704,354],{"class":268},[184,2706,2707],{"class":193},"\"topic\"\n",[184,2709,2710],{"class":186,"line":632},[184,2711,2586],{"class":268},[184,2713,2714,2716,2718],{"class":186,"line":638},[184,2715,2523],{"class":268},[184,2717,2440],{"class":718},[184,2719,730],{"class":268},[184,2721,2722,2724,2726],{"class":186,"line":1400},[184,2723,756],{"class":268},[184,2725,2480],{"class":718},[184,2727,730],{"class":268},[184,2729,2730,2733,2735],{"class":186,"line":1421},[184,2731,2732],{"class":268}," \u003C/",[184,2734,719],{"class":718},[184,2736,730],{"class":268},[184,2738,2739,2741,2743],{"class":186,"line":1442},[184,2740,1012],{"class":268},[184,2742,2440],{"class":718},[184,2744,730],{"class":268},[184,2746,2747],{"class":186,"line":1463},[184,2748,285],{"emptyLinePlaceholder":9},[184,2750,2751,2753,2756],{"class":186,"line":1484},[184,2752,715],{"class":268},[184,2754,2755],{"class":718},"script",[184,2757,730],{"class":268},[184,2759,2760,2763,2766],{"class":186,"line":1505},[184,2761,2762],{"class":261},"export",[184,2764,2765],{"class":261}," default",[184,2767,1160],{"class":268},[184,2769,2770],{"class":186,"line":1511},[184,2771,2772],{"class":268}," props: {\n",[184,2774,2775],{"class":186,"line":1522},[184,2776,2777],{"class":268}," courses: Array,\n",[184,2779,2780],{"class":186,"line":1528},[184,2781,2782],{"class":268}," topics: Array,\n",[184,2784,2785],{"class":186,"line":1540},[184,2786,2787],{"class":268}," },\n",[184,2789,2790],{"class":186,"line":1553},[184,2791,2792],{"class":268},"};\n",[184,2794,2795,2797,2799],{"class":186,"line":1564},[184,2796,1012],{"class":268},[184,2798,2755],{"class":718},[184,2800,730],{"class":268},[171,2802,2383],{"id":2803},"explanation-1",[132,2805,2806,2814,2822],{},[135,2807,2808,2813],{},[851,2809,2810],{},[167,2811,2812],{},"\u003CDeferred>",": This component is used to handle deferred data. It automatically fetches the data when needed.",[135,2815,2816,2821],{},[851,2817,2818],{},[167,2819,2820],{},"#fallback",": This slot is used to display a loading spinner (or any fallback UI) while the data is being fetched.",[135,2823,2824,2829],{},[851,2825,2826],{},[167,2827,2828],{},"#default",": This slot is used to render the actual data once it’s loaded.",[142,2831],{},[145,2833,2835],{"id":2834},"benefits-of-using-deferred-props","Benefits of Using Deferred Props",[2837,2838,2839,2845,2851],"ol",{},[135,2840,2841,2844],{},[851,2842,2843],{},"Improved Performance",": By deferring non-critical data, you reduce the initial payload size, resulting in faster page loads.",[135,2846,2847,2850],{},[851,2848,2849],{},"Better User Experience",": Users see the most important content first, while non-critical data is loaded in the background.",[135,2852,2853,2856],{},[851,2854,2855],{},"Efficient Resource Usage",": Only load data when it’s needed, reducing unnecessary server load and bandwidth usage.",[142,2858],{},[145,2860,2862],{"id":2861},"conclusion","Conclusion",[128,2864,2865],{},"Deferred Props in Inertia 2 are a game-changer for optimizing the performance of your applications. By deferring non-critical data, you can ensure that your app loads quickly and efficiently, providing a better experience for your users.",[128,2867,2868],{},"The examples above demonstrate how to implement Deferred Props in both the backend and frontend. Give it a try in your next project and see the difference it makes!",[142,2870],{},[171,2872,2874],{"id":2873},"resources","Resources",[132,2876,2877,2886],{},[135,2878,2879],{},[2880,2881,2885],"a",{"href":2882,"rel":2883},"https://inertiajs.com/",[2884],"nofollow","Inertia.js Documentation",[135,2887,2888],{},[2880,2889,2892],{"href":2890,"rel":2891},"https://laracasts.com/series/inertia-2-unleashed/episodes/3",[2884],"Laracast Video",[2064,2894,2895],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}",{"title":115,"searchDepth":24,"depth":24,"links":2897},[2898,2899,2902,2905,2906],{"id":2128,"depth":24,"text":2129},{"id":2157,"depth":24,"text":2158,"children":2900},[2901],{"id":2382,"depth":35,"text":2383},{"id":2416,"depth":24,"text":2417,"children":2903},[2904],{"id":2803,"depth":35,"text":2383},{"id":2834,"depth":24,"text":2835},{"id":2861,"depth":24,"text":2862,"children":2907},[2908],{"id":2873,"depth":35,"text":2874},"Inertia 2 introduced a powerful feature called Deferred Props, which allows you to delay the loading of non-critical data until it’s needed. This can significantly improve the performance of your application by reducing the initial payload size and speeding up page load times. In this guide, we’ll explore how to use Deferred Props with practical examples.","Inertia.js","/assets/img/blog/inertia/deferred-props-inertia-2.png","deferred-props-inertia-2-practical-examples","Inertia.js, Inertia 2, Deferred Props, Performance Optimization, Laravel, Vue.js, React, SPA, Single Page Application, Data Fetching, Lazy Loading, Frontend Optimization, Backend Optimization, Inertia Documentation, Inertia Features, Code Examples, Real-World Use Cases","Inertia.js, Vue.js",{},"/en/2025/01/2025-01-deferred-props-inertia-2-practical-examples","2025-01-15T12:41:00.000Z",{"title":2105,"description":2909},{"loc":2916},"en/2025/01/2025-01-deferred-props-inertia-2-practical-examples","A Practical Guide to Deferred Props","in Inertia 2","cMMDKPxohAhaS-CmEKB2bwnpiYWx8lc7MX1Iw_f9gUE",{"id":2925,"title":2926,"body":2927,"category":2086,"client":2087,"description":2989,"extension":2089,"head":2090,"image":3495,"key":3496,"keywords":3497,"languages":2090,"meta":3498,"navigation":9,"ogImage":2087,"order":374,"path":3499,"preview1":115,"preview1Title":115,"preview2":115,"preview2Title":115,"preview3":115,"preview3Title":115,"project":2087,"publishedAt":3500,"ready":9,"robots":2087,"schemaOrg":2087,"seo":3501,"sitemap":3502,"stem":3503,"title_sub":3504,"title_sub_blue":3505,"visible":9,"__hash__":3506},"articles_en/en/2025/01/2025-01-A-Practical-Guide-to-API-Documentation-in-Laravel-with-Scribe.md","A Practical Guide to API Documentation in Laravel with Scribe",{"type":100,"value":2928,"toc":3485},[2929,2931,2933,2935,2939,2982,2984,2987,2990,2995,3006,3008,3011,3014,3016,3019,3022,3039,3042,3058,3069,3071,3074,3080,3112,3115,3246,3248,3251,3254,3268,3279,3281,3284,3287,3313,3316,3473,3475,3477,3480,3482],[103,2930],{":description":105,":image":106,":keywords":107,":title":108},[110,2932],{":src":106},[113,2934],{":client":115,":languages":116,":preview1":117,":preview1-title":118,":preview2":119,":preview2-title":120,":preview3":121,":preview3-title":122,":project":115},[145,2936,2938],{"id":2937},"table-of-contents","Table of Contents",[2837,2940,2941,2947,2953,2959,2965,2971,2977],{},[135,2942,2943],{},[2880,2944,2946],{"href":2945},"#introduction","Introduction",[135,2948,2949],{},[2880,2950,2952],{"href":2951},"#what-is-laravel-scribe","What is Laravel Scribe?",[135,2954,2955],{},[2880,2956,2958],{"href":2957},"#installation","Installation",[135,2960,2961],{},[2880,2962,2964],{"href":2963},"#configuration","Configuration",[135,2966,2967],{},[2880,2968,2970],{"href":2969},"#generating-documentation","Generating Documentation",[135,2972,2973],{},[2880,2974,2976],{"href":2975},"#customizing-documentation","Customizing Documentation",[135,2978,2979],{},[2880,2980,2862],{"href":2981},"#conclusion",[142,2983],{},[145,2985,2946],{"id":2986},"introduction",[128,2988,2989],{},"Imagine you’ve just finished developing a REST API for a project. The next step? Documenting your endpoints. Manual documentation can be tedious, error-prone, and time-consuming. Enter Scribe—an amazing Laravel package that generates API documentation automatically.",[128,2991,2992],{},[851,2993,2994],{},"What this post covers:",[2837,2996,2997,3000,3003],{},[135,2998,2999],{},"Why Scribe is useful.",[135,3001,3002],{},"How to install, configure, and use it.",[135,3004,3005],{},"Practical examples of real-world usage.",[142,3007],{},[145,3009,2952],{"id":3010},"what-is-laravel-scribe",[128,3012,3013],{},"Laravel Scribe is a package that automatically generates API documentation from your Laravel routes. It extracts information from your controllers, form requests, and other components to create detailed documentation. This documentation includes endpoints, request parameters, response examples, and more.",[142,3015],{},[145,3017,2958],{"id":3018},"installation",[128,3020,3021],{},"To get started with Laravel Scribe, you need to install it via Composer. Run the following command in your terminal:",[176,3023,3025],{"className":178,"code":3024,"language":180,"meta":115,"style":115},"composer require --dev knuckleswtf/scribe\n",[167,3026,3027],{"__ignoreMap":115},[184,3028,3029,3031,3033,3036],{"class":186,"line":12},[184,3030,190],{"class":189},[184,3032,194],{"class":193},[184,3034,3035],{"class":211}," --dev",[184,3037,3038],{"class":193}," knuckleswtf/scribe\n",[128,3040,3041],{},"After installing the package, you can publish the configuration file using:",[176,3043,3045],{"className":178,"code":3044,"language":180,"meta":115,"style":115},"php artisan vendor:publish --tag=scribe-config\n",[167,3046,3047],{"__ignoreMap":115},[184,3048,3049,3051,3053,3055],{"class":186,"line":12},[184,3050,202],{"class":189},[184,3052,205],{"class":193},[184,3054,208],{"class":193},[184,3056,3057],{"class":211}," --tag=scribe-config\n",[128,3059,3060,3061,3064,3065,3068],{},"This will create a ",[167,3062,3063],{},"scribe.php"," configuration file in your ",[167,3066,3067],{},"config"," directory.",[142,3070],{},[145,3072,2964],{"id":3073},"configuration",[128,3075,3076,3077,3079],{},"The ",[167,3078,3063],{}," configuration file allows you to customize various aspects of your API documentation. Some key configurations include:",[132,3081,3082,3089,3096,3104],{},[135,3083,3084,3088],{},[851,3085,3086],{},[167,3087,108],{},": The title of your API documentation.",[135,3090,3091,3095],{},[851,3092,3093],{},[167,3094,105],{},": A brief description of your API.",[135,3097,3098,3103],{},[851,3099,3100],{},[167,3101,3102],{},"base_url",": The base URL for your API.",[135,3105,3106,3111],{},[851,3107,3108],{},[167,3109,3110],{},"routes",": Define which routes should be included in the documentation.",[128,3113,3114],{},"Here's an example configuration:",[176,3116,3118],{"className":246,"code":3117,"language":248,"meta":115,"style":115},"return [\n 'title' => 'My API Documentation',\n 'description' => 'This is the API documentation for My Application.',\n 'base_url' => env('APP_URL'),\n 'routes' => [\n [\n 'match' => [\n 'prefixes' => ['api/*'],\n ],\n 'include' => [],\n 'exclude' => [],\n ],\n ],\n];\n",[167,3119,3120,3127,3139,3151,3168,3177,3182,3191,3207,3212,3222,3231,3236,3241],{"__ignoreMap":115},[184,3121,3122,3125],{"class":186,"line":12},[184,3123,3124],{"class":261},"return",[184,3126,448],{"class":268},[184,3128,3129,3132,3134,3137],{"class":186,"line":24},[184,3130,3131],{"class":193}," 'title'",[184,3133,439],{"class":261},[184,3135,3136],{"class":193}," 'My API Documentation'",[184,3138,601],{"class":268},[184,3140,3141,3144,3146,3149],{"class":186,"line":35},[184,3142,3143],{"class":193}," 'description'",[184,3145,439],{"class":261},[184,3147,3148],{"class":193}," 'This is the API documentation for My Application.'",[184,3150,601],{"class":268},[184,3152,3153,3156,3158,3161,3163,3166],{"class":186,"line":47},[184,3154,3155],{"class":193}," 'base_url'",[184,3157,439],{"class":261},[184,3159,3160],{"class":189}," env",[184,3162,335],{"class":268},[184,3164,3165],{"class":193},"'APP_URL'",[184,3167,1337],{"class":268},[184,3169,3170,3173,3175],{"class":186,"line":58},[184,3171,3172],{"class":193}," 'routes'",[184,3174,439],{"class":261},[184,3176,448],{"class":268},[184,3178,3179],{"class":186,"line":70},[184,3180,3181],{"class":268}," [\n",[184,3183,3184,3187,3189],{"class":186,"line":302},[184,3185,3186],{"class":193}," 'match'",[184,3188,439],{"class":261},[184,3190,448],{"class":268},[184,3192,3193,3196,3198,3201,3204],{"class":186,"line":317},[184,3194,3195],{"class":193}," 'prefixes'",[184,3197,439],{"class":261},[184,3199,3200],{"class":268}," [",[184,3202,3203],{"class":193},"'api/*'",[184,3205,3206],{"class":268},"],\n",[184,3208,3209],{"class":186,"line":323},[184,3210,3211],{"class":268}," ],\n",[184,3213,3214,3217,3219],{"class":186,"line":348},[184,3215,3216],{"class":193}," 'include'",[184,3218,439],{"class":261},[184,3220,3221],{"class":268}," [],\n",[184,3223,3224,3227,3229],{"class":186,"line":368},[184,3225,3226],{"class":193}," 'exclude'",[184,3228,439],{"class":261},[184,3230,3221],{"class":268},[184,3232,3233],{"class":186,"line":374},[184,3234,3235],{"class":268}," ],\n",[184,3237,3238],{"class":186,"line":380},[184,3239,3240],{"class":268}," ],\n",[184,3242,3243],{"class":186,"line":385},[184,3244,3245],{"class":268},"];\n",[142,3247],{},[145,3249,2970],{"id":3250},"generating-documentation",[128,3252,3253],{},"Once you've configured Laravel Scribe, you can generate the documentation by running:",[176,3255,3257],{"className":178,"code":3256,"language":180,"meta":115,"style":115},"php artisan scribe:generate\n",[167,3258,3259],{"__ignoreMap":115},[184,3260,3261,3263,3265],{"class":186,"line":12},[184,3262,202],{"class":189},[184,3264,205],{"class":193},[184,3266,3267],{"class":193}," scribe:generate\n",[128,3269,3270,3271,3274,3275,3278],{},"This command will create a set of static HTML files in the ",[167,3272,3273],{},"public/docs"," directory by default. You can access the documentation by navigating to ",[167,3276,3277],{},"http://your-app-url/docs",".",[142,3280],{},[145,3282,2976],{"id":3283},"customizing-documentation",[128,3285,3286],{},"Laravel Scribe allows you to customize the documentation by adding annotations to your controllers and methods. Here are some common annotations:",[132,3288,3289,3297,3305],{},[135,3290,3291,3296],{},[851,3292,3293],{},[167,3294,3295],{},"@group",": Groups related endpoints together.",[135,3298,3299,3304],{},[851,3300,3301],{},[167,3302,3303],{},"@bodyParam",": Describes a request body parameter.",[135,3306,3307,3312],{},[851,3308,3309],{},[167,3310,3311],{},"@response",": Provides an example response.",[128,3314,3315],{},"Here's an example of a controller method with annotations:",[176,3317,3319],{"className":246,"code":3318,"language":248,"meta":115,"style":115},"/**\n * @group User Management\n *\n * Register a new user.\n *\n * @bodyParam name string required The name of the user. Example: Akram Ghaleb\n * @bodyParam email string required The email of the user. Example: akram@example.com\n * @bodyParam password string required The password of the user. Example: password123\n *\n * @response 200 {\n * \"message\": \"User registered successfully\",\n * \"user\": {\n * \"id\": 1,\n * \"name\": \"Akram Ghaleb\",\n * \"email\": \"akram@example.com\"\n * }\n * }\n */\npublic function register(Request $request)\n{\n // Registration logic here\n}\n",[167,3320,3321,3326,3336,3341,3346,3350,3359,3374,3383,3387,3396,3401,3406,3411,3416,3426,3431,3436,3441,3460,3464,3469],{"__ignoreMap":115},[184,3322,3323],{"class":186,"line":12},[184,3324,3325],{"class":255},"/**\n",[184,3327,3328,3331,3333],{"class":186,"line":24},[184,3329,3330],{"class":255}," * ",[184,3332,3295],{"class":261},[184,3334,3335],{"class":255}," User Management\n",[184,3337,3338],{"class":186,"line":35},[184,3339,3340],{"class":255}," *\n",[184,3342,3343],{"class":186,"line":47},[184,3344,3345],{"class":255}," * Register a new user.\n",[184,3347,3348],{"class":186,"line":58},[184,3349,3340],{"class":255},[184,3351,3352,3354,3356],{"class":186,"line":70},[184,3353,3330],{"class":255},[184,3355,3303],{"class":261},[184,3357,3358],{"class":255}," name string required The name of the user. Example: Akram Ghaleb\n",[184,3360,3361,3363,3365,3368,3371],{"class":186,"line":302},[184,3362,3330],{"class":255},[184,3364,3303],{"class":261},[184,3366,3367],{"class":255}," email string required The email of the user. Example: akram",[184,3369,3370],{"class":261},"@example",[184,3372,3373],{"class":255},".com\n",[184,3375,3376,3378,3380],{"class":186,"line":317},[184,3377,3330],{"class":255},[184,3379,3303],{"class":261},[184,3381,3382],{"class":255}," password string required The password of the user. Example: password123\n",[184,3384,3385],{"class":186,"line":323},[184,3386,3340],{"class":255},[184,3388,3389,3391,3393],{"class":186,"line":348},[184,3390,3330],{"class":255},[184,3392,3311],{"class":261},[184,3394,3395],{"class":255}," 200 {\n",[184,3397,3398],{"class":186,"line":368},[184,3399,3400],{"class":255}," * \"message\": \"User registered successfully\",\n",[184,3402,3403],{"class":186,"line":374},[184,3404,3405],{"class":255}," * \"user\": {\n",[184,3407,3408],{"class":186,"line":380},[184,3409,3410],{"class":255}," * \"id\": 1,\n",[184,3412,3413],{"class":186,"line":385},[184,3414,3415],{"class":255}," * \"name\": \"Akram Ghaleb\",\n",[184,3417,3418,3421,3423],{"class":186,"line":391},[184,3419,3420],{"class":255}," * \"email\": \"akram",[184,3422,3370],{"class":261},[184,3424,3425],{"class":255},".com\"\n",[184,3427,3428],{"class":186,"line":411},[184,3429,3430],{"class":255}," * }\n",[184,3432,3433],{"class":186,"line":416},[184,3434,3435],{"class":255}," * }\n",[184,3437,3438],{"class":186,"line":433},[184,3439,3440],{"class":255}," */\n",[184,3442,3443,3446,3448,3451,3453,3455,3457],{"class":186,"line":451},[184,3444,3445],{"class":268},"public ",[184,3447,2264],{"class":261},[184,3449,3450],{"class":189}," register",[184,3452,335],{"class":268},[184,3454,339],{"class":338},[184,3456,342],{"class":338},[184,3458,3459],{"class":268},")\n",[184,3461,3462],{"class":186,"line":463},[184,3463,320],{"class":268},[184,3465,3466],{"class":186,"line":480},[184,3467,3468],{"class":255}," // Registration logic here\n",[184,3470,3471],{"class":186,"line":495},[184,3472,641],{"class":268},[142,3474],{},[145,3476,2862],{"id":2861},[128,3478,3479],{},"Laravel Scribe is an invaluable tool for generating API documentation in Laravel applications. It simplifies the process, ensures consistency, and provides a professional-looking documentation interface. By following the steps outlined in this blog post, you can easily integrate Laravel Scribe into your project and create comprehensive API documentation.",[128,3481,2062],{},[2064,3483,3484],{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":115,"searchDepth":24,"depth":24,"links":3486},[3487,3488,3489,3490,3491,3492,3493,3494],{"id":2937,"depth":24,"text":2938},{"id":2986,"depth":24,"text":2946},{"id":3010,"depth":24,"text":2952},{"id":3018,"depth":24,"text":2958},{"id":3073,"depth":24,"text":2964},{"id":3250,"depth":24,"text":2970},{"id":3283,"depth":24,"text":2976},{"id":2861,"depth":24,"text":2862},"/assets/img/blog/laravel/A-Practical-Guide-to-API-Documentation-in-Laravel-with-Scribe.png","a-practical-guide-to-api-documentation-in-laravel-with-scribe","Laravel, Scribe, Laravel REST API, Automatic API Documentation, Laravel Packages, Artisan Commands, Scribe Laravel Package, API Annotations, knuckleswtf/scribe, Scribe Configuration, REST API Documentation, Dynamic Documentation, Interactive API Docs, PHPDoc Annotations, Documentation Best Practices, Public/Docs Folder, Deployment Pipeline, Styling Customization, CI/CD Integration, Code Annotations, Bearer Authentication, Clear Descriptions, Maintaining Annotations, Real-World Examples",{},"/en/2025/01/2025-01-a-practical-guide-to-api-documentation-in-laravel-with-scribe","2025-01-02T17:27:00.000Z",{"title":2926,"description":2989},{"loc":3499},"en/2025/01/2025-01-A-Practical-Guide-to-API-Documentation-in-Laravel-with-Scribe","A Practical Guide to API Documentation ","in Laravel with Scribe","pIsWMimym9-P9k1hfuaCLEX77M2gsy8qLoBi5NFyEl8",{"id":3508,"title":3509,"body":3510,"category":2086,"client":2087,"description":3928,"extension":2089,"head":2090,"image":3929,"key":3930,"keywords":3931,"languages":2090,"meta":3932,"navigation":9,"ogImage":2087,"order":368,"path":3933,"preview1":115,"preview1Title":115,"preview2":115,"preview2Title":115,"preview3":115,"preview3Title":115,"project":2087,"publishedAt":3934,"ready":9,"robots":2087,"schemaOrg":2087,"seo":3935,"sitemap":3936,"stem":3937,"title_sub":3938,"title_sub_blue":3939,"visible":9,"__hash__":3940},"articles_en/en/2024/11/2024-11-Speed-Up-Laravel-Projects-with-Laravel-Shift-Blueprint.md","3 Steps to Speed Up Laravel Projects with Laravel Shift Blueprint",{"type":100,"value":3511,"toc":3921},[3512,3514,3516,3518,3523,3534,3536,3540,3543,3559,3566,3568,3576,3584,3587,3835,3838,3840,3844,3850,3864,3870,3872,3876,3909,3915,3918],[103,3513],{":description":105,":image":106,":keywords":107,":title":108},[110,3515],{":src":106},[113,3517],{":client":115,":languages":116,":preview1":117,":preview1-title":118,":preview2":119,":preview2-title":120,":preview3":121,":preview3-title":122,":project":115},[124,3519,3521],{"id":3520},"_3-steps-to-speed-up-laravel-projects-with-laravel-shift-blueprint",[851,3522,3509],{},[128,3524,3525,3526,3533],{},"If you’re looking to cut down on repetitive coding tasks and get your Laravel projects off the ground faster, ",[851,3527,3528],{},[2880,3529,3532],{"href":3530,"rel":3531},"https://blueprint.laravelshift.com",[2884],"Laravel Shift Blueprint"," is the tool for you! Here’s a streamlined guide on how to use Blueprint effectively in three easy steps.",[142,3535],{},[171,3537,3539],{"id":3538},"_1-install-blueprint","1. Install Blueprint",[128,3541,3542],{},"To get started, install Blueprint in your development environment using Composer:",[176,3544,3546],{"className":178,"code":3545,"language":180,"meta":115,"style":115},"composer require --dev laravel-shift/blueprint\n",[167,3547,3548],{"__ignoreMap":115},[184,3549,3550,3552,3554,3556],{"class":186,"line":12},[184,3551,190],{"class":189},[184,3553,194],{"class":193},[184,3555,3035],{"class":211},[184,3557,3558],{"class":193}," laravel-shift/blueprint\n",[128,3560,3561,3562,3565],{},"Blueprint is a development-only package, so it’s best to install it with the ",[167,3563,3564],{},"--dev"," flag. This ensures it won’t be included in your production environment, keeping your deployment lean and clean.",[142,3567],{},[171,3569,3571,3572,3575],{"id":3570},"_2-create-the-draftyaml-file","2. Create the ",[167,3573,3574],{},"draft.yaml"," File",[128,3577,3076,3578,3580,3581,3583],{},[167,3579,3574],{}," file is the heart of Blueprint—it’s where you define your models, controllers, relationships, and even routes! Start by creating a ",[167,3582,3574],{}," file in your project’s root directory.",[128,3585,3586],{},"Blueprint reads this file to understand the structure of your app. Here’s a sample setup for a blog:",[176,3588,3592],{"className":3589,"code":3590,"language":3591,"meta":115,"style":115},"language-yaml shiki shiki-themes github-light github-dark","models:\n Post:\n title: string\n content: text\n published_at: timestamp nullable\n status: string\n category_id: unsignedInteger nullable\n relationships:\n belongsTo: Category\n belongsToMany: Tag, Author\n\n Category:\n name: string\n description: string nullable\n relationships:\n hasMany: Post\n\n Author:\n name: string\n email: string\n bio: text nullable\n twitter_handle: string nullable\n relationships:\n belongsToMany: Post\n\n Tag:\n name: string\n slug: string\n relationships:\n belongsToMany: Post\n","yaml",[167,3593,3594,3602,3609,3620,3630,3640,3649,3659,3666,3676,3686,3690,3697,3706,3716,3722,3732,3736,3743,3751,3760,3770,3779,3785,3793,3797,3804,3812,3821,3827],{"__ignoreMap":115},[184,3595,3596,3599],{"class":186,"line":12},[184,3597,3598],{"class":718},"models",[184,3600,3601],{"class":268},":\n",[184,3603,3604,3607],{"class":186,"line":24},[184,3605,3606],{"class":718}," Post",[184,3608,3601],{"class":268},[184,3610,3611,3614,3617],{"class":186,"line":35},[184,3612,3613],{"class":718}," title",[184,3615,3616],{"class":268},": ",[184,3618,3619],{"class":193},"string\n",[184,3621,3622,3625,3627],{"class":186,"line":47},[184,3623,3624],{"class":718}," content",[184,3626,3616],{"class":268},[184,3628,3629],{"class":193},"text\n",[184,3631,3632,3635,3637],{"class":186,"line":58},[184,3633,3634],{"class":718}," published_at",[184,3636,3616],{"class":268},[184,3638,3639],{"class":193},"timestamp nullable\n",[184,3641,3642,3645,3647],{"class":186,"line":70},[184,3643,3644],{"class":718}," status",[184,3646,3616],{"class":268},[184,3648,3619],{"class":193},[184,3650,3651,3654,3656],{"class":186,"line":302},[184,3652,3653],{"class":718}," category_id",[184,3655,3616],{"class":268},[184,3657,3658],{"class":193},"unsignedInteger nullable\n",[184,3660,3661,3664],{"class":186,"line":317},[184,3662,3663],{"class":718}," relationships",[184,3665,3601],{"class":268},[184,3667,3668,3671,3673],{"class":186,"line":323},[184,3669,3670],{"class":718}," belongsTo",[184,3672,3616],{"class":268},[184,3674,3675],{"class":193},"Category\n",[184,3677,3678,3681,3683],{"class":186,"line":348},[184,3679,3680],{"class":718}," belongsToMany",[184,3682,3616],{"class":268},[184,3684,3685],{"class":193},"Tag, Author\n",[184,3687,3688],{"class":186,"line":368},[184,3689,285],{"emptyLinePlaceholder":9},[184,3691,3692,3695],{"class":186,"line":374},[184,3693,3694],{"class":718}," Category",[184,3696,3601],{"class":268},[184,3698,3699,3702,3704],{"class":186,"line":380},[184,3700,3701],{"class":718}," name",[184,3703,3616],{"class":268},[184,3705,3619],{"class":193},[184,3707,3708,3711,3713],{"class":186,"line":385},[184,3709,3710],{"class":718}," description",[184,3712,3616],{"class":268},[184,3714,3715],{"class":193},"string nullable\n",[184,3717,3718,3720],{"class":186,"line":391},[184,3719,3663],{"class":718},[184,3721,3601],{"class":268},[184,3723,3724,3727,3729],{"class":186,"line":411},[184,3725,3726],{"class":718}," hasMany",[184,3728,3616],{"class":268},[184,3730,3731],{"class":193},"Post\n",[184,3733,3734],{"class":186,"line":416},[184,3735,285],{"emptyLinePlaceholder":9},[184,3737,3738,3741],{"class":186,"line":433},[184,3739,3740],{"class":718}," Author",[184,3742,3601],{"class":268},[184,3744,3745,3747,3749],{"class":186,"line":451},[184,3746,3701],{"class":718},[184,3748,3616],{"class":268},[184,3750,3619],{"class":193},[184,3752,3753,3756,3758],{"class":186,"line":463},[184,3754,3755],{"class":718}," email",[184,3757,3616],{"class":268},[184,3759,3619],{"class":193},[184,3761,3762,3765,3767],{"class":186,"line":480},[184,3763,3764],{"class":718}," bio",[184,3766,3616],{"class":268},[184,3768,3769],{"class":193},"text nullable\n",[184,3771,3772,3775,3777],{"class":186,"line":495},[184,3773,3774],{"class":718}," twitter_handle",[184,3776,3616],{"class":268},[184,3778,3715],{"class":193},[184,3780,3781,3783],{"class":186,"line":511},[184,3782,3663],{"class":718},[184,3784,3601],{"class":268},[184,3786,3787,3789,3791],{"class":186,"line":527},[184,3788,3680],{"class":718},[184,3790,3616],{"class":268},[184,3792,3731],{"class":193},[184,3794,3795],{"class":186,"line":542},[184,3796,285],{"emptyLinePlaceholder":9},[184,3798,3799,3802],{"class":186,"line":558},[184,3800,3801],{"class":718}," Tag",[184,3803,3601],{"class":268},[184,3805,3806,3808,3810],{"class":186,"line":573},[184,3807,3701],{"class":718},[184,3809,3616],{"class":268},[184,3811,3619],{"class":193},[184,3813,3814,3817,3819],{"class":186,"line":589},[184,3815,3816],{"class":718}," slug",[184,3818,3616],{"class":268},[184,3820,3619],{"class":193},[184,3822,3823,3825],{"class":186,"line":604},[184,3824,3663],{"class":718},[184,3826,3601],{"class":268},[184,3828,3829,3831,3833],{"class":186,"line":626},[184,3830,3680],{"class":718},[184,3832,3616],{"class":268},[184,3834,3731],{"class":193},[128,3836,3837],{},"This simple YAML file defines multiple models, fields, and relationships in one place, allowing you to model your entire app’s data structure with minimal syntax.",[142,3839],{},[171,3841,3843],{"id":3842},"_3-generate-code-with-blueprint","3. Generate Code with Blueprint",[128,3845,3846,3847,3849],{},"Once you’ve defined your models in ",[167,3848,3574],{},", it’s time to let Blueprint work its magic. Run the following command to generate your code:",[176,3851,3853],{"className":178,"code":3852,"language":180,"meta":115,"style":115},"php artisan blueprint:build\n",[167,3854,3855],{"__ignoreMap":115},[184,3856,3857,3859,3861],{"class":186,"line":12},[184,3858,202],{"class":189},[184,3860,205],{"class":193},[184,3862,3863],{"class":193}," blueprint:build\n",[128,3865,3866,3867,3869],{},"This command reads ",[167,3868,3574],{}," and automatically generates models, migrations, controllers, and routes based on your specifications. You’ll see files created for each model and relationship, saving you from writing boilerplate code manually.",[142,3871],{},[171,3873,3875],{"id":3874},"bonus-tips-for-optimizing-your-workflow","Bonus Tips for Optimizing Your Workflow",[132,3877,3878,3887,3900],{},[135,3879,3880,3883,3884,3886],{},[851,3881,3882],{},"Add Custom Attributes and Relationships",": You can always modify ",[167,3885,3574],{}," to include more attributes or complex relationships as your app grows. For example, add unique constraints, nullable fields, and foreign keys.",[135,3888,3889,3892,3893,3895,3896,3899],{},[851,3890,3891],{},"Regenerate on the Fly",": Blueprint is not a one-time tool. As your app evolves, update your ",[167,3894,3574],{}," file and re-run ",[167,3897,3898],{},"php artisan blueprint:build",". This will adjust your models, migrations, and other components without overwriting custom code you’ve already modified.",[135,3901,3902,3905,3906,3908],{},[851,3903,3904],{},"Define Requests, Factories, and Controllers",": Blueprint also supports defining form requests, factories, and custom controllers to help structure your application behavior in ",[167,3907,3574],{},". This further speeds up development and maintains clean, well-organized code.",[128,3910,3911,3912,3914],{},"Give ",[851,3913,3532],{}," a try, and see how it can transform your Laravel workflow, helping you build features faster and more efficiently.",[128,3916,3917],{},"Happy coding! 🚀",[2064,3919,3920],{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}",{"title":115,"searchDepth":24,"depth":24,"links":3922},[3923,3924,3926,3927],{"id":3538,"depth":35,"text":3539},{"id":3570,"depth":35,"text":3925},"2. Create the draft.yaml File",{"id":3842,"depth":35,"text":3843},{"id":3874,"depth":35,"text":3875},"Boost your Laravel development speed with Laravel Shift Blueprint! Discover a 3-step guide to automate model, migration, and controller creation with Blueprint, helping you cut down repetitive coding tasks and launch your projects faster.","/assets/img/blog/laravel/Laravel-Projects-with-Laravel-Shift-Blueprint.jpg","speed-up-laravel-projects-with-laravel-shift-blueprint","Laravel Shift Blueprint guide, Automate Laravel development, Laravel model and migration generator, Blueprint YAML setup, Laravel relationships in Blueprint, Blueprint Laravel tutorial, Faster Laravel development, Laravel code automation, Generate Laravel models, Laravel blueprint for developers, Laravel Shift automation, Laravel draft.yaml example, Blueprint Laravel efficiency, Speed up Laravel projects with Blueprint, Blueprint Laravel best practices",{},"/en/2024/11/2024-11-speed-up-laravel-projects-with-laravel-shift-blueprint","2024-11-12T13:12:00.000Z",{"title":3509,"description":3928},{"loc":3933},"en/2024/11/2024-11-Speed-Up-Laravel-Projects-with-Laravel-Shift-Blueprint","3 Steps to Speed Up Laravel Projects with"," Laravel Shift Blueprint","041taYWPa6om0bl1r6_HRcep9k5ggGDv6CV83PbkbPw",{"id":3942,"title":3943,"body":3944,"category":2086,"client":2087,"description":4358,"extension":2089,"head":2090,"image":4359,"key":3954,"keywords":4360,"languages":2090,"meta":4361,"navigation":9,"ogImage":2087,"order":302,"path":4362,"preview1":4363,"preview1Title":4364,"preview2":115,"preview2Title":115,"preview3":4365,"preview3Title":4366,"project":2087,"publishedAt":4367,"ready":9,"robots":2087,"schemaOrg":2087,"seo":4368,"sitemap":4369,"stem":4370,"title_sub":4371,"title_sub_blue":4372,"visible":9,"__hash__":4373},"articles_en/en/2024/10/2024-10-How-to-Create-a-Telegram-Bot-and-Send-Messages-Using-Laravel-11.md","How to Create a Telegram Bot and Send Messages Using Laravel 11",{"type":100,"value":3945,"toc":4342},[3946,3948,3950,3952,3955,3958,3962,4038,4042,4046,4049,4057,4061,4068,4074,4078,4081,4087,4090,4097,4103,4109,4113,4116,4120,4127,4250,4254,4261,4266,4319,4323,4331,4333,4336,4339],[103,3947],{":description":105,":image":106,":keywords":107,":title":108},[110,3949],{":src":106},[113,3951],{":client":115,":languages":116,":preview1":117,":preview1-title":118,":preview2":119,":preview2-title":120,":preview3":121,":preview3-title":122,":project":115},[124,3953,3943],{"id":3954},"how-to-create-a-telegram-bot-and-send-messages-using-laravel-11",[128,3956,3957],{},"In this blog we will discover how to create a Telegram bot and seamlessly integrate it with Laravel 11 in this comprehensive guide. Learn step-by-step instructions on obtaining your API token, setting up the irazasyed/telegram-bot-sdk, and sending messages directly to your bot. Whether you're a beginner or an experienced developer, this tutorial provides all the essential information you need to enhance your applications with Telegram's messaging capabilities. Start building interactive and engaging experiences for your users today!",[145,3959,3961],{"id":3960},"step-1-create-your-telegram-bot","Step 1: Create Your Telegram Bot",[2837,3963,3964,3970,3980,3990,4014],{},[135,3965,3966,3969],{},[851,3967,3968],{},"Open Telegram",": Launch the Telegram app on your device or access the web version.",[135,3971,3972,3975,3976,3979],{},[851,3973,3974],{},"Find the BotFather",": In the search bar, type ",[167,3977,3978],{},"@BotFather"," and select the official BotFather bot. This bot is responsible for creating and managing other bots.",[135,3981,3982,3985,3986,3989],{},[851,3983,3984],{},"Start a Chat",": Click on the \"Start\" button or type ",[167,3987,3988],{},"/start"," to initiate the conversation with BotFather.",[135,3991,3992,3995,3996,3999,4000],{},[851,3993,3994],{},"Create a New Bot",": Use the command ",[167,3997,3998],{},"/newbot"," to create a new bot. BotFather will ask you to choose a name and a username for your bot:",[132,4001,4002,4008],{},[135,4003,4004,4007],{},[851,4005,4006],{},"Name",": This is the display name of your bot (e.g., \"My Awesome Bot\").",[135,4009,4010,4013],{},[851,4011,4012],{},"Username",": This must be unique and should end with the word \"bot\" (e.g., \"myawesome_bot\").",[135,4015,4016,4019,4020,4023,4024,4035,4037],{},[851,4017,4018],{},"Get Your API Token",": Once your bot is created, BotFather will provide you with an API token. It looks something like this:",[4021,4022],"br",{},"Example:",[176,4025,4029],{"className":4026,"code":4027,"language":4028,"meta":115,"style":115},"language-plaintext shiki shiki-themes github-light github-dark","123456789:ABCdefGhIJKlmNoPQRstUvWxYz1234567890\n","plaintext",[167,4030,4031],{"__ignoreMap":115},[184,4032,4033],{"class":186,"line":12},[184,4034,4027],{},[4021,4036],{},"Save this token, as you will need it to connect your Laravel application to your bot.",[145,4039,4041],{"id":4040},"step-2-set-up-laravel-11","Step 2: Set Up Laravel 11",[171,4043,4045],{"id":4044},"_21-create-a-new-laravel-project","2.1 Create a new laravel project",[128,4047,4048],{},"Creating a new project by running the following command:",[176,4050,4055],{"className":4051,"code":4053,"language":4054},[4052],"language-text","composer create-project laravel/laravel laravel-telegram-bot\n","text",[167,4056,4053],{"__ignoreMap":115},[171,4058,4060],{"id":4059},"_22-install-the-telegram-bot-sdk","2.2 Install the Telegram Bot SDK",[128,4062,4063,4064,4067],{},"Next, install the ",[167,4065,4066],{},"irazasyed/telegram-bot-sdk"," package using Composer:",[176,4069,4072],{"className":4070,"code":4071,"language":4054},[4052],"composer require irazasyed/telegram-bot-sdk\n",[167,4073,4071],{"__ignoreMap":115},[171,4075,4077],{"id":4076},"_23-configure-the-sdk","2.3 Configure the SDK",[128,4079,4080],{},"After installing the SDK, publish the configuration file:",[176,4082,4085],{"className":4083,"code":4084,"language":4054},[4052],"php artisan vendor:publish --tag=\"telegram-config\"\n",[167,4086,4084],{"__ignoreMap":115},[128,4088,4089],{},"This command creates a configuration file located at config/telegram.php.",[171,4091,4093,4094],{"id":4092},"_24-set-the-bot-token-in-env","2.4 Set the Bot Token in ",[167,4095,4096],{},".env",[128,4098,4099,4100,4102],{},"Open your ",[167,4101,4096],{}," file and add your Telegram bot token:",[176,4104,4107],{"className":4105,"code":4106,"language":4054},[4052],"TELEGRAM_BOT_TOKEN=123456789:ABCdefGhIJKlmNoPQRstUvWxYz1234567890\n",[167,4108,4106],{"__ignoreMap":115},[145,4110,4112],{"id":4111},"step-3-sending-a-message-to-your-bot","Step 3: Sending a Message to Your Bot",[128,4114,4115],{},"Now that your bot is set up and configured, let's create a route to send messages to your bot.",[171,4117,4119],{"id":4118},"_31-create-a-route","3.1 Create a Route",[128,4121,4122,4123,4126],{},"Open the ",[167,4124,4125],{},"routes/web.php"," file and add the following route:",[176,4128,4130],{"className":246,"code":4129,"language":248,"meta":115,"style":115},"use Telegram\\Bot\\Laravel\\Facades\\Telegram;\n\nRoute::get('/send-message', function () {\n $chatId = 'YOUR_CHAT_ID'; // Replace with your chat ID\n $message = 'Hello, this is a message from Laravel!';\n\n Telegram::sendMessage([\n 'chat_id' => $chatId,\n 'text' => $message,\n ]);\n\n return 'Message sent to Telegram!';\n});\n",[167,4131,4132,4137,4141,4161,4177,4189,4193,4206,4216,4226,4231,4235,4245],{"__ignoreMap":115},[184,4133,4134],{"class":186,"line":12},[184,4135,4136],{"class":268},"use Telegram\\Bot\\Laravel\\Facades\\Telegram;\n",[184,4138,4139],{"class":186,"line":24},[184,4140,285],{"emptyLinePlaceholder":9},[184,4142,4143,4145,4147,4149,4151,4154,4157,4159],{"class":186,"line":35},[184,4144,669],{"class":189},[184,4146,402],{"class":268},[184,4148,405],{"class":189},[184,4150,335],{"class":268},[184,4152,4153],{"class":193},"'/send-message'",[184,4155,4156],{"class":268},", ",[184,4158,2264],{"class":261},[184,4160,2267],{"class":268},[184,4162,4163,4166,4168,4171,4174],{"class":186,"line":47},[184,4164,4165],{"class":268}," $chatId ",[184,4167,354],{"class":261},[184,4169,4170],{"class":193}," 'YOUR_CHAT_ID'",[184,4172,4173],{"class":268},"; ",[184,4175,4176],{"class":255},"// Replace with your chat ID\n",[184,4178,4179,4182,4184,4187],{"class":186,"line":58},[184,4180,4181],{"class":268}," $message ",[184,4183,354],{"class":261},[184,4185,4186],{"class":193}," 'Hello, this is a message from Laravel!'",[184,4188,280],{"class":268},[184,4190,4191],{"class":186,"line":70},[184,4192,285],{"emptyLinePlaceholder":9},[184,4194,4195,4198,4200,4203],{"class":186,"line":302},[184,4196,4197],{"class":189}," Telegram",[184,4199,402],{"class":268},[184,4201,4202],{"class":189},"sendMessage",[184,4204,4205],{"class":268},"([\n",[184,4207,4208,4211,4213],{"class":186,"line":317},[184,4209,4210],{"class":193}," 'chat_id'",[184,4212,439],{"class":261},[184,4214,4215],{"class":268}," $chatId,\n",[184,4217,4218,4221,4223],{"class":186,"line":323},[184,4219,4220],{"class":193}," 'text'",[184,4222,439],{"class":261},[184,4224,4225],{"class":268}," $message,\n",[184,4227,4228],{"class":186,"line":348},[184,4229,4230],{"class":268}," ]);\n",[184,4232,4233],{"class":186,"line":368},[184,4234,285],{"emptyLinePlaceholder":9},[184,4236,4237,4240,4243],{"class":186,"line":374},[184,4238,4239],{"class":261}," return",[184,4241,4242],{"class":193}," 'Message sent to Telegram!'",[184,4244,280],{"class":268},[184,4246,4247],{"class":186,"line":380},[184,4248,4249],{"class":268},"});\n",[171,4251,4253],{"id":4252},"_32-get-your-chat-id","3.2 Get Your Chat ID",[128,4255,4256,4257,4260],{},"To send messages to your chat, you need to know your ",[167,4258,4259],{},"chat_id",". To find this, you can use the getUpdates method.",[128,4262,4263,4264,595],{},"Add another route to ",[167,4265,4125],{},[176,4267,4269],{"className":246,"code":4268,"language":248,"meta":115,"style":115},"Route::get(\"/get-updates\", function () {\n $updates = Telegram::getUpdates();\n return $updates;\n});\n",[167,4270,4271,4290,4307,4315],{"__ignoreMap":115},[184,4272,4273,4275,4277,4279,4281,4284,4286,4288],{"class":186,"line":12},[184,4274,669],{"class":189},[184,4276,402],{"class":268},[184,4278,405],{"class":189},[184,4280,335],{"class":268},[184,4282,4283],{"class":193},"\"/get-updates\"",[184,4285,4156],{"class":268},[184,4287,2264],{"class":261},[184,4289,2267],{"class":268},[184,4291,4292,4295,4297,4300,4302,4305],{"class":186,"line":24},[184,4293,4294],{"class":268}," $updates ",[184,4296,354],{"class":261},[184,4298,4299],{"class":189}," Telegram",[184,4301,402],{"class":268},[184,4303,4304],{"class":189},"getUpdates",[184,4306,365],{"class":268},[184,4308,4309,4312],{"class":186,"line":35},[184,4310,4311],{"class":261}," return",[184,4313,4314],{"class":268}," $updates;\n",[184,4316,4317],{"class":186,"line":47},[184,4318,4249],{"class":268},[171,4320,4322],{"id":4321},"_33-test-sending-a-message","3.3 Test Sending a Message",[128,4324,4325,4326,4330],{},"Now, visit ",[2880,4327,4328],{"href":4328,"rel":4329},"http://127.0.0.1:8000/send-message",[2884]," in your browser, replacing 127.0.0.1:8000 with your actual application URL. You should see a message saying \"Message sent to Telegram!\" and receive the message in your Telegram chat.",[145,4332,2862],{"id":2861},[128,4334,4335],{},"You’ve successfully created a Telegram bot, obtained an API token, and integrated it into your Laravel 11 application using the irazasyed/telegram-bot-sdk. Now you can build more complex interactions with your bot or expand its capabilities.",[128,4337,4338],{},"For further exploration, consider adding features like handling incoming messages, setting up command handlers, or integrating with other services. The possibilities with Telegram bots are endless!",[2064,4340,4341],{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":115,"searchDepth":24,"depth":24,"links":4343},[4344,4345,4352,4357],{"id":3960,"depth":24,"text":3961},{"id":4040,"depth":24,"text":4041,"children":4346},[4347,4348,4349,4350],{"id":4044,"depth":35,"text":4045},{"id":4059,"depth":35,"text":4060},{"id":4076,"depth":35,"text":4077},{"id":4092,"depth":35,"text":4351},"2.4 Set the Bot Token in .env",{"id":4111,"depth":24,"text":4112,"children":4353},[4354,4355,4356],{"id":4118,"depth":35,"text":4119},{"id":4252,"depth":35,"text":4253},{"id":4321,"depth":35,"text":4322},{"id":2861,"depth":24,"text":2862},"Discover how to create a Telegram bot and seamlessly integrate it with Laravel 11 in this comprehensive guide. Learn step-by-step instructions on obtaining your API token, setting up the irazasyed/telegram-bot-sdk, and sending messages directly to your bot.","/assets/img/blog/laravel/Send Telegram Messages with Laravel!.png","Telegram bot, Laravel 11, send messages, Telegram API, PHP, messaging bot, bot creation, Telegram SDK",{},"/en/2024/10/2024-10-how-to-create-a-telegram-bot-and-send-messages-using-laravel-11","https://youtu.be/BxSI-k2yKEM?si=-BhTZVHyzbTtfBXl","Youtube","https://github.com/akramghaleb/send-telegram-messages-with-laravel-11","Github","2024-10-01T13:12:00.000Z",{"title":3943,"description":4358},{"loc":4362},"en/2024/10/2024-10-How-to-Create-a-Telegram-Bot-and-Send-Messages-Using-Laravel-11","How to Create a Telegram Bot ","and Send Messages Using Laravel 11","8t9Gt63ksC0Z5RRfLhPlKXAKY9B646opS2-KF_a99To",{"id":4375,"title":4376,"body":4377,"category":4721,"client":4722,"description":4392,"extension":2089,"head":4722,"image":4723,"key":4389,"keywords":4724,"languages":4725,"meta":4726,"navigation":9,"ogImage":2087,"order":70,"path":4727,"preview1":115,"preview1Title":115,"preview2":4688,"preview2Title":4366,"preview3":115,"preview3Title":115,"project":4728,"publishedAt":4729,"ready":9,"robots":2087,"schemaOrg":2087,"seo":4730,"sitemap":4731,"stem":4732,"title_sub":4733,"title_sub_blue":2440,"visible":9,"__hash__":4734},"articles_en/en/2024/06/2024-06-laravel-nuxt-template.md","Laravel Nuxt template",{"type":100,"value":4378,"toc":4716},[4379,4381,4383,4387,4390,4393,4399,4414,4418,4450,4452,4455,4461,4464,4470,4473,4479,4482,4548,4551,4616,4619,4625,4628,4634,4637,4643,4646,4652,4658,4664,4667,4673,4680,4682,4684,4691,4694,4697,4713],[103,4380],{":description":105,":image":106,":keywords":107,":title":108},[110,4382],{":src":106},[113,4384],{":client":4385,":languages":116,":preview1":117,":preview1-title":118,":preview2":119,":preview2-title":120,":preview3":121,":preview3-title":122,":project":4386},"client","project",[124,4388,4389],{"id":4389},"laravel-nuxt-template",[128,4391,4392],{},"This repository provides a starter template for building web applications using Laravel as the backend and Nuxt.js as the frontend framework.",[145,4394,4396,4397],{"id":4395},"this-project-built-with-laravel-11-nuxt-3","This project built with Laravel 11 + Nuxt 3 ",[4021,4398],{},[132,4400,4401,4404,4407],{},[135,4402,4403],{},"This template build with Laravel v11.0 & Nuxt v3.11",[135,4405,4406],{},"This template Support Pinia State Management",[135,4408,4409,4410],{},"If you like this work you can ",[2880,4411,4413],{"href":4412},"https://github.com/akramghaleb","see more here",[145,4415,4417],{"id":4416},"features","Features",[2837,4419,4420,4434,4444],{},[135,4421,4422,4425,4426,4429,4430,4433],{},[851,4423,4424],{},"Technology Stack:"," This release leverages ",[851,4427,4428],{},"Laravel version 11.0"," for the backend framework and ",[851,4431,4432],{},"Nuxt version 3.11"," for the frontend framework. Laravel provides a robust foundation for developing web applications with its elegant syntax and powerful features, while Nuxt.js enhances the development experience by offering a framework for building server-side rendered Vue.js applications with features like automatic code splitting, hot module replacement, and more.",[135,4435,4436,4439,4440,4443],{},[851,4437,4438],{},"State Management:"," The release incorporates ",[851,4441,4442],{},"Pinia version 2.1"," for state management. Pinia is a modern and lightweight state management solution for Vue.js applications. It provides a simple and intuitive API for managing application state, making it easier to organize and manage complex data in Vue.js applications. With Pinia v2.1, developers can take advantage of improved features and optimizations for state management in their applications.",[135,4445,4446,4449],{},[851,4447,4448],{},"Persisted State:"," The release introduces support for persisted state, allowing for the storage of application state data in the local storage of the user's browser. This feature ensures that user data persists even after the browser is closed or refreshed, enhancing the user experience by providing continuity and preserving important application data. By leveraging local storage, developers can create more resilient and user-friendly applications that remember user preferences and maintain session state across sessions.",[145,4451,2958],{"id":3018},[128,4453,4454],{},"Clone the repository",[176,4456,4459],{"className":4457,"code":4458,"language":4054},[4052],"git clone https://github.com/akramghaleb/laravel-nuxt-template.git\n",[167,4460,4458],{"__ignoreMap":115},[128,4462,4463],{},"Switch to the repo folder",[176,4465,4468],{"className":4466,"code":4467,"language":4054},[4052],"cd laravel-nuxt-template\n",[167,4469,4467],{"__ignoreMap":115},[128,4471,4472],{},"switch to frontend folder (nuxt app)",[176,4474,4477],{"className":4475,"code":4476,"language":4054},[4052],"cd frontend\n\ncp .env.example .env\n",[167,4478,4476],{"__ignoreMap":115},[128,4480,4481],{},"Make sure to install the dependencies:",[176,4483,4485],{"className":178,"code":4484,"language":180,"meta":115,"style":115},"# npm\nnpm install\n\n# pnpm\npnpm install\n\n# yarn\nyarn install\n\n# bun\nbun install\n",[167,4486,4487,4492,4500,4504,4509,4516,4520,4525,4532,4536,4541],{"__ignoreMap":115},[184,4488,4489],{"class":186,"line":12},[184,4490,4491],{"class":255},"# npm\n",[184,4493,4494,4497],{"class":186,"line":24},[184,4495,4496],{"class":189},"npm",[184,4498,4499],{"class":193}," install\n",[184,4501,4502],{"class":186,"line":35},[184,4503,285],{"emptyLinePlaceholder":9},[184,4505,4506],{"class":186,"line":47},[184,4507,4508],{"class":255},"# pnpm\n",[184,4510,4511,4514],{"class":186,"line":58},[184,4512,4513],{"class":189},"pnpm",[184,4515,4499],{"class":193},[184,4517,4518],{"class":186,"line":70},[184,4519,285],{"emptyLinePlaceholder":9},[184,4521,4522],{"class":186,"line":302},[184,4523,4524],{"class":255},"# yarn\n",[184,4526,4527,4530],{"class":186,"line":317},[184,4528,4529],{"class":189},"yarn",[184,4531,4499],{"class":193},[184,4533,4534],{"class":186,"line":323},[184,4535,285],{"emptyLinePlaceholder":9},[184,4537,4538],{"class":186,"line":348},[184,4539,4540],{"class":255},"# bun\n",[184,4542,4543,4546],{"class":186,"line":368},[184,4544,4545],{"class":189},"bun",[184,4547,4499],{"class":193},[128,4549,4550],{},"Build your code:",[176,4552,4554],{"className":178,"code":4553,"language":180,"meta":115,"style":115},"# npm\nnpm run generate\n\n# pnpm\npnpm run generate\n\n# yarn\nyarn generate\n\n# bun\nbun run generate\n",[167,4555,4556,4560,4570,4574,4578,4586,4590,4594,4600,4604,4608],{"__ignoreMap":115},[184,4557,4558],{"class":186,"line":12},[184,4559,4491],{"class":255},[184,4561,4562,4564,4567],{"class":186,"line":24},[184,4563,4496],{"class":189},[184,4565,4566],{"class":193}," run",[184,4568,4569],{"class":193}," generate\n",[184,4571,4572],{"class":186,"line":35},[184,4573,285],{"emptyLinePlaceholder":9},[184,4575,4576],{"class":186,"line":47},[184,4577,4508],{"class":255},[184,4579,4580,4582,4584],{"class":186,"line":58},[184,4581,4513],{"class":189},[184,4583,4566],{"class":193},[184,4585,4569],{"class":193},[184,4587,4588],{"class":186,"line":70},[184,4589,285],{"emptyLinePlaceholder":9},[184,4591,4592],{"class":186,"line":302},[184,4593,4524],{"class":255},[184,4595,4596,4598],{"class":186,"line":317},[184,4597,4529],{"class":189},[184,4599,4569],{"class":193},[184,4601,4602],{"class":186,"line":323},[184,4603,285],{"emptyLinePlaceholder":9},[184,4605,4606],{"class":186,"line":348},[184,4607,4540],{"class":255},[184,4609,4610,4612,4614],{"class":186,"line":368},[184,4611,4545],{"class":189},[184,4613,4566],{"class":193},[184,4615,4569],{"class":193},[128,4617,4618],{},"switch to backend folder (laravel app)",[176,4620,4623],{"className":4621,"code":4622,"language":4054},[4052],"cd ../backend\n",[167,4624,4622],{"__ignoreMap":115},[128,4626,4627],{},"Install all the dependencies using composer",[176,4629,4632],{"className":4630,"code":4631,"language":4054},[4052],"composer install\n",[167,4633,4631],{"__ignoreMap":115},[128,4635,4636],{},"Copy the example env file and make the required configuration changes in the .env file",[176,4638,4641],{"className":4639,"code":4640,"language":4054},[4052],"cp .env.example .env\n",[167,4642,4640],{"__ignoreMap":115},[128,4644,4645],{},"Generate a new application key",[176,4647,4650],{"className":4648,"code":4649,"language":4054},[4052],"php artisan key:generate\n",[167,4651,4649],{"__ignoreMap":115},[128,4653,4654,4655,1987],{},"Run the database migrations (",[851,4656,4657],{},"Set the database connection in .env before migrating",[176,4659,4662],{"className":4660,"code":4661,"language":4054},[4052],"php artisan migrate\n",[167,4663,4661],{"__ignoreMap":115},[128,4665,4666],{},"Start the local development server",[176,4668,4671],{"className":4669,"code":4670,"language":4054},[4052],"php artisan serve\n",[167,4672,4670],{"__ignoreMap":115},[128,4674,4675,4676],{},"You can now access the server at ",[2880,4677,4678],{"href":4678,"rel":4679},"http://localhost:8000",[2884],[4021,4681],{},[142,4683],{},[128,4685,4686],{},[2880,4687,4690],{"href":4688,"rel":4689},"https://github.com/akramghaleb/laravel-nuxt-template",[2884],"Github Repo",[128,4692,4693],{},"Thanks,",[128,4695,4696],{},"If you enjoy my work, consider buying me a coffee to keep the creativity flowing!",[128,4698,4699,4709,4711],{},[2880,4700,4703],{"href":4701,"target":4702},"https://www.buymeacoffee.com/akramghaleb","_blank",[4704,4705],"img",{"src":4706,"alt":4707,"width":4708},"https://cdn.buymeacoffee.com/buttons/v2/default-red.png","Buy Me A Coffee",150,[4021,4710],{},[4021,4712],{},[2064,4714,4715],{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":115,"searchDepth":24,"depth":24,"links":4717},[4718,4719,4720],{"id":4395,"depth":24,"text":4396},{"id":4416,"depth":24,"text":4417},{"id":3018,"depth":24,"text":2958},"opensource","Open Source","/assets/img/blog/opensource/laravel-nuxt-template.jpg","Laravel, Nuxt, Vue, Pinia, State Management, Web Development","Laravel, Nuxt",{},"/en/2024/06/2024-06-laravel-nuxt-template","Template","2024-06-09T09:08:00.000Z",{"title":4376,"description":4392},{"loc":4727},"en/2024/06/2024-06-laravel-nuxt-template","Laravel Nuxt","jCQ6V19vgn2FAk2TBF6C2e_wR4YIiWuP9SUW_NwkHT4",{"id":4736,"title":4737,"body":4738,"category":2086,"client":2087,"description":8125,"extension":2089,"head":2090,"image":8126,"key":4748,"keywords":8127,"languages":2090,"meta":8128,"navigation":9,"ogImage":2087,"order":58,"path":8129,"preview1":115,"preview1Title":115,"preview2":115,"preview2Title":115,"preview3":8099,"preview3Title":4366,"project":2087,"publishedAt":8130,"ready":9,"robots":2087,"schemaOrg":2087,"seo":8131,"sitemap":8132,"stem":8133,"title_sub":8134,"title_sub_blue":8135,"visible":9,"__hash__":8136},"articles_en/en/2024/06/2024-06-Laravel-11-Building-API-using-Sanctum.md","Laravel 11 - Building API using Sanctum",{"type":100,"value":4739,"toc":8114},[4740,4742,4744,4746,4749,4752,4819,4822,4825,4831,4834,4840,4843,4846,4852,4855,4858,5261,5264,5267,5273,5276,5530,5533,5656,5659,5662,5668,5671,5882,5885,5888,5894,5897,6237,6240,6885,6888,7704,7707,7710,7713,7948,7951,7954,7959,7961,7966,7969,7972,7975,8018,8021,8088,8095,8101,8103,8105,8111],[103,4741],{":description":105,":image":106,":keywords":107,":title":108},[110,4743],{":src":106},[113,4745],{":client":115,":languages":116,":preview1":117,":preview1-title":118,":preview2":119,":preview2-title":120,":preview3":121,":preview3-title":122,":project":115},[124,4747,4737],{"id":4748},"laravel-11-building-api-using-sanctum",[4750,4751,2938],"h5",{"id":2937},[132,4753,4754],{},[135,4755,4756,4759,4760,4763],{},[2880,4757,4737],{"href":4758},"#laravel-11---building-api-using-sanctum"," - ",[2880,4761,2938],{"href":4762},"#table-of-contents",[132,4764,4765,4771,4777,4783,4789,4795,4801,4807,4813],{},[135,4766,4767],{},[2880,4768,4770],{"href":4769},"#step-1-install-laravel-11","Step 1: Install Laravel 11",[135,4772,4773],{},[2880,4774,4776],{"href":4775},"#step-2-install-sanctum-api","Step 2: Install Sanctum API",[135,4778,4779],{},[2880,4780,4782],{"href":4781},"#step-3-sanctum-configuration","Step 3: Sanctum Configuration",[135,4784,4785],{},[2880,4786,4788],{"href":4787},"#step-4-add-blog-migration-and-model","Step 4: Add Blog Migration and Model",[135,4790,4791],{},[2880,4792,4794],{"href":4793},"#step-5-create-eloquent-api-resources","Step 5: Create Eloquent API Resources",[135,4796,4797],{},[2880,4798,4800],{"href":4799},"#step-6-create-controller-files","Step 6: Create Controller Files",[135,4802,4803],{},[2880,4804,4806],{"href":4805},"#step-7-create-api-routes","Step 7: Create API Routes",[135,4808,4809],{},[2880,4810,4812],{"href":4811},"#step-8-run-laravel-app","Step 8: Run Laravel App",[135,4814,4815],{},[2880,4816,4818],{"href":4817},"#step-9-check-following-api","Step 9: Check following API",[145,4820,4770],{"id":4821},"step-1-install-laravel-11",[128,4823,4824],{},"Open your terminal and Install new Laravel application",[176,4826,4829],{"className":4827,"code":4828,"language":4054},[4052],"composer create-project laravel/laravel sanctum-api\n",[167,4830,4828],{"__ignoreMap":115},[128,4832,4833],{},"Switch to the project folder",[176,4835,4838],{"className":4836,"code":4837,"language":4054},[4052],"cd sanctum-api\n",[167,4839,4837],{"__ignoreMap":115},[145,4841,4776],{"id":4842},"step-2-install-sanctum-api",[128,4844,4845],{},"Run the following command to install Sanctum with API",[176,4847,4850],{"className":4848,"code":4849,"language":4054},[4052],"php artisan install:api\n",[167,4851,4849],{"__ignoreMap":115},[145,4853,4782],{"id":4854},"step-3-sanctum-configuration",[128,4856,4857],{},"In app/Models/User.php, we added the HasApiTokens class of Sanctum",[176,4859,4863],{"className":4860,"code":4861,"language":4862,"meta":115,"style":115},"language-css shiki shiki-themes github-light github-dark","\u003C?php\n\nnamespace App\\Models;\n\n// use Illuminate\\Contracts\\Auth\\MustVerifyEmail;\nuse Illuminate\\Database\\Eloquent\\Factories\\HasFactory;\nuse Illuminate\\Foundation\\Auth\\User as Authenticatable;\nuse Illuminate\\Notifications\\Notifiable;\nuse Laravel\\Sanctum\\HasApiTokens;\n\nclass User extends Authenticatable\n{\n use HasFactory, Notifiable, HasApiTokens;\n\n /**\n * The attributes that are mass assignable.\n *\n * @var array\u003Cint, string>\n */\n protected $fillable = [\n 'name',\n 'email',\n 'password',\n ];\n\n /**\n * The attributes that should be hidden for serialization.\n *\n * @var array\u003Cint, string>\n */\n protected $hidden = [\n 'password',\n 'remember_token',\n ];\n\n /**\n * Get the attributes that should be cast.\n *\n * @return array\u003Cstring, string>\n */\n protected function casts(): array\n {\n return [\n 'email_verified_at' => 'datetime',\n 'password' => 'hashed',\n ];\n }\n}\n","css",[167,4864,4865,4870,4874,4885,4889,4917,4947,4969,4986,5004,5008,5013,5017,5037,5041,5046,5051,5056,5061,5066,5080,5090,5099,5108,5113,5117,5121,5126,5130,5134,5138,5149,5157,5172,5176,5180,5184,5189,5193,5198,5202,5214,5218,5223,5236,5248,5253,5257],{"__ignoreMap":115},[184,4866,4867],{"class":186,"line":12},[184,4868,4869],{"class":268},"\u003C?php\n",[184,4871,4872],{"class":186,"line":24},[184,4873,285],{"emptyLinePlaceholder":9},[184,4875,4876,4879,4882],{"class":186,"line":35},[184,4877,4878],{"class":268},"namespace App",[184,4880,4881],{"class":211},"\\M",[184,4883,4884],{"class":268},"odels;\n",[184,4886,4887],{"class":186,"line":47},[184,4888,285],{"emptyLinePlaceholder":9},[184,4890,4891,4894,4897,4900,4903,4906,4909,4912,4914],{"class":186,"line":58},[184,4892,4893],{"class":268},"// ",[184,4895,4896],{"class":718},"use",[184,4898,4899],{"class":268}," Illuminate",[184,4901,4902],{"class":211},"\\C",[184,4904,4905],{"class":268},"ontracts",[184,4907,4908],{"class":211},"\\A",[184,4910,4911],{"class":268},"uth",[184,4913,4881],{"class":211},[184,4915,4916],{"class":268},"ustVerifyEmail;\n",[184,4918,4919,4921,4923,4926,4929,4932,4935,4938,4941,4944],{"class":186,"line":70},[184,4920,4896],{"class":718},[184,4922,4899],{"class":268},[184,4924,4925],{"class":211},"\\Da",[184,4927,4928],{"class":268},"tabase",[184,4930,4931],{"class":211},"\\E",[184,4933,4934],{"class":268},"loquent",[184,4936,4937],{"class":211},"\\Fac",[184,4939,4940],{"class":268},"tories",[184,4942,4943],{"class":211},"\\H",[184,4945,4946],{"class":268},"asFactory;\n",[184,4948,4949,4951,4953,4956,4959,4961,4963,4966],{"class":186,"line":302},[184,4950,4896],{"class":718},[184,4952,4899],{"class":268},[184,4954,4955],{"class":211},"\\F",[184,4957,4958],{"class":268},"oundation",[184,4960,4908],{"class":211},[184,4962,4911],{"class":268},[184,4964,4965],{"class":211},"\\U",[184,4967,4968],{"class":268},"ser as Authenticatable;\n",[184,4970,4971,4973,4975,4978,4981,4983],{"class":186,"line":317},[184,4972,4896],{"class":718},[184,4974,4899],{"class":268},[184,4976,4977],{"class":211},"\\N",[184,4979,4980],{"class":268},"otifications",[184,4982,4977],{"class":211},[184,4984,4985],{"class":268},"otifiable;\n",[184,4987,4988,4990,4993,4996,4999,5001],{"class":186,"line":323},[184,4989,4896],{"class":718},[184,4991,4992],{"class":268}," Laravel",[184,4994,4995],{"class":211},"\\S",[184,4997,4998],{"class":268},"anctum",[184,5000,4943],{"class":211},[184,5002,5003],{"class":268},"asApiTokens;\n",[184,5005,5006],{"class":186,"line":348},[184,5007,285],{"emptyLinePlaceholder":9},[184,5009,5010],{"class":186,"line":368},[184,5011,5012],{"class":268},"class User extends Authenticatable\n",[184,5014,5015],{"class":186,"line":374},[184,5016,320],{"class":268},[184,5018,5019,5022,5025,5027,5030,5032,5035],{"class":186,"line":380},[184,5020,5021],{"class":211}," use",[184,5023,5024],{"class":211}," HasFactory",[184,5026,4156],{"class":268},[184,5028,5029],{"class":211},"Notifiable",[184,5031,4156],{"class":268},[184,5033,5034],{"class":211},"HasApiTokens",[184,5036,280],{"class":268},[184,5038,5039],{"class":186,"line":385},[184,5040,285],{"emptyLinePlaceholder":9},[184,5042,5043],{"class":186,"line":391},[184,5044,5045],{"class":255}," /**\n",[184,5047,5048],{"class":186,"line":411},[184,5049,5050],{"class":255}," * The attributes that are mass assignable.\n",[184,5052,5053],{"class":186,"line":416},[184,5054,5055],{"class":255}," *\n",[184,5057,5058],{"class":186,"line":433},[184,5059,5060],{"class":255}," * @var array\u003Cint, string>\n",[184,5062,5063],{"class":186,"line":451},[184,5064,5065],{"class":255}," */\n",[184,5067,5068,5071,5074,5077],{"class":186,"line":463},[184,5069,5070],{"class":211}," protected",[184,5072,5073],{"class":268}," $",[184,5075,5076],{"class":211},"fillable",[184,5078,5079],{"class":268}," = [\n",[184,5081,5082,5085,5087],{"class":186,"line":480},[184,5083,5084],{"class":268}," '",[184,5086,692],{"class":211},[184,5088,5089],{"class":268},"',\n",[184,5091,5092,5094,5097],{"class":186,"line":495},[184,5093,5084],{"class":268},[184,5095,5096],{"class":211},"email",[184,5098,5089],{"class":268},[184,5100,5101,5103,5106],{"class":186,"line":511},[184,5102,5084],{"class":268},[184,5104,5105],{"class":211},"password",[184,5107,5089],{"class":268},[184,5109,5110],{"class":186,"line":527},[184,5111,5112],{"class":268}," ];\n",[184,5114,5115],{"class":186,"line":542},[184,5116,285],{"emptyLinePlaceholder":9},[184,5118,5119],{"class":186,"line":558},[184,5120,5045],{"class":255},[184,5122,5123],{"class":186,"line":573},[184,5124,5125],{"class":255}," * The attributes that should be hidden for serialization.\n",[184,5127,5128],{"class":186,"line":589},[184,5129,5055],{"class":255},[184,5131,5132],{"class":186,"line":604},[184,5133,5060],{"class":255},[184,5135,5136],{"class":186,"line":626},[184,5137,5065],{"class":255},[184,5139,5140,5142,5144,5147],{"class":186,"line":632},[184,5141,5070],{"class":211},[184,5143,5073],{"class":268},[184,5145,5146],{"class":211},"hidden",[184,5148,5079],{"class":268},[184,5150,5151,5153,5155],{"class":186,"line":638},[184,5152,5084],{"class":268},[184,5154,5105],{"class":211},[184,5156,5089],{"class":268},[184,5158,5159,5161,5164,5167,5170],{"class":186,"line":1400},[184,5160,5084],{"class":268},[184,5162,5163],{"class":211},"remember",[184,5165,5166],{"class":268},"_",[184,5168,5169],{"class":211},"token",[184,5171,5089],{"class":268},[184,5173,5174],{"class":186,"line":1421},[184,5175,5112],{"class":268},[184,5177,5178],{"class":186,"line":1442},[184,5179,285],{"emptyLinePlaceholder":9},[184,5181,5182],{"class":186,"line":1463},[184,5183,5045],{"class":255},[184,5185,5186],{"class":186,"line":1484},[184,5187,5188],{"class":255}," * Get the attributes that should be cast.\n",[184,5190,5191],{"class":186,"line":1505},[184,5192,5055],{"class":255},[184,5194,5195],{"class":186,"line":1511},[184,5196,5197],{"class":255}," * @return array\u003Cstring, string>\n",[184,5199,5200],{"class":186,"line":1522},[184,5201,5065],{"class":255},[184,5203,5204,5206,5208,5211],{"class":186,"line":1528},[184,5205,5070],{"class":211},[184,5207,329],{"class":211},[184,5209,5210],{"class":211}," casts",[184,5212,5213],{"class":268},"(): array\n",[184,5215,5216],{"class":186,"line":1540},[184,5217,2229],{"class":268},[184,5219,5220],{"class":186,"line":1553},[184,5221,5222],{"class":268}," return [\n",[184,5224,5225,5228,5231,5234],{"class":186,"line":1564},[184,5226,5227],{"class":193}," 'email_verified_at'",[184,5229,5230],{"class":268}," => ",[184,5232,5233],{"class":193},"'datetime'",[184,5235,601],{"class":268},[184,5237,5238,5241,5243,5246],{"class":186,"line":1585},[184,5239,5240],{"class":193}," 'password'",[184,5242,5230],{"class":268},[184,5244,5245],{"class":193},"'hashed'",[184,5247,601],{"class":268},[184,5249,5250],{"class":186,"line":1590},[184,5251,5252],{"class":268}," ];\n",[184,5254,5255],{"class":186,"line":1596},[184,5256,635],{"class":268},[184,5258,5259],{"class":186,"line":1601},[184,5260,641],{"class":268},[145,5262,4788],{"id":5263},"step-4-add-blog-migration-and-model",[128,5265,5266],{},"Run the following command to add Blog migration and model",[176,5268,5271],{"className":5269,"code":5270,"language":4054},[4052],"php artisan make:model Blog -m\n",[167,5272,5270],{"__ignoreMap":115},[128,5274,5275],{},"After that go to database/migrations and you will find the created migration file",[176,5277,5279],{"className":4860,"code":5278,"language":4862,"meta":115,"style":115},"\u003C?php\n\nuse Illuminate\\Database\\Migrations\\Migration;\nuse Illuminate\\Database\\Schema\\Blueprint;\nuse Illuminate\\Support\\Facades\\Schema;\n\nreturn new class extends Migration\n{\n /**\n * Run the migrations.\n */\n public function up(): void\n {\n Schema::create('blogs', function (Blueprint $table) {\n $table->id();\n $table->string('title');\n $table->longText('detail');\n $table->timestamps();\n });\n }\n\n /**\n * Reverse the migrations.\n */\n public function down(): void\n {\n Schema::dropIfExists('blogs');\n }\n};\n",[167,5280,5281,5285,5289,5309,5330,5352,5356,5361,5365,5369,5374,5378,5390,5394,5409,5425,5444,5462,5475,5480,5484,5488,5492,5497,5501,5506,5510,5522,5526],{"__ignoreMap":115},[184,5282,5283],{"class":186,"line":12},[184,5284,4869],{"class":268},[184,5286,5287],{"class":186,"line":24},[184,5288,285],{"emptyLinePlaceholder":9},[184,5290,5291,5293,5295,5297,5299,5301,5304,5306],{"class":186,"line":35},[184,5292,4896],{"class":718},[184,5294,4899],{"class":268},[184,5296,4925],{"class":211},[184,5298,4928],{"class":268},[184,5300,4881],{"class":211},[184,5302,5303],{"class":268},"igrations",[184,5305,4881],{"class":211},[184,5307,5308],{"class":268},"igration;\n",[184,5310,5311,5313,5315,5317,5319,5321,5324,5327],{"class":186,"line":47},[184,5312,4896],{"class":718},[184,5314,4899],{"class":268},[184,5316,4925],{"class":211},[184,5318,4928],{"class":268},[184,5320,4995],{"class":211},[184,5322,5323],{"class":268},"chema",[184,5325,5326],{"class":211},"\\B",[184,5328,5329],{"class":268},"lueprint;\n",[184,5331,5332,5334,5336,5338,5341,5344,5347,5349],{"class":186,"line":58},[184,5333,4896],{"class":718},[184,5335,4899],{"class":268},[184,5337,4995],{"class":211},[184,5339,5340],{"class":268},"upport",[184,5342,5343],{"class":211},"\\Facade",[184,5345,5346],{"class":268},"s",[184,5348,4995],{"class":211},[184,5350,5351],{"class":268},"chema;\n",[184,5353,5354],{"class":186,"line":70},[184,5355,285],{"emptyLinePlaceholder":9},[184,5357,5358],{"class":186,"line":302},[184,5359,5360],{"class":268},"return new class extends Migration\n",[184,5362,5363],{"class":186,"line":317},[184,5364,320],{"class":268},[184,5366,5367],{"class":186,"line":323},[184,5368,5045],{"class":255},[184,5370,5371],{"class":186,"line":348},[184,5372,5373],{"class":255}," * Run the migrations.\n",[184,5375,5376],{"class":186,"line":368},[184,5377,5065],{"class":255},[184,5379,5380,5382,5384,5387],{"class":186,"line":374},[184,5381,326],{"class":211},[184,5383,329],{"class":211},[184,5385,5386],{"class":211}," up",[184,5388,5389],{"class":268},"(): void\n",[184,5391,5392],{"class":186,"line":380},[184,5393,2229],{"class":268},[184,5395,5396,5399,5402,5405,5407],{"class":186,"line":385},[184,5397,5398],{"class":268}," Schema::create(",[184,5400,5401],{"class":193},"'blogs'",[184,5403,5404],{"class":268},", function (Blueprint $",[184,5406,1970],{"class":211},[184,5408,1234],{"class":268},[184,5410,5411,5414,5417,5420,5423],{"class":186,"line":391},[184,5412,5413],{"class":268}," $",[184,5415,5416],{"class":211},"table-",[184,5418,5419],{"class":268},">",[184,5421,5422],{"class":211},"id",[184,5424,365],{"class":268},[184,5426,5427,5429,5431,5433,5436,5439,5441],{"class":186,"line":411},[184,5428,5413],{"class":268},[184,5430,5416],{"class":211},[184,5432,5419],{"class":268},[184,5434,5435],{"class":211},"string",[184,5437,5438],{"class":268},"('",[184,5440,108],{"class":211},[184,5442,5443],{"class":268},"');\n",[184,5445,5446,5448,5450,5452,5455,5457,5460],{"class":186,"line":416},[184,5447,5413],{"class":268},[184,5449,5416],{"class":211},[184,5451,5419],{"class":268},[184,5453,5454],{"class":211},"longText",[184,5456,5438],{"class":268},[184,5458,5459],{"class":211},"detail",[184,5461,5443],{"class":268},[184,5463,5464,5466,5468,5470,5473],{"class":186,"line":433},[184,5465,5413],{"class":268},[184,5467,5416],{"class":211},[184,5469,5419],{"class":268},[184,5471,5472],{"class":211},"timestamps",[184,5474,365],{"class":268},[184,5476,5477],{"class":186,"line":451},[184,5478,5479],{"class":268}," });\n",[184,5481,5482],{"class":186,"line":463},[184,5483,635],{"class":268},[184,5485,5486],{"class":186,"line":480},[184,5487,285],{"emptyLinePlaceholder":9},[184,5489,5490],{"class":186,"line":495},[184,5491,5045],{"class":255},[184,5493,5494],{"class":186,"line":511},[184,5495,5496],{"class":255}," * Reverse the migrations.\n",[184,5498,5499],{"class":186,"line":527},[184,5500,5065],{"class":255},[184,5502,5503],{"class":186,"line":542},[184,5504,5505],{"class":268}," public function down(): void\n",[184,5507,5508],{"class":186,"line":558},[184,5509,2229],{"class":268},[184,5511,5512,5515,5518,5520],{"class":186,"line":573},[184,5513,5514],{"class":211}," Schema",[184,5516,5517],{"class":268},"::dropIfExists(",[184,5519,5401],{"class":193},[184,5521,699],{"class":268},[184,5523,5524],{"class":186,"line":589},[184,5525,635],{"class":268},[184,5527,5528],{"class":186,"line":604},[184,5529,2792],{"class":268},[128,5531,5532],{},"Then go to app/Models/Blog.php",[176,5534,5536],{"className":4860,"code":5535,"language":4862,"meta":115,"style":115},"\u003C?php\n\nnamespace App\\Models;\n\nuse Illuminate\\Database\\Eloquent\\Factories\\HasFactory;\nuse Illuminate\\Database\\Eloquent\\Model;\n\nclass Blog extends Model\n{\n use HasFactory;\n\n protected $fillable = [\n 'title', 'detail'\n ];\n}\n",[167,5537,5538,5542,5546,5554,5558,5580,5599,5603,5608,5612,5620,5624,5634,5648,5652],{"__ignoreMap":115},[184,5539,5540],{"class":186,"line":12},[184,5541,4869],{"class":268},[184,5543,5544],{"class":186,"line":24},[184,5545,285],{"emptyLinePlaceholder":9},[184,5547,5548,5550,5552],{"class":186,"line":35},[184,5549,4878],{"class":268},[184,5551,4881],{"class":211},[184,5553,4884],{"class":268},[184,5555,5556],{"class":186,"line":47},[184,5557,285],{"emptyLinePlaceholder":9},[184,5559,5560,5562,5564,5566,5568,5570,5572,5574,5576,5578],{"class":186,"line":58},[184,5561,4896],{"class":718},[184,5563,4899],{"class":268},[184,5565,4925],{"class":211},[184,5567,4928],{"class":268},[184,5569,4931],{"class":211},[184,5571,4934],{"class":268},[184,5573,4937],{"class":211},[184,5575,4940],{"class":268},[184,5577,4943],{"class":211},[184,5579,4946],{"class":268},[184,5581,5582,5584,5586,5588,5590,5592,5594,5596],{"class":186,"line":70},[184,5583,4896],{"class":718},[184,5585,4899],{"class":268},[184,5587,4925],{"class":211},[184,5589,4928],{"class":268},[184,5591,4931],{"class":211},[184,5593,4934],{"class":268},[184,5595,4881],{"class":211},[184,5597,5598],{"class":268},"odel;\n",[184,5600,5601],{"class":186,"line":302},[184,5602,285],{"emptyLinePlaceholder":9},[184,5604,5605],{"class":186,"line":317},[184,5606,5607],{"class":268},"class Blog extends Model\n",[184,5609,5610],{"class":186,"line":323},[184,5611,320],{"class":268},[184,5613,5614,5616,5618],{"class":186,"line":348},[184,5615,5021],{"class":211},[184,5617,5024],{"class":211},[184,5619,280],{"class":268},[184,5621,5622],{"class":186,"line":368},[184,5623,285],{"emptyLinePlaceholder":9},[184,5625,5626,5628,5630,5632],{"class":186,"line":374},[184,5627,5070],{"class":211},[184,5629,5073],{"class":268},[184,5631,5076],{"class":211},[184,5633,5079],{"class":268},[184,5635,5636,5638,5640,5643,5645],{"class":186,"line":380},[184,5637,5084],{"class":268},[184,5639,108],{"class":211},[184,5641,5642],{"class":268},"', '",[184,5644,5459],{"class":211},[184,5646,5647],{"class":268},"'\n",[184,5649,5650],{"class":186,"line":385},[184,5651,5112],{"class":268},[184,5653,5654],{"class":186,"line":391},[184,5655,641],{"class":268},[145,5657,4794],{"id":5658},"step-5-create-eloquent-api-resources",[128,5660,5661],{},"Run the following commands to create Blog API Resources",[176,5663,5666],{"className":5664,"code":5665,"language":4054},[4052],"php artisan make:resource BlogResource\n",[167,5667,5665],{"__ignoreMap":115},[128,5669,5670],{},"Then go to app/Http/Resources/BlogResource.php",[176,5672,5674],{"className":4860,"code":5673,"language":4862,"meta":115,"style":115},"\u003C?php\n\nnamespace App\\Http\\Resources;\n\nuse Illuminate\\Http\\Request;\nuse Illuminate\\Http\\Resources\\Json\\JsonResource;\n\nclass BlogResource extends JsonResource\n{\n // Transform the resource into an array.\n public function toArray(Request $request): array\n {\n return [\n 'id' => $this->id,\n 'title' => $this->title,\n 'detail' => $this->detail,\n 'created_at' => $this->created_at->format('d/m/Y'),\n 'updated_at' => $this->updated_at->format('d/m/Y'),\n ];\n }\n}\n",[167,5675,5676,5680,5684,5699,5703,5718,5744,5748,5753,5757,5783,5804,5808,5812,5820,5828,5836,5854,5870,5874,5878],{"__ignoreMap":115},[184,5677,5678],{"class":186,"line":12},[184,5679,4869],{"class":268},[184,5681,5682],{"class":186,"line":24},[184,5683,285],{"emptyLinePlaceholder":9},[184,5685,5686,5688,5690,5693,5696],{"class":186,"line":35},[184,5687,4878],{"class":268},[184,5689,4943],{"class":211},[184,5691,5692],{"class":268},"ttp",[184,5694,5695],{"class":211},"\\R",[184,5697,5698],{"class":268},"esources;\n",[184,5700,5701],{"class":186,"line":47},[184,5702,285],{"emptyLinePlaceholder":9},[184,5704,5705,5707,5709,5711,5713,5715],{"class":186,"line":58},[184,5706,4896],{"class":718},[184,5708,4899],{"class":268},[184,5710,4943],{"class":211},[184,5712,5692],{"class":268},[184,5714,5695],{"class":211},[184,5716,5717],{"class":268},"equest;\n",[184,5719,5720,5722,5724,5726,5728,5730,5733,5736,5739,5741],{"class":186,"line":70},[184,5721,4896],{"class":718},[184,5723,4899],{"class":268},[184,5725,4943],{"class":211},[184,5727,5692],{"class":268},[184,5729,5695],{"class":211},[184,5731,5732],{"class":268},"esources",[184,5734,5735],{"class":211},"\\J",[184,5737,5738],{"class":268},"son",[184,5740,5735],{"class":211},[184,5742,5743],{"class":268},"sonResource;\n",[184,5745,5746],{"class":186,"line":302},[184,5747,285],{"emptyLinePlaceholder":9},[184,5749,5750],{"class":186,"line":317},[184,5751,5752],{"class":268},"class BlogResource extends JsonResource\n",[184,5754,5755],{"class":186,"line":323},[184,5756,320],{"class":268},[184,5758,5759,5762,5765,5768,5771,5774,5777,5780],{"class":186,"line":348},[184,5760,5761],{"class":268}," // ",[184,5763,5764],{"class":211},"Transform",[184,5766,5767],{"class":211}," the",[184,5769,5770],{"class":211}," resource",[184,5772,5773],{"class":211}," into",[184,5775,5776],{"class":211}," an",[184,5778,5779],{"class":211}," array",[184,5781,5782],{"class":268},".\n",[184,5784,5785,5787,5789,5792,5794,5796,5798,5801],{"class":186,"line":368},[184,5786,326],{"class":211},[184,5788,329],{"class":211},[184,5790,5791],{"class":211}," toArray",[184,5793,335],{"class":268},[184,5795,339],{"class":211},[184,5797,5073],{"class":268},[184,5799,5800],{"class":211},"request",[184,5802,5803],{"class":268},"): array\n",[184,5805,5806],{"class":186,"line":374},[184,5807,2229],{"class":268},[184,5809,5810],{"class":186,"line":380},[184,5811,5222],{"class":268},[184,5813,5814,5817],{"class":186,"line":385},[184,5815,5816],{"class":193}," 'id'",[184,5818,5819],{"class":268}," => $this->id,\n",[184,5821,5822,5825],{"class":186,"line":391},[184,5823,5824],{"class":193}," 'title'",[184,5826,5827],{"class":268}," => $this->title,\n",[184,5829,5830,5833],{"class":186,"line":411},[184,5831,5832],{"class":193}," 'detail'",[184,5834,5835],{"class":268}," => $this->detail,\n",[184,5837,5838,5841,5844,5847,5849,5852],{"class":186,"line":416},[184,5839,5840],{"class":193}," 'created_at'",[184,5842,5843],{"class":268}," => $this->created_at->",[184,5845,5846],{"class":211},"format",[184,5848,335],{"class":268},[184,5850,5851],{"class":193},"'d/m/Y'",[184,5853,1337],{"class":268},[184,5855,5856,5859,5862,5864,5866,5868],{"class":186,"line":433},[184,5857,5858],{"class":193}," 'updated_at'",[184,5860,5861],{"class":268}," => $this->updated_at->",[184,5863,5846],{"class":211},[184,5865,335],{"class":268},[184,5867,5851],{"class":193},[184,5869,1337],{"class":268},[184,5871,5872],{"class":186,"line":451},[184,5873,5252],{"class":268},[184,5875,5876],{"class":186,"line":463},[184,5877,635],{"class":268},[184,5879,5880],{"class":186,"line":480},[184,5881,641],{"class":268},[145,5883,4800],{"id":5884},"step-6-create-controller-files",[128,5886,5887],{},"Run the following commands to add BaseController & RegisterController & BlogController",[176,5889,5892],{"className":5890,"code":5891,"language":4054},[4052],"php artisan make:controller API/BaseController\nphp artisan make:controller API/RegisterController\nphp artisan make:controller API/BlogController\n",[167,5893,5891],{"__ignoreMap":115},[128,5895,5896],{},"Then go to app/Http/Controllers/API/BaseController.php and add this code",[176,5898,5900],{"className":4860,"code":5899,"language":4862,"meta":115,"style":115},"\u003C?php\n\nnamespace App\\Http\\Controllers\\API;\n\nuse App\\Http\\Controllers\\Controller;\nuse Illuminate\\Http\\Request;\n\nclass BaseController extends Controller\n{\n // success response method\n public function sendResponse($result, $message)\n {\n $response = [\n 'success' => true,\n 'data' => $result,\n 'message' => $message,\n ];\n\n return response()->json($response, 200);\n }\n\n // return error response\n public function sendError($error, $errorMessages = [], $code = 404)\n {\n $response = [\n 'success' => false,\n 'message' => $error,\n ];\n\n if(!empty($errorMessages)){\n $response['data'] = $errorMessages;\n }\n\n return response()->json($response, $code);\n }\n}\n",[167,5901,5902,5906,5910,5928,5932,5951,5965,5969,5974,5978,5991,6014,6018,6028,6043,6057,6070,6074,6078,6101,6105,6109,6114,6124,6128,6136,6149,6162,6166,6170,6189,6207,6211,6215,6229,6233],{"__ignoreMap":115},[184,5903,5904],{"class":186,"line":12},[184,5905,4869],{"class":268},[184,5907,5908],{"class":186,"line":24},[184,5909,285],{"emptyLinePlaceholder":9},[184,5911,5912,5914,5916,5918,5920,5923,5925],{"class":186,"line":35},[184,5913,4878],{"class":268},[184,5915,4943],{"class":211},[184,5917,5692],{"class":268},[184,5919,4902],{"class":211},[184,5921,5922],{"class":268},"ontrollers",[184,5924,4908],{"class":211},[184,5926,5927],{"class":268},"PI;\n",[184,5929,5930],{"class":186,"line":47},[184,5931,285],{"emptyLinePlaceholder":9},[184,5933,5934,5936,5938,5940,5942,5944,5946,5948],{"class":186,"line":58},[184,5935,4896],{"class":718},[184,5937,265],{"class":268},[184,5939,4943],{"class":211},[184,5941,5692],{"class":268},[184,5943,4902],{"class":211},[184,5945,5922],{"class":268},[184,5947,4902],{"class":211},[184,5949,5950],{"class":268},"ontroller;\n",[184,5952,5953,5955,5957,5959,5961,5963],{"class":186,"line":70},[184,5954,4896],{"class":718},[184,5956,4899],{"class":268},[184,5958,4943],{"class":211},[184,5960,5692],{"class":268},[184,5962,5695],{"class":211},[184,5964,5717],{"class":268},[184,5966,5967],{"class":186,"line":302},[184,5968,285],{"emptyLinePlaceholder":9},[184,5970,5971],{"class":186,"line":317},[184,5972,5973],{"class":268},"class BaseController extends Controller\n",[184,5975,5976],{"class":186,"line":323},[184,5977,320],{"class":268},[184,5979,5980,5982,5985,5988],{"class":186,"line":348},[184,5981,5761],{"class":268},[184,5983,5984],{"class":211},"success",[184,5986,5987],{"class":211}," response",[184,5989,5990],{"class":211}," method\n",[184,5992,5993,5995,5997,6000,6003,6006,6009,6012],{"class":186,"line":368},[184,5994,326],{"class":211},[184,5996,329],{"class":211},[184,5998,5999],{"class":211}," sendResponse",[184,6001,6002],{"class":268},"($",[184,6004,6005],{"class":211},"result",[184,6007,6008],{"class":268},", $",[184,6010,6011],{"class":211},"message",[184,6013,3459],{"class":268},[184,6015,6016],{"class":186,"line":374},[184,6017,2229],{"class":268},[184,6019,6020,6023,6026],{"class":186,"line":380},[184,6021,6022],{"class":268}," $",[184,6024,6025],{"class":211},"response",[184,6027,5079],{"class":268},[184,6029,6030,6033,6035,6038,6041],{"class":186,"line":385},[184,6031,6032],{"class":268}," '",[184,6034,5984],{"class":211},[184,6036,6037],{"class":268},"' => ",[184,6039,6040],{"class":211},"true",[184,6042,601],{"class":268},[184,6044,6045,6047,6050,6053,6055],{"class":186,"line":391},[184,6046,6032],{"class":268},[184,6048,6049],{"class":211},"data",[184,6051,6052],{"class":268},"' => $",[184,6054,6005],{"class":211},[184,6056,601],{"class":268},[184,6058,6059,6061,6063,6066,6068],{"class":186,"line":411},[184,6060,6032],{"class":268},[184,6062,6011],{"class":211},[184,6064,6065],{"class":268},"' => $",[184,6067,6011],{"class":211},[184,6069,601],{"class":268},[184,6071,6072],{"class":186,"line":416},[184,6073,5252],{"class":268},[184,6075,6076],{"class":186,"line":433},[184,6077,285],{"emptyLinePlaceholder":9},[184,6079,6080,6082,6084,6087,6090,6092,6094,6096,6098],{"class":186,"line":451},[184,6081,419],{"class":211},[184,6083,5987],{"class":211},[184,6085,6086],{"class":268},"()",[184,6088,6089],{"class":211},"-",[184,6091,5419],{"class":268},[184,6093,8],{"class":211},[184,6095,6002],{"class":268},[184,6097,6025],{"class":211},[184,6099,6100],{"class":268},", 200);\n",[184,6102,6103],{"class":186,"line":463},[184,6104,635],{"class":268},[184,6106,6107],{"class":186,"line":480},[184,6108,285],{"emptyLinePlaceholder":9},[184,6110,6111],{"class":186,"line":495},[184,6112,6113],{"class":268}," // return error response\n",[184,6115,6116,6119,6121],{"class":186,"line":511},[184,6117,6118],{"class":268}," public function sendError($error, $errorMessages = [], $",[184,6120,167],{"class":718},[184,6122,6123],{"class":268}," = 404)\n",[184,6125,6126],{"class":186,"line":527},[184,6127,2229],{"class":268},[184,6129,6130,6132,6134],{"class":186,"line":542},[184,6131,6022],{"class":268},[184,6133,6025],{"class":211},[184,6135,5079],{"class":268},[184,6137,6138,6140,6142,6144,6147],{"class":186,"line":558},[184,6139,6032],{"class":268},[184,6141,5984],{"class":211},[184,6143,6037],{"class":268},[184,6145,6146],{"class":211},"false",[184,6148,601],{"class":268},[184,6150,6151,6153,6155,6157,6160],{"class":186,"line":573},[184,6152,6032],{"class":268},[184,6154,6011],{"class":211},[184,6156,6065],{"class":268},[184,6158,6159],{"class":211},"error",[184,6161,601],{"class":268},[184,6163,6164],{"class":186,"line":589},[184,6165,5252],{"class":268},[184,6167,6168],{"class":186,"line":604},[184,6169,285],{"emptyLinePlaceholder":9},[184,6171,6172,6175,6178,6181,6183,6186],{"class":186,"line":626},[184,6173,6174],{"class":211}," if",[184,6176,6177],{"class":268},"(!",[184,6179,6180],{"class":211},"empty",[184,6182,6002],{"class":268},[184,6184,6185],{"class":211},"errorMessages",[184,6187,6188],{"class":268},")){\n",[184,6190,6191,6193,6195,6198,6200,6203,6205],{"class":186,"line":632},[184,6192,5413],{"class":268},[184,6194,6025],{"class":211},[184,6196,6197],{"class":268},"['",[184,6199,6049],{"class":211},[184,6201,6202],{"class":268},"'] = $",[184,6204,6185],{"class":211},[184,6206,280],{"class":268},[184,6208,6209],{"class":186,"line":638},[184,6210,1593],{"class":268},[184,6212,6213],{"class":186,"line":1400},[184,6214,285],{"emptyLinePlaceholder":9},[184,6216,6217,6220,6222,6225,6227],{"class":186,"line":1421},[184,6218,6219],{"class":268}," return response()-",[184,6221,5419],{"class":261},[184,6223,6224],{"class":268},"json($response, $",[184,6226,167],{"class":718},[184,6228,699],{"class":268},[184,6230,6231],{"class":186,"line":1442},[184,6232,635],{"class":268},[184,6234,6235],{"class":186,"line":1463},[184,6236,641],{"class":268},[128,6238,6239],{},"Now go to app/Http/Controllers/API/BaseController.php",[176,6241,6243],{"className":4860,"code":6242,"language":4862,"meta":115,"style":115},"\u003C?php\n\nnamespace App\\Http\\Controllers\\API;\n\nuse App\\Http\\Controllers\\Controller;\nuse Illuminate\\Http\\Request;\nuse App\\Models\\User;\nuse Illuminate\\Support\\Facades\\Auth;\nuse Illuminate\\Http\\JsonResponse;\nuse Illuminate\\Support\\Facades\\Validator;\n\nclass RegisterController extends BaseController\n{\n // Register api\n public function register(Request $request): JsonResponse\n {\n $validator = Validator::make($request->all(), [\n 'name' => 'required',\n 'email' => 'required|email',\n 'password' => 'required',\n 'c_password' => 'required|same:password',\n ]);\n\n if($validator->fails()){\n return $this->sendError('Validation Error.', $validator->errors());\n }\n\n $input = $request->all();\n $input['password'] = bcrypt($input['password']);\n $user = User::create($input);\n $success['token'] = $user->createToken('MyApp')->plainTextToken;\n $success['name'] = $user->name;\n\n return $this->sendResponse($success, 'User register successfully.');\n }\n\n // Login api\n public function login(Request $request): JsonResponse\n {\n if(Auth::attempt(['email' => $request->email, 'password' => $request->password])){\n $user = Auth::user();\n $success['token'] = $user->createToken('MyApp')->plainTextToken;\n $success['name'] = $user->name;\n\n return $this->sendResponse($success, 'User login successfully.');\n }\n else{\n return $this->sendError('Unauthorised.', ['error'=>'Unauthorised']);\n }\n }\n}\n",[167,6244,6245,6249,6253,6269,6273,6291,6305,6321,6340,6355,6375,6379,6384,6388,6398,6417,6421,6431,6445,6462,6474,6503,6507,6511,6528,6563,6567,6571,6589,6613,6622,6646,6662,6666,6678,6682,6686,6691,6696,6700,6723,6738,6775,6795,6799,6831,6835,6840,6870,6875,6880],{"__ignoreMap":115},[184,6246,6247],{"class":186,"line":12},[184,6248,4869],{"class":268},[184,6250,6251],{"class":186,"line":24},[184,6252,285],{"emptyLinePlaceholder":9},[184,6254,6255,6257,6259,6261,6263,6265,6267],{"class":186,"line":35},[184,6256,4878],{"class":268},[184,6258,4943],{"class":211},[184,6260,5692],{"class":268},[184,6262,4902],{"class":211},[184,6264,5922],{"class":268},[184,6266,4908],{"class":211},[184,6268,5927],{"class":268},[184,6270,6271],{"class":186,"line":47},[184,6272,285],{"emptyLinePlaceholder":9},[184,6274,6275,6277,6279,6281,6283,6285,6287,6289],{"class":186,"line":58},[184,6276,4896],{"class":718},[184,6278,265],{"class":268},[184,6280,4943],{"class":211},[184,6282,5692],{"class":268},[184,6284,4902],{"class":211},[184,6286,5922],{"class":268},[184,6288,4902],{"class":211},[184,6290,5950],{"class":268},[184,6292,6293,6295,6297,6299,6301,6303],{"class":186,"line":70},[184,6294,4896],{"class":718},[184,6296,4899],{"class":268},[184,6298,4943],{"class":211},[184,6300,5692],{"class":268},[184,6302,5695],{"class":211},[184,6304,5717],{"class":268},[184,6306,6307,6309,6311,6313,6316,6318],{"class":186,"line":302},[184,6308,4896],{"class":718},[184,6310,265],{"class":268},[184,6312,4881],{"class":211},[184,6314,6315],{"class":268},"odels",[184,6317,4965],{"class":211},[184,6319,6320],{"class":268},"ser;\n",[184,6322,6323,6325,6327,6329,6331,6333,6335,6337],{"class":186,"line":317},[184,6324,4896],{"class":718},[184,6326,4899],{"class":268},[184,6328,4995],{"class":211},[184,6330,5340],{"class":268},[184,6332,5343],{"class":211},[184,6334,5346],{"class":268},[184,6336,4908],{"class":211},[184,6338,6339],{"class":268},"uth;\n",[184,6341,6342,6344,6346,6348,6350,6352],{"class":186,"line":323},[184,6343,4896],{"class":718},[184,6345,4899],{"class":268},[184,6347,4943],{"class":211},[184,6349,5692],{"class":268},[184,6351,5735],{"class":211},[184,6353,6354],{"class":268},"sonResponse;\n",[184,6356,6357,6359,6361,6363,6365,6367,6369,6372],{"class":186,"line":348},[184,6358,4896],{"class":718},[184,6360,4899],{"class":268},[184,6362,4995],{"class":211},[184,6364,5340],{"class":268},[184,6366,5343],{"class":211},[184,6368,5346],{"class":268},[184,6370,6371],{"class":211},"\\V",[184,6373,6374],{"class":268},"alidator;\n",[184,6376,6377],{"class":186,"line":368},[184,6378,285],{"emptyLinePlaceholder":9},[184,6380,6381],{"class":186,"line":374},[184,6382,6383],{"class":268},"class RegisterController extends BaseController\n",[184,6385,6386],{"class":186,"line":380},[184,6387,320],{"class":268},[184,6389,6390,6392,6395],{"class":186,"line":385},[184,6391,5761],{"class":268},[184,6393,6394],{"class":211},"Register",[184,6396,6397],{"class":211}," api\n",[184,6399,6400,6402,6404,6406,6408,6410,6412,6414],{"class":186,"line":391},[184,6401,326],{"class":211},[184,6403,329],{"class":211},[184,6405,3450],{"class":211},[184,6407,335],{"class":268},[184,6409,339],{"class":211},[184,6411,5073],{"class":268},[184,6413,5800],{"class":211},[184,6415,6416],{"class":268},"): JsonResponse\n",[184,6418,6419],{"class":186,"line":411},[184,6420,2229],{"class":268},[184,6422,6423,6426,6428],{"class":186,"line":416},[184,6424,6425],{"class":268}," $validator = Validator::make($request->",[184,6427,2293],{"class":211},[184,6429,6430],{"class":268},"(), [\n",[184,6432,6433,6435,6437,6440,6443],{"class":186,"line":433},[184,6434,6032],{"class":268},[184,6436,692],{"class":211},[184,6438,6439],{"class":268},"' => '",[184,6441,6442],{"class":211},"required",[184,6444,5089],{"class":268},[184,6446,6447,6449,6451,6453,6455,6458,6460],{"class":186,"line":451},[184,6448,6032],{"class":268},[184,6450,5096],{"class":211},[184,6452,6439],{"class":268},[184,6454,6442],{"class":211},[184,6456,6457],{"class":268},"|",[184,6459,5096],{"class":211},[184,6461,5089],{"class":268},[184,6463,6464,6466,6468,6470,6472],{"class":186,"line":463},[184,6465,6032],{"class":268},[184,6467,5105],{"class":211},[184,6469,6439],{"class":268},[184,6471,6442],{"class":211},[184,6473,5089],{"class":268},[184,6475,6476,6478,6481,6483,6485,6487,6489,6491,6494,6497,6500],{"class":186,"line":480},[184,6477,6032],{"class":268},[184,6479,6480],{"class":211},"c",[184,6482,5166],{"class":268},[184,6484,5105],{"class":211},[184,6486,6439],{"class":268},[184,6488,6442],{"class":211},[184,6490,6457],{"class":268},[184,6492,6493],{"class":211},"same",[184,6495,6496],{"class":268},":password",[184,6498,6499],{"class":193},"'",[184,6501,601],{"class":6502},"s7hpK",[184,6504,6505],{"class":186,"line":495},[184,6506,629],{"class":268},[184,6508,6509],{"class":186,"line":511},[184,6510,285],{"emptyLinePlaceholder":9},[184,6512,6513,6515,6517,6520,6522,6525],{"class":186,"line":527},[184,6514,6174],{"class":211},[184,6516,6002],{"class":268},[184,6518,6519],{"class":211},"validator-",[184,6521,5419],{"class":268},[184,6523,6524],{"class":211},"fails",[184,6526,6527],{"class":268},"()){\n",[184,6529,6530,6532,6534,6537,6539,6542,6544,6547,6550,6553,6555,6557,6560],{"class":186,"line":542},[184,6531,1290],{"class":211},[184,6533,5073],{"class":268},[184,6535,6536],{"class":211},"this-",[184,6538,5419],{"class":268},[184,6540,6541],{"class":211},"sendError",[184,6543,5438],{"class":268},[184,6545,6546],{"class":211},"Validation",[184,6548,6549],{"class":211}," Error",[184,6551,6552],{"class":268},".', $",[184,6554,6519],{"class":211},[184,6556,5419],{"class":268},[184,6558,6559],{"class":211},"errors",[184,6561,6562],{"class":268},"());\n",[184,6564,6565],{"class":186,"line":558},[184,6566,1593],{"class":268},[184,6568,6569],{"class":186,"line":573},[184,6570,285],{"emptyLinePlaceholder":9},[184,6572,6573,6575,6578,6581,6584,6586],{"class":186,"line":589},[184,6574,6022],{"class":268},[184,6576,6577],{"class":718},"input",[184,6579,6580],{"class":268}," = $",[184,6582,6583],{"class":718},"request-",[184,6585,5419],{"class":261},[184,6587,6588],{"class":268},"all();\n",[184,6590,6591,6593,6595,6598,6601,6604,6606,6608,6610],{"class":186,"line":604},[184,6592,6022],{"class":268},[184,6594,6577],{"class":718},[184,6596,6597],{"class":268},"[",[184,6599,6600],{"class":193},"'password'",[184,6602,6603],{"class":268},"] = bcrypt($",[184,6605,6577],{"class":718},[184,6607,6597],{"class":268},[184,6609,6600],{"class":193},[184,6611,6612],{"class":268},"]);\n",[184,6614,6615,6618,6620],{"class":186,"line":626},[184,6616,6617],{"class":268}," $user = User::create($",[184,6619,6577],{"class":718},[184,6621,699],{"class":268},[184,6623,6624,6627,6630,6633,6636,6638,6641,6643],{"class":186,"line":632},[184,6625,6626],{"class":268}," $success[",[184,6628,6629],{"class":193},"'token'",[184,6631,6632],{"class":268},"] = $",[184,6634,6635],{"class":718},"user-",[184,6637,5419],{"class":261},[184,6639,6640],{"class":268},"createToken('MyApp')-",[184,6642,5419],{"class":261},[184,6644,6645],{"class":268},"plainTextToken;\n",[184,6647,6648,6650,6653,6655,6657,6659],{"class":186,"line":638},[184,6649,6626],{"class":268},[184,6651,6652],{"class":193},"'name'",[184,6654,6632],{"class":268},[184,6656,6635],{"class":718},[184,6658,5419],{"class":261},[184,6660,6661],{"class":268},"name;\n",[184,6663,6664],{"class":186,"line":1400},[184,6665,285],{"emptyLinePlaceholder":9},[184,6667,6668,6671,6673,6675],{"class":186,"line":1421},[184,6669,6670],{"class":268}," return $",[184,6672,6536],{"class":718},[184,6674,5419],{"class":261},[184,6676,6677],{"class":268},"sendResponse($success, 'User register successfully.');\n",[184,6679,6680],{"class":186,"line":1442},[184,6681,635],{"class":268},[184,6683,6684],{"class":186,"line":1463},[184,6685,285],{"emptyLinePlaceholder":9},[184,6687,6688],{"class":186,"line":1484},[184,6689,6690],{"class":268}," // Login api\n",[184,6692,6693],{"class":186,"line":1505},[184,6694,6695],{"class":268}," public function login(Request $request): JsonResponse\n",[184,6697,6698],{"class":186,"line":1511},[184,6699,2229],{"class":268},[184,6701,6702,6704,6706,6709,6712,6715,6718,6720],{"class":186,"line":1522},[184,6703,6174],{"class":211},[184,6705,335],{"class":268},[184,6707,6708],{"class":211},"Auth",[184,6710,6711],{"class":268},"::attempt([",[184,6713,6714],{"class":193},"'email'",[184,6716,6717],{"class":268}," => $request->email, ",[184,6719,6600],{"class":193},[184,6721,6722],{"class":268}," => $request->password])){\n",[184,6724,6725,6727,6730,6733,6735],{"class":186,"line":1528},[184,6726,5413],{"class":268},[184,6728,6729],{"class":211},"user",[184,6731,6732],{"class":268}," = ",[184,6734,6708],{"class":211},[184,6736,6737],{"class":268},"::user();\n",[184,6739,6740,6742,6744,6746,6748,6751,6753,6755,6758,6760,6763,6766,6768,6770,6773],{"class":186,"line":1540},[184,6741,5413],{"class":268},[184,6743,5984],{"class":211},[184,6745,6197],{"class":268},[184,6747,5169],{"class":211},[184,6749,6750],{"class":268},"'] = $",[184,6752,6635],{"class":211},[184,6754,5419],{"class":268},[184,6756,6757],{"class":211},"createToken",[184,6759,5438],{"class":268},[184,6761,6762],{"class":211},"MyApp",[184,6764,6765],{"class":268},"')",[184,6767,6089],{"class":211},[184,6769,5419],{"class":268},[184,6771,6772],{"class":211},"plainTextToken",[184,6774,280],{"class":268},[184,6776,6777,6779,6781,6783,6785,6787,6789,6791,6793],{"class":186,"line":1553},[184,6778,5413],{"class":268},[184,6780,5984],{"class":211},[184,6782,6197],{"class":268},[184,6784,692],{"class":211},[184,6786,6750],{"class":268},[184,6788,6635],{"class":211},[184,6790,5419],{"class":268},[184,6792,692],{"class":211},[184,6794,280],{"class":268},[184,6796,6797],{"class":186,"line":1564},[184,6798,285],{"emptyLinePlaceholder":9},[184,6800,6801,6803,6805,6807,6809,6812,6814,6816,6819,6822,6825,6828],{"class":186,"line":1585},[184,6802,1290],{"class":211},[184,6804,5073],{"class":268},[184,6806,6536],{"class":211},[184,6808,5419],{"class":268},[184,6810,6811],{"class":211},"sendResponse",[184,6813,6002],{"class":268},[184,6815,5984],{"class":211},[184,6817,6818],{"class":268},", '",[184,6820,6821],{"class":211},"User",[184,6823,6824],{"class":211}," login",[184,6826,6827],{"class":211}," successfully",[184,6829,6830],{"class":268},".');\n",[184,6832,6833],{"class":186,"line":1590},[184,6834,1593],{"class":268},[184,6836,6837],{"class":186,"line":1596},[184,6838,6839],{"class":268}," else{\n",[184,6841,6842,6844,6846,6848,6850,6852,6854,6857,6860,6862,6865,6867],{"class":186,"line":1601},[184,6843,1290],{"class":211},[184,6845,5073],{"class":268},[184,6847,6536],{"class":211},[184,6849,5419],{"class":268},[184,6851,6541],{"class":211},[184,6853,5438],{"class":268},[184,6855,6856],{"class":211},"Unauthorised",[184,6858,6859],{"class":268},".', ['",[184,6861,6159],{"class":211},[184,6863,6864],{"class":268},"'=>'",[184,6866,6856],{"class":211},[184,6868,6869],{"class":268},"']);\n",[184,6871,6873],{"class":186,"line":6872},49,[184,6874,1593],{"class":268},[184,6876,6878],{"class":186,"line":6877},50,[184,6879,635],{"class":268},[184,6881,6883],{"class":186,"line":6882},51,[184,6884,641],{"class":268},[128,6886,6887],{},"Finally, go to app/Http/Controllers/API/BlogController.php",[176,6889,6891],{"className":4860,"code":6890,"language":4862,"meta":115,"style":115},"\u003C?php\n\nnamespace App\\Http\\Controllers\\API;\n\nuse App\\Http\\Controllers\\Controller;\nuse Illuminate\\Http\\Request;\nuse App\\Http\\Controllers\\API\\BaseController;\nuse App\\Models\\Blog;\nuse App\\Http\\Resources\\BlogResource;\nuse Illuminate\\Http\\JsonResponse;\nuse Illuminate\\Support\\Facades\\Validator;\n\nclass BlogController extends BaseController\n{\n // Display a listing of the resource.\n public function index(): JsonResponse\n {\n $blogs = Blog::all();\n\n return $this->sendResponse(BlogResource::collection($blogs), 'Blogs retrieved successfully.');\n }\n\n // Store a newly created resource in storage.\n public function store(Request $request): JsonResponse\n {\n $input = $request->all();\n\n $validator = Validator::make($input, [\n 'title' => 'required',\n 'detail' => 'required'\n ]);\n\n if($validator->fails()){\n return $this->sendError('Validation Error.', $validator->errors());\n }\n\n $blog = Blog::create($input);\n\n return $this->sendResponse(new BlogResource($blog), 'Blog created successfully.');\n }\n\n // Display the specified resource.\n public function show($id): JsonResponse\n {\n $blog = Blog::find($id);\n\n if (is_null($blog)) {\n return $this->sendError('Blog not found.');\n }\n\n return $this->sendResponse(new BlogResource($blog), 'Blog retrieved successfully.');\n }\n\n // Update the specified resource in storage.\n public function update(Request $request, Blog $blog): JsonResponse\n {\n $input = $request->all();\n\n $validator = Validator::make($input, [\n 'title' => 'required',\n 'detail' => 'required'\n ]);\n\n if($validator->fails()){\n return $this->sendError('Validation Error.', $validator->errors());\n }\n\n $blog->title = $input['title'];\n $blog->detail = $input['detail'];\n $blog->save();\n\n return $this->sendResponse(new BlogResource($blog), 'Blog updated successfully.');\n }\n\n // Remove the specified resource from storage.\n public function destroy(Blog $blog): JsonResponse\n {\n $blog->delete();\n\n return $this->sendResponse([], 'Blog deleted successfully.');\n }\n}\n",[167,6892,6893,6897,6901,6917,6921,6939,6953,6978,6993,7012,7026,7044,7048,7053,7057,7079,7090,7094,7103,7107,7137,7141,7145,7155,7160,7164,7180,7184,7199,7210,7219,7223,7227,7241,7269,7273,7277,7286,7290,7301,7305,7309,7314,7319,7323,7336,7340,7361,7385,7389,7393,7404,7409,7414,7420,7426,7431,7448,7453,7466,7477,7486,7491,7496,7511,7540,7545,7550,7573,7594,7606,7611,7623,7628,7633,7639,7645,7650,7664,7669,7694,7699],{"__ignoreMap":115},[184,6894,6895],{"class":186,"line":12},[184,6896,4869],{"class":268},[184,6898,6899],{"class":186,"line":24},[184,6900,285],{"emptyLinePlaceholder":9},[184,6902,6903,6905,6907,6909,6911,6913,6915],{"class":186,"line":35},[184,6904,4878],{"class":268},[184,6906,4943],{"class":211},[184,6908,5692],{"class":268},[184,6910,4902],{"class":211},[184,6912,5922],{"class":268},[184,6914,4908],{"class":211},[184,6916,5927],{"class":268},[184,6918,6919],{"class":186,"line":47},[184,6920,285],{"emptyLinePlaceholder":9},[184,6922,6923,6925,6927,6929,6931,6933,6935,6937],{"class":186,"line":58},[184,6924,4896],{"class":718},[184,6926,265],{"class":268},[184,6928,4943],{"class":211},[184,6930,5692],{"class":268},[184,6932,4902],{"class":211},[184,6934,5922],{"class":268},[184,6936,4902],{"class":211},[184,6938,5950],{"class":268},[184,6940,6941,6943,6945,6947,6949,6951],{"class":186,"line":70},[184,6942,4896],{"class":718},[184,6944,4899],{"class":268},[184,6946,4943],{"class":211},[184,6948,5692],{"class":268},[184,6950,5695],{"class":211},[184,6952,5717],{"class":268},[184,6954,6955,6957,6959,6961,6963,6965,6967,6969,6972,6975],{"class":186,"line":302},[184,6956,4896],{"class":718},[184,6958,265],{"class":268},[184,6960,4943],{"class":211},[184,6962,5692],{"class":268},[184,6964,4902],{"class":211},[184,6966,5922],{"class":268},[184,6968,4908],{"class":211},[184,6970,6971],{"class":268},"PI",[184,6973,6974],{"class":211},"\\Ba",[184,6976,6977],{"class":268},"seController;\n",[184,6979,6980,6982,6984,6986,6988,6990],{"class":186,"line":317},[184,6981,4896],{"class":718},[184,6983,265],{"class":268},[184,6985,4881],{"class":211},[184,6987,6315],{"class":268},[184,6989,5326],{"class":211},[184,6991,6992],{"class":268},"log;\n",[184,6994,6995,6997,6999,7001,7003,7005,7007,7009],{"class":186,"line":323},[184,6996,4896],{"class":718},[184,6998,265],{"class":268},[184,7000,4943],{"class":211},[184,7002,5692],{"class":268},[184,7004,5695],{"class":211},[184,7006,5732],{"class":268},[184,7008,5326],{"class":211},[184,7010,7011],{"class":268},"logResource;\n",[184,7013,7014,7016,7018,7020,7022,7024],{"class":186,"line":348},[184,7015,4896],{"class":718},[184,7017,4899],{"class":268},[184,7019,4943],{"class":211},[184,7021,5692],{"class":268},[184,7023,5735],{"class":211},[184,7025,6354],{"class":268},[184,7027,7028,7030,7032,7034,7036,7038,7040,7042],{"class":186,"line":368},[184,7029,4896],{"class":718},[184,7031,4899],{"class":268},[184,7033,4995],{"class":211},[184,7035,5340],{"class":268},[184,7037,5343],{"class":211},[184,7039,5346],{"class":268},[184,7041,6371],{"class":211},[184,7043,6374],{"class":268},[184,7045,7046],{"class":186,"line":374},[184,7047,285],{"emptyLinePlaceholder":9},[184,7049,7050],{"class":186,"line":380},[184,7051,7052],{"class":268},"class BlogController extends BaseController\n",[184,7054,7055],{"class":186,"line":385},[184,7056,320],{"class":268},[184,7058,7059,7061,7064,7067,7070,7073,7075,7077],{"class":186,"line":391},[184,7060,5761],{"class":268},[184,7062,7063],{"class":211},"Display",[184,7065,7066],{"class":211}," a",[184,7068,7069],{"class":211}," listing",[184,7071,7072],{"class":211}," of",[184,7074,5767],{"class":211},[184,7076,5770],{"class":211},[184,7078,5782],{"class":268},[184,7080,7081,7083,7085,7087],{"class":186,"line":411},[184,7082,326],{"class":211},[184,7084,329],{"class":211},[184,7086,2221],{"class":211},[184,7088,7089],{"class":268},"(): JsonResponse\n",[184,7091,7092],{"class":186,"line":416},[184,7093,2229],{"class":268},[184,7095,7096,7099,7101],{"class":186,"line":433},[184,7097,7098],{"class":268}," $blogs = Blog::",[184,7100,2293],{"class":211},[184,7102,365],{"class":268},[184,7104,7105],{"class":186,"line":451},[184,7106,285],{"emptyLinePlaceholder":9},[184,7108,7109,7111,7113,7115,7117,7119,7121,7124,7127,7130,7133,7135],{"class":186,"line":463},[184,7110,419],{"class":211},[184,7112,5073],{"class":268},[184,7114,6536],{"class":211},[184,7116,5419],{"class":268},[184,7118,6811],{"class":211},[184,7120,335],{"class":268},[184,7122,7123],{"class":211},"BlogResource",[184,7125,7126],{"class":268},"::collection($blogs), '",[184,7128,7129],{"class":211},"Blogs",[184,7131,7132],{"class":211}," retrieved",[184,7134,6827],{"class":211},[184,7136,6830],{"class":268},[184,7138,7139],{"class":186,"line":480},[184,7140,635],{"class":268},[184,7142,7143],{"class":186,"line":495},[184,7144,285],{"emptyLinePlaceholder":9},[184,7146,7147,7150,7152],{"class":186,"line":511},[184,7148,7149],{"class":268}," // Store ",[184,7151,2880],{"class":718},[184,7153,7154],{"class":268}," newly created resource in storage.\n",[184,7156,7157],{"class":186,"line":527},[184,7158,7159],{"class":268}," public function store(Request $request): JsonResponse\n",[184,7161,7162],{"class":186,"line":542},[184,7163,2229],{"class":268},[184,7165,7166,7168,7170,7172,7174,7176,7178],{"class":186,"line":558},[184,7167,6022],{"class":268},[184,7169,6577],{"class":211},[184,7171,6580],{"class":268},[184,7173,6583],{"class":211},[184,7175,5419],{"class":268},[184,7177,2293],{"class":211},[184,7179,365],{"class":268},[184,7181,7182],{"class":186,"line":573},[184,7183,285],{"emptyLinePlaceholder":9},[184,7185,7186,7188,7191,7193,7196],{"class":186,"line":589},[184,7187,6022],{"class":268},[184,7189,7190],{"class":211},"validator",[184,7192,6732],{"class":268},[184,7194,7195],{"class":211},"Validator",[184,7197,7198],{"class":268},"::make($input, [\n",[184,7200,7201,7203,7205,7208],{"class":186,"line":604},[184,7202,5824],{"class":193},[184,7204,5230],{"class":268},[184,7206,7207],{"class":193},"'required'",[184,7209,601],{"class":268},[184,7211,7212,7214,7216],{"class":186,"line":626},[184,7213,5832],{"class":193},[184,7215,5230],{"class":268},[184,7217,7218],{"class":193},"'required'\n",[184,7220,7221],{"class":186,"line":632},[184,7222,629],{"class":268},[184,7224,7225],{"class":186,"line":638},[184,7226,285],{"emptyLinePlaceholder":9},[184,7228,7229,7231,7233,7235,7237,7239],{"class":186,"line":1400},[184,7230,6174],{"class":211},[184,7232,6002],{"class":268},[184,7234,6519],{"class":211},[184,7236,5419],{"class":268},[184,7238,6524],{"class":211},[184,7240,6527],{"class":268},[184,7242,7243,7245,7247,7249,7251,7253,7255,7257,7259,7261,7263,7265,7267],{"class":186,"line":1421},[184,7244,1290],{"class":211},[184,7246,5073],{"class":268},[184,7248,6536],{"class":211},[184,7250,5419],{"class":268},[184,7252,6541],{"class":211},[184,7254,5438],{"class":268},[184,7256,6546],{"class":211},[184,7258,6549],{"class":211},[184,7260,6552],{"class":268},[184,7262,6519],{"class":211},[184,7264,5419],{"class":268},[184,7266,6559],{"class":211},[184,7268,6562],{"class":268},[184,7270,7271],{"class":186,"line":1442},[184,7272,1593],{"class":268},[184,7274,7275],{"class":186,"line":1463},[184,7276,285],{"emptyLinePlaceholder":9},[184,7278,7279,7282,7284],{"class":186,"line":1484},[184,7280,7281],{"class":268}," $blog = Blog::create($",[184,7283,6577],{"class":718},[184,7285,699],{"class":268},[184,7287,7288],{"class":186,"line":1505},[184,7289,285],{"emptyLinePlaceholder":9},[184,7291,7292,7294,7296,7298],{"class":186,"line":1511},[184,7293,6670],{"class":268},[184,7295,6536],{"class":718},[184,7297,5419],{"class":261},[184,7299,7300],{"class":268},"sendResponse(new BlogResource($blog), 'Blog created successfully.');\n",[184,7302,7303],{"class":186,"line":1522},[184,7304,635],{"class":268},[184,7306,7307],{"class":186,"line":1528},[184,7308,285],{"emptyLinePlaceholder":9},[184,7310,7311],{"class":186,"line":1540},[184,7312,7313],{"class":268}," // Display the specified resource.\n",[184,7315,7316],{"class":186,"line":1553},[184,7317,7318],{"class":268}," public function show($id): JsonResponse\n",[184,7320,7321],{"class":186,"line":1564},[184,7322,2229],{"class":268},[184,7324,7325,7327,7329,7331,7333],{"class":186,"line":1585},[184,7326,6022],{"class":268},[184,7328,60],{"class":211},[184,7330,6732],{"class":268},[184,7332,55],{"class":211},[184,7334,7335],{"class":268},"::find($id);\n",[184,7337,7338],{"class":186,"line":1590},[184,7339,285],{"emptyLinePlaceholder":9},[184,7341,7342,7344,7346,7349,7351,7354,7356,7358],{"class":186,"line":1596},[184,7343,6174],{"class":211},[184,7345,1193],{"class":268},[184,7347,7348],{"class":211},"is",[184,7350,5166],{"class":268},[184,7352,7353],{"class":211},"null",[184,7355,6002],{"class":268},[184,7357,60],{"class":211},[184,7359,7360],{"class":268},")) {\n",[184,7362,7363,7365,7367,7369,7371,7373,7375,7377,7380,7383],{"class":186,"line":1601},[184,7364,1290],{"class":211},[184,7366,5073],{"class":268},[184,7368,6536],{"class":211},[184,7370,5419],{"class":268},[184,7372,6541],{"class":211},[184,7374,5438],{"class":268},[184,7376,55],{"class":211},[184,7378,7379],{"class":211}," not",[184,7381,7382],{"class":211}," found",[184,7384,6830],{"class":268},[184,7386,7387],{"class":186,"line":6872},[184,7388,1593],{"class":268},[184,7390,7391],{"class":186,"line":6877},[184,7392,285],{"emptyLinePlaceholder":9},[184,7394,7395,7397,7399,7401],{"class":186,"line":6882},[184,7396,6670],{"class":268},[184,7398,6536],{"class":718},[184,7400,5419],{"class":261},[184,7402,7403],{"class":268},"sendResponse(new BlogResource($blog), 'Blog retrieved successfully.');\n",[184,7405,7407],{"class":186,"line":7406},52,[184,7408,635],{"class":268},[184,7410,7412],{"class":186,"line":7411},53,[184,7413,285],{"emptyLinePlaceholder":9},[184,7415,7417],{"class":186,"line":7416},54,[184,7418,7419],{"class":268}," // Update the specified resource in storage.\n",[184,7421,7423],{"class":186,"line":7422},55,[184,7424,7425],{"class":268}," public function update(Request $request, Blog $blog): JsonResponse\n",[184,7427,7429],{"class":186,"line":7428},56,[184,7430,2229],{"class":268},[184,7432,7434,7436,7438,7440,7442,7444,7446],{"class":186,"line":7433},57,[184,7435,6022],{"class":268},[184,7437,6577],{"class":211},[184,7439,6580],{"class":268},[184,7441,6583],{"class":211},[184,7443,5419],{"class":268},[184,7445,2293],{"class":211},[184,7447,365],{"class":268},[184,7449,7451],{"class":186,"line":7450},58,[184,7452,285],{"emptyLinePlaceholder":9},[184,7454,7456,7458,7460,7462,7464],{"class":186,"line":7455},59,[184,7457,6022],{"class":268},[184,7459,7190],{"class":211},[184,7461,6732],{"class":268},[184,7463,7195],{"class":211},[184,7465,7198],{"class":268},[184,7467,7469,7471,7473,7475],{"class":186,"line":7468},60,[184,7470,5824],{"class":193},[184,7472,5230],{"class":268},[184,7474,7207],{"class":193},[184,7476,601],{"class":268},[184,7478,7480,7482,7484],{"class":186,"line":7479},61,[184,7481,5832],{"class":193},[184,7483,5230],{"class":268},[184,7485,7218],{"class":193},[184,7487,7489],{"class":186,"line":7488},62,[184,7490,629],{"class":268},[184,7492,7494],{"class":186,"line":7493},63,[184,7495,285],{"emptyLinePlaceholder":9},[184,7497,7499,7501,7503,7505,7507,7509],{"class":186,"line":7498},64,[184,7500,6174],{"class":211},[184,7502,6002],{"class":268},[184,7504,6519],{"class":211},[184,7506,5419],{"class":268},[184,7508,6524],{"class":211},[184,7510,6527],{"class":268},[184,7512,7514,7516,7518,7520,7522,7524,7526,7528,7530,7532,7534,7536,7538],{"class":186,"line":7513},65,[184,7515,1290],{"class":211},[184,7517,5073],{"class":268},[184,7519,6536],{"class":211},[184,7521,5419],{"class":268},[184,7523,6541],{"class":211},[184,7525,5438],{"class":268},[184,7527,6546],{"class":211},[184,7529,6549],{"class":211},[184,7531,6552],{"class":268},[184,7533,6519],{"class":211},[184,7535,5419],{"class":268},[184,7537,6559],{"class":211},[184,7539,6562],{"class":268},[184,7541,7543],{"class":186,"line":7542},66,[184,7544,1593],{"class":268},[184,7546,7548],{"class":186,"line":7547},67,[184,7549,285],{"emptyLinePlaceholder":9},[184,7551,7553,7555,7558,7560,7562,7564,7566,7568,7571],{"class":186,"line":7552},68,[184,7554,6022],{"class":268},[184,7556,7557],{"class":718},"blog-",[184,7559,5419],{"class":261},[184,7561,108],{"class":718},[184,7563,6580],{"class":268},[184,7565,6577],{"class":718},[184,7567,6597],{"class":268},[184,7569,7570],{"class":193},"'title'",[184,7572,3245],{"class":268},[184,7574,7576,7578,7580,7582,7585,7587,7589,7592],{"class":186,"line":7575},69,[184,7577,6022],{"class":268},[184,7579,7557],{"class":718},[184,7581,5419],{"class":261},[184,7583,7584],{"class":268},"detail = $",[184,7586,6577],{"class":718},[184,7588,6597],{"class":268},[184,7590,7591],{"class":193},"'detail'",[184,7593,3245],{"class":268},[184,7595,7597,7599,7601,7603],{"class":186,"line":7596},70,[184,7598,6022],{"class":268},[184,7600,7557],{"class":718},[184,7602,5419],{"class":261},[184,7604,7605],{"class":268},"save();\n",[184,7607,7609],{"class":186,"line":7608},71,[184,7610,285],{"emptyLinePlaceholder":9},[184,7612,7614,7616,7618,7620],{"class":186,"line":7613},72,[184,7615,6670],{"class":268},[184,7617,6536],{"class":718},[184,7619,5419],{"class":261},[184,7621,7622],{"class":268},"sendResponse(new BlogResource($blog), 'Blog updated successfully.');\n",[184,7624,7626],{"class":186,"line":7625},73,[184,7627,635],{"class":268},[184,7629,7631],{"class":186,"line":7630},74,[184,7632,285],{"emptyLinePlaceholder":9},[184,7634,7636],{"class":186,"line":7635},75,[184,7637,7638],{"class":268}," // Remove the specified resource from storage.\n",[184,7640,7642],{"class":186,"line":7641},76,[184,7643,7644],{"class":268}," public function destroy(Blog $blog): JsonResponse\n",[184,7646,7648],{"class":186,"line":7647},77,[184,7649,2229],{"class":268},[184,7651,7653,7655,7657,7659,7662],{"class":186,"line":7652},78,[184,7654,6022],{"class":268},[184,7656,7557],{"class":211},[184,7658,5419],{"class":268},[184,7660,7661],{"class":211},"delete",[184,7663,365],{"class":268},[184,7665,7667],{"class":186,"line":7666},79,[184,7668,285],{"emptyLinePlaceholder":9},[184,7670,7672,7674,7676,7678,7680,7682,7685,7687,7690,7692],{"class":186,"line":7671},80,[184,7673,419],{"class":211},[184,7675,5073],{"class":268},[184,7677,6536],{"class":211},[184,7679,5419],{"class":268},[184,7681,6811],{"class":211},[184,7683,7684],{"class":268},"([], '",[184,7686,55],{"class":211},[184,7688,7689],{"class":211}," deleted",[184,7691,6827],{"class":211},[184,7693,6830],{"class":268},[184,7695,7697],{"class":186,"line":7696},81,[184,7698,635],{"class":268},[184,7700,7702],{"class":186,"line":7701},82,[184,7703,641],{"class":268},[145,7705,4806],{"id":7706},"step-7-create-api-routes",[128,7708,7709],{},"In this step we will create API routes for login, register, and blogs.",[128,7711,7712],{},"Go to routes/api.php",[176,7714,7716],{"className":4860,"code":7715,"language":4862,"meta":115,"style":115},"\u003C?php\n\nuse Illuminate\\Http\\Request;\nuse Illuminate\\Support\\Facades\\Route;\nuse App\\Http\\Controllers\\API\\RegisterController;\nuse App\\Http\\Controllers\\API\\BlogController;\n\nRoute::controller(RegisterController::class)->group(function(){\n Route::post('register', 'register')->name('register');\n Route::post('login', 'login')->name('login');\n});\n\nRoute::middleware('auth:sanctum')->group( function () {\n Route::apiResource('blogs', BlogController::class);\n Route::get('user', function (Request $request) {\n return $request->user();\n })->name('user');\n});\n",[167,7717,7718,7722,7726,7740,7759,7782,7805,7809,7819,7849,7877,7881,7885,7895,7907,7920,7934,7944],{"__ignoreMap":115},[184,7719,7720],{"class":186,"line":12},[184,7721,4869],{"class":268},[184,7723,7724],{"class":186,"line":24},[184,7725,285],{"emptyLinePlaceholder":9},[184,7727,7728,7730,7732,7734,7736,7738],{"class":186,"line":35},[184,7729,4896],{"class":718},[184,7731,4899],{"class":268},[184,7733,4943],{"class":211},[184,7735,5692],{"class":268},[184,7737,5695],{"class":211},[184,7739,5717],{"class":268},[184,7741,7742,7744,7746,7748,7750,7752,7754,7756],{"class":186,"line":47},[184,7743,4896],{"class":718},[184,7745,4899],{"class":268},[184,7747,4995],{"class":211},[184,7749,5340],{"class":268},[184,7751,5343],{"class":211},[184,7753,5346],{"class":268},[184,7755,5695],{"class":211},[184,7757,7758],{"class":268},"oute;\n",[184,7760,7761,7763,7765,7767,7769,7771,7773,7775,7777,7779],{"class":186,"line":58},[184,7762,4896],{"class":718},[184,7764,265],{"class":268},[184,7766,4943],{"class":211},[184,7768,5692],{"class":268},[184,7770,4902],{"class":211},[184,7772,5922],{"class":268},[184,7774,4908],{"class":211},[184,7776,6971],{"class":268},[184,7778,5695],{"class":211},[184,7780,7781],{"class":268},"egisterController;\n",[184,7783,7784,7786,7788,7790,7792,7794,7796,7798,7800,7802],{"class":186,"line":70},[184,7785,4896],{"class":718},[184,7787,265],{"class":268},[184,7789,4943],{"class":211},[184,7791,5692],{"class":268},[184,7793,4902],{"class":211},[184,7795,5922],{"class":268},[184,7797,4908],{"class":211},[184,7799,6971],{"class":268},[184,7801,5326],{"class":211},[184,7803,7804],{"class":268},"logController;\n",[184,7806,7807],{"class":186,"line":302},[184,7808,285],{"emptyLinePlaceholder":9},[184,7810,7811,7814,7816],{"class":186,"line":317},[184,7812,7813],{"class":268},"Route::controller(RegisterController::class)-",[184,7815,5419],{"class":261},[184,7817,7818],{"class":268},"group(function(){\n",[184,7820,7821,7824,7827,7830,7832,7834,7836,7838,7840,7842,7844,7847],{"class":186,"line":323},[184,7822,7823],{"class":211}," Route",[184,7825,7826],{"class":268},"::post(",[184,7828,7829],{"class":193},"'register'",[184,7831,4156],{"class":268},[184,7833,7829],{"class":193},[184,7835,1987],{"class":268},[184,7837,6089],{"class":211},[184,7839,5419],{"class":268},[184,7841,692],{"class":211},[184,7843,5438],{"class":268},[184,7845,7846],{"class":211},"register",[184,7848,5443],{"class":268},[184,7850,7851,7853,7855,7858,7860,7862,7864,7866,7868,7870,7872,7875],{"class":186,"line":348},[184,7852,7823],{"class":211},[184,7854,7826],{"class":268},[184,7856,7857],{"class":193},"'login'",[184,7859,4156],{"class":268},[184,7861,7857],{"class":193},[184,7863,1987],{"class":268},[184,7865,6089],{"class":211},[184,7867,5419],{"class":268},[184,7869,692],{"class":211},[184,7871,5438],{"class":268},[184,7873,7874],{"class":211},"login",[184,7876,5443],{"class":268},[184,7878,7879],{"class":186,"line":368},[184,7880,4249],{"class":268},[184,7882,7883],{"class":186,"line":374},[184,7884,285],{"emptyLinePlaceholder":9},[184,7886,7887,7890,7892],{"class":186,"line":380},[184,7888,7889],{"class":268},"Route::middleware('auth:sanctum')-",[184,7891,5419],{"class":261},[184,7893,7894],{"class":268},"group( function () {\n",[184,7896,7897,7899,7902,7904],{"class":186,"line":385},[184,7898,7823],{"class":211},[184,7900,7901],{"class":268},"::apiResource(",[184,7903,5401],{"class":193},[184,7905,7906],{"class":268},", BlogController::class);\n",[184,7908,7909,7911,7914,7917],{"class":186,"line":391},[184,7910,7823],{"class":211},[184,7912,7913],{"class":268},"::get(",[184,7915,7916],{"class":193},"'user'",[184,7918,7919],{"class":268},", function (Request $request) {\n",[184,7921,7922,7924,7926,7928,7930,7932],{"class":186,"line":411},[184,7923,419],{"class":211},[184,7925,5073],{"class":268},[184,7927,6583],{"class":211},[184,7929,5419],{"class":268},[184,7931,6729],{"class":211},[184,7933,365],{"class":268},[184,7935,7936,7939,7941],{"class":186,"line":416},[184,7937,7938],{"class":268}," })-",[184,7940,5419],{"class":261},[184,7942,7943],{"class":268},"name('user');\n",[184,7945,7946],{"class":186,"line":433},[184,7947,4249],{"class":268},[145,7949,4812],{"id":7950},"step-8-run-laravel-app",[128,7952,7953],{},"Run the database migrations (Set the database connection in .env before migrating)",[176,7955,7957],{"className":7956,"code":4670,"language":4054},[4052],[167,7958,4670],{"__ignoreMap":115},[128,7960,4666],{},[176,7962,7964],{"className":7963,"code":4670,"language":4054},[4052],[167,7965,4670],{"__ignoreMap":115},[145,7967,4818],{"id":7968},"step-9-check-following-api",[128,7970,7971],{},"Now, go to your Postman to check api",[128,7973,7974],{},"Make sure in the details API, we will use the following headers as listed below",[176,7976,7979],{"className":7977,"code":7978,"language":8,"meta":115,"style":115},"language-json shiki shiki-themes github-light github-dark","'headers' => [\n 'Accept' => 'application/json',\n 'Authorization' => 'Bearer '.$accessToken,\n]\n",[167,7980,7981,7986,7998,8013],{"__ignoreMap":115},[184,7982,7983],{"class":186,"line":12},[184,7984,7985],{"class":268},"'headers' => [\n",[184,7987,7988,7991,7993,7996],{"class":186,"line":24},[184,7989,7990],{"class":6502}," 'Accept'",[184,7992,439],{"class":6502},[184,7994,7995],{"class":6502}," 'application/json'",[184,7997,601],{"class":268},[184,7999,8000,8003,8005,8008,8011],{"class":186,"line":35},[184,8001,8002],{"class":6502}," 'Authorization'",[184,8004,439],{"class":6502},[184,8006,8007],{"class":6502}," 'Bearer",[184,8009,8010],{"class":6502}," '.$accessToken",[184,8012,601],{"class":268},[184,8014,8015],{"class":186,"line":47},[184,8016,8017],{"class":268},"]\n",[128,8019,8020],{},"Now you can simply run the above listed URLs as shown in the screenshot below:",[1970,8022,8023,8030],{},[1973,8024,8025],{},[1976,8026,8027],{},[1979,8028,8029],{},"Postman",[1992,8031,8032,8039,8046,8053,8060,8067,8074,8081],{},[1976,8033,8034],{},[1997,8035,8036],{},[4704,8037],{"alt":8029,"src":8038},"https://raw.githubusercontent.com/akramghaleb/Laravel-11-Building-API-using-Sanctum/main/scs/01.png",[1976,8040,8041],{},[1997,8042,8043],{},[4704,8044],{"alt":8029,"src":8045},"https://raw.githubusercontent.com/akramghaleb/Laravel-11-Building-API-using-Sanctum/main/scs/02.png",[1976,8047,8048],{},[1997,8049,8050],{},[4704,8051],{"alt":8029,"src":8052},"https://raw.githubusercontent.com/akramghaleb/Laravel-11-Building-API-using-Sanctum/main/scs/03.png",[1976,8054,8055],{},[1997,8056,8057],{},[4704,8058],{"alt":8029,"src":8059},"https://raw.githubusercontent.com/akramghaleb/Laravel-11-Building-API-using-Sanctum/main/scs/04.png",[1976,8061,8062],{},[1997,8063,8064],{},[4704,8065],{"alt":8029,"src":8066},"https://raw.githubusercontent.com/akramghaleb/Laravel-11-Building-API-using-Sanctum/main/scs/05.png",[1976,8068,8069],{},[1997,8070,8071],{},[4704,8072],{"alt":8029,"src":8073},"https://raw.githubusercontent.com/akramghaleb/Laravel-11-Building-API-using-Sanctum/main/scs/06.png",[1976,8075,8076],{},[1997,8077,8078],{},[4704,8079],{"alt":8029,"src":8080},"https://raw.githubusercontent.com/akramghaleb/Laravel-11-Building-API-using-Sanctum/main/scs/07.png",[1976,8082,8083],{},[1997,8084,8085],{},[4704,8086],{"alt":8029,"src":8087},"https://raw.githubusercontent.com/akramghaleb/Laravel-11-Building-API-using-Sanctum/main/scs/08.png",[128,8089,8090],{},[2880,8091,8094],{"href":8092,"rel":8093},"https://github.com/akramghaleb/Laravel-11-Building-API-using-Sanctum/blob/main/postman/Laravel%20Sanctum.postman_collection.json",[2884],"Note: You can download postman file from here",[128,8096,8097],{},[2880,8098,4690],{"href":8099,"rel":8100},"https://github.com/akramghaleb/Laravel-11-Building-API-using-Sanctum",[2884],[128,8102,4693],{},[128,8104,4696],{},[128,8106,8107],{},[2880,8108,8109],{"href":4701,"target":4702},[4704,8110],{"src":4706,"alt":4707,"width":4708},[2064,8112,8113],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}",{"title":115,"searchDepth":24,"depth":24,"links":8115},[8116,8117,8118,8119,8120,8121,8122,8123,8124],{"id":4821,"depth":24,"text":4770},{"id":4842,"depth":24,"text":4776},{"id":4854,"depth":24,"text":4782},{"id":5263,"depth":24,"text":4788},{"id":5658,"depth":24,"text":4794},{"id":5884,"depth":24,"text":4800},{"id":7706,"depth":24,"text":4806},{"id":7950,"depth":24,"text":4812},{"id":7968,"depth":24,"text":4818},"Laravel Sanctum is an API authentication package for Laravel applications, providing a lightweight, simple-to-use authentication system for single-page applications (SPAs), mobile apps, and other API-driven projects.","/assets/img/blog/laravel/Laravel-11-Building-API-using-Sanctum.jpg","Laravel,Laravel Sanctum,API authentication,Laravel API",{},"/en/2024/06/2024-06-laravel-11-building-api-using-sanctum","2024-06-05T09:36:00.000Z",{"title":4737,"description":8125},{"loc":8129},"en/2024/06/2024-06-Laravel-11-Building-API-using-Sanctum","Laravel 11 -","Building API using Sanctum","dQiUzmSTq2BqveGBGF3BtEzFZPhfgPSC2Nrb4C4u0uc",{"id":8138,"title":8139,"body":8140,"category":4721,"client":2087,"description":8154,"extension":2089,"head":4722,"image":8572,"key":8151,"keywords":8573,"languages":2087,"meta":8574,"navigation":9,"ogImage":2087,"order":47,"path":8575,"preview1":2087,"preview1Title":2087,"preview2":2087,"preview2Title":2087,"preview3":2087,"preview3Title":2087,"project":2087,"publishedAt":8576,"ready":9,"robots":2087,"schemaOrg":2087,"seo":8577,"sitemap":8578,"stem":8579,"title_sub":8580,"title_sub_blue":8581,"visible":9,"__hash__":8582},"articles_en/en/2024/06/2024-06-route-rider-system.md","Route Rider System",{"type":100,"value":8141,"toc":8568},[8142,8144,8146,8149,8152,8155,8161,8191,8193,8195,8201,8204,8209,8211,8216,8218,8223,8227,8233,8235,8291,8293,8357,8359,8364,8369,8377,8379,8384,8386,8388,8394,8400,8566],[103,8143],{":description":105,":image":106,":keywords":107,":title":108},[110,8145],{":src":106},[113,8147],{":client":4722,":preview3":8148,":preview3-title":4366,":project":108},"https://github.com/akramghaleb/Route-Rider-System",[124,8150,8139],{"id":8151},"route-rider-system",[128,8153,8154],{},"This project was built on Mosand Workshop Day.",[145,8156,8158,8159],{"id":8157},"this-project-built-with-laravel-tailwind-filament","This project built with Laravel + Tailwind + Filament ",[4021,8160],{},[132,8162,8163,8166,8169,8172,8175,8178,8181,8184,8187],{},[135,8164,8165],{},"Arabic and English support",[135,8167,8168],{},"Has a landing page",[135,8170,8171],{},"Dashboard support with statistical features",[135,8173,8174],{},"Ability to register & recover passwords",[135,8176,8177],{},"Ability to change theme settings",[135,8179,8180],{},"Support roles and permissions",[135,8182,8183],{},"Support Light & Dark theme",[135,8185,8186],{},"Support Soft delete and recovery tasks",[135,8188,4409,8189],{},[2880,8190,4413],{"href":4412},[145,8192,2958],{"id":3018},[128,8194,4454],{},[176,8196,8199],{"className":8197,"code":8198,"language":4054},[4052],"git clone https://github.com/akramghaleb/Route-Rider-System.git\n",[167,8200,8198],{"__ignoreMap":115},[128,8202,8203],{},"Install all the dependencies using the composer",[176,8205,8207],{"className":8206,"code":4631,"language":4054},[4052],[167,8208,4631],{"__ignoreMap":115},[128,8210,4636],{},[176,8212,8214],{"className":8213,"code":4640,"language":4054},[4052],[167,8215,4640],{"__ignoreMap":115},[128,8217,4645],{},[176,8219,8221],{"className":8220,"code":4649,"language":4054},[4052],[167,8222,4649],{"__ignoreMap":115},[128,8224,4654,8225,1987],{},[851,8226,4657],{},[176,8228,8231],{"className":8229,"code":8230,"language":4054},[4052],"php artisan migrate --seed\n",[167,8232,8230],{"__ignoreMap":115},[128,8234,4481],{},[176,8236,8237],{"className":178,"code":4484,"language":180,"meta":115,"style":115},[167,8238,8239,8243,8249,8253,8257,8263,8267,8271,8277,8281,8285],{"__ignoreMap":115},[184,8240,8241],{"class":186,"line":12},[184,8242,4491],{"class":255},[184,8244,8245,8247],{"class":186,"line":24},[184,8246,4496],{"class":189},[184,8248,4499],{"class":193},[184,8250,8251],{"class":186,"line":35},[184,8252,285],{"emptyLinePlaceholder":9},[184,8254,8255],{"class":186,"line":47},[184,8256,4508],{"class":255},[184,8258,8259,8261],{"class":186,"line":58},[184,8260,4513],{"class":189},[184,8262,4499],{"class":193},[184,8264,8265],{"class":186,"line":70},[184,8266,285],{"emptyLinePlaceholder":9},[184,8268,8269],{"class":186,"line":302},[184,8270,4524],{"class":255},[184,8272,8273,8275],{"class":186,"line":317},[184,8274,4529],{"class":189},[184,8276,4499],{"class":193},[184,8278,8279],{"class":186,"line":323},[184,8280,285],{"emptyLinePlaceholder":9},[184,8282,8283],{"class":186,"line":348},[184,8284,4540],{"class":255},[184,8286,8287,8289],{"class":186,"line":368},[184,8288,4545],{"class":189},[184,8290,4499],{"class":193},[128,8292,4550],{},[176,8294,8296],{"className":178,"code":8295,"language":180,"meta":115,"style":115},"# npm\nnpm run build\n\n# pnpm\npnpm run build\n\n# yarn\nyarn build\n\n# bun\nbun run build\n",[167,8297,8298,8302,8311,8315,8319,8327,8331,8335,8341,8345,8349],{"__ignoreMap":115},[184,8299,8300],{"class":186,"line":12},[184,8301,4491],{"class":255},[184,8303,8304,8306,8308],{"class":186,"line":24},[184,8305,4496],{"class":189},[184,8307,4566],{"class":193},[184,8309,8310],{"class":193}," build\n",[184,8312,8313],{"class":186,"line":35},[184,8314,285],{"emptyLinePlaceholder":9},[184,8316,8317],{"class":186,"line":47},[184,8318,4508],{"class":255},[184,8320,8321,8323,8325],{"class":186,"line":58},[184,8322,4513],{"class":189},[184,8324,4566],{"class":193},[184,8326,8310],{"class":193},[184,8328,8329],{"class":186,"line":70},[184,8330,285],{"emptyLinePlaceholder":9},[184,8332,8333],{"class":186,"line":302},[184,8334,4524],{"class":255},[184,8336,8337,8339],{"class":186,"line":317},[184,8338,4529],{"class":189},[184,8340,8310],{"class":193},[184,8342,8343],{"class":186,"line":323},[184,8344,285],{"emptyLinePlaceholder":9},[184,8346,8347],{"class":186,"line":348},[184,8348,4540],{"class":255},[184,8350,8351,8353,8355],{"class":186,"line":368},[184,8352,4545],{"class":189},[184,8354,4566],{"class":193},[184,8356,8310],{"class":193},[128,8358,4666],{},[176,8360,8362],{"className":8361,"code":4670,"language":4054},[4052],[167,8363,4670],{"__ignoreMap":115},[128,8365,4675,8366],{},[2880,8367,4678],{"href":4678,"rel":8368},[2884],[128,8370,8371,8372,8376],{},"username: ",[2880,8373,8375],{"href":8374},"mailto:admin@admin.com","admin@admin.com","\npassword: password",[4021,8378],{},[128,8380,8381],{},[2880,8382,4690],{"href":8148,"rel":8383},[2884],[128,8385,4693],{},[128,8387,4696],{},[128,8389,8390],{},[2880,8391,8392],{"href":4701,"target":4702},[4704,8393],{"src":4706,"alt":4707,"width":4708},[128,8395,8396,8398],{},[4021,8397],{},[4021,8399],{},[1970,8401,8402,8409],{},[1973,8403,8404],{},[1976,8405,8406],{},[1979,8407,8408],{},"Web Screens",[1992,8410,8411,8419,8426,8433,8440,8447,8454,8461,8468,8475,8482,8489,8496,8503,8510,8517,8524,8531,8538,8545,8552,8559],{},[1976,8412,8413],{},[1997,8414,8415],{},[4704,8416],{"alt":8417,"src":8418},"Project Screenshot 2","https://raw.githubusercontent.com/akramghaleb/Route-Rider-System/main/scs/01.png",[1976,8420,8421],{},[1997,8422,8423],{},[4704,8424],{"alt":8417,"src":8425},"https://raw.githubusercontent.com/akramghaleb/Route-Rider-System/main/scs/02.png",[1976,8427,8428],{},[1997,8429,8430],{},[4704,8431],{"alt":8417,"src":8432},"https://raw.githubusercontent.com/akramghaleb/Route-Rider-System/main/scs/03.png",[1976,8434,8435],{},[1997,8436,8437],{},[4704,8438],{"alt":8417,"src":8439},"https://raw.githubusercontent.com/akramghaleb/Route-Rider-System/main/scs/04.png",[1976,8441,8442],{},[1997,8443,8444],{},[4704,8445],{"alt":8417,"src":8446},"https://raw.githubusercontent.com/akramghaleb/Route-Rider-System/main/scs/05.png",[1976,8448,8449],{},[1997,8450,8451],{},[4704,8452],{"alt":8417,"src":8453},"https://raw.githubusercontent.com/akramghaleb/Route-Rider-System/main/scs/06.png",[1976,8455,8456],{},[1997,8457,8458],{},[4704,8459],{"alt":8417,"src":8460},"https://raw.githubusercontent.com/akramghaleb/Route-Rider-System/main/scs/07.png",[1976,8462,8463],{},[1997,8464,8465],{},[4704,8466],{"alt":8417,"src":8467},"https://raw.githubusercontent.com/akramghaleb/Route-Rider-System/main/scs/08.png",[1976,8469,8470],{},[1997,8471,8472],{},[4704,8473],{"alt":8417,"src":8474},"https://raw.githubusercontent.com/akramghaleb/Route-Rider-System/main/scs/09.png",[1976,8476,8477],{},[1997,8478,8479],{},[4704,8480],{"alt":8417,"src":8481},"https://raw.githubusercontent.com/akramghaleb/Route-Rider-System/main/scs/10.png",[1976,8483,8484],{},[1997,8485,8486],{},[4704,8487],{"alt":8417,"src":8488},"https://raw.githubusercontent.com/akramghaleb/Route-Rider-System/main/scs/11.png",[1976,8490,8491],{},[1997,8492,8493],{},[4704,8494],{"alt":8417,"src":8495},"https://raw.githubusercontent.com/akramghaleb/Route-Rider-System/main/scs/12.png",[1976,8497,8498],{},[1997,8499,8500],{},[4704,8501],{"alt":8417,"src":8502},"https://raw.githubusercontent.com/akramghaleb/Route-Rider-System/main/scs/13.png",[1976,8504,8505],{},[1997,8506,8507],{},[4704,8508],{"alt":8417,"src":8509},"https://raw.githubusercontent.com/akramghaleb/Route-Rider-System/main/scs/14.png",[1976,8511,8512],{},[1997,8513,8514],{},[4704,8515],{"alt":8417,"src":8516},"https://raw.githubusercontent.com/akramghaleb/Route-Rider-System/main/scs/15.png",[1976,8518,8519],{},[1997,8520,8521],{},[4704,8522],{"alt":8417,"src":8523},"https://raw.githubusercontent.com/akramghaleb/Route-Rider-System/main/scs/16.png",[1976,8525,8526],{},[1997,8527,8528],{},[4704,8529],{"alt":8417,"src":8530},"https://raw.githubusercontent.com/akramghaleb/Route-Rider-System/main/scs/17.png",[1976,8532,8533],{},[1997,8534,8535],{},[4704,8536],{"alt":8417,"src":8537},"https://raw.githubusercontent.com/akramghaleb/Route-Rider-System/main/scs/18.png",[1976,8539,8540],{},[1997,8541,8542],{},[4704,8543],{"alt":8417,"src":8544},"https://raw.githubusercontent.com/akramghaleb/Route-Rider-System/main/scs/19.png",[1976,8546,8547],{},[1997,8548,8549],{},[4704,8550],{"alt":8417,"src":8551},"https://raw.githubusercontent.com/akramghaleb/Route-Rider-System/main/scs/20.png",[1976,8553,8554],{},[1997,8555,8556],{},[4704,8557],{"alt":8417,"src":8558},"https://raw.githubusercontent.com/akramghaleb/Route-Rider-System/main/scs/21.png",[1976,8560,8561],{},[1997,8562,8563],{},[4704,8564],{"alt":8417,"src":8565},"https://raw.githubusercontent.com/akramghaleb/Route-Rider-System/main/scs/22.png",[2064,8567,4715],{},{"title":115,"searchDepth":24,"depth":24,"links":8569},[8570,8571],{"id":8157,"depth":24,"text":8158},{"id":3018,"depth":24,"text":2958},"/assets/img/blog/opensource/01.png","Full-Stack Developer",{},"/en/2024/06/2024-06-route-rider-system","2024-06-05T09:08:00.000Z",{"title":8139,"description":8154},{"loc":8575},"en/2024/06/2024-06-route-rider-system","Route Rider","System","cyu6InbuwTWbV1uRC8h-A-_Q5af2EWfK2ZfPDHzmAXA",{"id":8584,"title":8585,"body":8586,"category":8766,"client":2087,"description":8767,"extension":2089,"head":8768,"image":8769,"key":8770,"keywords":8573,"languages":2087,"meta":8771,"navigation":9,"ogImage":2087,"order":35,"path":8772,"preview1":2087,"preview1Title":2087,"preview2":2087,"preview2Title":2087,"preview3":2087,"preview3Title":2087,"project":2087,"publishedAt":8773,"ready":9,"robots":2087,"schemaOrg":2087,"seo":8774,"sitemap":8775,"stem":8776,"title_sub":8777,"title_sub_blue":8778,"visible":9,"__hash__":8779},"articles_en/en/2023/2023-08-what-is-chatgpt.md","What is ChatGPT?",{"type":100,"value":8587,"toc":8754},[8588,8590,8592,8594,8597,8611,8615,8618,8629,8633,8639,8643,8649,8653,8659,8667,8671,8674,8682,8686,8689,8697,8699,8705,8707,8710,8733,8737],[103,8589],{":description":105,":image":106,":keywords":107,":title":108},[110,8591],{":src":106},[145,8593,2946],{"id":2986},[128,8595,8596],{},"ChatGPT is a revolutionary AI writing tool. It uses artificial intelligence to create unique content for your website, blog, and social media accounts.",[132,8598,8599,8605],{},[135,8600,8601,8602,8604],{},"How does it work?",[4021,8603],{},"\nChatGPT works by analyzing the content you already have on your website or blog and then creating new posts based on what it finds. The more content you have, the better ChatGPT can learn how you write and what topics interest you most. Once this process is complete, all that's left for you is to sit back while ChatGPT churns out fresh new posts in seconds!",[135,8606,8607,8608,8610],{},"What makes ChatGPT different from other AI writing tools?",[4021,8609],{},"\nThe biggest difference between ChatGPT and other similar services is that we don't just copy existing text but instead create new material based on what has already been written about before - so there's no need for any training at all!",[145,8612,8614],{"id":8613},"benefits-of-chatgpt","Benefits of ChatGPT",[128,8616,8617],{},"ChatGPT is a revolutionary AI writing tool that allows you to create high-quality content at the speed of thought.",[132,8619,8620,8623,8626],{},[135,8621,8622],{},"Time-saving: ChatGPT automatically generates large amounts of unique, high-quality content in seconds. This means that you can spend less time writing and more time doing what matters most in your business or organization.",[135,8624,8625],{},"Cost-efficient: With ChatGPT, there's no need for expensive freelancers or staff members who have specialized skillsets like copywriters or marketers--you can simply use our platform as an alternative option!",[135,8627,8628],{},"High-quality content: The only thing better than saving time and money is creating something great out of nothing! Our AI algorithm learns from all previous conversations so it gets better over time, meaning every piece of content it creates will be better than the last one.",[145,8630,8632],{"id":8631},"how-to-use-chatgpt","How to Use ChatGPT",[128,8634,8635,8636,8638],{},"To get started, you'll need to create an account on the ChatGPT website. You can do this by clicking \"Sign Up\" in the top right corner of your screen and following their instructions.",[4021,8637],{},"\nOnce you've created an account and logged in, it's time to start writing! Clicking on the \"New Story\" button will bring up a dialogue box where you can enter your story title, author name and other details about what type of story this is (fiction or non-fiction). Once those are filled out click \"Create New Story.\"",[145,8640,8642],{"id":8641},"features-of-chatgpt","Features of ChatGPT",[128,8644,8645,8646,8648],{},"ChatGPT is a revolutionary AI writing tool that automates the process of content creation and optimization. It does this by combining automatic sentence generation, natural language processing and content optimization into one easy-to-use platform.",[4021,8647],{},"\nThe ChatGPT platform allows you to create high-quality blog posts in just minutes by simply answering questions about your topic or industry. You'll be able to choose from hundreds of prewritten articles based on your answers, or you can create your own custom article using our powerful editor tools.",[145,8650,8652],{"id":8651},"examples-of-chatgpt-in-action","Examples of ChatGPT in Action",[128,8654,8655,8656,8658],{},"ChatGPT is a revolutionary AI writing tool that allows you to automate your content creation process. This means you can focus on other important tasks and let ChatGPT do the heavy lifting for you, saving both time and money in the process!",[4021,8657],{},"\nChatGPT has been used by many businesses and organizations across the globe, including:",[132,8660,8661,8664],{},[135,8662,8663],{},"A marketing agency that used it to write articles for their client's websites. They were able to increase their revenue by 25% within six months of using ChatGPT because they could now spend more time selling their services than writing articles themselves.",[135,8665,8666],{},"A real estate company that used it as an automated customer support system for potential buyers looking at properties online; this increased conversions by over 50%.",[145,8668,8670],{"id":8669},"how-chatgpt-is-evolving","How ChatGPT is Evolving",[128,8672,8673],{},"ChatGPT is constantly evolving. We are always working hard to make it better and more efficient for users, so we have added a few new features that you may not have seen before.",[132,8675,8676,8679],{},[135,8677,8678],{},"The ability to create your own custom templates! This feature allows you to create a template with all of the information you need, then save it as a draft or publish it immediately. If you ever want to change the template later on, just go back into your drafts folder and edit away!",[135,8680,8681],{},"A new feature called \"Smart Quotes\" has been added as well! This means that whenever someone uses quotation marks around text (like in this sentence), ChatGPT will automatically add them for them--no need for manual input anymore!",[145,8683,8685],{"id":8684},"benefits-of-ai-powered-writing","Benefits of AI-Powered Writing",[128,8687,8688],{},"By now, you're probably wondering how AI-powered writing can benefit your business or organization. Here are a few ways:",[132,8690,8691,8694],{},[135,8692,8693],{},"Increased productivity. With ChatGPT, you can create more content with less effort. You'll have more time to focus on other important tasks like marketing and sales as well as making sure that your website is up-to-date with current trends in the industry.",[135,8695,8696],{},"Improved quality of content creation. With ChatGPT's AI technology at work behind the scenes, it will ensure that all articles created are error-free and free from grammatical mistakes--no matter what their purpose may be! This means that readers won't have any trouble understanding what they're reading because everything will make sense from start to finish (and vice versa). Plus there's no need for editors anymore either since everything has already been checked by machines before being published online or printed out onto paper copies.\"",[145,8698,2862],{"id":2861},[128,8700,8701,8702,8704],{},"ChatGPT is a revolutionary AI writing tool that can help you create content faster and more efficiently. It's easy to use, with a simple interface and clear instructions for getting started. The tool itself is free to use, but there are also paid plans if you want additional features like unlimited revisions or priority support from their customer service team.",[4021,8703],{},"\nIf you're looking for an easier way to create blog posts without having to do all the research yourself, give ChatGPT a try today!",[145,8706,2874],{"id":2873},[128,8708,8709],{},"To learn more about ChatGPT, check out the following resources:",[132,8711,8712,8719,8726],{},[135,8713,8714,8715],{},"ChatGPT's website: ",[2880,8716,8717],{"href":8717,"rel":8718},"https://chatgpt.com/",[2884],[135,8720,8721,8722],{},"The official documentation: ",[2880,8723,8724],{"href":8724,"rel":8725},"https://docs.chatgpt.com/en/latest/#getting-started",[2884],[135,8727,8728,8729],{},"The GitHub repository for this project: ",[2880,8730,8731],{"href":8731,"rel":8732},"https://github.com/chatgpt/chatgpt",[2884],[145,8734,8736],{"id":8735},"faqs","FAQs",[132,8738,8739,8744],{},[135,8740,8585,8741,8743],{},[4021,8742],{},"\nChatGPT is a revolutionary AI writing tool that allows you to create content without having to know how to write. It can be used by anyone, regardless of their skill level or experience with creating content.",[135,8745,8746,8747,8749,8750,8753],{},"How do I start using ChatGPT?",[4021,8748],{},"\nTo begin using the tool, simply visit ",[2880,8751,8717],{"href":8717,"rel":8752},[2884]," and choose \"Create New Document.\" You will then be prompted to enter a title for your document and select its category (such as travel or business). After selecting these options, click on \"Next\" at the bottom right corner of your screen until you see an empty box where you can start typing! If you want some help getting started with creating great content quickly and easily--or if there's something else on our website that interests you--click here!",{"title":115,"searchDepth":24,"depth":24,"links":8755},[8756,8757,8758,8759,8760,8761,8762,8763,8764,8765],{"id":2986,"depth":24,"text":2946},{"id":8613,"depth":24,"text":8614},{"id":8631,"depth":24,"text":8632},{"id":8641,"depth":24,"text":8642},{"id":8651,"depth":24,"text":8652},{"id":8669,"depth":24,"text":8670},{"id":8684,"depth":24,"text":8685},{"id":2861,"depth":24,"text":2862},{"id":2873,"depth":24,"text":2874},{"id":8735,"depth":24,"text":8736},"ai","AI writing tool that allows you to create content without having to know how to write.","AI","/assets/img/blog/ai/chatgpt.jpg","what-is-chatgpt",{},"/en/2023/2023-08-what-is-chatgpt","2023-08-01T03:55:00.000Z",{"title":8585,"description":8767},{"loc":8772},"en/2023/2023-08-what-is-chatgpt","What is","ChatGPT?","oW4s93J2T82_gk_bXMGQvjqHCw8OO7DS705T4u3jxu4",{"id":8781,"title":8782,"body":8783,"category":9083,"client":2087,"description":8792,"extension":2089,"head":9084,"image":9085,"key":9086,"keywords":8573,"languages":2087,"meta":9087,"navigation":9,"ogImage":2087,"order":24,"path":9088,"preview1":2087,"preview1Title":2087,"preview2":2087,"preview2Title":2087,"preview3":2087,"preview3Title":2087,"project":2087,"publishedAt":9089,"ready":9,"robots":2087,"schemaOrg":2087,"seo":9090,"sitemap":9091,"stem":9092,"title_sub":9093,"title_sub_blue":9094,"visible":9095,"__hash__":9096},"articles_en/en/2023/2023-01-flutter-state-management.md","Flutter State Management",{"type":100,"value":8784,"toc":9073},[8785,8787,8789,8793,8797,8839,8843,8874,8878,8915,8919,8950,8954,8984,8988,9018,9021,9045,9049],[103,8786],{":description":105,":image":106,":keywords":107,":title":108},[110,8788],{":src":106},[124,8790,8792],{"id":8791},"most-popular-packages-for-state-management-in-flutter","Most popular packages for state management in Flutter.",[145,8794,8796],{"id":8795},"bloc","Bloc",[132,8798,8801,8809,8815,8821,8827,8833],{"className":8799},[8800],"contains-task-list",[135,8802,8805,8808],{"className":8803},[8804],"task-list-item",[6577,8806],{"checked":9,"disabled":9,"type":8807},"checkbox"," One of the most famous state management library.",[135,8810,8812,8814],{"className":8811},[8804],[6577,8813],{"checked":9,"disabled":9,"type":8807}," Code is well structured and good for large-scale projects.",[135,8816,8818,8820],{"className":8817},[8804],[6577,8819],{"checked":9,"disabled":9,"type":8807}," Well-written documentation with examples.",[135,8822,8824,8826],{"className":8823},[8804],[6577,8825],{"disabled":9,"type":8807}," Complex for new developers.",[135,8828,8829],{},[2880,8830,8832],{"href":8831},"https://pub.dev/packages/flutter_bloc","Package",[135,8834,8835],{},[2880,8836,8838],{"href":8837},"https://bloclibrary.dev/#/gettingstarted","Documentation",[145,8840,8842],{"id":8841},"reverpod","Reverpod",[132,8844,8846,8852,8858,8864,8869],{"className":8845},[8800],[135,8847,8849,8851],{"className":8848},[8804],[6577,8850],{"checked":9,"disabled":9,"type":8807}," Similar to Provider and code is compile-safe.",[135,8853,8855,8857],{"className":8854},[8804],[6577,8856],{"checked":9,"disabled":9,"type":8807}," Simple and easy start.",[135,8859,8861,8863],{"className":8860},[8804],[6577,8862],{"checked":9,"disabled":9,"type":8807}," Growing Community and well-written documentation.",[135,8865,8866],{},[2880,8867,8832],{"href":8868},"https://pub.dev/packages/riverpod",[135,8870,8871],{},[2880,8872,8838],{"href":8873},"https://riverpod.dev/docs/getting_started",[145,8875,8877],{"id":8876},"getx","GetX",[132,8879,8881,8887,8893,8899,8905,8910],{"className":8880},[8800],[135,8882,8884,8886],{"className":8883},[8804],[6577,8885],{"checked":9,"disabled":9,"type":8807}," A simplified reactive state management solution.",[135,8888,8890,8892],{"className":8889},[8804],[6577,8891],{"checked":9,"disabled":9,"type":8807}," Easy for new flutter developers.",[135,8894,8896,8898],{"className":8895},[8804],[6577,8897],{"checked":9,"disabled":9,"type":8807}," Code is very short.",[135,8900,8902,8904],{"className":8901},[8804],[6577,8903],{"disabled":9,"type":8807}," Hard to maintain large-scale projects.",[135,8906,8907],{},[2880,8908,8832],{"href":8909},"https://pub.dev/packages/get",[135,8911,8912],{},[2880,8913,8838],{"href":8914},"https://chornthorn.github.io/getx-docs/index",[145,8916,8918],{"id":8917},"mobx","MobX",[132,8920,8922,8928,8934,8940,8945],{"className":8921},[8800],[135,8923,8925,8927],{"className":8924},[8804],[6577,8926],{"checked":9,"disabled":9,"type":8807}," A popular library based on observables and reactions.",[135,8929,8931,8933],{"className":8930},[8804],[6577,8932],{"checked":9,"disabled":9,"type":8807}," Code is very simple and easy for new flutter developers.",[135,8935,8937,8939],{"className":8936},[8804],[6577,8938],{"disabled":9,"type":8807}," Less community support and tutorials.",[135,8941,8942],{},[2880,8943,8832],{"href":8944},"https://pub.dev/packages/mobx",[135,8946,8947],{},[2880,8948,8838],{"href":8949},"https://mobx.netlify.app/",[145,8951,8953],{"id":8952},"provider","Provider",[132,8955,8957,8962,8968,8974,8979],{"className":8956},[8800],[135,8958,8960,8808],{"className":8959},[8804],[6577,8961],{"checked":9,"disabled":9,"type":8807},[135,8963,8965,8967],{"className":8964},[8804],[6577,8966],{"checked":9,"disabled":9,"type":8807}," Easy to understand than a bloc.",[135,8969,8971,8973],{"className":8970},[8804],[6577,8972],{"checked":9,"disabled":9,"type":8807}," Support by the Flutter team.",[135,8975,8976],{},[2880,8977,8832],{"href":8978},"https://pub.dev/packages/provider",[135,8980,8981],{},[2880,8982,8838],{"href":8983},"https://pub.dev/documentation/provider/latest/provider/provider-library.html",[145,8985,8987],{"id":8986},"redux","Redux",[132,8989,8991,8997,9002,9008,9013],{"className":8990},[8800],[135,8992,8994,8996],{"className":8993},[8804],[6577,8995],{"checked":9,"disabled":9,"type":8807}," A state container approach familiar to many web developers.",[135,8998,9000,8939],{"className":8999},[8804],[6577,9001],{"disabled":9,"type":8807},[135,9003,9005,9007],{"className":9004},[8804],[6577,9006],{"disabled":9,"type":8807}," There is no good documentation available.",[135,9009,9010],{},[2880,9011,8832],{"href":9012},"https://pub.dev/packages/flutter_redux",[135,9014,9015],{},[2880,9016,8838],{"href":9017},"https://pub.dev/documentation/redux/latest/",[145,9019,9020],{"id":9020},"states_rebuilder",[132,9022,9024,9030,9035,9040],{"className":9023},[8800],[135,9025,9027,9029],{"className":9026},[8804],[6577,9028],{"checked":9,"disabled":9,"type":8807}," An approach that combines state management with a dependency injection solution and an integrated router.",[135,9031,9033,8939],{"className":9032},[8804],[6577,9034],{"disabled":9,"type":8807},[135,9036,9037],{},[2880,9038,8832],{"href":9039},"https://pub.dev/packages/states_rebuilder",[135,9041,9042],{},[2880,9043,8838],{"href":9044},"https://github.com/GIfatahTH/states_rebuilder/tree/master/states_rebuilder_package",[145,9046,9048],{"id":9047},"getit","GetIt",[132,9050,9052,9058,9063,9068],{"className":9051},[8800],[135,9053,9055,9057],{"className":9054},[8804],[6577,9056],{"checked":9,"disabled":9,"type":8807}," A service locator-based state management approach that does not need a BuildContext.",[135,9059,9061,9007],{"className":9060},[8804],[6577,9062],{"disabled":9,"type":8807},[135,9064,9065],{},[2880,9066,8832],{"href":9067},"https://pub.dev/packages/get_it",[135,9069,9070],{},[2880,9071,8838],{"href":9072},"https://pub.dev/documentation/get_it/latest/",{"title":115,"searchDepth":24,"depth":24,"links":9074},[9075,9076,9077,9078,9079,9080,9081,9082],{"id":8795,"depth":24,"text":8796},{"id":8841,"depth":24,"text":8842},{"id":8876,"depth":24,"text":8877},{"id":8917,"depth":24,"text":8918},{"id":8952,"depth":24,"text":8953},{"id":8986,"depth":24,"text":8987},{"id":9020,"depth":24,"text":9020},{"id":9047,"depth":24,"text":9048},"flutter","Flutter","/assets/img/blog/flutter/flutter-state.jpg","flutter-state-management",{},"/en/2023/2023-01-flutter-state-management","2023-01-14T09:08:00.000Z",{"title":8782,"description":8792},{"loc":9088},"en/2023/2023-01-flutter-state-management","Flutter State","Management",false,"E_yC5qMWJjItgLchZqjzwa0hUohwVMlrkPd7tzP7P6M",{"id":9098,"title":9099,"body":9100,"category":2431,"client":2087,"description":9469,"extension":2089,"head":9470,"image":9471,"key":9472,"keywords":8573,"languages":2087,"meta":9473,"navigation":9,"ogImage":2087,"order":12,"path":9474,"preview1":2087,"preview1Title":2087,"preview2":2087,"preview2Title":2087,"preview3":2087,"preview3Title":2087,"project":2087,"publishedAt":9475,"ready":9,"robots":2087,"schemaOrg":2087,"seo":9476,"sitemap":9477,"stem":9478,"title_sub":9479,"title_sub_blue":9480,"visible":9,"__hash__":9481},"articles_en/en/2022/2022-12-converting-alpine-transitions-to-vue-transitions.md","Alpine to Vue transitions",{"type":100,"value":9101,"toc":9465},[9102,9104,9106,9109,9113,9143,9146,9151,9154,9188,9193,9196,9201,9204,9245,9250,9294,9299,9302,9345,9350,9353,9397,9401,9404,9409,9412,9417,9462],[103,9103],{":description":105,":image":106,":keywords":107,":title":108},[110,9105],{":src":106},[128,9107,9108],{},"After you copy a component from the Tailwind UI library and begin to adapt it from Vue JS to Alpine JS .. you\nmay wonder what to do about the transitions.",[171,9110,9112],{"id":9111},"things-to-be-aware-of","Things to be aware of:",[132,9114,9115,9118,9121,9124,9127,9134,9137,9140],{},[135,9116,9117],{},"Alpine calls the beginning and ending states \"start\" & \"end\"",[135,9119,9120],{},"Vue calls the beginning and ending states \"from\" and \"to\"",[135,9122,9123],{},"Alpine has inline \"directives\" ie x-transition:enter=\"classes\"",[135,9125,9126],{},"Vue has a wrapper component that applies classes to the child",[135,9128,9129,9130,9133],{},"Alpine applies the classes you pass it for each state, ",[9131,9132],"enter-start",{},"=\"class\"",[135,9135,9136],{},"Vue applies default classes to the child element, class=\"enter-start\"",[135,9138,9139],{},"Vue's component has props for changing default classes",[135,9141,9142],{},"Vue does not have native click away support",[128,9144,9145],{},"So with all that in mind, I think a simple way to quickly transition from Alpine JS to Vue JS transitions\nwould be the following steps.",[128,9147,9148],{},[851,9149,9150],{},"1: Change the inline syntax to stacked",[128,9152,9153],{},"Multi select in your IDE and put each x-transition on a new line",[176,9155,9157],{"className":706,"code":9156,"language":708,"meta":115,"style":115},"\u003Cdiv\n x-transition:enter=\"transition ease-out duration-200\"\n x-transition:enter-start=\"transform opacity-0 scale-95\">\n",[167,9158,9159,9166,9176],{"__ignoreMap":115},[184,9160,9161,9163],{"class":186,"line":12},[184,9162,715],{"class":268},[184,9164,9165],{"class":718},"div\n",[184,9167,9168,9171,9173],{"class":186,"line":24},[184,9169,9170],{"class":189}," x-transition:enter",[184,9172,354],{"class":268},[184,9174,9175],{"class":193},"\"transition ease-out duration-200\"\n",[184,9177,9178,9181,9183,9186],{"class":186,"line":35},[184,9179,9180],{"class":189}," x-transition:enter-start",[184,9182,354],{"class":268},[184,9184,9185],{"class":193},"\"transform opacity-0 scale-95\"",[184,9187,730],{"class":268},[128,9189,9190],{},[851,9191,9192],{},"2: Change \"-start\" to \"-from\" and \"-end\" to \"-to\"",[128,9194,9195],{},"As previously mentioned, Vue uses \"from\" and \"to\" not \"start\" and \"from\"",[128,9197,9198],{},[851,9199,9200],{},"3: Remove x-transition: from each line",[128,9202,9203],{},"We are converting these from Alpine directives to Vue static properties",[176,9205,9207],{"className":706,"code":9206,"language":708,"meta":115,"style":115},"\u003Cdiv\n v-show=\"open\"\n enter=\"transition ease-out duration-200\"\n enter-from=\"transform opacity-0 scale-95\">\n",[167,9208,9209,9215,9225,9234],{"__ignoreMap":115},[184,9210,9211,9213],{"class":186,"line":12},[184,9212,715],{"class":268},[184,9214,9165],{"class":718},[184,9216,9217,9220,9222],{"class":186,"line":24},[184,9218,9219],{"class":189}," v-show",[184,9221,354],{"class":268},[184,9223,9224],{"class":193},"\"open\"\n",[184,9226,9227,9230,9232],{"class":186,"line":35},[184,9228,9229],{"class":189}," enter",[184,9231,354],{"class":268},[184,9233,9175],{"class":193},[184,9235,9236,9239,9241,9243],{"class":186,"line":47},[184,9237,9238],{"class":189}," enter-from",[184,9240,354],{"class":268},[184,9242,9185],{"class":193},[184,9244,730],{"class":268},[128,9246,9247],{},[851,9248,9249],{},"4: Move the props to a \u003Ctransition> wrapper component",[176,9251,9253],{"className":2429,"code":9252,"language":2431,"meta":115,"style":115},"\u003Ctransition\n enter=\"transition ease-out duration-200\"\n enter-from=\"transform opacity-0 scale-95\">\n \u003Cdiv v-show=\"open\">...\u003C/div>\n\u003C/transition>\n",[167,9254,9255,9262,9270,9280,9285],{"__ignoreMap":115},[184,9256,9257,9259],{"class":186,"line":12},[184,9258,715],{"class":268},[184,9260,9261],{"class":718},"transition\n",[184,9263,9264,9266,9268],{"class":186,"line":24},[184,9265,9229],{"class":189},[184,9267,354],{"class":268},[184,9269,9175],{"class":193},[184,9271,9272,9274,9276,9278],{"class":186,"line":35},[184,9273,9238],{"class":189},[184,9275,354],{"class":268},[184,9277,9185],{"class":193},[184,9279,730],{"class":268},[184,9281,9282],{"class":186,"line":47},[184,9283,9284],{"class":268}," \u003Cdiv v-show=\"open\">...\u003C/div>\n",[184,9286,9287,9289,9292],{"class":186,"line":58},[184,9288,1012],{"class":268},[184,9290,9291],{"class":718},"transition",[184,9293,730],{"class":268},[128,9295,9296],{},[851,9297,9298],{},"5: Add \"-class\" to the end of each prop",[128,9300,9301],{},"Vue's \u003Ctransition> component allows you to add the classes to apply to the child component at each\npoint in the transition lifecycle. The property names perfectly line up and just require us to add '-class'\nto the end of each.",[176,9303,9305],{"className":2429,"code":9304,"language":2431,"meta":115,"style":115},"\u003Ctransition\n enter-active-class=\"transition ease-out duration-200\"\n enter-from-class=\"transform opacity-0 scale-95\">\n \u003Cdiv v-show=\"open\">...\u003C/div>\n\u003C/transition>\n",[167,9306,9307,9313,9322,9333,9337],{"__ignoreMap":115},[184,9308,9309,9311],{"class":186,"line":12},[184,9310,715],{"class":268},[184,9312,9261],{"class":718},[184,9314,9315,9318,9320],{"class":186,"line":24},[184,9316,9317],{"class":189}," enter-active-class",[184,9319,354],{"class":268},[184,9321,9175],{"class":193},[184,9323,9324,9327,9329,9331],{"class":186,"line":35},[184,9325,9326],{"class":189}," enter-from-class",[184,9328,354],{"class":268},[184,9330,9185],{"class":193},[184,9332,730],{"class":268},[184,9334,9335],{"class":186,"line":47},[184,9336,9284],{"class":268},[184,9338,9339,9341,9343],{"class":186,"line":58},[184,9340,1012],{"class":268},[184,9342,9291],{"class":718},[184,9344,730],{"class":268},[128,9346,9347],{},[851,9348,9349],{},"6: Move transform to child element",[128,9351,9352],{},"The transform needs to be added to the child element and can be removed from the transition properties",[176,9354,9356],{"className":2429,"code":9355,"language":2431,"meta":115,"style":115},"\u003Ctransition\n enter-active-class=\"ease-out duration-200\"\n enter-from-class=\"opacity-0 scale-95\">\n \u003Cdiv v-show=\"open\" class=\"transform\">...\u003C/div>\n\u003C/transition>\n",[167,9357,9358,9364,9373,9384,9389],{"__ignoreMap":115},[184,9359,9360,9362],{"class":186,"line":12},[184,9361,715],{"class":268},[184,9363,9261],{"class":718},[184,9365,9366,9368,9370],{"class":186,"line":24},[184,9367,9317],{"class":189},[184,9369,354],{"class":268},[184,9371,9372],{"class":193},"\"ease-out duration-200\"\n",[184,9374,9375,9377,9379,9382],{"class":186,"line":35},[184,9376,9326],{"class":189},[184,9378,354],{"class":268},[184,9380,9381],{"class":193},"\"opacity-0 scale-95\"",[184,9383,730],{"class":268},[184,9385,9386],{"class":186,"line":47},[184,9387,9388],{"class":268}," \u003Cdiv v-show=\"open\" class=\"transform\">...\u003C/div>\n",[184,9390,9391,9393,9395],{"class":186,"line":58},[184,9392,1012],{"class":268},[184,9394,9291],{"class":718},[184,9396,730],{"class":268},[145,9398,9400],{"id":9399},"click-away-handling","Click away handling",[128,9402,9403],{},"Alpine comes with a handy click.away handling. Vue does not.\nYou can register an event listener in mounted to handle this behavior like so:",[128,9405,9406],{},[851,9407,9408],{},"1: Add a ref=\"component_name\" to the parent element within component",[128,9410,9411],{},"Tell your component what html element it should watch clicks outside of",[128,9413,9414],{},[851,9415,9416],{},"2: Listen for clicks and check if the element is outside of the ref element.",[176,9418,9422],{"className":9419,"code":9420,"language":9421,"meta":115,"style":115},"language-javascript shiki shiki-themes github-light github-dark","mounted() {\n document.addEventListener('click', event => { \n event.stopPropagation();\n if(!this.$refs.component_name.contains(event.target)) {\n this.open = false;\n }\n });\n}\n","javascript",[167,9423,9424,9429,9434,9439,9444,9449,9453,9458],{"__ignoreMap":115},[184,9425,9426],{"class":186,"line":12},[184,9427,9428],{},"mounted() {\n",[184,9430,9431],{"class":186,"line":24},[184,9432,9433],{}," document.addEventListener('click', event => { \n",[184,9435,9436],{"class":186,"line":35},[184,9437,9438],{}," event.stopPropagation();\n",[184,9440,9441],{"class":186,"line":47},[184,9442,9443],{}," if(!this.$refs.component_name.contains(event.target)) {\n",[184,9445,9446],{"class":186,"line":58},[184,9447,9448],{}," this.open = false;\n",[184,9450,9451],{"class":186,"line":70},[184,9452,1593],{},[184,9454,9455],{"class":186,"line":302},[184,9456,9457],{}," });\n",[184,9459,9460],{"class":186,"line":317},[184,9461,641],{},[2064,9463,9464],{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}",{"title":115,"searchDepth":24,"depth":24,"links":9466},[9467,9468],{"id":9111,"depth":35,"text":9112},{"id":9399,"depth":24,"text":9400},"Converting Alpine transitions to Vue transitions","Vue","/assets/img/blog/vue/alpine-to-vue-transaction.jpg","converting-alpine-transitions-to-vue-transitions",{},"/en/2022/2022-12-converting-alpine-transitions-to-vue-transitions","2022-12-03T04:14:00.000Z",{"title":9099,"description":9469},{"loc":9474},"en/2022/2022-12-converting-alpine-transitions-to-vue-transitions","Alpine to Vue","transitions","1K44Hvg8HJUq2CrrS40c74zxODg6qbPgzGHQ8_3ZumU",["Reactive",9483],{"$si18n:cached-locale-configs":9484,"$si18n:resolved-locale":115,"$scolor-mode":9489,"$snuxt-seo-utils:routeRules":9491,"$ssite-config":9492},{"en":9485,"ar":9487},{"fallbacks":9486,"cacheable":9},[],{"fallbacks":9488,"cacheable":9},[],{"preference":9490,"value":9490,"unknown":9,"forced":9095},"system",{"head":-1,"seoMeta":-1},{"_priority":9493,"currentLocale":9497,"defaultLocale":9497,"description":9498,"env":9499,"name":9500,"url":9501},{"name":9494,"env":9495,"url":9494,"description":9494,"defaultLocale":9496,"currentLocale":9496},-3,-15,-2,"en","Discover unparalleled web solutions with me. With my expertise and client-centric approach, your success is my priority.","production","Akram Dev","https://akramdev.com",["Set"],["ShallowReactive",9504],{"menu-menu_en":-1,"menu_en":-1,"articles_en":-1},{"aboutPage":9506,"navbar":9512,"setting":9513,"homePage":9515},{"data":9507,"email":9508,"phone_1":9509,"phone_2":115,"freelance_availablity":9,"map":115,"image":9510,"is_show_cv":9,"is_show_button":9095,"button_link":9511,"is_show_experience":9,"is_show_education":9,"work_experience":302,"is_show_skills":9},{},"akramghaleb2018@gmail.com","+967776284933","/assets/img/about-page/about.png","https://api.whatsapp.com/send?phone=967776284933",{"value":9095},{"background":9514,"is_show_cv":9,"is_show_button":9,"is_eng":9,"is_ar":9,"lang":9497},"/assets/img/home2-hero-bg-dark.png",{"data":9516,"completed_projects":626,"is_show_cv":9095,"is_show_button":9,"button_link":9511,"image":9517,"icon_1":9518,"icon_2":9519},{},"/assets/img/home-page/hero-thumbnail.png","/assets/img/home-page/laravel-logo.png","/assets/img/home-page/vue-logo.png"]