En este post de programación con JavaScript y Vue te enseñaré a importar una librería de NPM a un componente de Vue. Si bien esto es algo muy simple, en ocasiones podemos olvidarnos o perdernos.

Por ello es que en el post de hoy te enseñaré a importar un paquete de NPM desde un componente de Vue y usarlo dentro de ese componente a través de require.

Estoy suponiendo que usas la Vue CLI con Webpack, pero incluso si no lo haces, esto podría darte una ayuda.

La librería de NPM

Puedes usar e importar cualquier librería de NPM en Vue. Para este ejemplo usaré el paquete llamado qrious que ya expliqué en su momento y que sirve para generar códigos QR. El mismo se instala con:

npm install --save qrious

Te repito que solo lo estoy tomando de ejemplo.

Importando paquete dentro de Vue

Ahora solo debemos usar require e importar el paquete, accediendo a los node_modules. En este caso para acceder a la librería de npm del ejemplo hacemos lo siguiente:

const QRious = require("../../node_modules/qrious/dist/qrious");

La ubicación cambiará dependiendo de la ubicación de tu componente. Recuerda que el .. significa ir al directorio padre, por lo que estoy saliendo 2 directorios arriba y después importando lo que hay dentro de node_modules/qrious/dist/qrious.

Usar package dentro de Vue

Y ahora ya podemos usar la librería pues ya la hemos importado en Vue. Obviamente cada cosa cambiará dependiendo de la misma, pero aquí puedes ver el uso que yo le estoy dando en mi componente de Vue:

async obtenerIp() {
  this.cargando = true;
  const ip = await AjustesService.obtenerIp();
  this.direccionServidor = `${window.location.protocol}//${ip}:${window.location.port}${window.location.pathname}${window.location.hash}`;
  new QRious({
    element: this.$refs.imagenQr,
    value: this.direccionServidor,
    size: 200,
    backgroundAlpha: 1,
    foreground: "#000000",
    level: "H",
  });
  this.cargando = false;
},

Y aquí el componente completo por si te queda alguna duda, solo para ejemplificar:

<template>
  <div>
    <div class="columns">
      <div class="column">
        <h2 class="is-size-2">Impresora</h2>
        <b-message title="Aviso" has-icon type="is-warning" :closable="false"
          >Recuerde seleccionar solo impresoras térmicas, no virtuales ni de
          otro tipo. Si la impresora no aparece en la lista, probablemente no la
          haya compartido anteriormente</b-message
        >
        <b-field label="Impresora">
          <b-select
            :loading="cargando"
            v-model="impresoraSeleccionada"
            placeholder="Seleccione una impresora"
          >
            <option
              v-for="impresora in impresoras"
              :value="impresora"
              :key="impresora"
            >
              {{ impresora }}
            </option>
          </b-select>
        </b-field>
        <b-button :loading="cargando" @click="guardar()" type="is-success"
          >Guardar</b-button
        >
      </div>
    </div>
    <div class="columns">
      <div class="column">
        <h2 class="is-size-2">Conexión remota</h2>
        <p>
          Usted puede escanear el siguiente código QR o acceder a
          <code>
            {{ direccionServidor }}
          </code>
          desde su navegador.
          <strong
            >Recuerde que todos los dispositivos deben estar en la misma red de
            área local</strong
          >
        </p>
        <img alt="" ref="imagenQr" />
      </div>
    </div>
  </div>
</template>
<script>
import AjustesService from "../services/AjustesService";
const QRious = require("../../node_modules/qrious/dist/qrious");
export default {
  data: () => ({
    cargando: false,
    impresoraSeleccionada: "",
    impresoras: [],
    direccionServidor: "",
  }),
  async mounted() {
    await this.obtenerIp();
    await this.obtenerImpresoras();
    await this.obtenerImpresora();
  },
  methods: {
    async guardar() {
      this.cargando = true;
      await AjustesService.guardarImpresora(this.impresoraSeleccionada);
      this.$buefy.dialog.alert(
        "Se ha guardado la impresora. Verifique que se haya impreso un ticket de prueba para asegurarse de que todo ha funcionado"
      );
      this.cargando = false;
    },
    async obtenerImpresora() {
      this.cargando = true;
      this.impresoraSeleccionada = await AjustesService.obtenerImpresora();
      this.cargando = false;
    },
    async obtenerIp() {
      this.cargando = true;
      const ip = await AjustesService.obtenerIp();
      this.direccionServidor = `${window.location.protocol}//${ip}:${window.location.port}${window.location.pathname}${window.location.hash}`;
      new QRious({
        element: this.$refs.imagenQr,
        value: this.direccionServidor,
        size: 200,
        backgroundAlpha: 1,
        foreground: "#000000",
        level: "H",
      });
      this.cargando = false;
    },
    async obtenerImpresoras() {
      this.cargando = true;
      this.impresoras = await AjustesService.obtenerImpresoras();
      this.cargando = false;
    },
  },
};
</script>

Te repito: puede que cambie según la librería que utilices, o tal vez haya una versión de la misma para Vue. En todo caso aquí te mostré cómo importar un paquete de NPM desde Vue.

Por aquí te dejo más posts sobre JavaScript y Vue.