Manual de Vue 3 Actualizada

Vue router 4
1. Lo primero que vamos hacer es instalar la librería de vue router 4 si es para vue
3 usamos la versión 4 hacia arriba npm i vue-router@4
2.
3. Primero vamos a configurar el archivo de rutas en un archivo independiente

4.
5.
6. Ahora vamos a configurar la librería en el archivo main.js

7.
8. Después debemos implementar el router-view en el componente padre que va a

renderizar las vistas
9.
10. Por último, usamos el router-link en la etiqueta que queramos enlazar a las rutas
11.
Video de apoyo para el vue router 4

https://www.youtube.com/watch?
v=7bDSmXupRa0&list=PLoPLMv5SQiRRExdbEcUU8oLJcop9tMu5A&index=10&t=107
2s
Pinia
Pinia
 Pinia web oficial(opens new window)
 Pinia es una biblioteca de tiendas para Vue, le permite compartir un estado entre
componentes/páginas.
 Aunque Pinia es lo suficientemente bueno para reemplazar a Vuex, reemplazar a Vuex no
era su objetivo. Pero luego se volvió tan bueno que el equipo central de Vue.js decidió
convertirlo en Vuex 5.
 vuex vs pinia
Instalación
npm install pinia
En el archivo main.js configuramos pinia para poder usarlo

en toda la app
STATE
Creamos una carpeta llamada stores y dentro creamos un
archivo llamado user.js
stores/user.js
import { defineStore } from "pinia";
export const useUserStore = defineStore("user", {

state: () => ({
userData: "Alex",
}),
});
Después podemos llamar este estado en cualquier componente

Haciendo la siguiente importación
Import {useUserStore} from “../stores/user.js/

Y creamos una variable que contenga esta importación
const userStore = useUserStore()
y después Podemos usar userStore en el template para llevar

cualquier estado
Home.vue
<template>
<h1>Home {{ userStore.userData }}</h1>
</template>
<script setup>
import { useUserStore } from "../stores/user";
const userStore = useUserStore();
</script>
Login.vue
<template>
<h1>Login</h1>
<h2>{{ pasarMayuscula }}</h2>
</template>
<script setup>
import { computed } from "vue";
import { useUserStore } from "../stores/user";
const userStore = useUserStore();

const pasarMayuscula = computed(() => userStore.userData.toUpperCase());
</script>
GETTER
 Los captadores son solo propiedades computadas detrás de escena, por lo que no es
posible pasarles ningún parámetro. Sin embargo, puede devolver una función del getter
para aceptar cualquier argumento: más info aquí
 import { defineStore } from "pinia";


 export const useUserStore = defineStore("user", {
 state: () => ({
 userData: "bluuweb",
 }),
 getters: {
 userMayuscula(state) {
 return
state.userData.toUpp erCase();
 },
 },
});
LINK DE APOYO
Pinia + Vite + Firebase 9 | Vue Udemy (bluuweb.github.io) --

https://bluuweb.github.io/vue-udemy/26-pinia/#login
Quasar
Página oficial https://quasar.dev/start/vite-plugin
1. Lo primero que vamos hacer es reconocer que el proyecto sea
creado con vite
2. Después hacemos la instalación de quasar con los siguientes
comandos
3. npm install quasar @quasar/extras

4. $ npm install -D @quasar/vite-plugin sass@1.32.12
3. En el archivo main.js del Proyecto configuramos quasar
4. Después configuramos el archivo vite.config.js como lo muestra la

siguiente imagen
5. Y por último creamos el archivo quasar-variables.sass en la carpeta
src
Firebase
1. Lo primero que haremos es iniciar sesión con el correo Gmail en
firebase y después presionamos el botón “ir a consola” que esta la
parte superior derecha
2. Le damos click en agregar proyecto

3. Le ponemos nombre al nuevo proyecto preferiblemente sin espacios
y presionamos en continuar
4. Después presionamos en continuar y dejamos deshabilitado el

Google Analitics
5. Esperamos a que el proyecto cargue al 100% y presionamos en

continuar
6. Despues hacemos click en web
7. Después le damos el nombre de la app a registrar y presionamos el

