Vue 3

Introdución

Vue (pronunciado /vjuː/, como view) é un framework progresivo para construír interfaces de usuario. A biblioteca central está enfocada só na capa de visualización, e é doada de utilizar e integrar con outras bibliotecas ou proxectos existentes.

Vue dispón dun "compilador" que se encarga de transformar as plantillas (compoñentes) de Vue en código JavaScript optimizado que utilizará o navegador para visualizar a páxina, encargándose de procesar as plantillas e os datos para producir o contido.

As distribucións de desenvolvemento de Vue inclúen o compilador, polo que podemos crear e probar a aplicación con ficheiros individuais cos distintos compoñentes da nosa web (arquivos .vue) e probala mediante npm run dev. Con Vue normalmente ven integrado un xestor de proxectos (Vite e Vue CLI) que ademais proporciona un servidor web para poder ir probando o desenvolvemento.

Unha vez rematado o frontend, se "compila" (build) xerando o frontend de produción mediante o comando npm run build. Este comando xerará unha versión da distribución da web dentro da carpeta build que podemos copiar ao raiz do noso servidor de produción.

Elaboración dun Front-End con Vue

Instalación da contorna de desenvolvemento

Para desenvolver un frontend con Vue o mais apropiado e o uso do xestor de paquetes npm dentro da carpeta onde imos desenvolver o frontend, que non ten nada que ver coa carpeta onde se instalará o servizo web de producción.

npm create vue@latest

Mediante este comando se recopilan todos os módulos necesarios para o desenvolvemento e creación de frontend realizando unha serie de preguntas sobre as tecnoloxías que queremos empregar. E recomendable o uso de TypeScript e ESLint. Normalmente o axeitado e desenvolver mediante VSCode, xa que trae plugins que fan cómodo o desenvolvemento. Vue instalará un compoñente de "Benvida", que será o "frontend por defecto"

Unha vez executado ese comando, se crea a lista de software necesario que podemos instalar no proxecto

npm install

A estrutura da aplicación na carpeta será similar a esta:

<proxecto>/
│
├── index.html            // Archivo HTML principal
├── src/                  // Carpeta de código fuente
│   ├── assets/           // Archivos estáticos (imágenes, etc.)
│   ├── components/       // Componentes de Vue
│   ├── views/            // Vistas de la aplicación
│   ├── App.vue           // Componente raíz
│   └── main.js           // Archivo de entrada de JavaScript
│
├── package.json
└── vite.config.ts
└── eslint.config.ts

index.html e o punto de carga do frontend de desenvolvemento (unha vez compilado con npm run prod, se creará unha versión de index.html preparada para o despregamento na carpeta build). O desenvolvemento terá lugar na carpeta src, que se identificará no proxecto como a carpeta @ para as rutas.

Dentro da carpeta src temos o punto de entrada do frontend Vue, que é o arquivo main.ts ou main.js (dependendo de si utilizamos JavaScript ou TypeScript) e App.vue que é o compoñente principal que "debuxará" o frontend a presentar dentro do index.html da páxina.

En App.vue teremos o frontend que se amosará si lanzamos a versión de desenvolvemento mediante npm run dev,

Si queremos poder acceder cun cliente remoto (en outra máquina) debemos modificar a información do ficheiro vite.config.ts:

vite.config.ts:
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
        host: '0.0.0.0', // Escoitar en todas as interfaces
        port: 8000, // O porto no que se esperan conexións
        strictPort: true, // Opcional: fallará si o porto xa está en uso
    },
})

O punto de entrada dunha aplicación """Vue""" é normalmente un arquivo chamado """main.js""" (ou """main.ts""" se estás utilizando TypeScript). Este arquivo é onde se crea e configura a instancia da aplicación Vue e se monta nun elemento HTML-

Internacionalización

Si queremos que o noso frontend soporte varios idiomas necesitaremos o módulo vue-i18n que podemos instalar con npm install vue-i18n. Este módulo nos proporcionará a posibilidade de utilizar diccionarios en JSON nos que estarán as traduccións das distintas cadeas de texto do front-end situados en src/locales como es.json, gl.json ou en.json.

{
"Configure":"Configurar",
"Log Out":"Saír",
"Log In": "Iniciar Sesión",
"User":"Usuario",
"Password":"Contrasinal",
"Did you forget your password?":"¿ Esqueciches o teu contrasinal ?",
"Incorrect username or password":"Usuario ou contrasinal incorrectas",
}

Será necesario a carga do módulo i18n no programa principal main.ts, que pode quedar algo similar a esto:

import App from '@/App.vue';
import { createApp } from 'vue';
import { createI18n } from 'vue-i18n';

