Vue 3

Introdución

Vue (pronunciado /vjuː/, como view) é un framework progresivo para construír interfaces de usuario. A diferenza doutros frameworks monolíticos, Vue está deseñado dende cero para ser utilizado de maneira incremental. 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 de Vue en código JavaScript optimizado que utilizará o navegador para renderizar o contido. Se encarga de convertir as directrices e etiquetas Vue (como v-if, v-for) en funcións JavaScript que manipulan o DOM.

As distribucións de desenvolvemento de Vue inclúen o compilador o que permite escribir as plantillas no HTML ou en ficheiros .vue sepearados sen compilalos previamente. Unha vez rematada a aplicación se "compilan" (build) xerando a aplicación de produción mediante o comando """npm run build"""

As distribucións de produción non precisan o compilador, xa que a aplicación xa estará "compilada" a JavaScript.

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

Un exemplo de main.ts sería o seguinte:

// Usamos bootstrap para os estilos a nivel global. Se carga de node_modules
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

import App from '@/App.vue';   // En esta plantilla reside a páxina principal da aplicación. @ representa a carpeta src da instalación de Vue.
import { createApp } from 'vue';
import { createI18n } from 'vue-i18n';  // Importamos o sistema de internacionalización

// Cargamos as cadeas de localización de texto da aplicación
import en from '@/locales/en.json';
import es from '@/locales/es.json';
import gl from '@/locales/gl.json';

// Dispoñemos destes tres idiomas
const messages={ en, es, gl };

// Tomamos como linguaxe inicial o do naegador ou galego 
const userLocale = navigator.language || 'gl';

// Crear a instancia de i18n e definindo o idioma predeterminado
const i18n = createI18n({
  locale: userLocale, // Idioma predeterminado
  fallbackLocale: 'en', // Si non temos mensaxe traducida, usamos a do diccionario en inglés.
  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);  // Creamos a aplicación usando App.vue que importamos ao inicio
app.use(i18n);             // Imos usar internacionalización
app.mount('#app')          // "Montamos" o compoñente definido por App.vue no id #app do index.html

Ese código cargará os JSON definindo as traducións das cadeas de texto do programa en formato JSON ({"cadea de texto":"tradución",....}), cargará o compoñente Vue ""App.vue"" e o presentará dentro do elemento con id "app" no index.html da aplciación.

Un exemplo de compoñente Vue mínimo pode ser este:

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

Vue pode utilizar dous tipos de API diferentes no deseño dos compoñentes:

Options API

Coa Options API, definimos a lóxica dun compoñente usando un obxecto de opcións, como data, methods e mounted. As propiedades definidas polas opcións están dispoñibles en this dentro das funcións, que apunta á instancia do compoñente:

<script>
export default {
  // Properties returned from data() become reactive state
  // and will be exposed on `this`.
  data() {
    return {
      count: 0
    }
  },

  // Methods are functions that mutate state and trigger updates.
  // They can be bound as event handlers in templates.
  methods: {
    increment() {
      this.count++
    }
  },

  // Lifecycle hooks are called at different stages
  // of a component's lifecycle.
  // This function will be called when the component is mounted.
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  }
}
</script>

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

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.

Na maioría dos proxectos de Vue habilitados para ferramentas de construción, autoramos compoñentes de Vue utilizando un formato de ficheiro semellante ao HTML chamado Compoñente de Ficheiro Único (tamén coñecido como ficheiros *.vue, abreviado como SFC). 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:

Inclusión Direta con <script>

Simplemente se debe descargar e incluír a etiqueta script coa ruta correcta, ou utilizar un CDN. Por exemplo: <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>. Vue tamén está dispoñible nos CDN unpkg e cdnjs.

As distribucións de Vue teñen a forma vue(.runtime).global(.prod).js, donde "runtime" conten únicamente o JavaScript necesario para executar as plantillas xa "compiladas" a JavaScript, mentres que as outras inclúen o compilador necesario para a "compilación" das plnatillas .vue.

Para o uso de módulos ES nativos e de xeito similar, a compilación de Vue a usar ten a forma vue(.runtime).esm-browser(.prod).js.

Si usamos empaquetadores como webpack, rollup ou parcel, temos as versións vue(.runtime).esm-bundler.js

As versións de produción inclúen prod;

Existen distintas compilacións de Vue:

• Global Build: Na Global Build odas as APIs de nivel superior están expostas como propiedades no obxecto global Vue.

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">
<button @click="counter++"  id="app">{{ message }} {{ counter }}</button>
</div>

<script>
  const { createApp, ref } = Vue

  createApp({
    setup() {
      const message = ref('Hello vue!');
      const counter = ref(0);
      return {
        message, counter
      }
    }
  }).mount('#app')
</script>

• ES Module Build: E o formato preferido para as aplicacións Vue, Utiliza módulos ECMAScript (ESM). Este enfoque permite importar Vue e outros módulos de forma máis flexible e organizada, facilitando a xestión de dependencias e a estrutura do código. Os ES Modules son compatibles co estándar moderno de JavaScript, e permiten realizar importacións e exportacións explícitas entre diferentes ficheiros. Usa a sintaxe de importación (import Vue from 'vue';), permitindo unha organización máis clara do código e un mellor control das dependencias.

<button @click="counter++" id="app">{{ message }} {{counter}}</button>

<script type="module">
  import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

  createApp({
    setup() {
      const message = ref('Hello Vue!');
      const counter = ref(0)
      return {
        message, counter
      }
    }
  }).mount('#app')
</script>

Na demostración anterior, estamos importando desde a URL completa do CDN, pero no resto da documentación verás código como este:

import { createApp } from 'vue'

Podemos ensinar ao navegador onde localizar a importación de Vue utilizando *Import Maps*:

<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp, ref } from 'vue'

  createApp({
    setup() {
      const message = ref('Hello Vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

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-`)

Só expresións

Cada vinculación só pode conter unha única expresión. Unha expresión é un fragmento de código que pode ser avaliado a un valor. Unha comprobación sinxela é se pode ser usado despois de `return`.

Por tanto, o seguinte NON funcionará:

<!-- isto é unha declaración, non unha expresión: -->
{{ var a = 1 }}

<!-- o control de fluxo tampouco funcionará, usa expresións ternarias -->
{{ if (ok) { return message } }}