Tutorial de Joomla y Vue.js: Integración Mediante REST API

Configuración de la REST API en Joomla

Antes de consumir la REST API de Joomla con Vue.js, es fundamental habilitar y asegurar los servicios dentro del panel de administración del CMS.

1. Activar los servicios web (Web Services)

De manera predeterminada, la API suele estar operativa una vez instalado el CMS. Sin embargo, para activar el enrutamiento adecuado, debes asegurarte de que las URLs amigables están activas (Global Configuration > Site > Search Engine Friendly URLs configurado en "Yes").

2. Configurar permisos y niveles de acceso

La lectura de artículos públicos (GET) no requiere autenticación en una instalación estándar. Sin embargo, para acceder a endpoints privados o crear contenido (POST), Joomla depende de su sistema ACL y Tokens. Hablaremos de la creación del Token en la sección de Autenticación.

3. Verificar que la API funciona correctamente

Abre una nueva pestaña en tu navegador y visita el siguiente enlace de tu instalación local o en la nube:

https://tu-dominio-joomla.local/api/index.php/v1/content/articles

Si la configuración es correcta, verás una estructura JSON en bruto con los datos de tus artículos. Si recibes un error 404, revisa la configuración de mod_rewrite o Nginx.

4. Probar los endpoints con Postman

Se recomienda utilizar Postman para modelar las respuestas antes de programar la integración de Vue.js con Joomla. Realiza una petición GET al endpoint mencionado y analiza la estructura anidada de "data" -> "attributes".

Crear un Proyecto con Vue.js

Para construir una experiencia moderna y fluida, utilizaremos Vue.js con Vite. Vite es un empaquetador ultrarrápido que reemplaza a Webpack, proporcionando una recarga de módulos en caliente (HMR) instantánea.

1. Crear un proyecto utilizando Vite

Abre tu terminal, navega a tu carpeta de desarrollo y ejecuta el andamio oficial de creación:

npm create vite@latest frontend-joomla -- --template vue
cd frontend-joomla
npm install

2. Estructura básica del proyecto

Al abrir el proyecto en VS Code, observarás que la arquitectura de un proyecto Vue.js Vite Joomla se centra en el directorio /src. Eliminaremos el código de demostración en src/App.vue y crearemos una carpeta /components y /services para una organización escalable.

3. Instalar Axios para consumir la API

Aprenderemos cómo utilizar Axios con Joomla REST API, ya que es el cliente HTTP estándar de la industria por su facilidad para gestionar promesas, interceptores y transformar JSON automáticamente.

npm install axios vue-router

* También instalamos vue-router, que usaremos más adelante para la navegación a los detalles del artículo.

4. Ejecutar el servidor de Desarrollo

Iniciamos el servidor de Vite con el comando:

npm run dev

Tu aplicación Vue.js ahora estará corriendo en http://localhost:5173.

Obtener y Mostrar Artículos de Joomla

Vamos a crear una aplicación Vue.js conectada a Joomla que cargue una lista dinámica de noticias del CMS.

1. Consumir el endpoint de artículo

En nuestro componente principal de Vue (por ejemplo, src/components/ArticleList.vue), utilizaremos la API de Composición de Vue 3 (<script setup>) para invocar nuestra configuración de Axios.

2. Mostrar una lista dinámica (Renderizar datos)

Observa cómo procesamos la respuesta JSON estructurada y manejamos estados de carga:

<template>
  <div class="container">
    <h2>Últimos Artículos de Joomla</h2>
    
    <div v-if="loading" class="spinner">Cargando contenido...</div>
    <div v-else-if="error" class="error">{{ error }}</div>
    
    <ul v-else class="article-grid">
      <li v-for="article in articles" :key="article.id" class="card">
        <h3>{{ article.attributes.title }}</h3>
        <p>Categoría: {{ article.attributes.category.title }}</p>
        <span class="date">{{ formatDate(article.attributes.publish_up) }}</span>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import api from '../services/api';

const articles = ref([]);
const loading = ref(true);
const error = ref(null);

const fetchArticles = async () => {
  try {
    const response = await api.get('/content/articles');
    // Joomla devuelve los datos dentro de un objeto "data"
    articles.value = response.data.data;
  } catch (err) {
    error.value = 'Error al conectar con la REST API de Joomla';
    console.error(err);
  } finally {
    loading.value = false;
  }
};