botón registrar app
Instalación de firebase al proyecto
Página de documentación de Ignacio bluuweb
https://bluuweb.github.io/vue-udemy/26-pinia/#codigos
1. Lo primero que haremos en visual studio code es ir al proyecto e

instalar firebase a través del comando npm install firebase
2. Después configuraremos el archivo firebseConfig.js con el código
que nos arrojó el firebase
3. Y después le damos click al botón de “ir a la consola” y nos va
aparecer esta pagina
4. En la parte izquierda hay un menú donde daremos click en

compilación y se desplegarán varias opciones, donde vamos a
clickear la opción de Authentication y aparece los siguiente
5. Presionamos en el botón de comenzar para usar el servicio de
autenticación de firebase y aparece la siguiente imagen
6. Le damos click al primer método de acceso con el cual vamos a

trabajar por ahora llamado “Correo electrónico/contraseña”
7. Después habilitamos la primera opción y click en guardar

8. Finalmente nos queda habilitado el servicio
Codificación para usar la creación de usuario y el login del servicio de

authentication de firebase
1. En la carpeta store debemos tener un alamacen llamado user.js
donde vamos a importar las diferentes funciones propias de firebase
para usar el authentication
2. En los actions del archivo user.js crearemos una función que nos
permita conectar con los usuarios creados en firebase y hacer el
login
3. Ahora llevamos la función al componente que va a utilizar la función

login creada en el store
4. <template>
5. <div>
6. <h1>{{ userStore.user?.email }}</h1>
7. <div id="container">
8. <label for="">Usuario</label>
9. <q-input outlined style="border-color:
#1976D2;" v-model="user" class="q-mb-md inp" />
10. <label for="">Clave</label>
11. <q-input outlined style="color:
#1976D2;" v-model="pass" class="q-mb-md" />
12. 
13. <q-btn :loading="userStore.loading"
color="red" @click="login()">
14. Button
15. <template v-slot:loading>
16. <q-spinner-hourglass
color="purple" />
17. </template>
18. </q-btn>
19. </div>
20.
21. </div>
22. </template>
23.
24. <script setup>
25. import { ref } from "vue"
26. import { useUserStore } from "../store/user.js"
27. let user = ref("")
28. let pass = ref("")
29. const userStore = useUserStore()
30.
31. async function login(){
32. await userStore.login(user.value,
pass.value)
33. }
34.
35. </script>

Manual de Vue 3 Actualizada

Cargado por

Copyright:

Formatos disponibles

Manual de Vue 3 Actualizada

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Manual de Vue 3 Actualizada

Cargado por

Copyright:

Formatos disponibles

Vue router 4

3. Primero vamos a configurar el archivo de rutas en un archivo independiente

6. Ahora vamos a configurar la librería en el archivo main.js

8. Después debemos implementar el router-view en el componente padre que va a

Video de apoyo para el vue router 4

En el archivo main.js configuramos pinia para poder usarlo

export const useUserStore = defineStore("user", {

Después podemos llamar este estado en cualquier componente

Import {useUserStore} from “../stores/user.js/

const userStore = useUserStore()

y después Podemos usar userStore en el template para llevar

const userStore = useUserStore();

 import { defineStore } from "pinia";

Pinia + Vite + Firebase 9 | Vue Udemy (bluuweb.github.io) --

3. npm install quasar @quasar/extras

3. En el archivo main.js del Proyecto configuramos quasar

4. Después configuramos el archivo vite.config.js como lo muestra la

2. Le damos click en agregar proyecto

4. Después presionamos en continuar y dejamos deshabilitado el

5. Esperamos a que el proyecto cargue al 100% y presionamos en

7. Después le damos el nombre de la app a registrar y presionamos el

1. Lo primero que haremos en visual studio code es ir al proyecto e

4. En la parte izquierda hay un menú donde daremos click en

6. Le damos click al primer método de acceso con el cual vamos a

7. Después habilitamos la primera opción y click en guardar

Codificación para usar la creación de usuario y el login del servicio de

3. Ahora llevamos la función al componente que va a utilizar la función

También podría gustarte