config de base laravel et vue.js

Par floky, il y a 3 ans

PHP Laravel
Javascript VueJS

Bien le Bonjour,

Je souhaite comprendre ou mettre en place une config de base sur lavarel:
Je travail sur une app de gestion qui inclus de nombreux formulaire.
Et j'aimerais intégrer vue.js pour me permettre d'interéagir avec de petite fonctions sur les formulaires, cacher, changer couleur, modifier des classes...
Tout en conservant mon project.
J'ai déja éssayer de creer differents project laravel mais je ne trouve pas et ou ne comprend pas comment faire.
Exemple les routes change et il me copie les fichiers dans resources/view....blade.php dans un dossier resources/js....

Ce que je veux

En faite je voulais savoir comment utiliser ou (config) vue.js juste pour servir de personnalisation du html entre guillemets...
Pourquoi, car je suis tres novice dans javascript mais il est impératif.
Bref j'éspère que vous comprendrez ma demande.
Skol

Ce que j'obtiens

De la bouillie intergalactique

5 réponses

popotte, il y a 3 ans

Hello :)

Alors cette doc elle explique bien: https://www.akilischool.com/cours/installer-vue-js-3-dans-laravel

En gros tu installes VueJS normalement avec NPM, tu place ton Vue et les components dans resources/js/et tu ajoutes vuejs dans laravel mix

La différence avec l'article dans le lien si tu veux juste utiliser vue pour certains composants:

Tu fais ton projet en blade de façon classique, et pouur les éléments où tu veux utiliser VueJS tu fais une div avec un ID vue, et dans l'app.js tu ucrées un nouveau VueJS qui pointes vers cet elément, par exemple:

// HTML <html> <body> <header> </header> <main> <div id="some_element">blabla</div> <div id="vue-some_element></div> </main> <footer> <p>text</p> <div id="vue-footer_contact"></div> </footer </body> </html> // JS require('./bootstrap'); import { createApp } from "vue" import SomeElementComponent from "./components/SomeElementComponent.vue" import SomeElementComponent from "./components/FooterContactComponent.vue" createApp(AppComponent).mount("#vue-some_element") createApp(FooterContactComponent).mount("#vue-footer_contact")
floky, il y a 3 ans

Bonjour je te remercie de ta réponse que tu as tres bien compris et je comprend le code que tu m'a transmis, j'ai tester le lien et suivi ce petit tutos et je n'est pas réussi a comprendre :
j'ai creer un nouveau project laravel installer node et npm et suivi les indications du tutos mais je ne suis pas arrivé a un resultat correct ma div id n'affiche pas "Bienvenue sur Vue 3"
Je ne comprend pas comment le code fonctionne je pense que je bloque sur la compilation et l'integration. Bref il faut que je trouve je pense des expliquations sur le fonctionnement de la compilation et l'integration.
je pensais que c'était simple...

une fonctions -> un appel de la fonctions...

bref j'hésite a integrer du java dans mon project, avant on pouvaient integrer du js et du css facilement, maintenant c'est devenu une galere.

Merci popotte

floky, il y a 3 ans

Comment faire cela 'dans resources/js/et tu ajoutes vuejs dans laravel mix'

popotte, il y a 3 ans

Alors faudrait que tu mme montre ton code pour voir où ça coince, ton resources/layouut/app.blade.php et tonresources/js/app.js et tes components resources/js/components/*.js et aussi ton webpack.mix.js

floky, il y a 3 ans

Popotte, Michael merci a vous trés instructif. Je visionne actuellement le tuto de Michael, pour l'instant popotte je préfère étudier puis si je rencontre des soucis je vous demanderais.
Cette formation a l'aire plus ou moins de correspondre a ce que je recherche je vais essayer de peaufiner ma config de base voir si cela me convient.
Vos réponse mon vraiment aiguiller et je reviendrais surrement vers vous merci beaucoup vous deux.
Skol