const formatDate = (dateString) => {
  return new Date(dateString).toLocaleDateString('es-ES');
};

onMounted(() => {
  fetchArticles();
});
</script>

En este código analítico, destacamos que los campos reales de Joomla se ubican dentro de article.attributes (como title, alias, text, publish_up), lo cual es el estándar JSON:API.

Mostrar el Detalle de un Artículo

El siguiente paso en la integración de Joomla y Vue.js mediante REST API es implementar el enrutamiento para que al hacer clic en un título, se muestre el texto completo.

1. Configurar Vue Router

En el archivo src/router/index.js (deberás crearlo), define las rutas de tu aplicación:

import { createRouter, createWebHistory } from 'vue-router'
import ArticleList from '../components/ArticleList.vue'
import ArticleDetail from '../components/ArticleDetail.vue'

const routes = [
  { path: '/', component: ArticleList },
  { path: '/articulo/:id', component: ArticleDetail, props: true }
]

export const router = createRouter({
  history: createWebHistory(),
  routes
})

2. Obtener el artículo completo (HTML)

Creamos ArticleDetail.vue. Utilizaremos el endpoint específico añadiendo el ID: /content/articles/{id}.

<template>
  <div v-if="article" class="article-content">
    <h1>{{ article.attributes.title }}</h1>
    <!-- Usamos v-html para inyectar el WYSIWYG de Joomla -->
    <div v-html="article.attributes.text"></div>
  </div>
  <div v-else-if="error">El artículo no existe (Error 404)</div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import api from '../services/api';

const route = useRoute();
const article = ref(null);
const error = ref(false);

onMounted(async () => {
  try {
    const { data } = await api.get(`/content/articles/${route.params.id}`);
    article.value = data.data;
  } catch (err) {
    error.value = true;
  }
});
</script>

Operaciones CRUD con Vue.js y Joomla

Una vez autenticados, podemos dominar el potencial de una aplicación web conectada a Joomla permitiendo al usuario de Vue.js enviar información.

1. Crear un nuevo artículo (POST)

Para inyectar contenido, debemos mandar una estructura JSON exacta que coincida con lo que el motor de Joomla espera en /content/articles.

const createPost = async () => {
  const newArticle = {
    title: "Noticia desde Vue.js",
    alias: "noticia-desde-vuejs",
    articletext: "Contenido redactado directamente desde nuestro frontend desacoplado.",
    catid: 2, // ID de una categoría válida y existente
    language: "*",
    state: 1 // 1 para publicado
  };

  try {
    const response = await privateApi.post('/content/articles', newArticle);
    console.log("Post Creado ID:", response.data.data.id);
  } catch (error) {
    console.error("Fallo al crear:", error.response.data);
  }
};

2. Actualizar un artículo (PATCH)

Para modificar un título, utilizamos el método PATCH apuntando al ID del artículo. El CMS actualizará solo los campos provistos.

await privateApi.patch('/content/articles/45', { title: "Nuevo Titular Editado" });

3. Eliminar (DELETE)

Mueve el artículo a la papelera (estado -2) o elimínalo totalmente si ya estaba en papelera, ejecutando un simple privateApi.delete('/content/articles/45').

Optimización del Rendimiento (WPO & API)

Construir con Vue.js Vite Joomla debe garantizar una velocidad fulgurante. Si solicitas 1000 artículos de golpe, tu frontend colapsará.

1. Implementar Paginación (JSON:API)

Joomla soporta nativamente parámetros de paginación en la URL según el estándar API:

// Obtener los primeros 10 artículos
const res = await api.get('/content/articles?page[limit]=10&page[offset]=0');

// Página 2
const res2 = await api.get('/content/articles?page[limit]=10&page[offset]=10');

2. Caché de Peticiones HTTP

No consultes a Joomla cada vez que el usuario regresa a la vista de lista. Utiliza manejadores de estado modernos como Pinia (el sucesor de Vuex) en Vue 3 para almacenar en la memoria caché del navegador la respuesta inicial.

3. Uso de Variables de Entorno en Vite

Nunca incluyas URLs de producción ni tokens directamente en tu código fuente. Vite utiliza archivos .env. Crea uno en la raíz de tu proyecto Vue:

VITE_JOOMLA_API_URL=https://produccion.tu-joomla.com/api/index.php/v1
VITE_API_TOKEN=token_secreto_abc123

Y consúmelo en api.js usando import.meta.env.VITE_JOOMLA_API_URL.