Création d’une application sur une seule page avec WordPress et VueJS – Partie 1

Vue.js est un fram ework JavaScript progressif qui partage le scène avec React et Angular. Vue.js permet d’être intégrer dans une application WordPress.

Nous allons présenter comment créer une application sur une seule page avec WordPress et VueJS qui va s’interagir avec le REST API de WordPress.

Si vous avez de vous rafraîchir sur les technologies qui vont être vue tout au long de cet article, il est recommandé de voir les pages mentionnés ci-dessous :

• API REST de WordPress ;
• Javascript pour les développeurs WordPress ;
• Getting started avec Vue.js 2 par Academind.

Présentation de l’application sur une seule page avec Vue.js et WordPress

Nous allons créer une application avec Vue.js et WordPress en utilisant le thème de WordPress TwentySeventeen.

Dans une application sur une seule page avec Vue.js, la page va fournir l’instance de la vue avec un élément DOM à monter, c’est ce qui est présenté par la figure ci-dessous :

L’application adopte une approche hybride ou mixte, parce que l’application côté serveur (WordPress) donne les données HTML au frontend. Une partie de celle-ci sont récupérée par l’application côté client qui est Vue.js. Ceci est différent d’une application sur une seule page pur qui peut utiliser un CMS headless ou découplé, où le moteur côté serveur est uniquement responsable de fournir le contenu (via une API) et ne génère pas le HTML pour l’afficher.

Organisation de l’application sur une seule page avec Vue.js

Le schéma ci-dessous montre comment est composé l’application sur une seule page avec Vue.js.

Les différents composants à mettre en place sont :

• AppNavigation : fournit les liens (router links) pour le « Vue Router » pour afficher le composant AppQuickSearch.
• AppQuickSearch est le composant qui va contenir AppFilterSwitches et AppGetPosts.
• AppFilterSwitches affiche le champ les cases à cocher.
• AppGetPosts va afficher les données qui sont récupérées à partir du WordPress REST API et le filtre en utilisant la clé de recherche et les cases à cocher. Il va ensuite appeler le composant AppDisplayPost pour chaque résultat filtré.
• AppDisplayPost affiche les balises pour un résultat individuel.

Tous ces composants sont dans le template de la page de wordpress.

Utilisation de Vue-CLI pour configurer le développement local

Lors de la mise en place d’une application sur une seule page, nous avons besoin de plusieurs outils de développement comme le Vue Loader, Webpack, Babel, etc… Mais malgré toutes ces prérequis qui nécessitent plusieurs configurations, nous allons voir la mise en place de ce projet de la plus simple des manières.

Pour ce faire, nous allons utiliser Vue-CLI qui va installer rapidement une application Vue qui sera pré-configurée avec les meilleurs outils pour le développement d’une interface utilisateurs respectant les prérequis des interfaces moderne. Faisant alors l’installation de CLI en premier.

Etape 1 : Installation de Node.js

Pour l’utilisation de Vue-CLI, nous avons besoin de Node.js (8.x au minimum et de npm version 3 et +). Pour l’installer, nous vous proposons de regarder sur le site de Node.js, et voir comment l’installer pour votre système. Une fois que c’est fait, il faut vérifier en exécutant la commande :

node --version et npm --version

Ci-dessous une capture d’écran de la version de node et npm.

Etape 2 : Installation de Vue-CLI

Pour l’installation de Vue-CLI, il faut utiliser un terminal. Pour installer Vue-CLI 2.x, on lance la commande npm install -g vue-cli. Si vous voulez savoir si l’installation est faite correctement, lancer la commande vue --version.

Construire une application Vue avec Vue-CLI

Pour construire une application Vue, nous allons utiliser le « webpack-simple » du template Vue.js. Toutefois vous avez la possibilité de créer l’application avec des templates sophistiqués.

Le template que nous avons choisi va mettre en place un projet Vue avec Webpack et va le configurer avec un serveur de développement et d’autre outils de déploiement. Il va nous permettre d’écrire des codes en utilisant les dernières versions de Javascript (ES6/ES7) pendant le développement mais va permettre de déployer dans la version ES5 de Javascript pour une plus grande compatibilité avec les navigateurs web.

Etape 1 : Configurer l’application Vue dans WordPress

