Lorsqu’on démarre en Laravel et en vue JS, il n’est pas facile de faire migrer son code PHP en javascript. Les variables ne s’appellent pas de la même manière, il ne faut plus ouvrir des <?php toutes les 2 lignes mais des {{. Les boucles et tableaux ne sont pas gérés pareil. Bref, le démarrage est assez difficile. On ne s’improvise pas développeur Front ! Voila pourquoi, je vous propose un article pour vous aider à démarrer du mieux possible.
Rendre compatible son code:
L’un des premiers réflexes à acquérir est de ne plus utiliser de code en ligne tel que onclick ou onchange, mais de passer
par des appels depuis un javascript externe tel que:
$(« #country_code »).change(function() {});
$(« #country_code »).click(function() {});
Ensuite pour le debugging, pensez à installer ce plugin:
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
Maintenant, il faut activer vue JS dans Laravel.
Pour l’heure, vous devez avoir un petit fichier js/app.js, mais celui ci ne possède pas encore les bibliothèques vue JS.
Pour le compiler correctement, effectuez un
npm install
npm run dev
Il devrait grossir et atteindre les 1.5 Mo.
Si vous voulez de l’aide en vidéo, je vous conseille les tutoriels de Thibaud Dauce.
Comment ca fonctionne:
Vue JS a besoin de se relier à votre structure, il faut donc englober votre template HTML avec un <div id= »app »></div> et à la fin, lui déclarer l’appel via <script src= »/js/app.js »></script>
Voila, vous êtes prêt à déclarer des web components.
Laravel, nous a laissé un exemple dans ressources/assets (ou js)\components\ExampleComponent.vue
Et celui ci est bien relié à notre application (regardez le fichier resources\js\app.js).
On peut y voir ceci:
Vue.component(‘example-component’, require(‘./components/ExampleComponent.vue’).default);
Dans votre balise div, rajouter simplement <example-component> </example-component> et quelques lignes devraient s’afficher.
Maintenant, vous voyez grosso modo le principe.
Un javascript charge une bibliothèque qui permet de charger des blocs/templates HTML via des composants vue JS.
Seulement, lorsqu’on parle de bloc HTML, on parle de variables ou d’objets et en javascript, on ne peut pas lui rajouter des <?php echo « titre »;?> .
Ecrire un composant vue JS:
Dans les méthodes qui sont définis en bas de exports_default, vous pouvez avoir aussi:
data(){
return {
« name »: »Yohann »
}
},
props: [« user »]
Data vous permet de placer des élements fixes, alors que props permet de recevoir des élements variable lors de l’appel du composant.
Dans ce code, je peux donc appeler {{name}} pour afficher le nom, mais si je veux aussi recevoir le user depuis PHP, alors je dois appeler mon composant de cette façon:
< example-component :user= »{{$user}} »> < /example-component >
Ici, on voit 2 choses très importantes:
- on tape :user pour spécifier qu’on lui envoie du JSON, sinon il ne faudrait pas mettre les : avant user.
- Ensuite la variable $user doit être encodé en JSON (par défaut, Laravel s’en occupe sur ces objets).
Derrière dans le composant, on peut afficher l’information sous cette forme:
<h1>{{user.name}} </h1>
<h1> {{name}} </h1>
Mais dès que vous voulez modifier des attributs, il vous faudra ajouter le v-bind:attribut et s’affranchir des {{}}
<a v-bind:href=’user.id’>{{user.name}}</a>
Conclusion:
Il est vrai qu’il est assez déroutant de mélanger PHP et Vue JS, mais les performances sont vraiment au rendez-vous. Faites également attention à la crawlabilité de votre site. En effet, lorsque vous passez par une bibliothèque JS (Vue JS ne fait pas exception), il faut pensez que Google ne sera pas en mesure de voir votre contenu.
Si vous voulez utiliser les 2 méthodes, vous pouvez toujours faire :
if(strstr(strtolower($_SERVER[‘HTTP_USER_AGENT’]), « bot »)){
afin de détecter les crawlers, sinon, il vous faudra aller voir du coté des outils de Server Side Rendering pour pouvoir cacher (pas dans le sens masquer) votre contenu, et le rendre accessible aux moteurs de recherche.
