- Blade 40.1%
- PHP 34.2%
- Vue 21.6%
- TypeScript 3.1%
- JavaScript 0.8%
- Other 0.2%
| Filename | Latest commit message | Latest commit date |
|---|---|---|
| .vscode | ||
| app | ||
| bootstrap | ||
| config | ||
| database | ||
| public | ||
| resources | ||
| routes | ||
| storage | ||
| tests | ||
| .editorconfig | ||
| .env | ||
| .gitignore | ||
| .prettierrc | ||
| artisan | ||
| auto-imports.d.ts | ||
| bun.lock | ||
| CLAUDE.md | ||
| components.d.ts | ||
| composer.json | ||
| composer.lock | ||
| eslint.config.js | ||
| LICENSE | ||
| package-lock.json | ||
| package.json | ||
| phpunit.xml | ||
| README.md | ||
| ROADMAP.md | ||
| tsconfig.json | ||
| vite.config.js | ||
Laravue
Vue.js avec Laravel : Intégration de Vue.js et Inertia.js avec Laravel
Inertia.js combine de manière transparente l'agilité du frontend de Vue.js avec le backend robuste de Laravel, éliminant le besoin d'un développement d'une API séparée.
Laravel gère le routage, l'hydratation des données et l'authentification, tandis que Vue crée des expériences utilisateur captivantes, recevant sans effort des données par Inertia.js.
Avec le rendu côté serveur, toute l'application est initialement rendue sur le serveur, garantissant des vitesses de charge initiales optimales et rapides.
Condition préalable
- PHP 8.2 ou plus,
- Node.js et NPM,
- Composer.
Création du projet Laravel
Tout d'abord, créez un nouveau projet Laravel à l'aide de Laravel Installer :
laravel new laravue
cd laravue
Installer Vue.js
npm install vue@latest
Configuration côté serveur
Installez l'adaptateur Laravel Inertia.js
composer require inertiajs/inertia-laravel
Créer un modèle racine
Créer un nouveau fichier dans resources/views/app.blade.php :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
@vite('resources/js/app.js') @inertiaHead
</head>
<body>
@inertia
</body>
</html>
Installer et configurer le middleware
Générer le middleware Inertia.js :
php artisan inertia:middleware
Ajoutez le middleware au fichier bootstrap/app.php :
use App\Http\Middleware\HandleInertiaRequests;
...
->withMiddleware(function (Middleware $middleware) {
$middleware->web(append: [
HandleInertiaRequests::class,
]);
})
...
Configuration côté client
Installation de l'adaptateur Inertia Vue
npm install @inertiajs/vue3
Configuration de Vue et Inertia :
Mettez à jour le fichier ressources/js/app.js :
import { createApp, h } from "vue";
import { createInertiaApp } from "@inertiajs/vue3";
createInertiaApp({
resolve: (name) => {
const pages = import.meta.glob("./Pages/**/*.vue", { eager: true });
return pages[`./Pages/${name}.vue`];
},
setup({ el, App, props, plugin }) {
createApp({ render: () => h(App, props) })
.use(plugin)
.mount(el);
},
});
Installation et configuration du plugin Vite
Installation du plugin Vue Vite :
npm install @vitejs/plugin-vue
Mettez à jour le fichier vite.config.js :
import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import vue from "@vitejs/plugin-vue";
import tailwindcss from "@tailwindcss/vite";
export default defineConfig({
plugins: [
laravel({
input: ["resources/css/app.css", "resources/js/app.js"],
refresh: true,
}),
vue(),
tailwindcss(),
],
});
Tester la configuration
Créer une page de test
Créez un nouveau composant Vue sur resources/js/Pages/Home.vue :
<template>
<h1>Hello world</h1>
</template>
Ajouter la route sur Laravel
Mettez à jour le fichier routes/web.php :
use Inertia\Inertia;
Route::get('/', function () {
return Inertia::render('Home');
});
Démarrer les serveurs de développement
Exécutez les serveurs de développement Laravel et Vite :
# Terminal 1
php artisan serve
# Terminal 2
npm run dev
Ou les 2 en même temps via composer :
composer run dev
Se rendre sur http://localhost:8000 pour voir notre application en cours d'exécution !
Structure de répertoire
Notre structure de projet devrait ressembler à ceci :
laravue/
├── resources/
│ ├── js/
│ │ ├── Pages/
│ │ │ └── Home.vue
│ │ └── app.js
│ └── views/
│ └── app.blade.php
├── routes/
│ └── web.php
├── package.json
└── vite.config.js
Installation de Nuxt UI Pro
npm install @nuxt/ui-pro
Ajouter le plugin au projet via le fichier vite.config.ts :
import vue from "@vitejs/plugin-vue";
import laravel from "laravel-vite-plugin";
import path from "path";
import { resolve } from "node:path";
import { defineConfig } from "vite";
import uiPro from "@nuxt/ui-pro/vite";
export default defineConfig({
plugins: [
laravel({
input: ["resources/js/app.ts"],
ssr: "resources/js/ssr.ts",
refresh: true,
}),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
uiPro({
inertia: true,
components: {
dirs: ["resources/js/components"],
},
ui: {
colors: {
primary: "scarlet",
neutral: "neutral",
},
},
}),
],
resolve: {
alias: {
"@": path.resolve(__dirname, "./resources/js"),
"ziggy-js": resolve(__dirname, "vendor/tightenco/ziggy"),
},
},
});
Installation des outils de formatage & codage
Référence : https://vueschool.io/articles/vuejs-tutorials/eslint-and-prettier-with-vite-and-vue-js-3/
Dans le répertoire courant :
ESLint
ESlint 9 introduit une nouvelle structure de configuration appelée Flat Config, qui simplifie et modernise la configuration. Si vous cherchez à passer à Eslint 9 et que vous souhaitez des conseils sur le processus, explorez cet article pour un guide de mise à niveau étape par étape pour Eslint 9.
Installation Eslint et du plugin Vue pour Eslint :
npm install --save-dev eslint eslint-plugin-vue
Configurer Eslint en créant un fichier eslint.config.js avec la configuration suivante :
// eslint.config.js
module.exports = {
env: {
node: true,
},
extends: ["eslint:recommended", "plugin:vue/vue3-recommended"],
rules: {
// override/add rules settings here, such as:
// 'vue/no-unused-vars': 'error'
},
};
Installer eslint-config-prettier :
npm install eslint-config-prettier --save-dev
On rajoute la configuration au fichier eslint.config.js :
// eslint.config.js
module.exports = {
env: {
node: true,
},
extends: ["eslint:recommended", "plugin:vue/vue3-recommended", "prettier"],
rules: {
// override/add rules settings here, such as:
// 'vue/no-unused-vars': 'error'
},
};
Configuration de ESLint :
npm init @eslint/config@latest
Erreurs Eslint dans le navigateur
npm install vite-plugin-eslint --save-dev