Pour configurer le projet Vue, il faut aller dans le thème de WordPress que vous voulez. Pour nous ici, le répertoire se trouve dans wp-content/themes/ et le nom du thème est vel

Etape 2 : créer l’application Vue en utilisant webpack-simple

Il faut créer ensuite le l’application Vue en exécutant la commande vue init webpack-simple nom_projet, en remplaçant nom_projet par le nom de votre projet. Pour notre cas ici c’est vue-vel.

Etape 3 : Installer les dépendances pour le développement

Une fois que l’installation est faite, accéder à l’intérieur de votre projet et vous trouverez à l’intérieur un fichier appelé package.json. Ce fichier contient la liste de tous les outils de développement qui sont requis. Ces outils doivent être installer, pour l’installer, exécuter les commandes ci-dessous :

• cd nom_projet
• npm install

NPM va télécharger et installer toutes les dépendances dans un répertoire appelé node_modules.

Ces fichiers ne vont pas être déployés dans WordPress. Ils sont seulement nécessaire durant la phase de développement.

Etape 4 : Lancer le serveur webpack pour le développement

La dernière étape est de lancer le serveur de développement webpack qui a été installé précédement.

L’application sur une seule page de Vue est une application côté client qui est fourni par un serveur (qui est le serveur Webpack). Une fois que le développement est terminé, nous allons générer un fichier Javascript pour WordPress.

Pour lancer le serveur de développement, lancer la commande npm run dev dans le dossier du projet Vue (pour nous ici c’est vue-vel). Vous allez voir l’application démarré et il va ouvrir automatiquement un navigateur avec l’adresse http://localhost:8080.

Le fichier build.js

Si vous regardez le code source de la page, vous allez voir un fichier de script http://localhost:8080/dist/build.js. C’est le fichier qui est généré par le serveur Webpack pour l’application Vue.

Ce fichier n’existe pas physiquement mais il est généré dynamiquement par Node et Webpack.

Pour générer physiquement ce fichier, il faut lancer la commande npm run build.

Intégrer l’application Vue dans WordPress

Pour intégrer l’application Vue dans WordPress, nous avons besoin de :

• Un élément DOM dans WordPress pour l’application Vue ;
• Intégrer le fichier build.js dans WordPress ;
• Informer Vue de l’élément DOM de WordPress.

Fournir l’élément DOM dans WordPress pour Vue

L’application Vue a besoin d’un élément DOM qui existe dans une page WordPress.

Pour fournir l’élément DOM dans WordPress, nous pouvons ajouter l’élément DOM en utilisant la hierarchie de Template de WordPress. Vous pouvez le mettre dans le template de page par exemple ou dans un template spécifique.

Pour ajouter le code ci-dessous dans page.php, où on va ajouter l’attribut id dans un élément DOM. Pour l’exemple ci-dessous on va ajouter l’id #wp-vue-app.

<?php get_header(); ?>
<div id="wp-vue-app">
  Endroit où l'application Vue va être insérée
</div>

Enregistrer l’application Vue dans WordPress

Pour permettre à WordPress de savoir l’application Vue, nous allons utiliser wp_register_script pour ajouter build.js. En mode développement, nous allons la version de développement de build.js et en mode production, nous allons générer build.js via npm run build. Les exemples de codes d’insertion sont indiqués ci-dessous :

• En mode développement :

wp_register_script('vue-app','http://localhost:8080/dist/build.js');
wp_enqueue_script("vue-app");

• En mode de production

wp_register_script('vue-app','dist/build.js');
wp_enqueue_script("vue-app");

Aucun des fichiers qui ont été installés pour le mode de développement ne sont pas nécessaire dans le déploiement ; nous n’envoyons que le fichier build.js généré par la commande npm run build.

Informer Vue de l’élément DOM qui va contenir l’application dans WordPress

Enfin pour pouvoir charger l’application Vue dans WordPress, nous allons dire à Vue l’élément DOM qui va contenir l’application. Pour ce faire, nous allons spécifier l’option el dans le fichier main.js du projet Vue avec la valeur de l’attribut id de l’élément DOM.

import Vue from "vue";
import App from "./App.vue";

new Vue({
    el:"#wp-vue-app",
    render: h=>h(App)
});

Quelques notions à prendre en compte avant de continuer sur la création d’une application VueJS