import en from '@/locales/en.json';
import es from '@/locales/es.json';
import gl from '@/locales/gl.json';

const messages={ en, es, gl };

// Collemos por defecto a linguaxe do navegador
const userLocale = navigator.language || 'gl';

// Crear a instancia de i18n e definir o idioma predeterminado
const i18n = createI18n({
  locale: userLocale, // Idioma predeterminado
  fallbackLocale: 'en',  // Si non atopamos no idioma actual, usamos este
  messages,     // Recursos de tradución
  numberFormats: {
    en: { currency: { style: 'currency', currency: 'USD' } },
    es: { currency: { style: 'currency', currency: 'EUR' } },
    gl: { currency: { style: 'currency', currency: 'EUR' } }
  }
});

const app=createApp(App).use(i18n).mount('#app')

Isto nos proporcionará nas plantillas o método $t(), que se encargará de substituír o texto entre paréntese polo lido do dicionario.

Os Compoñentes Vue

Os frontends construídos en Vue comezan no script main.ts ou main.js coa creación dunha intancia de aplicación mediante a función createApp. Esa aplicación consiste nun compoñente que se incrustará nun elemento do DOM de index.html. Ese compoñente pode facer uso a súa vez de outros compoñentes para conformar o frontend. Aínda que un frontend pode ter varias aplicacións cada unha co seu compoñente raíz, o habitual e ter unha única aplicación.

Un exemplo de compoñente Vue (Vue.js) mínimo que pode ser "incrustado" pode ser este:

<script setup lang="ts">
    const nome="O meu primeiro compoñente Vue";
</script>
<template>  
   Hola Mundo!!! {{ nome }}
</template>
<style scoped>
</style>

O contido do main.js, podería ser o seguinte:

import { createApp } from 'vue'
// import the root component App from a single-file component.
import App from './App.vue'   // Importamos o compoñente

const app = createApp(App) // Creamos a aplicación
app.mount("#app"); // Incrustamos o compoñente Vue no index.html no elemento con id "app"

Como podemos observar no compoñente Vue, se aprecian tres seccións diferentes:

<script setup>

Esta sección contén o código javascript que se levará a cabo cando se "monte" o compoñente na páxina, o que normalmente sucede unha única vez. Os compoñentes poden recibir parámetros dende main.ts ou main.js ou dende outro código javascript dun compoñente.

<template>

Contén a plantilla HTML que producirá a presentación a ser incrustada na páxina, reemplazando a información na plantilla segundo a linguaxe de plantillas de Vue.

<style>

Conten o código CSS para a plantilla indicada en <template> Si especificamos scoped os estilos aquí especificados unicamente serán efectivos para esta plantilla, si non, serán efectivos de xeito global.

Options API

Options API é un dos sistemas de deseño de compoñentes que pode usar Vue. Options API é o "modo tradicional", e consiste en definir a lóxica dun compoñente usando un obxecto javascript con distintos métodos e atributos que cubren o ciclo de vida e funcionalidades do compoñente:

name

Este atributo indica o nome do compoñente.

data()

Este método define o estado reactivo local do compoñente. Retorna un obxecto coas propiedades que desexamos sexan empregados no procesamento da plantilla de xeito reactivo.

created()

Este método se executa cando o compoñente é creado.

mounted()

Este método se executa cando o compoñente é montado no DOM.

updated()

Este método se executa cada vez que é necesario actualizar a plantilla.

destroyed()

Este método se executa cada vez que o compoñente se elimina.

provide() / inject

O método provide() permite compartir datos entre compoñentes "pais" e "fillos". provide() Debe retornar un obxecto onde se especifique como atributos a información a compartir. Esta información pode ser accedida polos fillos mediante o atributo inject, que indicará nun array o conxunto de datos "provided" a utilizar.

props

Este atributo especifica os datos (parámetros) que pode recibir o compoñente cando é "incluído" na web.

computed

Este atributo almacena un obxecto que contén métodos que podemos especificar como atributos na plantilla, deste xeito podemos eliminar a lóxica da plantilla deixandoa máis limpa e fácil de manter.

methods

Este atributo almacena un obxecto que contén métodos que podemos chamar dende a plantilla, principalmente como xestores de eventos. Si queremos, podemos usar para o método o mesmo identificador que o atributo que queremos "recalcular", de xeito que se refrescará cando o valor do atributo cambie.

watch

Este atributo almacena un obxecto que contén métodos que "observan" certas propiedades, executando un método cando se produce un cambio. Debemos identificar o método co mesmo nome que o atributo que queremos vixiar, e recibirá como parámetros o valor futuro e o valor actual.

components

