Before you start
This documentation assumes that you have some experience with PHP, Laravel and Javascript, and also that you already have a development environment that meets the requirements to run a Laravel 10 (or later) project using Vite as your bundler, and PHP 8.2 or higher.
Disclaimer
I'm not an experienced front-end developer. I'm a back-end developer with a somewhat basic experience with front-end and in my projects I would only be responsible for making any front-end if it was for internal use only, so the looks were not important.
With that in mind: the examples I might give in this documentation might cringe you a little bit, or just straight up look bad. I'm just trying to show you how to use Laravext. If you have any suggestions, please let me know by submitting a PR or opening an issue. Please be kind.
Source: r/ProgrammerHumor (Backend developer doing CSS)
Me trying to do front-end (Not a joke, I had to use GitHub Copilot to center this very image)
Example Standards
Because Laravext is meant to be used with React/Vue, you should be aware of some standards...
I might use .jsx as an extension for some or most files, or something like .(jsx|tsx|js|ts|vue), assuming that you'll know that it may change depending on what you're using or what you're using it for (that means changing to .vue, .tsx, etc).
If I'm showing some code that wouldn't vary much betweem those libraries/frameworks (one or two lines), I might just show how it's be done for each one of them in the surrouding lines.
If the example is too specific, such as a component/page/etc, I will show implementations on all of them, like the example below:
- React
- Vue
page.jsx:
export default ({laravext}) => {
console.log(laravext);
return (
<div>
- Hello, there...
- General Kenoby!
</div>
)
}
page.vue:
<script setup>
const { laravext } = defineProps(['laravext'])
</script>
<template>
<div>
- Hello, there...
- General Kenoby!
</div>
</template>
Please submit a PR if you think that an example is not clear enough and you think it could use some improvements.
The examples are meant to help you understand how to use these tools, and are not meant to reflect how a real world application would be designed, so everything will be as simple as possible.
Starter Kits
Much like when you run a laravel new and get the option to scaffold a new project with some basic configurations, Laravext has some starter kits that you can use to start a new project. They are available at the laravext repository, in the starter-kits directory, and there's one for each of the supported front-end libraries/frameworks, which at the moment are React and Vue.
The Example Project(s)
Some code or file structures in this documentation might (or not) be derived from the laravext examples available at GitHub, and it'll be either the laravel-11-react or laravel-11-vue. The Vue.js example is a basic developer team manager, where teams have developers and projects, and these projects belong to companies (needless to say that this does not reflect how a real world application of this kind would be designed). The React example, on the other hand, is an articles platform, where users can create articles and comment on them, much like a Dev.to clone.
The example projects use the "old" directory structure from Laravel 10, not the new one.
The Vue.js example uses the FormKit package, and one of the components is an autocomplete which requires a key to work. You can get a free development-environment-only key at their website. Just put it in the .env file, at the VITE_FORMKIT_KEY.
In order for you to have some basic comprehension of the project itself, here are the database structures:
Articles Platform
Developer Team Manager