Nous devons parler de quelques notions fondamentales à appréhender avant de continuer sur la création d’une application Vue avec WordPress.

Côté VueJS

Parlant dans un premier temps des notions côté VueJS.

Structure de fichier

Une fois que l’application Vue est installée, nous avons la structure de répertoire suivant.

Notre application se trouve dans le répertoire « vue-vel« .

Les composants nécessaires de node se trouve dans le répertoire node_modules.

Les fichiers App.vue et main.js sont les instances de Vue.

Le fichier package.json gère les dépendances lié au développement.

Vue Router

Même si on parle d’une application sur une seule page, nous ne pouvons pas intégrer tous les composants que l’on a besoin dans une seule fichier. En effet pour maintenir l’application, on aurait des difficultés. Il est recommandé de séparer les composants qui vont être utilisé dans des fichiers séparés.

Et pour permettre à Vue de connaître les différents composants, nous avons besoin de dire comment y accéder en spécifiant les fichiers qui les contient. C’est là que Vue Router entre en scène.

Ci-dessous un exemple de code pour dire à Vue où se trouve le composant Programme.

import Vue from 'vue'
import VueRouter from 'vue-router'

import Programme from './components/Programme.vue'

Vue.use(VueRouter)
const routes = [
  { path: '/programme', name: 'programme', component: Programme},
]
const router = new VueRouter({
  routes,
});

export default router

Axios

Lors de la création d’une application Web, il est fréquent que vous souhaitiez utiliser et afficher les données provenant d’une API. Il existe plusieurs manières de le faire, mais une approche très populaire consiste à utiliser axios, un client HTTP basé sur les Promesses (Promise).

Nous allons vous montrer un exemple de code d’intégration d’axios dans votre application.

new Vue({
  el: '#app',
  data () {
    return {
      info: null
    }
  },
  mounted () {
    axios
      .get('https://api.coindesk.com/v1/bpi/currentprice.json')
      .then(response => (this.info = response))
  }
})

Côté WordPress

Du côté de WordPress nous avons besoin de fournir à Vue les données via l’API REST.

Utilisation du REST API de WordPress

L’API REST de WordPress fournit une interface aux différentes application pour s’interagir à WordPress en envoyant et en recevant des données via JSON.

Pour fournir des données spécifiques via l’API REST de WordPress, nous devons hériter la classe WP_REST_Controller. Une fois que c’est fait, nous devons sur-définir la fonction register_routes pour définir les routes qu’on veut offrir aux applications.

Ci-dessous un exemple de code :

class stmgrest extends WP_REST_Controller {

  public function register_routes() {
    register_rest_route('stmg/v1', '/upload_image', array(
      array(
        'methods' => WP_REST_Server::ALLMETHODS,
        'callback' => array($this, 'upload_image'),
      ),
    ));
  }
  public function upload_image(WP_REST_Request $request){

  }
}

Fournir les données locales de WordPress à Vue

Vue est un script Javascript qui est lancé dans un navigateur. De ce fait, il ne peut pas avoir accès aux données fournies par WordPress. Pour permettre aux données locales de WordPress d’être accessible par l’application Vue, nous allons utiliser la fonction wp_localize_script de WordPress.

Ci-dessous un exemple de code qu’on peut mettre dans le fichier functions.php.

wp_localize_script(
      'st_vue',
      'wpData',
      array(
        'template_directory_uri' => get_stylesheet_directory_uri(),
        'rest_url' => untrailingslashit(esc_url_raw(rest_url())),
        'nonce' => wp_create_nonce('wp_rest'),
        'home_url' => home_url("/")
  ));
  wp_enqueue_script('st_vue');

• wpData.template_directory_uri contient le chemin d’accès aux fichiers statique du template ;
• wpData.rest_url contient le chemin pour accéder au REST ;
• wpData.nonce pour mettre à disposition un clé de cryptage;
• wpData.home_url contient l’URL de la page d’accueil.

Pour avoir une compréhension plus poussé de la méthode de création d’une application web sur une seule page avec WordPress et VueJS, il est nécessaire de faire un exemple plus concret. En effet, la partie 2 de la création d’une application web sur une seule page avec WordPress et VueJS en parle sur ce sujet. Nous vous invitons à le lire.