Este atributo almacena un obxecto que contén compoñentes dos que queremos poder facer uso no compoñente actual.

mixins

Este atributo é un array que permite reutilizar funcionalidade para que sexa utilizada en varios compoñentes. Permiten compartir métodos, datos e ciclo de vida entre diferentes compoñentes. En primeiro lugar, se debe crar o "mixin" que consistirá nunha variable que almacene un obxecto coa información a reutilizar. Esa información se poderá utilizar en novos compoñentes especificando os mixin desexados no seu atributo mixins.

directives

Este atributo almacena obxectos que almacena métodos a aplicar a elementos concretos do DOM en unha frase concreta do ciclo de vida do compoñente (hooks). Os elementos que especifiquen v-[metodo] executarán a directiva no hook indicado que pode ser created,beforeMount,mounted,beforeUpdate,updated,beforeUmount e unmounted".

extends

Este atributo permite especificar un compoñente base do que se herdan as funcionalidades. E similar aos mixin, pero indicando un único compoñente.

inheritAttrs

Este atributo booleano controla a herdanza dos atributos. Por defecto os atributos especificados nun compoñente incluído que non son declarados como propiedades, se inclúen como atributos no elemento raíz do template, engadíndose as existentes si é o caso. Especificando false evitamos este comportamento, pero serán accesibles co prefixo "$" Modelo:$attr

emits

Este atributo é un array que conten un conxunto de métodos que "poden ser emitidos" mediante this.$emit. Este evento pode ser capturado co atributo @evento na chamada ao compoñente.

template

Este atributo almacena a plantilla a ser transformada en HTML e incrustada no DOM. Tamén pode indicarse fora do script entre <template> e </template>. A template define o documento a ser incrustado no DOM unha vez procesado coa información producida pola sección <script> e aplicando o estilo especificado na sección <style>. A reactividade garante que si os datos cambian, o template é procesado de novo para xerar unha nova saida.

Composition API

Coa Composition API definimos a lóxica dun compoñente usando funcións da API importadas. Nos SFCs (Single File Components) a Composition API utilízase normalmente con <script setup>. O atributo setup é unha indicación que permite a Vue realizar transformacións en tempo de compilación que nos permiten usar a Composition API con menos código repetitivo. Por exemplo, as importacións e as variables/funcións de nivel superior declaradas en <script setup> son directamente utilizables na plantilla.

Un SFC de Vue, como suxire o nome, encapsula a lóxica do compoñente (JavaScript), a plantilla (HTML) e os estilos (CSS) nun único ficheiro.

<script setup>
import { ref, onMounted } from 'vue'

// reactive state
const count = ref(0)

// functions that mutate state and trigger updates
function increment() {
  count.value++
}

// lifecycle hooks
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>

Ambos os estilos de API son plenamente capaces de cubrir casos de uso comúns. Son interfaces diferentes impulsadas polo mesmo sistema subxacente. De feito, a Options API está implementada sobre a Composition API. Os conceptos fundamentais e o coñecemento sobre Vue son compartidos entre os dous estilos.

Se es novo en Vue, aquí está a nosa recomendación xeral:

Para fins de aprendizaxe, escolla o estilo que lle pareza máis fácil de entender. De novo, a maioría dos conceptos básicos son compartidos entre os dous estilos. Sempre podes aprender o outro estilo máis adiante.

Para uso en produción:

• Escolla a Options API se non está a usar ferramentas de construción, ou se planea usar Vue principalmente en escenarios de baixa complexidade, por exemplo, mellora progresiva.
• Escolla a Composition API + Compoñentes de Ficheiro Único se planea construir aplicacións completas con Vue.

Neste documento utilizaremos principalmente Composition API.

Instalación

Existen varios modos de instalación:

Creación dunha aplicación Vue con Node

Vue proporciona un completo framework baseado en Node.js co que podemos desenvolver unha aplicación, "compilar" as plantillas e conseguir unha versión final de distribución. Para iso se empregan unha serie de utilidades (build tools) que nos axudarán nas distintas fases do proxecto. Unha desas ferramentas é Vite.

Vite é unha ferramenta de desenvolvemento de front-end moderna que se utiliza para a creación de aplicacións web rápidas e eficientes. Foi creada por Evan You, o mesmo creador de Vue.js, aínda que Vite non está limitado só a Vue, xa que tamén soporta outros frameworks como React.

A función de Vite dentro do ecosistema Vue é a "compilación" das plantillas (ES Modules) durante o desenvolvemento e a optimización final para producción.

En primeiro lugar, se debe crear a estrutura da aplicación mediante o uso de xestores de paquetes JavaScript como npm (Node Package Manager) ou yarn (Yet Another Resource Negotiator) entre outros:

npm create vue@latest

Durante a configuración inicial da aplicación o sistema nos preguntará detalles como:

• 'o nome do proxecto
• si imos usar TypeScript
• si queremos JSX (unha extensión para escribir capas de presentacón dentro do JavaScript para crear interfaces demasiado complexas para as plantillas)
• si queremos usar Vue-Router (que nos facilita a creación de SPA a través de rutas para a transición entre compoñentes para presentar o contido solicitado ao servidor)
• si queremos usar Plinia (que nos permite compartir o estado --información-- entre distintos compoñentes da aplicación Vue)
• si queremos usar Vitest (que é un framework para a realización de tests unitarios )
• si queremos engadir un sistema de Testing (nos ofrece Cypress, Nightwatch ou Playwrigth)
• si queremos usar ESLint (analiza problemas de estilo, erros de sintaxe, se xera a configuración para VSCode e podemos utilizalo dende a liña de comandos con npx eslint . ou npx eslint . --fix. Mediante npx podemos executar paquetes instalados con npm sen instalalos no sistema)
• si queremos usar Prettier (formatea o código revisando tabuladores, espazos.. de xeito que quede lexible)
• si queremos usar as extensións de depuración de Vue

Unha vez iniciado o proxecto o sistema nos indicará:

Done. Now run:

  cd "<proxecto>"
  npm install
  npm run dev

• npm install instalará todos os módulos JavaScript necesarios para Vue
• npm run dev lanzará unha instancia do servidor web de Node para probar o noso proxecto. Inicialmente so aceptará conexións en localhost. Para cambiar a configuración deste servidor de desenvolvemento debemos modificar o arquivo vite.config.ts:

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
        host: '0.0.0.0', // Escoitar en todas as interfaces
        port: 8000, // O porto no que se esperan conexións
        strictPort: true, // Opcional: fallará si o porto xa está en uso
    },
})

O esquema do proxecto será similar a este:

<proxecto>/
│
├── index.html            // Archivo HTML principal
├── src/                  // Carpeta de código fuente
│   ├── assets/           // Archivos estáticos (imágenes, etc.)
│   ├── components/       // Componentes de Vue
│   ├── views/            // Vistas de la aplicación
│   ├── App.vue           // Componente raíz
│   └── main.js           // Archivo de entrada de JavaScript
│
├── package.json
└── ...

Co obxectivo de usar rutas correctas a os distintos recursos, se dispón nos compoñentes de Vue do caracter @ para indicar src como raíz. Cando se desenvolva para producción as url se axustarán do xeito necesario. Para crear a aplicación que serviremos mediante un Apache, debemos construila con npm run build e instalar o contido da carpeta build no root do sitio web. Debemos habilitar o módulo rewrite para que funcionen as rutas de Vue.

Unha aplicación básica tería o seguinte aspecto:

• index.htnl

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hola Mundo con Vue 3</title>

</head>
<body> 
    <div id="app"></div> <!-- Elemento donde se montará la aplicación --> 
    <script type="module" src="/src/main.ts"></script> 
    </script>   
</body>
</html>

• /src/App.vue

<script setup>
        import Module from '@/components/Module/Module.vue'
        const nombre="Test para Iass Cloud";
</script>

<template>
        <Module msg="You did it!" />
        {{ nombre }}    Hola Mundo!
</template>

• /src/compoents/Module/Module.vue

<style src="@/components/Module/module.css" scoped></style> <!-- Importar CSS específico del componente -->

<script setup lang="ts">
        defineProps<{msg: string}>()
</script>

<template>
        <h1> {{msg}} It's Work - Has a background icon ?</h1>
</template>

En este contexto, o marcador @ indica nas URL a carpeta /src do proxecto, e se pode usar como inicio de acceso aos recursos dentro de /src

As plantillas en Vue

Vue utiliza unha sintaxe de templates baseada en HTML que che permite ligar de forma declarativa o DOM renderizado cos datos subxacentes da instancia do compoñente. Todos os templates de Vue son sintacticamente HTML válido, que pode ser analizado por navegadores compatibles co estándar e parsers de HTML.

Por debaixo, Vue compila os templates en código JavaScript altamente optimizado. Combinado co sistema de reactividade, Vue pode determinar de maneira intelixente o número mínimo de compoñentes que precisa volver renderizar e aplicar a mínima cantidade de manipulacións no DOM cando cambia o estado da aplicación.

As plantillas Vue se definen nos compoñentes dentro das etiquetas <template>...</template> e dispoñen dunha linguaxe de procesado de plantillas bastante simple e potente que procesará a información procesada na sección <script>:

Interpolación de Texto

A forma máis básica de vinculación de datos é a interpolación de texto utilizando a sintaxe de "mostacho" (dobres chaves):

<template>
  <span>Message: {{ msg }}</span>
</template>

A etiqueta de mostacho será substituída polo valor da propiedade `msg` da instancia do componente correspondente. Ademais, actualizarase cada vez que a propiedade `msg` cambie.

Vinculación de Atributos

As chaves non se poden usar dentro dos atributos HTML. En vez diso, usa a directiva `v-bind`:

<template>
  <div v-bind:id="dynamicId"></div>
</template>

A directiva `v-bind` indica a Vue que mantén o atributo id do elemento sincronizado coa propiedade `dynamicId` do compoñente. Se o valor vinculado é `null` ou `undefined`, o atributo será eliminado do elemento renderizado.

Sintaxe Abreviada Como `v-bind` se usa con moita frecuencia, ten unha sintaxe abreviada dedicada:

<template>
  <div :id="dynamicId"></div>
</template>

HTML Crudo

As dobres chaves interpretan os datos como texto sin formato, non como HTML. Para saír HTML real, necesitas usar a directiva `v-html`:

<template>
  <p>Usando interpolación de texto: {{ rawHtml }}</p>
  <p>Usando a directiva v-html: <span v-html="rawHtml"></span></p>
</template>

Atributos Booleanos

Os atributos booleanos son atributos que poden indicar valores verdadeiros/falsos pola súa presenza nun elemento. Por exemplo, `disabled` é un dos atributos booleanos máis comúns.

`v-bind` funciona dun xeito algo diferente neste caso:

<template>
  <button :disabled="isButtonDisabled">Button</button>
</template>

O atributo `disabled` incluirase se `isButtonDisabled` ten un valor verdadeiro. Tamén se incluirá se o valor é unha cadea de texto vacía, mantendo a coherencia con `<button disabled="">`. Para outros valores falsos, o atributo será omxido.

Vinculación dinámica de múltiples atributos

Se tes un obxecto de JavaScript que representa múltiples atributos e que ten a seguinte estrutura:

const objectOfAttrs = {
  id: 'container',
  class: 'wrapper',
  style: 'background-color:green'
}

Podes vinculalos a un único elemento utilizando `v-bind` sen un argumento:

<div v-bind="objectOfAttrs"></div>

Usando expresións de JavaScript

Até agora, só vinculamos claves de propiedades sinxelas nas nosas plantillas. Pero Vue realmente admite toda a potencia das expresións de JavaScript dentro de todas as vinculaciones de datos:

{{ number + 1 }}

{{ ok ? 'SÍ' : 'NON' }}

{{ message.split('').reverse().join('') }}

<div :id="`list-${id}`"></div>

Estas expresións serán avaliadas como JavaScript no ámbito de datos da actual instancia do componente.

Nas plantillas de Vue, as expresións de JavaScript pódense usar nas seguintes posicións:

- Dentro das interpolacións de texto (mustaches)
- No valor dos atributos de calquera directiva de Vue (atributos especiais que comezan con `v-`)

Chamando funcións

É posible chamar a un método exposto por un componente dentro dunha expresión de vinculación:

<time :title="toTitleDate(date)" :datetime="date">
  {{ formatDate(date) }}
</time>

As funcións chamadas dentro das expresións de vinculación serán executadas cada vez que o componente se actualice, polo que non deben ter efectos secundarios, como cambiar datos ou acender operacións asincrónicas.
As expresións de plantilla están illadas e só teñen acceso a unha lista restrinxida de globais. A lista expón globais incorporados de uso común como Math e Date.

Os globais

que non están incluídos na lista de forma explícita, como as propiedades engadidas polo usuario a window, non serán accesibles nas expresións de plantilla. Con todo, pódese definir explícitamente globais adicionais para todas as expresións de Vue engadíndoas a app.config.globalProperties.

Directivas

As directivas son atributos especiais co prefijo `v-`. Vue proporciona unha serie de directivas incorporadas, incluíndo `v-html` e `v-bind.

Os valores dos atributos das directivas esperan ser expresións de JavaScript únicas (con excepción de `v-for`, `v-on` e `v-slot`). O traballo dunha directiva é aplicar actualizacións de forma reactiva no DOM cando o valor da súa expresión cambia. Tomemos como exemplo `v-if`:

<p v-if="seen">Agora me ves</p>

Neste caso, a directiva `v-if` eliminaría ou inseriría o elemento `

` en función da veracidade do valor da expresión `seen`. Outras directivas son:

• v-on
• v-for
• v-slot