Integración de Vue.js en Drupal

Se sabe muy bien lo mucho que es usado Vue.js hoy en día como un framework progresivo para construir interfaces de usuario, además de usarse como Single page applications. En esta oportunidad veremos una forma muy sencilla de incluir vue.js como CDN en un módulo personalizado.

 

Lo primero que haremos será construir el módulo personalizado.

Así que creamos el archivo vue_block.info.yml 

name: Vue block                                                                                                                                   
type: module
description: Integration of vue.js .
version: 0.1 
core: 8.x 
package: vue 

 

En seguida crearemos el archivo vue_block.module

<?php                                                                                                                                             
            
/**
 * @file
 * Contains custom_vue.module.
 */ 

use Drupal\Core\Routing\RouteMatchInterface;
    
/**     
 * Implements hook_help().     
 */ 
function vue_block_help($route_name, RouteMatchInterface $route_match) {
  switch ($route_name) {
    // Main module help for the fg_searchlist module.
    case 'help.page.vue_block':
      $output = '';
      $output .= '<h3>' . t('About') . '</h3>';
      $output .= '<p>' . t('Integration with vue.js .') . '</p>';
      return $output;

    default:
  }
}

function vue_block_theme($existing, $type, $theme, $path) {
  return [
    'vue_block_block' => [
      'template' => 'block--vue-block',
      'variables' => [
        'title' => NULL, 
      ],
    ],
  ];
}

 

Luego haremos el archivo vue_block.libraries.yml donde añadiremos vue como CDN y un archivo js para manipular el app desde ahí.

vue:                                                                                                                                              
  js:
    'https://cdn.jsdelivr.net/npm/vue/dist/vue.js': {type: external}
    js/script.js: {}

 

Luego de ello, creamos el bloque que contendrá el app con el siguiente archivo src/Plugin/Block/VueBlockBlock.php (Importante que sea ubicado donde hace referencia los directorios) sino no será detectado dicho bloque.

<?php                                                                                                                                             
      
namespace Drupal\vue_block\Plugin\Block;

use Drupal\Core\Block\BlockBase;
    
/**
 * Provides a 'DentistSearchBlock' block.
 *  
 * @Block(
 *  id = "vue_block_block",    
 *  admin_label = @Translation("Vue block"),
 * )
 */
class VueBlockBlock extends BlockBase {

  /**
   * {@inheritdoc}
   */
  public function build() {
    
    return [
      '#theme' => 'vue_block_block',  
      '#attached' => [
        'library' => [
          'vue_block/vue',
        ],
      ],
    ];
  }

}

 

Añadimos el archivo javascript js/script.js que controlara la app. Si conoces Vue.js notaras que se crea una instancia de Vue indicandole el id #app para ser cargado allí, además de crearse un componente para manipular el marcado a mostrar. Es código Vue referencial.

Vue.component("new-component", {                                                                                                                  
  template: "<h1>{{ title }} {{ comments * 2}}</h1>",
  props: {
    title: String,
    comments: Number           
  } 
})

var vm = new Vue({
  el: "#app",
  data: {
    title: "Este titulo viene de Vue",
    comments: 3
  }
});

 

Creamos la plantilla relacionada al bloque creado anteriormente templates/block--vue-block.html.twig aquí podemos notar que se está adjuntando la biblioteca (attach_library) para poder llamar al CDN de vue y el script.js

Notarán también que ahí esta definido el elemento #app para cargar el código de Vue con el componente correspondiente. Además se usa verbatim para usar sintaxis de vue y no tenga conflicto con las de twig.

{{ attach_library('vue_block/vue') }}                                                                                                             

{% verbatim %}
<div id="app">
      <new-component :title="title" :comments="comments"></new-component>
</div>
{% endverbatim %}

 

En un próximo artículo veremos como integrar con un app de Vue.js generado por VueCli