Skip to main content
Version: 1.0

Page

These examples will mostly focus on how to use the page file convention and the Laravext prop to create a page.

Page with Client Side Fetching​

This is a rather simple example on how to create a page that fetches data from an API and renders it on the client side. This file is localed at .resources/js/nexus/(global)/(guest)/our-projects/page.(jsx|tsx|js|ts|vue).

page.jsx:

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { Head } from "@laravext/react";

export default () => {
    const [data, setData] = useState({
        projects: [],
        loading: true,
    });

    useEffect(() => {
        axios.get('/api/projects')
            .then(response => {
                setData({
                    projects: response.data.data,
                    loading: false,
                });
            })
            .catch(error => {
                console.error(error);
                setData({
                    projects: [],
                    loading: false,
                });
            });
    }, []);

    return (
        <div>
            <Header>Our Projects</Header>

            {data.loading ? (
                <div className="flex justify-center items-center min-h-[70vh] mt-6">
                    Loading...
                </div>
            ) : (
                <div className="flex justify-center items-center min-h-[70vh] mt-6">
                    <div>
                        <h3 className="text-2xl mb-2">Our projects...</h3>
                        <ul>
                            {data.projects.map(project => (
                                <li key={project.id}>
                                    {project.name}
                                </li>
                            ))}
                        </ul>
                    </div>
                </div>
            )}
        </div>
    );
}

Page with Server Side Fetching​

This is a rather simple example on how to create a page that renders data that was server-side fetched, and sent as a prop to this page. This file is localed at .resources/js/nexus/(global)/(guest)/our-teams/page.(jsx|tsx|js|ts|vue). This example also includes how you could do it in your web.php file. For the sake of simplicity, a closure is being used instead of using a controller, but organize your code as you see fit.

page.jsx:

import { Head, nexusProps } from "@laravext/react";

export default () => {
    
    const { teams } = nexusProps();

    return (
        <div>
            <Head title="Our Teams" />

            <div className="flex justify-center items-center min-h-[70vh] mt-6">
                <div>
                    <h3 className="text-2xl mb-2">Our teams...</h3>
                    <ul>
                        {teams.map((team) => (
                            <li key={team.id}>
                                {team.name}
                            </li>
                        ))}
                    </ul>
                </div>
            </div>
        </div>
    )
}