vue js

Gráfica con chart.js y Vue.js usando Webpack y NPM - Integración

Usar chart.js con Vue.js, Webpack y NPM

Hoy voy a enseñarte a usar chart.js (librería para crear gráficas en la web) con Vue.js cuando se programa en Webpack con NPM.

Te aviso desde ahora que probablemente esta no sea la manera de vue, es decir, lo haremos como lo haríamos sin usar el framework, pero esto me ha funcionado y te funcionará a ti para no tener tantos problemas al integrar Chart.js con Vue.

Nota: primero te invito a familiarizarte con chart.js, ya que aquí solo te enseñaré a usarlo con Vue a través de webpack con npm.

Nota 2: en febrero de 2023 intenté usar este método y si instalas la última versión tal vez te aparezca un error. Para evitarlo, en el siguiente paso en lugar de usar npm install --save chart.js usa npm install --save chart.js@3.2.1, yo pongo la 3.2.1 porque es la última que me ha funcionado, pero me imagino que mientras sea menor a la 4 todo debería funcionar. La guía está en: https://www.chartjs.org/docs/latest/migration/v4-migration.html

(más…)

Por parzibyte, hace

Debounce con Vue

Hoy te mostraré cómo usar la función debounce con el framework Vue y obviamente el lenguaje de programación JavaScript.

Implementar esta función es un poco confuso debido a la definición de métodos dentro de los componentes de Vue y por la confusión que genera la función, ya que la misma genera otra función y solo debe ser definida una vez al inicio.

Pero bueno, vamos por partes. Verás que a partir de esto podrás usar debounce en tus componentes de Vue.

(más…)

Por parzibyte, hace

Consumo de una API REST con Vue.js y JavaScript

En este artículo te voy a enseñar a consumir una API REST usando JavaScript y el framework Vue.js, además de utilizar Bootstrap para el diseño.

Al final vamos a tener una aplicación web que va a gestionar datos y hacer las 4 operaciones básicas: crear, actualizar, eliminar y obtener.

Todo esto lo vamos a hacer sin tocar el código del servidor, pues simplemente nos vamos a enfocar en la programación del lado del cliente, así que solo veremos HTML, JavaScript y un poco de CSS.

(más…)

Por parzibyte, hace

Sistema acortador de enlaces con PHP similar a bitly

Hoy vengo a presentar un sistema que recién he terminado de programar. Se trata de un software open source escrito en PHP con MySQL y Bootstrap, mismo que es un acortador de enlaces similar a los acortadores como bit.ly.

En este caso este programa se encarga de acortar enlaces, redireccionar a los usuarios y registrar cuando se hace clic. Aunque su funcionamiento está inspirado en los acortadores de enlaces, no tiene todas las funciones idénticas.

Este software gratuito que he creado con PHP tiene las siguientes características:

  1. Login y gestión de usuarios
  2. Creación de enlaces
    1. Enlaces sin redireccionamiento instantáneo: en este caso, antes de redireccionar al usuario, se presenta una plantilla en donde se puede poner publicidad, avisos, redes sociales etcétera.
    2. Links con redireccionamiento instantáneo: simplemente redireccionan al usuario de manera transparente, registrando el clic o visita.
  3. Reporte general de clics en rango de fecha, con gráfica y descripción de los enlaces más populares

Como siempre te digo, este software se puede personalizar, tomar como base, etcétera. Por cierto, hace un tiempo hice un software parecido pero ese acorta enlaces para ganar dinero, usando a su vez acortadores como ouo, adfly, etcétera.

(más…)

Por parzibyte, hace

Vue JS: inyectar HTML en vista

Como sabemos, las plantillas de Vue no permiten colocar contenido HTML, y cualquier cadena HTML que se coloque será saneada para evitar posibles ataques, XSS entre ellos.

Sin embargo Vue provee una manera fácil y sencilla de inyectar HTML “inseguro” en un componente o vista, y justamente es lo que veremos en este post.

(más…)

Por parzibyte, hace
Compilando componentes para usar Vue con Laravel

Vue con Laravel – Configuración con Laravel Mix

En este post te mostraré cómo usar Vue con Laravel, es decir, crear componentes de Vue y usarlos dentro de Laravel, compilando los componentes de Vue que estarán en un archivo con extensión .vue en lugar de usar HTML.

Laravel es un framework del lado del servidor que utiliza el lenguaje PHP. Vue es un framework del lado del cliente que utiliza JavaScript (ya sea con TypeScript, CoffeeScript, etcétera).

Veamos cómo usar estas dos tecnologías en conjunto.

(más…)

Por parzibyte, hace
Archivos env para Vue js y Vue CLI

Variables del entorno con Vue.js y Vue CLI

Las variables del entorno en Vue.js sirven para saber el entorno en el que estamos (producción o desarrollo) y también para acceder a otros datos que cambian dependiendo del entorno.

Por ejemplo, en producción podemos tener una clave API o una URL de la API, mientras que en desarrollo esas variables pueden cambiar.

Es por ello que las variables del entorno o environment variables de la Vue CLI vienen para ayudarnos, ya que nos permiten definir variables propias y también a conocer el entorno en el que estamos.

(más…)

Por parzibyte, hace