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

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 descargarán todos os arquivos necesarios para o desenvolvemento e creación da versión de distribución do 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

E xa podemos probalo mediante npm run dev, que compilará os compoñentes e lanzará un servidor web para testing. 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
    },
})
</syntaxhighlight">


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:

<syntaxhighlight lang="html">
// 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-`)

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