├── 1-instalacion-data-binding ├── index.html └── js │ └── main.js ├── 10-transiciones ├── index.html └── main.js ├── 11-ajax-vue-resource ├── index.html └── js │ └── main.js ├── 12-ajax-axios ├── index.html └── js │ └── main.js ├── 13-components-intro ├── index.html └── js │ └── main.js ├── 14-components-templates ├── index.html └── js │ └── main.js ├── 15-components-props ├── index.html └── js │ └── main.js ├── 16-prop-validation ├── index.html └── js │ └── main.js ├── 17-slots-named-slots ├── css │ └── main.css ├── index.html └── js │ └── main.js ├── 18-scoped-slots ├── css │ └── main.css ├── index.html └── js │ └── main.js ├── 19-custom-events ├── css │ └── main.css ├── index.html └── js │ └── main.js ├── 2-directivas-incluidas ├── index.html └── js │ └── main.js ├── 20-component-communication ├── css │ └── main.css ├── index.html └── js │ └── main.js ├── 21-components-inside-components ├── index.html └── js │ └── main.js ├── 22-dynamic-components ├── index.html └── js │ └── main.js ├── 23-custom-input-components ├── index.html └── js │ └── main.js ├── 24-ejercicio-components ├── finalizado │ ├── css │ │ └── main.css │ ├── index.html │ └── js │ │ └── main.js └── inicio │ ├── css │ └── main.css │ ├── index.html │ └── js │ └── main.js ├── 25-vue-cli ├── .babelrc ├── README.md ├── index.html ├── package.json ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ └── main.js └── webpack.config.js ├── 26-single-file-components ├── .babelrc ├── README.md ├── index.html ├── package.json ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ └── Persona.vue │ └── main.js └── webpack.config.js ├── 27-render-function ├── .babelrc ├── README.md ├── index.html ├── package.json ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ └── Elemento.vue │ └── main.js └── webpack.config.js ├── 28-hot-reloading ├── .babelrc ├── README.md ├── index.html ├── package.json ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ └── Tareas.vue │ └── main.js └── webpack.config.js ├── 29-scoped-css ├── .babelrc ├── README.md ├── index.html ├── package.json ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ └── Tareas.vue │ └── main.js └── webpack.config.js ├── 3-renderizado-de-listas ├── index.html └── js │ └── main.js ├── 30-css-modules ├── .babelrc ├── README.md ├── index.html ├── package.json ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ └── main.js └── webpack.config.js ├── 31-shared-state ├── index.html └── js │ └── main.js ├── 32-vuex-central-store ├── .babelrc ├── README.md ├── index.html ├── package.json ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ └── Contador.vue │ ├── main.js │ └── store │ │ └── store.js └── webpack.config.js ├── 33-vuex-state ├── .babelrc ├── README.md ├── index.html ├── package.json ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── main.js │ └── store │ │ └── store.js └── webpack.config.js ├── 34-vuex-getters ├── .babelrc ├── README.md ├── index.html ├── package.json ├── src │ ├── Tareas.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ └── TareasRestantes.vue │ ├── main.js │ └── store │ │ └── store.js └── webpack.config.js ├── 35-vuex-mutations ├── .babelrc ├── README.md ├── index.html ├── package.json ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ └── Contador.vue │ ├── main.js │ └── store │ │ └── store.js └── webpack.config.js ├── 36-vuex-actions ├── .babelrc ├── README.md ├── index.html ├── package.json ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ └── Contador.vue │ ├── main.js │ └── store │ │ └── store.js └── webpack.config.js ├── 37-vuex-modules ├── .babelrc ├── README.md ├── index.html ├── package.json ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ ├── Carro.vue │ │ └── Productos.vue │ ├── main.js │ └── store │ │ ├── modules │ │ └── productos.js │ │ └── store.js └── webpack.config.js ├── 38-vuex-structure ├── .babelrc ├── README.md ├── index.html ├── package.json ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ ├── Carro.vue │ │ └── Productos.vue │ ├── main.js │ └── store │ │ ├── getters.js │ │ ├── modules │ │ └── productos.js │ │ ├── mutations.js │ │ └── store.js └── webpack.config.js ├── 4-vue-devtools ├── index.html └── js │ └── main.js ├── 40-vue-router-intro ├── index.html └── js │ └── main.js ├── 41-vue-router-components ├── .babelrc ├── README.md ├── index.html ├── package.json ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ ├── Contacto.vue │ │ └── Home.vue │ ├── main.js │ └── routes.js └── webpack.config.js ├── 42-vue-router-active-links ├── .babelrc ├── README.md ├── index.html ├── package.json ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ ├── Contacto.vue │ │ └── Home.vue │ ├── main.js │ └── routes.js └── webpack.config.js ├── 43-vue-programmatic-nav ├── .babelrc ├── README.md ├── index.html ├── package.json ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ ├── Contacto.vue │ │ └── Home.vue │ ├── main.js │ └── routes.js └── webpack.config.js ├── 44-vue-router-dynamic-routes ├── .babelrc ├── README.md ├── index.html ├── package.json ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ ├── Contacto.vue │ │ ├── Home.vue │ │ └── Usuario.vue │ ├── main.js │ └── routes.js └── webpack.config.js ├── 45-vue-router-reacting ├── .babelrc ├── README.md ├── index.html ├── package.json ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ ├── Contacto.vue │ │ ├── Home.vue │ │ └── Usuario.vue │ ├── main.js │ └── routes.js └── webpack.config.js ├── 46-vue-router-nested-routes ├── .babelrc ├── README.md ├── index.html ├── package.json ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ ├── Equipo.vue │ │ ├── EquipoJuan.vue │ │ └── Home.vue │ ├── main.js │ └── routes.js └── webpack.config.js ├── 47-vue-router-nested-nav ├── .babelrc ├── README.md ├── index.html ├── package.json ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ ├── Equipo.vue │ │ ├── Home.vue │ │ ├── Usuario.vue │ │ ├── UsuarioBio.vue │ │ └── UsuarioFotos.vue │ ├── main.js │ └── routes.js └── webpack.config.js ├── 48-vue-router-named-routes ├── .babelrc ├── README.md ├── index.html ├── package.json ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ ├── Equipo.vue │ │ ├── Home.vue │ │ ├── Usuario.vue │ │ ├── UsuarioBio.vue │ │ └── UsuarioFotos.vue │ ├── main.js │ └── routes.js └── webpack.config.js ├── 49-vue-router-named-views ├── .babelrc ├── README.md ├── index.html ├── package.json ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ ├── Equipo.vue │ │ ├── Home.vue │ │ ├── Usuario.vue │ │ ├── UsuarioBio.vue │ │ └── UsuarioFotos.vue │ ├── main.js │ └── routes.js └── webpack.config.js ├── 5-eventos ├── index.html └── js │ └── main.js ├── 50-vue-router-redirect ├── .babelrc ├── README.md ├── index.html ├── package.json ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ ├── Equipo.vue │ │ ├── Home.vue │ │ ├── Usuario.vue │ │ ├── UsuarioBio.vue │ │ └── UsuarioFotos.vue │ ├── main.js │ └── routes.js └── webpack.config.js ├── 51-vue-router-passing-props ├── .babelrc ├── README.md ├── index.html ├── package.json ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ ├── Contacto.vue │ │ ├── Equipo.vue │ │ ├── Home.vue │ │ ├── Usuario.vue │ │ ├── UsuarioBio.vue │ │ └── UsuarioFotos.vue │ ├── main.js │ └── routes.js └── webpack.config.js ├── 52-vue-router-history-mode ├── .babelrc ├── README.md ├── index.html ├── package.json ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ ├── Contacto.vue │ │ ├── Equipo.vue │ │ ├── Home.vue │ │ ├── NoEncontrado.vue │ │ ├── Usuario.vue │ │ ├── UsuarioBio.vue │ │ └── UsuarioFotos.vue │ ├── main.js │ └── routes.js └── webpack.config.js ├── 53-vue-router-global-guard ├── .babelrc ├── README.md ├── index.html ├── package.json ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ ├── Contacto.vue │ │ ├── Equipo.vue │ │ ├── Home.vue │ │ ├── NoEncontrado.vue │ │ ├── Usuario.vue │ │ ├── UsuarioBio.vue │ │ └── UsuarioFotos.vue │ ├── main.js │ ├── routes.js │ └── store.js └── webpack.config.js ├── 54-vue-router-route-guard ├── .babelrc ├── README.md ├── index.html ├── package.json ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ ├── Contacto.vue │ │ ├── Equipo.vue │ │ ├── Home.vue │ │ ├── NoEncontrado.vue │ │ ├── Usuario.vue │ │ ├── UsuarioBio.vue │ │ └── UsuarioFotos.vue │ ├── main.js │ ├── routes.js │ └── store.js └── webpack.config.js ├── 55-vue-router-component-guard ├── .babelrc ├── README.md ├── index.html ├── package.json ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ ├── Contacto.vue │ │ ├── Equipo.vue │ │ ├── Home.vue │ │ ├── NoEncontrado.vue │ │ ├── Usuario.vue │ │ ├── UsuarioBio.vue │ │ └── UsuarioFotos.vue │ ├── main.js │ ├── routes.js │ └── store.js └── webpack.config.js ├── 56-vue-router-meta-field ├── .babelrc ├── README.md ├── index.html ├── package.json ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ ├── Contacto.vue │ │ ├── Equipo.vue │ │ ├── Home.vue │ │ ├── NoEncontrado.vue │ │ ├── Usuario.vue │ │ ├── UsuarioBio.vue │ │ └── UsuarioFotos.vue │ ├── main.js │ ├── routes.js │ └── store.js └── webpack.config.js ├── 57-vue-router-transitions ├── .babelrc ├── README.md ├── index.html ├── package.json ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ ├── Contacto.vue │ │ ├── Equipo.vue │ │ ├── Home.vue │ │ ├── NoEncontrado.vue │ │ ├── Usuario.vue │ │ ├── UsuarioBio.vue │ │ └── UsuarioFotos.vue │ ├── main.js │ ├── routes.js │ └── store.js └── webpack.config.js ├── 58-vue-router-data-fetch ├── .babelrc ├── README.md ├── index.html ├── package.json ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ ├── Contacto.vue │ │ ├── Equipo.vue │ │ ├── Home.vue │ │ ├── NoEncontrado.vue │ │ ├── Usuario.vue │ │ ├── UsuarioBio.vue │ │ └── UsuarioFotos.vue │ ├── main.js │ ├── routes.js │ └── store.js └── webpack.config.js ├── 59-vue-router-srcoll ├── .babelrc ├── README.md ├── index.html ├── package.json ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ ├── Bio.vue │ │ └── Info.vue │ └── main.js └── webpack.config.js ├── 6-propiedades-computadas ├── index.html └── js │ └── main.js ├── 60-vue-router-lazy-load ├── .babelrc ├── README.md ├── index.html ├── package.json ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ ├── Bio.vue │ │ └── Info.vue │ └── main.js └── webpack.config.js ├── 61-vue-directive-hooks ├── index.html └── js │ └── main.js ├── 62-vue-directive-object-literals ├── index.html └── js │ └── main.js ├── 64-mixins-intro ├── .babelrc ├── README.md ├── index.html ├── package.json ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── main.js │ └── mixins.js └── webpack.config.js ├── 65-mixins-merge ├── .babelrc ├── README.md ├── index.html ├── package.json ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── main.js │ └── mixins.js └── webpack.config.js ├── 66-global-mixins ├── .babelrc ├── README.md ├── index.html ├── package.json ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── main.js │ └── mixins.js └── webpack.config.js ├── 67-vue-filters ├── .babelrc ├── README.md ├── index.html ├── package.json ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ └── main.js └── webpack.config.js ├── 68-form-input-basic └── index.html ├── 69-form-value-bindings └── index.html ├── 7-filtros ├── index.html └── js │ └── main.js ├── 70-form-input-modifiers └── index.html ├── 71-firebase-agregar └── index.html ├── 72-firebase-leer └── index.html ├── 73-firebase-actualizar └── index.html ├── 74-firebase-eliminar └── index.html ├── 75-firebase-transactions └── index.html ├── 76-firebase-push-agregar └── index.html ├── 77-firebase-listas-eventos └── index.html ├── 78-firebase-ordenar └── index.html ├── 79-firebase-filtrar └── index.html ├── 8-instancia-vue ├── index.html └── js │ └── main.js ├── 9-data-binding-atributos-clases ├── index.html └── js │ └── main.js └── README.md /1-instalacion-data-binding/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Vue.js 7 | 8 | 9 | 10 | 11 | 12 |
13 |

{{ mensaje }}

14 | 15 | 
{{ $data }}
16 |
17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /1-instalacion-data-binding/js/main.js: -------------------------------------------------------------------------------- 1 | // Vanilla JavaScript 2 | // const input = document.querySelector('input'); 3 | // const h1 = document.querySelector('h1'); 4 | // input.addEventListener('keyup', () => h1.innerHTML = input.value); 5 | 6 | // Vue.js 7 | new Vue({ 8 | el: 'main', 9 | data: { 10 | mensaje: 'Hola mundo!', 11 | } 12 | }); -------------------------------------------------------------------------------- /10-transiciones/main.js: -------------------------------------------------------------------------------- 1 | new Vue({ 2 | el: 'main', 3 | data: { 4 | mostrar: true, 5 | mensajes: { 6 | transicion: 'Transiciones CSS con Vue.js', 7 | animacion: 'Animaciones CSS con Vue.js', 8 | animationCustom: 'Animaciones custom CSS con Vue.js', 9 | entreElementos: 'Transiciones entre elementos con Vue.js' 10 | } 11 | }, 12 | }); -------------------------------------------------------------------------------- /11-ajax-vue-resource/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vue.js 8 | 9 | 10 | 11 | 12 | 13 |
14 | 18 | 
{{ $data }}
19 |
20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /11-ajax-vue-resource/js/main.js: -------------------------------------------------------------------------------- 1 | new Vue({ 2 | el: 'main', 3 | mounted() { 4 | this.cargarPersonas(); 5 | }, 6 | data: { 7 | personas: [] 8 | }, 9 | methods: { 10 | cargarPersonas() { 11 | this.$http.get('https://randomuser.me/api/?results=500') 12 | .then((respuesta) => { 13 | this.personas = respuesta.body.results; 14 | }); 15 | } 16 | } 17 | }); -------------------------------------------------------------------------------- /12-ajax-axios/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vue.js 8 | 9 | 10 | 11 | 12 | 13 |
14 | 18 | 
{{ $data }}
19 |
20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /12-ajax-axios/js/main.js: -------------------------------------------------------------------------------- 1 | Vue.prototype.$http = axios; 2 | 3 | new Vue({ 4 | el: 'main', 5 | mounted() { 6 | this.cargarPersonas(); 7 | }, 8 | data: { 9 | personas: [] 10 | }, 11 | methods: { 12 | cargarPersonas() { 13 | this.$http.get('https://randomuser.me/api/?results=500') 14 | .then((respuesta) => { 15 | this.personas = respuesta.data.results; 16 | }); 17 | // axios.get('https://randomuser.me/api/?results=500') 18 | // .then((respuesta) => { 19 | // this.personas = respuesta.data.results; 20 | // }); 21 | } 22 | } 23 | }); -------------------------------------------------------------------------------- /13-components-intro/js/main.js: -------------------------------------------------------------------------------- 1 | Vue.component('mis-tareas', { 2 | template: ``, 3 | mounted() { 4 | axios.get('https://jsonplaceholder.typicode.com/todos') 5 | .then((respuesta) => { 6 | this.tareas = respuesta.data; 7 | }); 8 | }, 9 | data() { 10 | return { 11 | tareas: [], 12 | } 13 | } 14 | }); 15 | 16 | new Vue({ 17 | el: 'main', 18 | }); -------------------------------------------------------------------------------- /15-components-props/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vue.js 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 
{{ $data }}
16 |
17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /15-components-props/js/main.js: -------------------------------------------------------------------------------- 1 | Vue.component('autor', { 2 | props: ['nombre', 'edad'], 3 | mounted() { 4 | // Las props son accesibles desde this (proxy) 5 | //console.log(this.nombre); 6 | console.log(typeof this.edad); 7 | }, 8 | template: `

{{ nombre }}

`, 9 | methods: { 10 | cambiarProp() { 11 | this.nombre = this.nombre.toUpperCase(); 12 | } 13 | } 14 | }); 15 | 16 | new Vue({ 17 | el: 'main', 18 | data: { 19 | autor: 'Juan Andrés', 20 | }, 21 | }); -------------------------------------------------------------------------------- /17-slots-named-slots/js/main.js: -------------------------------------------------------------------------------- 1 | Vue.component('alerta', { 2 | props: ['tipo', 'posicion'], 3 | template: ` 4 |
5 |
6 | Hola 7 |
8 |
9 | 10 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dictum dui justo, at molestie orci dapibus 11 | vitae. 12 | 13 |
14 | 17 |
`, 18 | }); 19 | 20 | new Vue({ 21 | el: 'main', 22 | }); -------------------------------------------------------------------------------- /18-scoped-slots/js/main.js: -------------------------------------------------------------------------------- 1 | Vue.component('mis-tareas', { 2 | props: ['listado'], 3 | template: '#mis-tareas-template' 4 | }); 5 | 6 | new Vue({ 7 | el: 'main', 8 | data: { 9 | tareas: [ 10 | { titulo: 'Salir a correr'}, 11 | { titulo: 'Recoger la casa'}, 12 | { titulo: 'Aprender Vue.js'}, 13 | { titulo: 'Ir al gimnasio'}, 14 | { titulo: 'Leer cada día'}, 15 | ] 16 | } 17 | }); -------------------------------------------------------------------------------- /2-directivas-incluidas/js/main.js: -------------------------------------------------------------------------------- 1 | const vm = new Vue({ 2 | el: 'main', 3 | data: { 4 | conectado: false, 5 | edad: 44, 6 | }, 7 | }); -------------------------------------------------------------------------------- /20-component-communication/css/main.css: -------------------------------------------------------------------------------- 1 | html { 2 | box-sizing: border-box; 3 | } 4 | *, *:before, *:after { 5 | box-sizing: inherit; 6 | } 7 | 8 | html, body { 9 | width: 100%; 10 | height: 100%; 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | } 15 | 16 | main { 17 | display: flex; 18 | flex-wrap: wrap; 19 | width: 700px; 20 | justify-content: space-between; 21 | align-items: center; 22 | } 23 | 24 | hr, pre { 25 | flex-basis: 100%; 26 | } -------------------------------------------------------------------------------- /20-component-communication/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Vue.js 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 |
17 | 
{{ $data }}
18 |
19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /21-components-inside-components/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Vue.js 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | Tareas que necesito finalizar ya! 15 | 16 | 
{{ $data }}
17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /21-components-inside-components/js/main.js: -------------------------------------------------------------------------------- 1 | Vue.component('lista-tareas', { 2 | props: ['tareas'], 3 | template: `
4 |

5 | 8 |
`, 9 | }); 10 | 11 | Vue.component('tarea', { 12 | props: ['tarea'], 13 | template: `
  • {{ tarea }}
    • ` 14 | }); 15 | 16 | new Vue({ 17 | el: 'main', 18 | data: { 19 | tareas: [ 20 | 'Finalizar sección Componentes', 21 | 'Iniciar workflow con Vue CLI y Webpack', 22 | 'Terminar de estudiar la documentación de Vuex', 23 | 'Seguir jugando con Vue Router y grabar el primer vídeo', 24 | ] 25 | } 26 | }); -------------------------------------------------------------------------------- /22-dynamic-components/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Vue.js 7 | 8 | 9 | 10 | 11 | 12 |
    13 | 14 | 15 | 16 | 17 | 18 | 19 | 22 | 
    {{ $data }}
    23 |
    24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /23-custom-input-components/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Vue.js 7 | 8 | 9 | 10 | 11 | 12 |
    13 | 14 | 15 | 16 | 
    {{ $data }}
    17 |
    18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /23-custom-input-components/js/main.js: -------------------------------------------------------------------------------- 1 | Vue.component('contrasena', { 2 | props: ['contrasena'], 3 | template: ``, 4 | methods: { 5 | comprobarContrasena(contrasena) { 6 | if (this.noValidas.includes(contrasena)) { 7 | this.$refs.pass.value = contrasena = ''; 8 | } 9 | this.$emit('input', contrasena); 10 | } 11 | }, 12 | data() { 13 | return { 14 | noValidas: ['abc', 'admin', '123456', 'root'], 15 | } 16 | } 17 | }); 18 | 19 | new Vue({ 20 | el: 'main', 21 | data: { 22 | contrasena: 'es3Es653!*&__', 23 | }, 24 | }); -------------------------------------------------------------------------------- /25-vue-cli/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["es2015", { "modules": false }] 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /25-vue-cli/README.md: -------------------------------------------------------------------------------- 1 | # 25-vue-cli 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | ``` 17 | 18 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader). 19 | -------------------------------------------------------------------------------- /25-vue-cli/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 25-vue-cli 6 | 7 | 8 |
    9 | 10 |
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /25-vue-cli/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "25-vue-cli", 3 | "description": "A Vue.js project", 4 | "version": "1.0.0", 5 | "author": "@juanwmedia ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 9 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 10 | }, 11 | "dependencies": { 12 | "vue": "^2.1.0" 13 | }, 14 | "devDependencies": { 15 | "babel-core": "^6.0.0", 16 | "babel-loader": "^6.0.0", 17 | "babel-preset-es2015": "^6.0.0", 18 | "cross-env": "^3.0.0", 19 | "css-loader": "^0.25.0", 20 | "file-loader": "^0.9.0", 21 | "vue-loader": "^10.0.0", 22 | "vue-template-compiler": "^2.1.0", 23 | "webpack": "^2.2.0", 24 | "webpack-dev-server": "^2.2.0" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /25-vue-cli/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juanwmedia/vue-firebase/f72f17a4943479bb32db9071b6057d78f0a1b3b5/25-vue-cli/src/assets/logo.png -------------------------------------------------------------------------------- /25-vue-cli/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | new Vue({ 5 | el: '#app', 6 | render: h => h(App) 7 | }) 8 | -------------------------------------------------------------------------------- /26-single-file-components/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["es2015", { "modules": false }] 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /26-single-file-components/README.md: -------------------------------------------------------------------------------- 1 | # 26-single-file-components 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | ``` 17 | 18 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader). 19 | -------------------------------------------------------------------------------- /26-single-file-components/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 26-single-file-components 6 | 7 | 8 |
    9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /26-single-file-components/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "26-single-file-components", 3 | "description": "A Vue.js project", 4 | "version": "1.0.0", 5 | "author": "@juanwmedia ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 9 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 10 | }, 11 | "dependencies": { 12 | "axios": "^0.15.3", 13 | "vue": "^2.1.0" 14 | }, 15 | "devDependencies": { 16 | "babel-core": "^6.0.0", 17 | "babel-loader": "^6.0.0", 18 | "babel-preset-es2015": "^6.0.0", 19 | "cross-env": "^3.0.0", 20 | "css-loader": "^0.25.0", 21 | "file-loader": "^0.9.0", 22 | "vue-loader": "^10.0.0", 23 | "vue-template-compiler": "^2.1.0", 24 | "webpack": "^2.2.0", 25 | "webpack-dev-server": "^2.2.0" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /26-single-file-components/src/App.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 22 | 23 | 26 | -------------------------------------------------------------------------------- /26-single-file-components/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juanwmedia/vue-firebase/f72f17a4943479bb32db9071b6057d78f0a1b3b5/26-single-file-components/src/assets/logo.png -------------------------------------------------------------------------------- /26-single-file-components/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | new Vue({ 5 | el: '#app', 6 | render: h => h(App) 7 | }) 8 | -------------------------------------------------------------------------------- /27-render-function/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["es2015", { "modules": false }] 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /27-render-function/README.md: -------------------------------------------------------------------------------- 1 | # 27-render-function 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | ``` 17 | 18 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader). 19 | -------------------------------------------------------------------------------- /27-render-function/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 27-render-function 6 | 7 | 8 |
    9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /27-render-function/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "27-render-function", 3 | "description": "A Vue.js project", 4 | "version": "1.0.0", 5 | "author": "@juanwmedia ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 9 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 10 | }, 11 | "dependencies": { 12 | "vue": "^2.1.0" 13 | }, 14 | "devDependencies": { 15 | "babel-core": "^6.0.0", 16 | "babel-loader": "^6.0.0", 17 | "babel-preset-es2015": "^6.0.0", 18 | "cross-env": "^3.0.0", 19 | "css-loader": "^0.25.0", 20 | "file-loader": "^0.9.0", 21 | "vue-loader": "^10.0.0", 22 | "vue-template-compiler": "^2.1.0", 23 | "webpack": "^2.2.0", 24 | "webpack-dev-server": "^2.2.0" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /27-render-function/src/App.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 18 | 19 | -------------------------------------------------------------------------------- /27-render-function/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juanwmedia/vue-firebase/f72f17a4943479bb32db9071b6057d78f0a1b3b5/27-render-function/src/assets/logo.png -------------------------------------------------------------------------------- /27-render-function/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | new Vue({ 5 | el: '#app', 6 | render: h => h(App) 7 | }) -------------------------------------------------------------------------------- /28-hot-reloading/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["es2015", { "modules": false }] 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /28-hot-reloading/README.md: -------------------------------------------------------------------------------- 1 | # 28-hot-reloading 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | ``` 17 | 18 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader). 19 | -------------------------------------------------------------------------------- /28-hot-reloading/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 28-hot-reloading 6 | 7 | 8 |
    9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /28-hot-reloading/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "28-hot-reloading", 3 | "description": "A Vue.js project", 4 | "version": "1.0.0", 5 | "author": "@juanwmedia ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 9 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 10 | }, 11 | "dependencies": { 12 | "vue": "^2.1.0" 13 | }, 14 | "devDependencies": { 15 | "babel-core": "^6.0.0", 16 | "babel-loader": "^6.0.0", 17 | "babel-preset-es2015": "^6.0.0", 18 | "cross-env": "^3.0.0", 19 | "css-loader": "^0.25.0", 20 | "file-loader": "^0.9.0", 21 | "vue-loader": "^10.0.0", 22 | "vue-template-compiler": "^2.1.0", 23 | "webpack": "^2.2.0", 24 | "webpack-dev-server": "^2.2.0" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /28-hot-reloading/src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 11 | -------------------------------------------------------------------------------- /28-hot-reloading/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juanwmedia/vue-firebase/f72f17a4943479bb32db9071b6057d78f0a1b3b5/28-hot-reloading/src/assets/logo.png -------------------------------------------------------------------------------- /28-hot-reloading/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | new Vue({ 5 | el: '#app', 6 | render: h => h(App) 7 | }) 8 | -------------------------------------------------------------------------------- /29-scoped-css/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["es2015", { "modules": false }] 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /29-scoped-css/README.md: -------------------------------------------------------------------------------- 1 | # 29-scoped-css 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | ``` 17 | 18 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader). 19 | -------------------------------------------------------------------------------- /29-scoped-css/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 29-scoped-css 6 | 7 | 8 |
    9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /29-scoped-css/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "29-scoped-css", 3 | "description": "A Vue.js project", 4 | "version": "1.0.0", 5 | "author": "@juanwmedia ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 9 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 10 | }, 11 | "dependencies": { 12 | "vue": "^2.1.0" 13 | }, 14 | "devDependencies": { 15 | "babel-core": "^6.0.0", 16 | "babel-loader": "^6.0.0", 17 | "babel-preset-es2015": "^6.0.0", 18 | "cross-env": "^3.0.0", 19 | "css-loader": "^0.25.0", 20 | "file-loader": "^0.9.0", 21 | "vue-loader": "^10.0.0", 22 | "vue-template-compiler": "^2.1.0", 23 | "webpack": "^2.2.0", 24 | "webpack-dev-server": "^2.2.0" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /29-scoped-css/src/App.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | -------------------------------------------------------------------------------- /29-scoped-css/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juanwmedia/vue-firebase/f72f17a4943479bb32db9071b6057d78f0a1b3b5/29-scoped-css/src/assets/logo.png -------------------------------------------------------------------------------- /29-scoped-css/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | new Vue({ 5 | el: '#app', 6 | render: h => h(App) 7 | }) 8 | -------------------------------------------------------------------------------- /3-renderizado-de-listas/js/main.js: -------------------------------------------------------------------------------- 1 | const vm = new Vue({ 2 | el: 'main', 3 | data: { 4 | laborales: ['Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes'], 5 | tareas: [ 6 | {nombre: 'Hacer la compra', prioridad: 'baja'}, 7 | {nombre: 'Aprender Vue y Firebase', prioridad: 'alta'}, 8 | {nombre: 'Ir al gimnasio', prioridad: 'alta'}, 9 | ], 10 | persona: { 11 | nombre: 'Juan', 12 | profesion: 'dev', 13 | ciudad: 'Valencia' 14 | } 15 | }, 16 | }); -------------------------------------------------------------------------------- /30-css-modules/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["es2015", { "modules": false }] 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /30-css-modules/README.md: -------------------------------------------------------------------------------- 1 | # 30-css-modules 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | ``` 17 | 18 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader). 19 | -------------------------------------------------------------------------------- /30-css-modules/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 30-css-modules 6 | 7 | 8 |
    9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /30-css-modules/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "30-css-modules", 3 | "description": "A Vue.js project", 4 | "version": "1.0.0", 5 | "author": "@juanwmedia ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 9 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 10 | }, 11 | "dependencies": { 12 | "vue": "^2.1.0" 13 | }, 14 | "devDependencies": { 15 | "babel-core": "^6.0.0", 16 | "babel-loader": "^6.0.0", 17 | "babel-preset-es2015": "^6.0.0", 18 | "cross-env": "^3.0.0", 19 | "css-loader": "^0.25.0", 20 | "file-loader": "^0.9.0", 21 | "vue-loader": "^10.0.0", 22 | "vue-template-compiler": "^2.1.0", 23 | "webpack": "^2.2.0", 24 | "webpack-dev-server": "^2.2.0" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /30-css-modules/src/App.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 15 | 16 | 24 | -------------------------------------------------------------------------------- /30-css-modules/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juanwmedia/vue-firebase/f72f17a4943479bb32db9071b6057d78f0a1b3b5/30-css-modules/src/assets/logo.png -------------------------------------------------------------------------------- /30-css-modules/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | new Vue({ 5 | el: '#app', 6 | render: h => h(App) 7 | }) 8 | -------------------------------------------------------------------------------- /31-shared-state/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vue.js 8 | 9 | 10 | 11 | 12 | 13 |

    {{ usuario.nombre }}

    14 |

    {{ usuario.nombre }}

    15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /31-shared-state/js/main.js: -------------------------------------------------------------------------------- 1 | const compartido = { 2 | usuario: { 3 | nombre: 'Juan Andrés', 4 | } 5 | }; 6 | 7 | new Vue({ 8 | el: '#app1', 9 | data: compartido, 10 | }); 11 | 12 | new Vue({ 13 | el: '#app2', 14 | data: compartido, 15 | }); -------------------------------------------------------------------------------- /32-vuex-central-store/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["es2015", { "modules": false }] 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /32-vuex-central-store/README.md: -------------------------------------------------------------------------------- 1 | # 32-vuex-central-store 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | ``` 17 | 18 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader). 19 | -------------------------------------------------------------------------------- /32-vuex-central-store/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 32-vuex-central-store 6 | 7 | 8 |
    9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /32-vuex-central-store/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "32-vuex-central-store", 3 | "description": "A Vue.js project", 4 | "version": "1.0.0", 5 | "author": "@juanwmedia ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 9 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 10 | }, 11 | "dependencies": { 12 | "vue": "^2.1.0", 13 | "vuex": "^2.1.2" 14 | }, 15 | "devDependencies": { 16 | "babel-core": "^6.0.0", 17 | "babel-loader": "^6.0.0", 18 | "babel-preset-es2015": "^6.0.0", 19 | "cross-env": "^3.0.0", 20 | "css-loader": "^0.25.0", 21 | "file-loader": "^0.9.0", 22 | "vue-loader": "^10.0.0", 23 | "vue-template-compiler": "^2.1.0", 24 | "webpack": "^2.2.0", 25 | "webpack-dev-server": "^2.2.0" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /32-vuex-central-store/src/App.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 15 | -------------------------------------------------------------------------------- /32-vuex-central-store/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juanwmedia/vue-firebase/f72f17a4943479bb32db9071b6057d78f0a1b3b5/32-vuex-central-store/src/assets/logo.png -------------------------------------------------------------------------------- /32-vuex-central-store/src/components/Contador.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /32-vuex-central-store/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App.vue'; 3 | import {store} from './store/store'; 4 | 5 | new Vue({ 6 | el: '#app', 7 | store, 8 | render: h => h(App) 9 | }); 10 | -------------------------------------------------------------------------------- /32-vuex-central-store/src/store/store.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import Vuex from 'vuex'; 3 | Vue.use(Vuex); 4 | 5 | export const store = new Vuex.Store({ 6 | state: { 7 | cantidad: 0, 8 | } 9 | }); -------------------------------------------------------------------------------- /33-vuex-state/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["latest", { "modules": false }] 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /33-vuex-state/README.md: -------------------------------------------------------------------------------- 1 | # 33-vuex-state 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | ``` 17 | 18 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader). 19 | -------------------------------------------------------------------------------- /33-vuex-state/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 33-vuex-state 6 | 7 | 8 |
    9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /33-vuex-state/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "33-vuex-state", 3 | "description": "A Vue.js project", 4 | "version": "1.0.0", 5 | "author": "@juanwmedia ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 9 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 10 | }, 11 | "dependencies": { 12 | "vue": "^2.2.1", 13 | "vuex": "^2.1.2" 14 | }, 15 | "devDependencies": { 16 | "babel-core": "^6.0.0", 17 | "babel-loader": "^6.0.0", 18 | "babel-preset-latest": "^6.0.0", 19 | "cross-env": "^3.0.0", 20 | "css-loader": "^0.25.0", 21 | "file-loader": "^0.9.0", 22 | "vue-loader": "^11.0.0", 23 | "vue-template-compiler": "^2.2.1", 24 | "webpack": "^2.2.0", 25 | "webpack-dev-server": "^2.2.0" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /33-vuex-state/src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /33-vuex-state/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juanwmedia/vue-firebase/f72f17a4943479bb32db9071b6057d78f0a1b3b5/33-vuex-state/src/assets/logo.png -------------------------------------------------------------------------------- /33-vuex-state/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import {store} from './store/store'; 4 | 5 | new Vue({ 6 | el: '#app', 7 | store, 8 | render: h => h(App) 9 | }); -------------------------------------------------------------------------------- /33-vuex-state/src/store/store.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import Vuex from 'vuex'; 3 | Vue.use(Vuex); 4 | 5 | export const store = new Vuex.Store({ 6 | state: { 7 | nombre: 'Juan Andrés', 8 | apellidos: 'Núñez Charro', 9 | profesion: 'Developer', 10 | ciudad: 'Valencia' 11 | } 12 | }); -------------------------------------------------------------------------------- /34-vuex-getters/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["latest", { "modules": false }] 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /34-vuex-getters/README.md: -------------------------------------------------------------------------------- 1 | # 34-vuex-getters 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | ``` 17 | 18 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader). 19 | -------------------------------------------------------------------------------- /34-vuex-getters/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 34-vuex-getters 6 | 7 | 8 |
    9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /34-vuex-getters/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "34-vuex-getters", 3 | "description": "A Vue.js project", 4 | "version": "1.0.0", 5 | "author": "@juanwmedia ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 9 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 10 | }, 11 | "dependencies": { 12 | "vue": "^2.2.1", 13 | "vuex": "^2.2.1" 14 | }, 15 | "devDependencies": { 16 | "babel-core": "^6.0.0", 17 | "babel-loader": "^6.0.0", 18 | "babel-preset-latest": "^6.0.0", 19 | "cross-env": "^3.0.0", 20 | "css-loader": "^0.25.0", 21 | "file-loader": "^0.9.0", 22 | "vue-loader": "^11.0.0", 23 | "vue-template-compiler": "^2.2.1", 24 | "webpack": "^2.2.0", 25 | "webpack-dev-server": "^2.2.0" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /34-vuex-getters/src/Tareas.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 23 | -------------------------------------------------------------------------------- /34-vuex-getters/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juanwmedia/vue-firebase/f72f17a4943479bb32db9071b6057d78f0a1b3b5/34-vuex-getters/src/assets/logo.png -------------------------------------------------------------------------------- /34-vuex-getters/src/components/TareasRestantes.vue: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /34-vuex-getters/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import Tareas from './Tareas.vue'; 3 | import {store} from './store/store'; 4 | 5 | new Vue({ 6 | el: '#app', 7 | store, 8 | render: h => h(Tareas) 9 | }) 10 | -------------------------------------------------------------------------------- /34-vuex-getters/src/store/store.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import Vuex from 'vuex'; 3 | Vue.use(Vuex); 4 | 5 | export const store = new Vuex.Store({ 6 | state: { 7 | tareas: [ 8 | {nombre: 'Aprender Vue Routing', completado: false}, 9 | {nombre: 'Organizar lecciones restantes', completado: false}, 10 | {nombre: 'Grabar lecciones mini curso ES6', completado: false}, 11 | {nombre: 'Preparar landing page curso', completado: false}, 12 | {nombre: 'Diseñar acciones de marketing', completado: true}, 13 | ] 14 | }, 15 | getters: { 16 | tareasCompletadas: (state) => { 17 | return state.tareas.filter((tarea) => tarea.completado).length; 18 | } 19 | } 20 | }); -------------------------------------------------------------------------------- /35-vuex-mutations/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["latest", { 4 | "es2015": { "modules": false } 5 | }] 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /35-vuex-mutations/README.md: -------------------------------------------------------------------------------- 1 | # 35-vuex-mutations 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | ``` 17 | 18 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader). 19 | -------------------------------------------------------------------------------- /35-vuex-mutations/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 35-vuex-mutations 6 | 7 | 8 |
    9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /35-vuex-mutations/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "35-vuex-mutations", 3 | "description": "A Vue.js project", 4 | "version": "1.0.0", 5 | "author": "@juanwmedia ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 9 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 10 | }, 11 | "dependencies": { 12 | "vue": "^2.2.1", 13 | "vuex": "^2.2.1" 14 | }, 15 | "devDependencies": { 16 | "babel-core": "^6.0.0", 17 | "babel-loader": "^6.0.0", 18 | "babel-preset-latest": "^6.0.0", 19 | "cross-env": "^3.0.0", 20 | "css-loader": "^0.25.0", 21 | "file-loader": "^0.9.0", 22 | "vue-loader": "^11.0.0", 23 | "vue-template-compiler": "^2.2.1", 24 | "webpack": "^2.2.0", 25 | "webpack-dev-server": "^2.2.0" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /35-vuex-mutations/src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /35-vuex-mutations/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juanwmedia/vue-firebase/f72f17a4943479bb32db9071b6057d78f0a1b3b5/35-vuex-mutations/src/assets/logo.png -------------------------------------------------------------------------------- /35-vuex-mutations/src/components/Contador.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /35-vuex-mutations/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App.vue'; 3 | import {store} from './store/store'; 4 | 5 | new Vue({ 6 | el: '#app', 7 | store: store, 8 | render: h => h(App) 9 | }) 10 | -------------------------------------------------------------------------------- /35-vuex-mutations/src/store/store.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import Vuex from 'vuex'; 3 | Vue.use(Vuex); 4 | 5 | export const store = new Vuex.Store({ 6 | state: { 7 | cantidad: 0, 8 | }, 9 | mutations: { 10 | aumentar: (state) => state.cantidad++, 11 | reducir: (state) => state.cantidad--, 12 | } 13 | }); -------------------------------------------------------------------------------- /36-vuex-actions/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["latest", { 4 | "es2015": { "modules": false } 5 | }] 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /36-vuex-actions/README.md: -------------------------------------------------------------------------------- 1 | # 35-vuex-mutations 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | ``` 17 | 18 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader). 19 | -------------------------------------------------------------------------------- /36-vuex-actions/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 36-vuex-actions 6 | 7 | 8 |
    9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /36-vuex-actions/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "35-vuex-mutations", 3 | "description": "A Vue.js project", 4 | "version": "1.0.0", 5 | "author": "@juanwmedia ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 9 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 10 | }, 11 | "dependencies": { 12 | "vue": "^2.2.1", 13 | "vuex": "^2.2.1" 14 | }, 15 | "devDependencies": { 16 | "babel-core": "^6.0.0", 17 | "babel-loader": "^6.0.0", 18 | "babel-preset-latest": "^6.0.0", 19 | "cross-env": "^3.0.0", 20 | "css-loader": "^0.25.0", 21 | "file-loader": "^0.9.0", 22 | "vue-loader": "^11.0.0", 23 | "vue-template-compiler": "^2.2.1", 24 | "webpack": "^2.2.0", 25 | "webpack-dev-server": "^2.2.0" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /36-vuex-actions/src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /36-vuex-actions/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juanwmedia/vue-firebase/f72f17a4943479bb32db9071b6057d78f0a1b3b5/36-vuex-actions/src/assets/logo.png -------------------------------------------------------------------------------- /36-vuex-actions/src/components/Contador.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /36-vuex-actions/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App.vue'; 3 | import {store} from './store/store'; 4 | 5 | new Vue({ 6 | el: '#app', 7 | store: store, 8 | render: h => h(App) 9 | }) 10 | -------------------------------------------------------------------------------- /36-vuex-actions/src/store/store.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import Vuex from 'vuex'; 3 | Vue.use(Vuex); 4 | 5 | export const store = new Vuex.Store({ 6 | state: { 7 | cantidad: 0, 8 | }, 9 | mutations: { 10 | aumentar: (state, cantidad) => state.cantidad += cantidad, 11 | reducir: (state, cantidad) => state.cantidad -=cantidad, 12 | }, 13 | actions: { 14 | aumentarAsync: (context, cantidad) => { 15 | setTimeout(() => context.commit('aumentar', cantidad), 2000); 16 | }, 17 | reducirAsync: ({commit}, {cantidad}) => { 18 | setTimeout(() => commit('reducir', cantidad), 2000); 19 | } 20 | } 21 | }); -------------------------------------------------------------------------------- /37-vuex-modules/.babelrc: -------------------------------------------------------------------------------- 1 | // http://stefan.magnuson.co/articles/frontend/using-es7-spread-operator-with-webpack/ 2 | { 3 | "presets": [ 4 | "stage-2", 5 | ["latest", { 6 | "es2015": { "modules": false } 7 | }] 8 | ] 9 | } 10 | -------------------------------------------------------------------------------- /37-vuex-modules/README.md: -------------------------------------------------------------------------------- 1 | # 37-vuex-modules 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | ``` 17 | 18 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader). 19 | -------------------------------------------------------------------------------- /37-vuex-modules/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 37-vuex-modules 6 | 7 | 8 |
    9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /37-vuex-modules/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "37-vuex-modules", 3 | "description": "A Vue.js project", 4 | "version": "1.0.0", 5 | "author": "@juanwmedia ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 9 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 10 | }, 11 | "dependencies": { 12 | "babel-preset-stage-2": "^6.22.0", 13 | "vue": "^2.2.1", 14 | "vuex": "^2.2.1" 15 | }, 16 | "devDependencies": { 17 | "babel-core": "^6.0.0", 18 | "babel-loader": "^6.0.0", 19 | "babel-preset-latest": "^6.0.0", 20 | "cross-env": "^3.0.0", 21 | "css-loader": "^0.25.0", 22 | "file-loader": "^0.9.0", 23 | "vue-loader": "^11.1.4", 24 | "vue-template-compiler": "^2.2.1", 25 | "webpack": "^2.2.0", 26 | "webpack-dev-server": "^2.2.0" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /37-vuex-modules/src/App.vue: -------------------------------------------------------------------------------- 1 | 7 | 14 | -------------------------------------------------------------------------------- /37-vuex-modules/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juanwmedia/vue-firebase/f72f17a4943479bb32db9071b6057d78f0a1b3b5/37-vuex-modules/src/assets/logo.png -------------------------------------------------------------------------------- /37-vuex-modules/src/components/Carro.vue: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /37-vuex-modules/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App.vue'; 3 | import {store} from './store/store'; 4 | 5 | new Vue({ 6 | el: '#app', 7 | store, 8 | render: h => h(App) 9 | }); -------------------------------------------------------------------------------- /37-vuex-modules/src/store/modules/productos.js: -------------------------------------------------------------------------------- 1 | const productos = [ 2 | {nombre: 'Steam Link', precio: 50}, 3 | {nombre: 'Steam Controller', precio: 59}, 4 | {nombre: 'Axiom Verge', precio: 17}, 5 | ]; 6 | 7 | const mutations = { 8 | anadirProducto: (state, producto) => state.productos.unshift(producto), 9 | }; 10 | 11 | export default { 12 | state: productos, 13 | mutations, 14 | }; -------------------------------------------------------------------------------- /37-vuex-modules/src/store/store.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import Vuex from 'vuex'; 3 | import productos from './modules/productos'; 4 | Vue.use(Vuex); 5 | 6 | export const store = new Vuex.Store({ 7 | state: { 8 | /* productos: [ 9 | {nombre: 'Steam Link', precio: 50}, 10 | {nombre: 'Steam Controller', precio: 59}, 11 | {nombre: 'Axiom Verge', precio: 17}, 12 | ],*/ 13 | carro: [], 14 | }, 15 | getters: { 16 | totalCompra: (state) => state.carro.reduce((total, producto) => total + producto.precio, 0), 17 | }, 18 | mutations: { 19 | /*anadirProducto: (state, producto) => state.productos.unshift(producto),*/ 20 | comprarProducto: (state, indice) => state.carro.unshift(state.productos[indice]), 21 | eliminarProducto: (state, indice) => state.carro.splice(indice, 1), 22 | }, 23 | modules: { 24 | productos 25 | } 26 | }); 27 | -------------------------------------------------------------------------------- /38-vuex-structure/.babelrc: -------------------------------------------------------------------------------- 1 | // http://stefan.magnuson.co/articles/frontend/using-es7-spread-operator-with-webpack/ 2 | { 3 | "presets": [ 4 | "stage-2", 5 | ["latest", { 6 | "es2015": { "modules": false } 7 | }] 8 | ] 9 | } 10 | -------------------------------------------------------------------------------- /38-vuex-structure/README.md: -------------------------------------------------------------------------------- 1 | # 37-vuex-modules 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | ``` 17 | 18 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader). 19 | -------------------------------------------------------------------------------- /38-vuex-structure/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 38-vuex-structure 6 | 7 | 8 |
    9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /38-vuex-structure/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "37-vuex-modules", 3 | "description": "A Vue.js project", 4 | "version": "1.0.0", 5 | "author": "@juanwmedia ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 9 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 10 | }, 11 | "dependencies": { 12 | "babel-preset-stage-2": "^6.22.0", 13 | "vue": "^2.2.1", 14 | "vuex": "^2.2.1" 15 | }, 16 | "devDependencies": { 17 | "babel-core": "^6.0.0", 18 | "babel-loader": "^6.0.0", 19 | "babel-preset-latest": "^6.0.0", 20 | "cross-env": "^3.0.0", 21 | "css-loader": "^0.25.0", 22 | "file-loader": "^0.9.0", 23 | "vue-loader": "^11.1.4", 24 | "vue-template-compiler": "^2.2.1", 25 | "webpack": "^2.2.0", 26 | "webpack-dev-server": "^2.2.0" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /38-vuex-structure/src/App.vue: -------------------------------------------------------------------------------- 1 | 7 | 14 | -------------------------------------------------------------------------------- /38-vuex-structure/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juanwmedia/vue-firebase/f72f17a4943479bb32db9071b6057d78f0a1b3b5/38-vuex-structure/src/assets/logo.png -------------------------------------------------------------------------------- /38-vuex-structure/src/components/Carro.vue: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /38-vuex-structure/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App.vue'; 3 | import {store} from './store/store'; 4 | 5 | new Vue({ 6 | el: '#app', 7 | store, 8 | render: h => h(App) 9 | }); -------------------------------------------------------------------------------- /38-vuex-structure/src/store/getters.js: -------------------------------------------------------------------------------- 1 | export const getters = { 2 | totalCompra: (state) => state.carro.reduce((total, producto) => total + producto.precio, 0), 3 | }; -------------------------------------------------------------------------------- /38-vuex-structure/src/store/modules/productos.js: -------------------------------------------------------------------------------- 1 | const productos = [ 2 | {nombre: 'Steam Link', precio: 50}, 3 | {nombre: 'Steam Controller', precio: 59}, 4 | {nombre: 'Axiom Verge', precio: 17}, 5 | ]; 6 | 7 | const mutations = { 8 | anadirProducto: (state, producto) => state.productos.unshift(producto), 9 | }; 10 | 11 | export default { 12 | state: productos, 13 | mutations, 14 | }; -------------------------------------------------------------------------------- /38-vuex-structure/src/store/mutations.js: -------------------------------------------------------------------------------- 1 | export const mutations = { 2 | comprarProducto: (state, indice) => state.carro.unshift(state.productos[indice]), 3 | eliminarProducto: (state, indice) => state.carro.splice(indice, 1), 4 | }; -------------------------------------------------------------------------------- /38-vuex-structure/src/store/store.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import Vuex from 'vuex'; 3 | import productos from './modules/productos'; 4 | import {getters} from './getters'; 5 | import {mutations} from './mutations'; 6 | Vue.use(Vuex); 7 | 8 | export const store = new Vuex.Store({ 9 | state: { 10 | carro: [], 11 | }, 12 | getters: getters, 13 | mutations:mutations, 14 | modules: { 15 | productos 16 | } 17 | }); 18 | -------------------------------------------------------------------------------- /4-vue-devtools/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Vue.js 7 | 8 | 9 | 10 | 11 | 12 |
    13 |

    {{ mensaje }}

    14 | 
    {{ $data }}
    15 |
    16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /4-vue-devtools/js/main.js: -------------------------------------------------------------------------------- 1 | new Vue({ 2 | el: 'main', 3 | data: { 4 | mensaje: 'Aprendiendo Vue.js :)' 5 | } 6 | }); -------------------------------------------------------------------------------- /40-vue-router-intro/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Vue Router 6 | 7 | 8 |
    9 |

    Aprendiendo Vue-Router

    10 | Portada 11 | Contacto 12 |
    13 | 14 |
    15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /40-vue-router-intro/js/main.js: -------------------------------------------------------------------------------- 1 | // ¿Quién 'vive' en cada ruta? 2 | const home = Vue.component('Home', { 3 | template: '

    Portada

    ', 4 | }); 5 | 6 | const contacto = Vue.component('Contacto', { 7 | template: '

    Contacto

    ', 8 | }); 9 | 10 | // Plano de destinos con sus rutas 11 | const routes = [ 12 | {path: '/', component: home}, 13 | {path: '/contacto', component: contacto}, 14 | ]; 15 | 16 | // Instaciar el componente enrutador 17 | const router = new VueRouter({ 18 | routes: routes, 19 | }); 20 | 21 | new Vue({ 22 | router: router, 23 | el: 'main', 24 | }); -------------------------------------------------------------------------------- /41-vue-router-components/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["latest", { 4 | "es2015": { "modules": false } 5 | }] 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /41-vue-router-components/README.md: -------------------------------------------------------------------------------- 1 | # 41-vue-router-components 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | ``` 17 | 18 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader). 19 | -------------------------------------------------------------------------------- /41-vue-router-components/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 41-vue-router-components 6 | 7 | 8 |
    9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /41-vue-router-components/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "41-vue-router-components", 3 | "description": "A Vue.js project", 4 | "version": "1.0.0", 5 | "author": "@juanwmedia ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 9 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 10 | }, 11 | "dependencies": { 12 | "vue": "^2.2.1", 13 | "vue-router": "^2.3.0" 14 | }, 15 | "devDependencies": { 16 | "babel-core": "^6.0.0", 17 | "babel-loader": "^6.0.0", 18 | "babel-preset-latest": "^6.0.0", 19 | "cross-env": "^3.0.0", 20 | "css-loader": "^0.25.0", 21 | "file-loader": "^0.9.0", 22 | "vue-loader": "^11.1.4", 23 | "vue-template-compiler": "^2.2.1", 24 | "webpack": "^2.2.0", 25 | "webpack-dev-server": "^2.2.0" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /41-vue-router-components/src/App.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | -------------------------------------------------------------------------------- /41-vue-router-components/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juanwmedia/vue-firebase/f72f17a4943479bb32db9071b6057d78f0a1b3b5/41-vue-router-components/src/assets/logo.png -------------------------------------------------------------------------------- /41-vue-router-components/src/components/Contacto.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /41-vue-router-components/src/components/Home.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /41-vue-router-components/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import VueRouter from 'vue-router'; 3 | import {routes} from './routes'; 4 | import App from './App.vue'; 5 | 6 | Vue.use(VueRouter); 7 | 8 | const router = new VueRouter({ 9 | routes 10 | }); 11 | 12 | new Vue({ 13 | el: '#app', 14 | router, 15 | render: h => h(App) 16 | }) -------------------------------------------------------------------------------- /41-vue-router-components/src/routes.js: -------------------------------------------------------------------------------- 1 | import Home from './components/Home.vue'; 2 | import Contacto from './components/Contacto.vue'; 3 | 4 | export const routes = [ 5 | {path: '/', component: Home}, 6 | {path: '/contacto', component: Contacto}, 7 | ]; -------------------------------------------------------------------------------- /42-vue-router-active-links/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["latest", { 4 | "es2015": { "modules": false } 5 | }] 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /42-vue-router-active-links/README.md: -------------------------------------------------------------------------------- 1 | # 41-vue-router-components 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | ``` 17 | 18 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader). 19 | -------------------------------------------------------------------------------- /42-vue-router-active-links/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 42-vue-router-active-links 6 | 7 | 8 |
    9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /42-vue-router-active-links/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "41-vue-router-components", 3 | "description": "A Vue.js project", 4 | "version": "1.0.0", 5 | "author": "@juanwmedia ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 9 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 10 | }, 11 | "dependencies": { 12 | "vue": "^2.2.1", 13 | "vue-router": "^2.3.0" 14 | }, 15 | "devDependencies": { 16 | "babel-core": "^6.0.0", 17 | "babel-loader": "^6.0.0", 18 | "babel-preset-latest": "^6.0.0", 19 | "cross-env": "^3.0.0", 20 | "css-loader": "^0.25.0", 21 | "file-loader": "^0.9.0", 22 | "vue-loader": "^11.1.4", 23 | "vue-template-compiler": "^2.2.1", 24 | "webpack": "^2.2.0", 25 | "webpack-dev-server": "^2.2.0" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /42-vue-router-active-links/src/App.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 19 | 20 | -------------------------------------------------------------------------------- /42-vue-router-active-links/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juanwmedia/vue-firebase/f72f17a4943479bb32db9071b6057d78f0a1b3b5/42-vue-router-active-links/src/assets/logo.png -------------------------------------------------------------------------------- /42-vue-router-active-links/src/components/Contacto.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /42-vue-router-active-links/src/components/Home.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /42-vue-router-active-links/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import VueRouter from 'vue-router'; 3 | import {routes} from './routes'; 4 | import App from './App.vue'; 5 | 6 | Vue.use(VueRouter); 7 | 8 | const router = new VueRouter({ 9 | routes 10 | }); 11 | 12 | new Vue({ 13 | el: '#app', 14 | router, 15 | render: h => h(App) 16 | }) -------------------------------------------------------------------------------- /42-vue-router-active-links/src/routes.js: -------------------------------------------------------------------------------- 1 | import Home from './components/Home.vue'; 2 | import Contacto from './components/Contacto.vue'; 3 | 4 | export const routes = [ 5 | {path: '/', component: Home}, 6 | {path: '/contacto', component: Contacto}, 7 | ]; -------------------------------------------------------------------------------- /43-vue-programmatic-nav/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["latest", { 4 | "es2015": { "modules": false } 5 | }] 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /43-vue-programmatic-nav/README.md: -------------------------------------------------------------------------------- 1 | # 41-vue-router-components 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | ``` 17 | 18 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader). 19 | -------------------------------------------------------------------------------- /43-vue-programmatic-nav/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 43-vue-router-prog-nav 6 | 7 | 8 |
    9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /43-vue-programmatic-nav/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "41-vue-router-components", 3 | "description": "A Vue.js project", 4 | "version": "1.0.0", 5 | "author": "@juanwmedia ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 9 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 10 | }, 11 | "dependencies": { 12 | "vue": "^2.2.1", 13 | "vue-router": "^2.3.0" 14 | }, 15 | "devDependencies": { 16 | "babel-core": "^6.0.0", 17 | "babel-loader": "^6.0.0", 18 | "babel-preset-latest": "^6.0.0", 19 | "cross-env": "^3.0.0", 20 | "css-loader": "^0.25.0", 21 | "file-loader": "^0.9.0", 22 | "vue-loader": "^11.1.4", 23 | "vue-template-compiler": "^2.2.1", 24 | "webpack": "^2.2.0", 25 | "webpack-dev-server": "^2.2.0" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /43-vue-programmatic-nav/src/App.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 19 | 20 | -------------------------------------------------------------------------------- /43-vue-programmatic-nav/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juanwmedia/vue-firebase/f72f17a4943479bb32db9071b6057d78f0a1b3b5/43-vue-programmatic-nav/src/assets/logo.png -------------------------------------------------------------------------------- /43-vue-programmatic-nav/src/components/Contacto.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 20 | -------------------------------------------------------------------------------- /43-vue-programmatic-nav/src/components/Home.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /43-vue-programmatic-nav/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import VueRouter from 'vue-router'; 3 | import {routes} from './routes'; 4 | import App from './App.vue'; 5 | 6 | Vue.use(VueRouter); 7 | 8 | const router = new VueRouter({ 9 | routes 10 | }); 11 | 12 | new Vue({ 13 | el: '#app', 14 | router, 15 | render: h => h(App) 16 | }) -------------------------------------------------------------------------------- /43-vue-programmatic-nav/src/routes.js: -------------------------------------------------------------------------------- 1 | import Home from './components/Home.vue'; 2 | import Contacto from './components/Contacto.vue'; 3 | 4 | export const routes = [ 5 | {path: '/', component: Home}, 6 | {path: '/contacto', component: Contacto}, 7 | ]; -------------------------------------------------------------------------------- /44-vue-router-dynamic-routes/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["latest", { 4 | "es2015": { "modules": false } 5 | }] 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /44-vue-router-dynamic-routes/README.md: -------------------------------------------------------------------------------- 1 | # 41-vue-router-components 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | ``` 17 | 18 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader). 19 | -------------------------------------------------------------------------------- /44-vue-router-dynamic-routes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 44-vue-router-dynamic-routes 6 | 7 | 8 |
    9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /44-vue-router-dynamic-routes/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "41-vue-router-components", 3 | "description": "A Vue.js project", 4 | "version": "1.0.0", 5 | "author": "@juanwmedia ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 9 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 10 | }, 11 | "dependencies": { 12 | "vue": "^2.2.1", 13 | "vue-router": "^2.3.0" 14 | }, 15 | "devDependencies": { 16 | "babel-core": "^6.0.0", 17 | "babel-loader": "^6.0.0", 18 | "babel-preset-latest": "^6.0.0", 19 | "cross-env": "^3.0.0", 20 | "css-loader": "^0.25.0", 21 | "file-loader": "^0.9.0", 22 | "vue-loader": "^11.1.4", 23 | "vue-template-compiler": "^2.2.1", 24 | "webpack": "^2.2.0", 25 | "webpack-dev-server": "^2.2.0" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /44-vue-router-dynamic-routes/src/App.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 22 | 23 | -------------------------------------------------------------------------------- /44-vue-router-dynamic-routes/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juanwmedia/vue-firebase/f72f17a4943479bb32db9071b6057d78f0a1b3b5/44-vue-router-dynamic-routes/src/assets/logo.png -------------------------------------------------------------------------------- /44-vue-router-dynamic-routes/src/components/Contacto.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 20 | -------------------------------------------------------------------------------- /44-vue-router-dynamic-routes/src/components/Home.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /44-vue-router-dynamic-routes/src/components/Usuario.vue: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /44-vue-router-dynamic-routes/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import VueRouter from 'vue-router'; 3 | import {routes} from './routes'; 4 | import App from './App.vue'; 5 | 6 | Vue.use(VueRouter); 7 | 8 | const router = new VueRouter({ 9 | routes 10 | }); 11 | 12 | new Vue({ 13 | el: '#app', 14 | router, 15 | render: h => h(App) 16 | }) -------------------------------------------------------------------------------- /44-vue-router-dynamic-routes/src/routes.js: -------------------------------------------------------------------------------- 1 | import Home from './components/Home.vue'; 2 | import Contacto from './components/Contacto.vue'; 3 | import Usuario from './components/Usuario.vue'; 4 | 5 | export const routes = [ 6 | {path: '/', component: Home}, 7 | {path: '/contacto', component: Contacto}, 8 | {path: '/usuario/:id', component: Usuario}, 9 | ]; -------------------------------------------------------------------------------- /45-vue-router-reacting/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["latest", { 4 | "es2015": { "modules": false } 5 | }] 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /45-vue-router-reacting/README.md: -------------------------------------------------------------------------------- 1 | # 41-vue-router-components 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | ``` 17 | 18 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader). 19 | -------------------------------------------------------------------------------- /45-vue-router-reacting/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 45-vue-router-reacting 6 | 7 | 8 |
    9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /45-vue-router-reacting/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "41-vue-router-components", 3 | "description": "A Vue.js project", 4 | "version": "1.0.0", 5 | "author": "@juanwmedia ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 9 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 10 | }, 11 | "dependencies": { 12 | "vue": "^2.2.1", 13 | "vue-router": "^2.3.0" 14 | }, 15 | "devDependencies": { 16 | "babel-core": "^6.0.0", 17 | "babel-loader": "^6.0.0", 18 | "babel-preset-latest": "^6.0.0", 19 | "cross-env": "^3.0.0", 20 | "css-loader": "^0.25.0", 21 | "file-loader": "^0.9.0", 22 | "vue-loader": "^11.1.4", 23 | "vue-template-compiler": "^2.2.1", 24 | "webpack": "^2.2.0", 25 | "webpack-dev-server": "^2.2.0" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /45-vue-router-reacting/src/App.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 25 | 26 | -------------------------------------------------------------------------------- /45-vue-router-reacting/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juanwmedia/vue-firebase/f72f17a4943479bb32db9071b6057d78f0a1b3b5/45-vue-router-reacting/src/assets/logo.png -------------------------------------------------------------------------------- /45-vue-router-reacting/src/components/Contacto.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 20 | -------------------------------------------------------------------------------- /45-vue-router-reacting/src/components/Home.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /45-vue-router-reacting/src/components/Usuario.vue: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /45-vue-router-reacting/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import VueRouter from 'vue-router'; 3 | import {routes} from './routes'; 4 | import App from './App.vue'; 5 | 6 | Vue.use(VueRouter); 7 | 8 | const router = new VueRouter({ 9 | routes 10 | }); 11 | 12 | new Vue({ 13 | el: '#app', 14 | router, 15 | render: h => h(App) 16 | }) -------------------------------------------------------------------------------- /45-vue-router-reacting/src/routes.js: -------------------------------------------------------------------------------- 1 | import Home from './components/Home.vue'; 2 | import Contacto from './components/Contacto.vue'; 3 | import Usuario from './components/Usuario.vue'; 4 | 5 | export const routes = [ 6 | {path: '/', component: Home}, 7 | {path: '/contacto', component: Contacto}, 8 | {path: '/usuario/:id', component: Usuario}, 9 | ]; -------------------------------------------------------------------------------- /46-vue-router-nested-routes/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["latest", { 4 | "es2015": { "modules": false } 5 | }] 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /46-vue-router-nested-routes/README.md: -------------------------------------------------------------------------------- 1 | # 46-vue-router-nested-routes 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | ``` 17 | 18 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader). 19 | -------------------------------------------------------------------------------- /46-vue-router-nested-routes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 46-vue-router-nested-routes 6 | 7 | 8 |
    9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /46-vue-router-nested-routes/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "46-vue-router-nested-routes", 3 | "description": "A Vue.js project", 4 | "version": "1.0.0", 5 | "author": "@juanwmedia ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 9 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 10 | }, 11 | "dependencies": { 12 | "vue": "^2.2.1", 13 | "vue-router": "^2.3.0" 14 | }, 15 | "devDependencies": { 16 | "babel-core": "^6.0.0", 17 | "babel-loader": "^6.0.0", 18 | "babel-preset-latest": "^6.0.0", 19 | "cross-env": "^3.0.0", 20 | "css-loader": "^0.25.0", 21 | "file-loader": "^0.9.0", 22 | "vue-loader": "^11.1.4", 23 | "vue-template-compiler": "^2.2.1", 24 | "webpack": "^2.2.0", 25 | "webpack-dev-server": "^2.2.0" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /46-vue-router-nested-routes/src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /46-vue-router-nested-routes/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juanwmedia/vue-firebase/f72f17a4943479bb32db9071b6057d78f0a1b3b5/46-vue-router-nested-routes/src/assets/logo.png -------------------------------------------------------------------------------- /46-vue-router-nested-routes/src/components/Equipo.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /46-vue-router-nested-routes/src/components/EquipoJuan.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /46-vue-router-nested-routes/src/components/Home.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /46-vue-router-nested-routes/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App.vue'; 3 | import VueRouter from 'vue-router'; 4 | import {routes} from './routes'; 5 | Vue.use(VueRouter); 6 | 7 | const router = new VueRouter({ 8 | routes 9 | }); 10 | 11 | new Vue({ 12 | el: '#app', 13 | router, 14 | render: h => h(App) 15 | }) 16 | -------------------------------------------------------------------------------- /46-vue-router-nested-routes/src/routes.js: -------------------------------------------------------------------------------- 1 | import Home from './components/Home.vue'; 2 | import Equipo from './components/Equipo.vue'; 3 | import EquipoJuan from './components/EquipoJuan.vue'; 4 | 5 | export const routes = [ 6 | {path: '/', component: Home}, 7 | {path: '/equipo', component: Equipo, children: [ 8 | {path: 'juan', component: EquipoJuan}, 9 | ]}, 10 | ]; -------------------------------------------------------------------------------- /47-vue-router-nested-nav/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["latest", { 4 | "es2015": { "modules": false } 5 | }] 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /47-vue-router-nested-nav/README.md: -------------------------------------------------------------------------------- 1 | # 46-vue-router-nested-routes 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | ``` 17 | 18 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader). 19 | -------------------------------------------------------------------------------- /47-vue-router-nested-nav/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 47-vue-router-nested-nav 6 | 7 | 8 |
    9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /47-vue-router-nested-nav/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "46-vue-router-nested-routes", 3 | "description": "A Vue.js project", 4 | "version": "1.0.0", 5 | "author": "@juanwmedia ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 9 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 10 | }, 11 | "dependencies": { 12 | "vue": "^2.2.1", 13 | "vue-router": "^2.3.0" 14 | }, 15 | "devDependencies": { 16 | "babel-core": "^6.0.0", 17 | "babel-loader": "^6.0.0", 18 | "babel-preset-latest": "^6.0.0", 19 | "cross-env": "^3.0.0", 20 | "css-loader": "^0.25.0", 21 | "file-loader": "^0.9.0", 22 | "vue-loader": "^11.1.4", 23 | "vue-template-compiler": "^2.2.1", 24 | "webpack": "^2.2.0", 25 | "webpack-dev-server": "^2.2.0" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /47-vue-router-nested-nav/src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /47-vue-router-nested-nav/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juanwmedia/vue-firebase/f72f17a4943479bb32db9071b6057d78f0a1b3b5/47-vue-router-nested-nav/src/assets/logo.png -------------------------------------------------------------------------------- /47-vue-router-nested-nav/src/components/Equipo.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /47-vue-router-nested-nav/src/components/Home.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | -------------------------------------------------------------------------------- /47-vue-router-nested-nav/src/components/Usuario.vue: -------------------------------------------------------------------------------- 1 | 11 | -------------------------------------------------------------------------------- /47-vue-router-nested-nav/src/components/UsuarioBio.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /47-vue-router-nested-nav/src/components/UsuarioFotos.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /47-vue-router-nested-nav/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App.vue'; 3 | import VueRouter from 'vue-router'; 4 | import {routes} from './routes'; 5 | Vue.use(VueRouter); 6 | 7 | const router = new VueRouter({ 8 | routes 9 | }); 10 | 11 | new Vue({ 12 | el: '#app', 13 | router, 14 | render: h => h(App) 15 | }) 16 | -------------------------------------------------------------------------------- /47-vue-router-nested-nav/src/routes.js: -------------------------------------------------------------------------------- 1 | import Home from './components/Home.vue'; 2 | import Equipo from './components/Equipo.vue'; 3 | import Usuario from './components/Usuario.vue'; 4 | import UsuarioFotos from './components/UsuarioFotos.vue'; 5 | import UsuarioBio from './components/UsuarioBio.vue'; 6 | 7 | export const routes = [ 8 | {path: '/', component: Home}, 9 | {path: '/equipo/:id', component: Equipo, children: [ 10 | {path: '', component: Usuario, children: [ 11 | {path: 'fotos', component: UsuarioFotos}, 12 | {path: 'bio', component: UsuarioBio} 13 | ]}, 14 | ]}, 15 | ]; -------------------------------------------------------------------------------- /48-vue-router-named-routes/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["latest", { 4 | "es2015": { "modules": false } 5 | }] 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /48-vue-router-named-routes/README.md: -------------------------------------------------------------------------------- 1 | # 46-vue-router-nested-routes 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | ``` 17 | 18 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader). 19 | -------------------------------------------------------------------------------- /48-vue-router-named-routes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 48-vue-router-named-routes 6 | 7 | 8 |
    9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /48-vue-router-named-routes/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "46-vue-router-nested-routes", 3 | "description": "A Vue.js project", 4 | "version": "1.0.0", 5 | "author": "@juanwmedia ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 9 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 10 | }, 11 | "dependencies": { 12 | "vue": "^2.2.1", 13 | "vue-router": "^2.3.0" 14 | }, 15 | "devDependencies": { 16 | "babel-core": "^6.0.0", 17 | "babel-loader": "^6.0.0", 18 | "babel-preset-latest": "^6.0.0", 19 | "cross-env": "^3.0.0", 20 | "css-loader": "^0.25.0", 21 | "file-loader": "^0.9.0", 22 | "vue-loader": "^11.1.4", 23 | "vue-template-compiler": "^2.2.1", 24 | "webpack": "^2.2.0", 25 | "webpack-dev-server": "^2.2.0" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /48-vue-router-named-routes/src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /48-vue-router-named-routes/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juanwmedia/vue-firebase/f72f17a4943479bb32db9071b6057d78f0a1b3b5/48-vue-router-named-routes/src/assets/logo.png -------------------------------------------------------------------------------- /48-vue-router-named-routes/src/components/Equipo.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /48-vue-router-named-routes/src/components/Home.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /48-vue-router-named-routes/src/components/Usuario.vue: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /48-vue-router-named-routes/src/components/UsuarioBio.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /48-vue-router-named-routes/src/components/UsuarioFotos.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /48-vue-router-named-routes/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App.vue'; 3 | import VueRouter from 'vue-router'; 4 | import {routes} from './routes'; 5 | Vue.use(VueRouter); 6 | 7 | const router = new VueRouter({ 8 | routes 9 | }); 10 | 11 | new Vue({ 12 | el: '#app', 13 | router, 14 | render: h => h(App) 15 | }) 16 | -------------------------------------------------------------------------------- /48-vue-router-named-routes/src/routes.js: -------------------------------------------------------------------------------- 1 | import Home from './components/Home.vue'; 2 | import Equipo from './components/Equipo.vue'; 3 | import Usuario from './components/Usuario.vue'; 4 | import UsuarioFotos from './components/UsuarioFotos.vue'; 5 | import UsuarioBio from './components/UsuarioBio.vue'; 6 | 7 | export const routes = [ 8 | {path: '/', component: Home}, 9 | {path: '/equipo/:id', component: Equipo, children: [ 10 | {path: '', component: Usuario, name:'equipo', children: [ 11 | {path: 'fotos', component: UsuarioFotos, name: 'fotos'}, 12 | {path: 'bio', component: UsuarioBio, name: 'bio'} 13 | ]}, 14 | ]}, 15 | ]; -------------------------------------------------------------------------------- /49-vue-router-named-views/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["latest", { 4 | "es2015": { "modules": false } 5 | }] 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /49-vue-router-named-views/README.md: -------------------------------------------------------------------------------- 1 | # 46-vue-router-nested-routes 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | ``` 17 | 18 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader). 19 | -------------------------------------------------------------------------------- /49-vue-router-named-views/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 49-vue-router-named-views 6 | 7 | 8 |
    9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /49-vue-router-named-views/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "46-vue-router-nested-routes", 3 | "description": "A Vue.js project", 4 | "version": "1.0.0", 5 | "author": "@juanwmedia ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 9 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 10 | }, 11 | "dependencies": { 12 | "vue": "^2.2.1", 13 | "vue-router": "^2.3.0" 14 | }, 15 | "devDependencies": { 16 | "babel-core": "^6.0.0", 17 | "babel-loader": "^6.0.0", 18 | "babel-preset-latest": "^6.0.0", 19 | "cross-env": "^3.0.0", 20 | "css-loader": "^0.25.0", 21 | "file-loader": "^0.9.0", 22 | "vue-loader": "^11.1.4", 23 | "vue-template-compiler": "^2.2.1", 24 | "webpack": "^2.2.0", 25 | "webpack-dev-server": "^2.2.0" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /49-vue-router-named-views/src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /49-vue-router-named-views/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juanwmedia/vue-firebase/f72f17a4943479bb32db9071b6057d78f0a1b3b5/49-vue-router-named-views/src/assets/logo.png -------------------------------------------------------------------------------- /49-vue-router-named-views/src/components/Equipo.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /49-vue-router-named-views/src/components/Home.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /49-vue-router-named-views/src/components/Usuario.vue: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /49-vue-router-named-views/src/components/UsuarioBio.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /49-vue-router-named-views/src/components/UsuarioFotos.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /49-vue-router-named-views/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App.vue'; 3 | import VueRouter from 'vue-router'; 4 | import {routes} from './routes'; 5 | Vue.use(VueRouter); 6 | 7 | const router = new VueRouter({ 8 | routes 9 | }); 10 | 11 | new Vue({ 12 | el: '#app', 13 | router, 14 | render: h => h(App) 15 | }) 16 | -------------------------------------------------------------------------------- /49-vue-router-named-views/src/routes.js: -------------------------------------------------------------------------------- 1 | import Home from './components/Home.vue'; 2 | import Equipo from './components/Equipo.vue'; 3 | import Usuario from './components/Usuario.vue'; 4 | import UsuarioFotos from './components/UsuarioFotos.vue'; 5 | import UsuarioBio from './components/UsuarioBio.vue'; 6 | 7 | export const routes = [ 8 | {path: '/', component: Home}, 9 | {path: '/equipo/:id', component: Equipo, children: [ 10 | {path: '', components: { 11 | default: Usuario, 12 | bio: UsuarioBio, 13 | fotos: UsuarioFotos, 14 | }, name:'equipo'}, 15 | ]}, 16 | ]; -------------------------------------------------------------------------------- /5-eventos/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vue.js 8 | 9 | 10 | 11 | 12 | 13 |
    14 |
      15 |
    • 16 | {{ tarea }} 17 |
      • 18 |
    19 |
    20 | 21 | 22 |
    23 | 
    {{ $data }}
    24 |
    25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /5-eventos/js/main.js: -------------------------------------------------------------------------------- 1 | const vm = new Vue({ 2 | el: 'main', 3 | data: { 4 | nuevaTarea: null, 5 | tareas: [ 6 | 'Aprender Vue.js', 7 | 'Aprender ES6', 8 | 'Publicar algo todos los días' 9 | ] 10 | }, 11 | methods: { 12 | agregarTarea() { 13 | // this, hace referencia a la instancia Vue 14 | this.tareas.unshift(this.nuevaTarea); 15 | this.nuevaTarea = null; 16 | } 17 | } 18 | }); 19 | 20 | // Vanilla JavaScript 21 | // function agregarTarea() { 22 | // const input = document.querySelector('input[type=text]'); 23 | // vm.tareas.unshift(input.value); 24 | // input.value = ''; 25 | // } -------------------------------------------------------------------------------- /50-vue-router-redirect/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["latest", { 4 | "es2015": { "modules": false } 5 | }] 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /50-vue-router-redirect/README.md: -------------------------------------------------------------------------------- 1 | # 46-vue-router-nested-routes 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | ``` 17 | 18 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader). 19 | -------------------------------------------------------------------------------- /50-vue-router-redirect/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 50-vue-router-redirection 6 | 7 | 8 |
    9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /50-vue-router-redirect/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "46-vue-router-nested-routes", 3 | "description": "A Vue.js project", 4 | "version": "1.0.0", 5 | "author": "@juanwmedia ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 9 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 10 | }, 11 | "dependencies": { 12 | "vue": "^2.2.1", 13 | "vue-router": "^2.3.0" 14 | }, 15 | "devDependencies": { 16 | "babel-core": "^6.0.0", 17 | "babel-loader": "^6.0.0", 18 | "babel-preset-latest": "^6.0.0", 19 | "cross-env": "^3.0.0", 20 | "css-loader": "^0.25.0", 21 | "file-loader": "^0.9.0", 22 | "vue-loader": "^11.1.4", 23 | "vue-template-compiler": "^2.2.1", 24 | "webpack": "^2.2.0", 25 | "webpack-dev-server": "^2.2.0" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /50-vue-router-redirect/src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /50-vue-router-redirect/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juanwmedia/vue-firebase/f72f17a4943479bb32db9071b6057d78f0a1b3b5/50-vue-router-redirect/src/assets/logo.png -------------------------------------------------------------------------------- /50-vue-router-redirect/src/components/Equipo.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /50-vue-router-redirect/src/components/Home.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /50-vue-router-redirect/src/components/Usuario.vue: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /50-vue-router-redirect/src/components/UsuarioBio.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /50-vue-router-redirect/src/components/UsuarioFotos.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /50-vue-router-redirect/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App.vue'; 3 | import VueRouter from 'vue-router'; 4 | import {routes} from './routes'; 5 | Vue.use(VueRouter); 6 | 7 | const router = new VueRouter({ 8 | routes 9 | }); 10 | 11 | new Vue({ 12 | el: '#app', 13 | router, 14 | render: h => h(App) 15 | }) 16 | -------------------------------------------------------------------------------- /50-vue-router-redirect/src/routes.js: -------------------------------------------------------------------------------- 1 | import Home from './components/Home.vue'; 2 | import Equipo from './components/Equipo.vue'; 3 | import Usuario from './components/Usuario.vue'; 4 | import UsuarioFotos from './components/UsuarioFotos.vue'; 5 | import UsuarioBio from './components/UsuarioBio.vue'; 6 | 7 | export const routes = [ 8 | {path: '/', component: Home, name: 'home'}, 9 | {path: '/prueba', alias: '/otraprueba', redirect: {name: 'home'}, component: Home}, 10 | {path: '/equipo/:id', component: Equipo, children: [ 11 | {path: '', components: { 12 | default: Usuario, 13 | bio: UsuarioBio, 14 | fotos: UsuarioFotos, 15 | }, name:'equipo'}, 16 | ]}, 17 | ]; -------------------------------------------------------------------------------- /51-vue-router-passing-props/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["latest", { 4 | "es2015": { "modules": false } 5 | }] 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /51-vue-router-passing-props/README.md: -------------------------------------------------------------------------------- 1 | # 46-vue-router-nested-routes 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | ``` 17 | 18 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader). 19 | -------------------------------------------------------------------------------- /51-vue-router-passing-props/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 51-vue-router-passing-props 6 | 7 | 8 |
    9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /51-vue-router-passing-props/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "46-vue-router-nested-routes", 3 | "description": "A Vue.js project", 4 | "version": "1.0.0", 5 | "author": "@juanwmedia ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 9 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 10 | }, 11 | "dependencies": { 12 | "vue": "^2.2.1", 13 | "vue-router": "^2.3.0" 14 | }, 15 | "devDependencies": { 16 | "babel-core": "^6.0.0", 17 | "babel-loader": "^6.0.0", 18 | "babel-preset-latest": "^6.0.0", 19 | "cross-env": "^3.0.0", 20 | "css-loader": "^0.25.0", 21 | "file-loader": "^0.9.0", 22 | "vue-loader": "^11.1.4", 23 | "vue-template-compiler": "^2.2.1", 24 | "webpack": "^2.2.0", 25 | "webpack-dev-server": "^2.2.0" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /51-vue-router-passing-props/src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /51-vue-router-passing-props/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juanwmedia/vue-firebase/f72f17a4943479bb32db9071b6057d78f0a1b3b5/51-vue-router-passing-props/src/assets/logo.png -------------------------------------------------------------------------------- /51-vue-router-passing-props/src/components/Contacto.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | -------------------------------------------------------------------------------- /51-vue-router-passing-props/src/components/Equipo.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /51-vue-router-passing-props/src/components/Home.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /51-vue-router-passing-props/src/components/Usuario.vue: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /51-vue-router-passing-props/src/components/UsuarioBio.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /51-vue-router-passing-props/src/components/UsuarioFotos.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /51-vue-router-passing-props/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App.vue'; 3 | import VueRouter from 'vue-router'; 4 | import {routes} from './routes'; 5 | Vue.use(VueRouter); 6 | 7 | const router = new VueRouter({ 8 | routes 9 | }); 10 | 11 | new Vue({ 12 | el: '#app', 13 | router, 14 | render: h => h(App) 15 | }) 16 | -------------------------------------------------------------------------------- /51-vue-router-passing-props/src/routes.js: -------------------------------------------------------------------------------- 1 | import Home from './components/Home.vue'; 2 | import Equipo from './components/Equipo.vue'; 3 | import Usuario from './components/Usuario.vue'; 4 | import UsuarioFotos from './components/UsuarioFotos.vue'; 5 | import UsuarioBio from './components/UsuarioBio.vue'; 6 | import Contacto from './components/Contacto.vue'; 7 | 8 | export const routes = [ 9 | {path: '/', component: Home, name: 'home'}, 10 | {path: '/prueba', alias: '/otraprueba', redirect: {name: 'home'}, component: Home}, 11 | {path: '/equipo/:id', component: Equipo, children: [ 12 | {path: '', components: { 13 | default: Usuario, 14 | bio: UsuarioBio, 15 | fotos: UsuarioFotos, 16 | }, name:'equipo'}, 17 | ]}, 18 | {path: '/contacto', component: Contacto, name: 'contacto', props: {newsletter: false}} 19 | ]; -------------------------------------------------------------------------------- /52-vue-router-history-mode/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["latest", { 4 | "es2015": { "modules": false } 5 | }] 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /52-vue-router-history-mode/README.md: -------------------------------------------------------------------------------- 1 | # 46-vue-router-nested-routes 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | ``` 17 | 18 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader). 19 | -------------------------------------------------------------------------------- /52-vue-router-history-mode/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 52-vue-router-history-mode 6 | 7 | 8 |

    Bienvenid@ a mi super App

    9 |
    10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /52-vue-router-history-mode/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "46-vue-router-nested-routes", 3 | "description": "A Vue.js project", 4 | "version": "1.0.0", 5 | "author": "@juanwmedia ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 9 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 10 | }, 11 | "dependencies": { 12 | "vue": "^2.2.1", 13 | "vue-router": "^2.3.0" 14 | }, 15 | "devDependencies": { 16 | "babel-core": "^6.0.0", 17 | "babel-loader": "^6.0.0", 18 | "babel-preset-latest": "^6.0.0", 19 | "cross-env": "^3.0.0", 20 | "css-loader": "^0.25.0", 21 | "file-loader": "^0.9.0", 22 | "vue-loader": "^11.1.4", 23 | "vue-template-compiler": "^2.2.1", 24 | "webpack": "^2.2.0", 25 | "webpack-dev-server": "^2.2.0" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /52-vue-router-history-mode/src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /52-vue-router-history-mode/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juanwmedia/vue-firebase/f72f17a4943479bb32db9071b6057d78f0a1b3b5/52-vue-router-history-mode/src/assets/logo.png -------------------------------------------------------------------------------- /52-vue-router-history-mode/src/components/Contacto.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | -------------------------------------------------------------------------------- /52-vue-router-history-mode/src/components/Equipo.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /52-vue-router-history-mode/src/components/Home.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /52-vue-router-history-mode/src/components/NoEncontrado.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /52-vue-router-history-mode/src/components/Usuario.vue: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /52-vue-router-history-mode/src/components/UsuarioBio.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /52-vue-router-history-mode/src/components/UsuarioFotos.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /52-vue-router-history-mode/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App.vue'; 3 | import VueRouter from 'vue-router'; 4 | import {routes} from './routes'; 5 | Vue.use(VueRouter); 6 | 7 | const router = new VueRouter({ 8 | mode: 'history', 9 | routes, 10 | }); 11 | 12 | new Vue({ 13 | el: '#app', 14 | router, 15 | render: h => h(App) 16 | }) 17 | -------------------------------------------------------------------------------- /52-vue-router-history-mode/src/routes.js: -------------------------------------------------------------------------------- 1 | import Home from './components/Home.vue'; 2 | import Equipo from './components/Equipo.vue'; 3 | import Usuario from './components/Usuario.vue'; 4 | import UsuarioFotos from './components/UsuarioFotos.vue'; 5 | import UsuarioBio from './components/UsuarioBio.vue'; 6 | import Contacto from './components/Contacto.vue'; 7 | import NoEncontrado from './components/NoEncontrado.vue'; 8 | 9 | export const routes = [ 10 | {path: '', component: Home, name: 'home'}, 11 | {path: '/prueba', alias: '/otraprueba', redirect: {name: 'home'}, component: Home}, 12 | {path: '/equipo/:id', component: Equipo, children: [ 13 | {path: '', components: { 14 | default: Usuario, 15 | bio: UsuarioBio, 16 | fotos: UsuarioFotos, 17 | }, name:'equipo'}, 18 | ]}, 19 | {path: '/contacto', component: Contacto, name: 'contacto', props: {newsletter: false}}, 20 | {path: '*', component: NoEncontrado} 21 | ]; -------------------------------------------------------------------------------- /53-vue-router-global-guard/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["latest", { 4 | "es2015": { "modules": false } 5 | }] 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /53-vue-router-global-guard/README.md: -------------------------------------------------------------------------------- 1 | # 46-vue-router-nested-routes 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | ``` 17 | 18 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader). 19 | -------------------------------------------------------------------------------- /53-vue-router-global-guard/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 53-vue-router-global-guard 6 | 7 | 8 |

    Bienvenid@ a mi super App

    9 |
    10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /53-vue-router-global-guard/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "46-vue-router-nested-routes", 3 | "description": "A Vue.js project", 4 | "version": "1.0.0", 5 | "author": "@juanwmedia ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 9 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 10 | }, 11 | "dependencies": { 12 | "vue": "^2.2.1", 13 | "vue-router": "^2.3.0", 14 | "vuex": "^2.2.1" 15 | }, 16 | "devDependencies": { 17 | "babel-core": "^6.0.0", 18 | "babel-loader": "^6.0.0", 19 | "babel-preset-latest": "^6.0.0", 20 | "cross-env": "^3.0.0", 21 | "css-loader": "^0.25.0", 22 | "file-loader": "^0.9.0", 23 | "vue-loader": "^11.1.4", 24 | "vue-template-compiler": "^2.2.1", 25 | "webpack": "^2.2.0", 26 | "webpack-dev-server": "^2.2.0" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /53-vue-router-global-guard/src/App.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /53-vue-router-global-guard/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juanwmedia/vue-firebase/f72f17a4943479bb32db9071b6057d78f0a1b3b5/53-vue-router-global-guard/src/assets/logo.png -------------------------------------------------------------------------------- /53-vue-router-global-guard/src/components/Contacto.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | -------------------------------------------------------------------------------- /53-vue-router-global-guard/src/components/Equipo.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /53-vue-router-global-guard/src/components/Home.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /53-vue-router-global-guard/src/components/NoEncontrado.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /53-vue-router-global-guard/src/components/Usuario.vue: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /53-vue-router-global-guard/src/components/UsuarioBio.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /53-vue-router-global-guard/src/components/UsuarioFotos.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /53-vue-router-global-guard/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App.vue'; 3 | import VueRouter from 'vue-router'; 4 | import {routes} from './routes'; 5 | import {store} from './store'; 6 | 7 | Vue.use(VueRouter); 8 | 9 | const router = new VueRouter({ 10 | mode: 'history', 11 | routes, 12 | }); 13 | 14 | router.beforeEach((to, from, next) => { 15 | console.log('Acceso a ruta'); 16 | next(store.state.auth); 17 | }); 18 | 19 | new Vue({ 20 | el: '#app', 21 | router, 22 | store, 23 | render: h => h(App) 24 | }); 25 | -------------------------------------------------------------------------------- /53-vue-router-global-guard/src/routes.js: -------------------------------------------------------------------------------- 1 | import Home from './components/Home.vue'; 2 | import Equipo from './components/Equipo.vue'; 3 | import Usuario from './components/Usuario.vue'; 4 | import UsuarioFotos from './components/UsuarioFotos.vue'; 5 | import UsuarioBio from './components/UsuarioBio.vue'; 6 | import Contacto from './components/Contacto.vue'; 7 | import NoEncontrado from './components/NoEncontrado.vue'; 8 | 9 | export const routes = [ 10 | {path: '/', component: Home, name: 'home'}, 11 | {path: '/prueba', alias: '/otraprueba', redirect: {name: 'home'}, component: Home}, 12 | {path: '/equipo/:id', component: Equipo, children: [ 13 | {path: '', components: { 14 | default: Usuario, 15 | bio: UsuarioBio, 16 | fotos: UsuarioFotos, 17 | }, name:'equipo'}, 18 | ]}, 19 | {path: '/contacto', component: Contacto, name: 'contacto', props: {newsletter: false}}, 20 | {path: '*', component: NoEncontrado} 21 | ]; -------------------------------------------------------------------------------- /53-vue-router-global-guard/src/store.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import Vuex from 'vuex'; 3 | Vue.use(Vuex); 4 | 5 | export const store = new Vuex.Store({ 6 | state: { 7 | auth: true, 8 | }, 9 | mutations: { 10 | cambiar: (state) => state.auth = !state.auth, 11 | } 12 | }); -------------------------------------------------------------------------------- /54-vue-router-route-guard/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["latest", { 4 | "es2015": { "modules": false } 5 | }] 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /54-vue-router-route-guard/README.md: -------------------------------------------------------------------------------- 1 | # 46-vue-router-nested-routes 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | ``` 17 | 18 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader). 19 | -------------------------------------------------------------------------------- /54-vue-router-route-guard/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 54-vue-router-route-guard 6 | 7 | 8 |

    Bienvenid@ a mi super App

    9 |
    10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /54-vue-router-route-guard/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "46-vue-router-nested-routes", 3 | "description": "A Vue.js project", 4 | "version": "1.0.0", 5 | "author": "@juanwmedia ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 9 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 10 | }, 11 | "dependencies": { 12 | "vue": "^2.2.1", 13 | "vue-router": "^2.3.0", 14 | "vuex": "^2.2.1" 15 | }, 16 | "devDependencies": { 17 | "babel-core": "^6.0.0", 18 | "babel-loader": "^6.0.0", 19 | "babel-preset-latest": "^6.0.0", 20 | "cross-env": "^3.0.0", 21 | "css-loader": "^0.25.0", 22 | "file-loader": "^0.9.0", 23 | "vue-loader": "^11.1.4", 24 | "vue-template-compiler": "^2.2.1", 25 | "webpack": "^2.2.0", 26 | "webpack-dev-server": "^2.2.0" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /54-vue-router-route-guard/src/App.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /54-vue-router-route-guard/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juanwmedia/vue-firebase/f72f17a4943479bb32db9071b6057d78f0a1b3b5/54-vue-router-route-guard/src/assets/logo.png -------------------------------------------------------------------------------- /54-vue-router-route-guard/src/components/Contacto.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | -------------------------------------------------------------------------------- /54-vue-router-route-guard/src/components/Equipo.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /54-vue-router-route-guard/src/components/Home.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /54-vue-router-route-guard/src/components/NoEncontrado.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /54-vue-router-route-guard/src/components/Usuario.vue: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /54-vue-router-route-guard/src/components/UsuarioBio.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /54-vue-router-route-guard/src/components/UsuarioFotos.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /54-vue-router-route-guard/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App.vue'; 3 | import VueRouter from 'vue-router'; 4 | import {routes} from './routes'; 5 | import {store} from './store'; 6 | Vue.use(VueRouter); 7 | 8 | const router = new VueRouter({ 9 | mode: 'history', 10 | routes, 11 | }); 12 | 13 | router.beforeEach((to, from, next) => { 14 | console.log('Acceso global a ruta'); 15 | next(); 16 | }); 17 | 18 | new Vue({ 19 | el: '#app', 20 | router, 21 | store, 22 | render: h => h(App) 23 | }); 24 | -------------------------------------------------------------------------------- /54-vue-router-route-guard/src/store.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import Vuex from 'vuex'; 3 | Vue.use(Vuex); 4 | 5 | export const store = new Vuex.Store({ 6 | state: { 7 | auth: true, 8 | }, 9 | mutations: { 10 | cambiar: (state) => state.auth = !state.auth, 11 | } 12 | }); -------------------------------------------------------------------------------- /55-vue-router-component-guard/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["latest", { 4 | "es2015": { "modules": false } 5 | }] 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /55-vue-router-component-guard/README.md: -------------------------------------------------------------------------------- 1 | # 46-vue-router-nested-routes 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | ``` 17 | 18 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader). 19 | -------------------------------------------------------------------------------- /55-vue-router-component-guard/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 55-vue-router-component-guard 6 | 7 | 8 |

    Bienvenid@ a mi super App

    9 |
    10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /55-vue-router-component-guard/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "46-vue-router-nested-routes", 3 | "description": "A Vue.js project", 4 | "version": "1.0.0", 5 | "author": "@juanwmedia ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 9 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 10 | }, 11 | "dependencies": { 12 | "vue": "^2.2.1", 13 | "vue-router": "^2.3.0", 14 | "vuex": "^2.2.1" 15 | }, 16 | "devDependencies": { 17 | "babel-core": "^6.0.0", 18 | "babel-loader": "^6.0.0", 19 | "babel-preset-latest": "^6.0.0", 20 | "cross-env": "^3.0.0", 21 | "css-loader": "^0.25.0", 22 | "file-loader": "^0.9.0", 23 | "vue-loader": "^11.1.4", 24 | "vue-template-compiler": "^2.2.1", 25 | "webpack": "^2.2.0", 26 | "webpack-dev-server": "^2.2.0" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /55-vue-router-component-guard/src/App.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /55-vue-router-component-guard/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juanwmedia/vue-firebase/f72f17a4943479bb32db9071b6057d78f0a1b3b5/55-vue-router-component-guard/src/assets/logo.png -------------------------------------------------------------------------------- /55-vue-router-component-guard/src/components/Contacto.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | -------------------------------------------------------------------------------- /55-vue-router-component-guard/src/components/Equipo.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /55-vue-router-component-guard/src/components/Home.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /55-vue-router-component-guard/src/components/NoEncontrado.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /55-vue-router-component-guard/src/components/Usuario.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /55-vue-router-component-guard/src/components/UsuarioBio.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /55-vue-router-component-guard/src/components/UsuarioFotos.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /55-vue-router-component-guard/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App.vue'; 3 | import VueRouter from 'vue-router'; 4 | import {routes} from './routes'; 5 | import {store} from './store'; 6 | Vue.use(VueRouter); 7 | 8 | const router = new VueRouter({ 9 | routes, 10 | }); 11 | 12 | router.beforeEach((to, from, next) => { 13 | console.log('Acceso global a ruta'); 14 | next(); 15 | }); 16 | 17 | new Vue({ 18 | el: '#app', 19 | router, 20 | store, 21 | render: h => h(App) 22 | }); 23 | -------------------------------------------------------------------------------- /55-vue-router-component-guard/src/store.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import Vuex from 'vuex'; 3 | Vue.use(Vuex); 4 | 5 | export const store = new Vuex.Store({ 6 | state: { 7 | auth: true, 8 | }, 9 | mutations: { 10 | cambiar: (state) => state.auth = !state.auth, 11 | } 12 | }); -------------------------------------------------------------------------------- /56-vue-router-meta-field/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["latest", { 4 | "es2015": { "modules": false } 5 | }] 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /56-vue-router-meta-field/README.md: -------------------------------------------------------------------------------- 1 | # 46-vue-router-nested-routes 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | ``` 17 | 18 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader). 19 | -------------------------------------------------------------------------------- /56-vue-router-meta-field/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 55-vue-router-component-guard 6 | 7 | 8 |

    Bienvenid@ a mi super App

    9 |
    10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /56-vue-router-meta-field/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "46-vue-router-nested-routes", 3 | "description": "A Vue.js project", 4 | "version": "1.0.0", 5 | "author": "@juanwmedia ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 9 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 10 | }, 11 | "dependencies": { 12 | "vue": "^2.2.1", 13 | "vue-router": "^2.3.0", 14 | "vuex": "^2.2.1" 15 | }, 16 | "devDependencies": { 17 | "babel-core": "^6.0.0", 18 | "babel-loader": "^6.0.0", 19 | "babel-preset-latest": "^6.0.0", 20 | "cross-env": "^3.0.0", 21 | "css-loader": "^0.25.0", 22 | "file-loader": "^0.9.0", 23 | "vue-loader": "^11.1.4", 24 | "vue-template-compiler": "^2.2.1", 25 | "webpack": "^2.2.0", 26 | "webpack-dev-server": "^2.2.0" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /56-vue-router-meta-field/src/App.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /56-vue-router-meta-field/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juanwmedia/vue-firebase/f72f17a4943479bb32db9071b6057d78f0a1b3b5/56-vue-router-meta-field/src/assets/logo.png -------------------------------------------------------------------------------- /56-vue-router-meta-field/src/components/Contacto.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | -------------------------------------------------------------------------------- /56-vue-router-meta-field/src/components/Equipo.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /56-vue-router-meta-field/src/components/Home.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /56-vue-router-meta-field/src/components/NoEncontrado.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /56-vue-router-meta-field/src/components/Usuario.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /56-vue-router-meta-field/src/components/UsuarioBio.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /56-vue-router-meta-field/src/components/UsuarioFotos.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /56-vue-router-meta-field/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App.vue'; 3 | import VueRouter from 'vue-router'; 4 | import {routes} from './routes'; 5 | import {store} from './store'; 6 | Vue.use(VueRouter); 7 | 8 | const router = new VueRouter({ 9 | routes, 10 | }); 11 | 12 | router.beforeEach((to, from, next) => { 13 | console.log('Acceso global a ruta'); 14 | 15 | if (to.meta.privado) 16 | next(store.state.auth); 17 | else 18 | next(); 19 | }); 20 | 21 | new Vue({ 22 | el: '#app', 23 | router, 24 | store, 25 | render: h => h(App) 26 | }); 27 | -------------------------------------------------------------------------------- /56-vue-router-meta-field/src/store.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import Vuex from 'vuex'; 3 | Vue.use(Vuex); 4 | 5 | export const store = new Vuex.Store({ 6 | state: { 7 | auth: true, 8 | }, 9 | mutations: { 10 | cambiar: (state) => state.auth = !state.auth, 11 | } 12 | }); -------------------------------------------------------------------------------- /57-vue-router-transitions/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["latest", { 4 | "es2015": { "modules": false } 5 | }] 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /57-vue-router-transitions/README.md: -------------------------------------------------------------------------------- 1 | # 46-vue-router-nested-routes 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | ``` 17 | 18 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader). 19 | -------------------------------------------------------------------------------- /57-vue-router-transitions/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 56-vue-router-transtions 6 | 7 | 8 |

    Bienvenid@ a mi super App

    9 |
    10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /57-vue-router-transitions/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "46-vue-router-nested-routes", 3 | "description": "A Vue.js project", 4 | "version": "1.0.0", 5 | "author": "@juanwmedia ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 9 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 10 | }, 11 | "dependencies": { 12 | "vue": "^2.2.1", 13 | "vue-router": "^2.3.0", 14 | "vuex": "^2.2.1" 15 | }, 16 | "devDependencies": { 17 | "babel-core": "^6.0.0", 18 | "babel-loader": "^6.0.0", 19 | "babel-preset-latest": "^6.0.0", 20 | "cross-env": "^3.0.0", 21 | "css-loader": "^0.25.0", 22 | "file-loader": "^0.9.0", 23 | "vue-loader": "^11.1.4", 24 | "vue-template-compiler": "^2.2.1", 25 | "webpack": "^2.2.0", 26 | "webpack-dev-server": "^2.2.0" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /57-vue-router-transitions/src/App.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 17 | -------------------------------------------------------------------------------- /57-vue-router-transitions/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juanwmedia/vue-firebase/f72f17a4943479bb32db9071b6057d78f0a1b3b5/57-vue-router-transitions/src/assets/logo.png -------------------------------------------------------------------------------- /57-vue-router-transitions/src/components/Contacto.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | -------------------------------------------------------------------------------- /57-vue-router-transitions/src/components/Equipo.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /57-vue-router-transitions/src/components/Home.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /57-vue-router-transitions/src/components/NoEncontrado.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /57-vue-router-transitions/src/components/Usuario.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /57-vue-router-transitions/src/components/UsuarioBio.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /57-vue-router-transitions/src/components/UsuarioFotos.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /57-vue-router-transitions/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App.vue'; 3 | import VueRouter from 'vue-router'; 4 | import {routes} from './routes'; 5 | import {store} from './store'; 6 | Vue.use(VueRouter); 7 | 8 | const router = new VueRouter({ 9 | routes, 10 | }); 11 | 12 | router.beforeEach((to, from, next) => { 13 | console.log('Acceso global a ruta'); 14 | 15 | if (to.meta.privado) 16 | next(store.state.auth); 17 | else 18 | next(); 19 | }); 20 | 21 | new Vue({ 22 | el: '#app', 23 | router, 24 | store, 25 | render: h => h(App) 26 | }); 27 | -------------------------------------------------------------------------------- /57-vue-router-transitions/src/store.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import Vuex from 'vuex'; 3 | Vue.use(Vuex); 4 | 5 | export const store = new Vuex.Store({ 6 | state: { 7 | auth: true, 8 | }, 9 | mutations: { 10 | cambiar: (state) => state.auth = !state.auth, 11 | } 12 | }); -------------------------------------------------------------------------------- /58-vue-router-data-fetch/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["latest", { 4 | "es2015": { "modules": false } 5 | }] 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /58-vue-router-data-fetch/README.md: -------------------------------------------------------------------------------- 1 | # 46-vue-router-nested-routes 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | ``` 17 | 18 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader). 19 | -------------------------------------------------------------------------------- /58-vue-router-data-fetch/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 58-vue-router-data-fetch 6 | 7 | 8 |

    Bienvenid@ a mi super App

    9 |
    10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /58-vue-router-data-fetch/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "46-vue-router-nested-routes", 3 | "description": "A Vue.js project", 4 | "version": "1.0.0", 5 | "author": "@juanwmedia ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 9 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 10 | }, 11 | "dependencies": { 12 | "vue": "^2.2.1", 13 | "vue-router": "^2.3.0", 14 | "vuex": "^2.2.1" 15 | }, 16 | "devDependencies": { 17 | "babel-core": "^6.0.0", 18 | "babel-loader": "^6.0.0", 19 | "babel-preset-latest": "^6.0.0", 20 | "cross-env": "^3.0.0", 21 | "css-loader": "^0.25.0", 22 | "file-loader": "^0.9.0", 23 | "vue-loader": "^11.1.4", 24 | "vue-template-compiler": "^2.2.1", 25 | "webpack": "^2.2.0", 26 | "webpack-dev-server": "^2.2.0" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /58-vue-router-data-fetch/src/App.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 17 | -------------------------------------------------------------------------------- /58-vue-router-data-fetch/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juanwmedia/vue-firebase/f72f17a4943479bb32db9071b6057d78f0a1b3b5/58-vue-router-data-fetch/src/assets/logo.png -------------------------------------------------------------------------------- /58-vue-router-data-fetch/src/components/Equipo.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /58-vue-router-data-fetch/src/components/Home.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /58-vue-router-data-fetch/src/components/NoEncontrado.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /58-vue-router-data-fetch/src/components/UsuarioBio.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /58-vue-router-data-fetch/src/components/UsuarioFotos.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /58-vue-router-data-fetch/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App.vue'; 3 | import VueRouter from 'vue-router'; 4 | import {routes} from './routes'; 5 | import {store} from './store'; 6 | Vue.use(VueRouter); 7 | 8 | const router = new VueRouter({ 9 | routes, 10 | }); 11 | 12 | router.beforeEach((to, from, next) => { 13 | console.log('Acceso global a ruta'); 14 | 15 | if (to.meta.privado) 16 | next(store.state.auth); 17 | else 18 | next(); 19 | }); 20 | 21 | new Vue({ 22 | el: '#app', 23 | router, 24 | store, 25 | render: h => h(App) 26 | }); 27 | -------------------------------------------------------------------------------- /58-vue-router-data-fetch/src/store.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import Vuex from 'vuex'; 3 | Vue.use(Vuex); 4 | 5 | export const store = new Vuex.Store({ 6 | state: { 7 | auth: true, 8 | }, 9 | mutations: { 10 | cambiar: (state) => state.auth = !state.auth, 11 | } 12 | }); -------------------------------------------------------------------------------- /59-vue-router-srcoll/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["latest", { 4 | "es2015": { "modules": false } 5 | }] 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /59-vue-router-srcoll/README.md: -------------------------------------------------------------------------------- 1 | # 59-vue-router-srcoll 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | ``` 17 | 18 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader). 19 | -------------------------------------------------------------------------------- /59-vue-router-srcoll/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 59-vue-router-srcoll 6 | 7 | 8 |
    9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /59-vue-router-srcoll/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "59-vue-router-srcoll", 3 | "description": "A Vue.js project", 4 | "version": "1.0.0", 5 | "author": "@juanwmedia ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 9 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 10 | }, 11 | "dependencies": { 12 | "vue": "^2.2.1", 13 | "vue-router": "^2.5.2" 14 | }, 15 | "devDependencies": { 16 | "babel-core": "^6.0.0", 17 | "babel-loader": "^6.0.0", 18 | "babel-preset-latest": "^6.0.0", 19 | "cross-env": "^3.0.0", 20 | "css-loader": "^0.25.0", 21 | "file-loader": "^0.9.0", 22 | "vue-loader": "^11.1.4", 23 | "vue-template-compiler": "^2.2.1", 24 | "webpack": "^2.2.0", 25 | "webpack-dev-server": "^2.2.0" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /59-vue-router-srcoll/src/App.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /59-vue-router-srcoll/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juanwmedia/vue-firebase/f72f17a4943479bb32db9071b6057d78f0a1b3b5/59-vue-router-srcoll/src/assets/logo.png -------------------------------------------------------------------------------- /59-vue-router-srcoll/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App.vue'; 3 | import Info from './components/Info.vue'; 4 | import Bio from './components/Bio.vue'; 5 | 6 | /* Router */ 7 | import VueRouter from 'vue-router'; 8 | 9 | Vue.use(VueRouter); 10 | 11 | const routes = [ 12 | {path: '/', component: Info}, 13 | {path: '/bio', component: Bio}, 14 | ]; 15 | 16 | const router = new VueRouter({ 17 | routes, 18 | mode: 'history', 19 | scrollBehavior(to, from, savedPosition) { 20 | const position = {}; 21 | console.log(to); 22 | if (to.hash) { 23 | position.selector = to.hash; 24 | } else { 25 | position.x = 200; 26 | position.y = 100; 27 | } 28 | return position; 29 | } 30 | }); 31 | 32 | new Vue({ 33 | el: '#app', 34 | router, 35 | render: h => h(App) 36 | }); -------------------------------------------------------------------------------- /6-propiedades-computadas/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vue.js 8 | 9 | 10 | 11 | 12 | 13 |
    14 |
      15 |
    • 16 | {{ tarea.titulo }} 17 |
      • 18 |
    19 |
    20 | 21 | 22 |
    23 | 
    {{ $data }}
    24 |
    25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /60-vue-router-lazy-load/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["latest", { 4 | "es2015": { "modules": false } 5 | }] 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /60-vue-router-lazy-load/README.md: -------------------------------------------------------------------------------- 1 | # 59-vue-router-srcoll 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | ``` 17 | 18 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader). 19 | -------------------------------------------------------------------------------- /60-vue-router-lazy-load/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 60-vue-router-lazy-load 6 | 7 | 8 |
    9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /60-vue-router-lazy-load/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "59-vue-router-srcoll", 3 | "description": "A Vue.js project", 4 | "version": "1.0.0", 5 | "author": "@juanwmedia ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 9 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 10 | }, 11 | "dependencies": { 12 | "vue": "^2.2.1", 13 | "vue-router": "^2.5.2" 14 | }, 15 | "devDependencies": { 16 | "babel-core": "^6.0.0", 17 | "babel-loader": "^6.0.0", 18 | "babel-preset-latest": "^6.0.0", 19 | "cross-env": "^3.0.0", 20 | "css-loader": "^0.25.0", 21 | "file-loader": "^0.9.0", 22 | "vue-loader": "^11.1.4", 23 | "vue-template-compiler": "^2.2.1", 24 | "webpack": "^2.2.0", 25 | "webpack-dev-server": "^2.2.0" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /60-vue-router-lazy-load/src/App.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /60-vue-router-lazy-load/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juanwmedia/vue-firebase/f72f17a4943479bb32db9071b6057d78f0a1b3b5/60-vue-router-lazy-load/src/assets/logo.png -------------------------------------------------------------------------------- /61-vue-directive-hooks/js/main.js: -------------------------------------------------------------------------------- 1 | Vue.directive('fijar', { 2 | bind(el, binding) { 3 | console.log(el,binding); 4 | el.style.position = 'fixed'; 5 | 6 | if (binding.expression) { 7 | el.style.top = binding.expression + 'px'; 8 | } 9 | 10 | if (binding.arg) { 11 | let color = 'goldenrod'; 12 | let modificadores = Object.keys(binding.modifiers); 13 | if (modificadores.length > 0) { 14 | color = modificadores[0]; 15 | } 16 | el.style.backgroundColor = color; 17 | } 18 | } 19 | }); 20 | 21 | new Vue({ 22 | el: '#app', 23 | }); -------------------------------------------------------------------------------- /62-vue-directive-object-literals/js/main.js: -------------------------------------------------------------------------------- 1 | Vue.directive('fijar', { 2 | bind(el, binding) { 3 | console.log(binding.value); 4 | /* el.style.position = 'fixed'; 5 | 6 | if (binding.expression) { 7 | el.style.top = binding.expression + 'px'; 8 | } 9 | 10 | if (binding.arg) { 11 | let color = 'goldenrod'; 12 | let modificadores = Object.keys(binding.modifiers); 13 | if (modificadores.length > 0) { 14 | color = modificadores[0]; 15 | } 16 | el.style.backgroundColor = color; 17 | }*/ 18 | } 19 | }); 20 | 21 | new Vue({ 22 | el: '#app', 23 | }); -------------------------------------------------------------------------------- /64-mixins-intro/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["latest", { 4 | "es2015": { "modules": false } 5 | }] 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /64-mixins-intro/README.md: -------------------------------------------------------------------------------- 1 | # 63-mixins-intro 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | ``` 17 | 18 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader). 19 | -------------------------------------------------------------------------------- /64-mixins-intro/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 63-mixins-intro 6 | 7 | 8 |
    9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /64-mixins-intro/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "63-mixins-intro", 3 | "description": "A Vue.js project", 4 | "version": "1.0.0", 5 | "author": "@juanwmedia ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 9 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 10 | }, 11 | "dependencies": { 12 | "vue": "^2.2.1" 13 | }, 14 | "devDependencies": { 15 | "babel-core": "^6.0.0", 16 | "babel-loader": "^6.0.0", 17 | "babel-preset-latest": "^6.0.0", 18 | "cross-env": "^3.0.0", 19 | "css-loader": "^0.25.0", 20 | "file-loader": "^0.9.0", 21 | "vue-loader": "^11.1.4", 22 | "vue-template-compiler": "^2.2.1", 23 | "webpack": "^2.2.0", 24 | "webpack-dev-server": "^2.2.0" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /64-mixins-intro/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juanwmedia/vue-firebase/f72f17a4943479bb32db9071b6057d78f0a1b3b5/64-mixins-intro/src/assets/logo.png -------------------------------------------------------------------------------- /64-mixins-intro/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | new Vue({ 5 | el: '#app', 6 | render: h => h(App) 7 | }) 8 | -------------------------------------------------------------------------------- /64-mixins-intro/src/mixins.js: -------------------------------------------------------------------------------- 1 | export const mixin = { 2 | data () { 3 | return { 4 | aprender: [ 5 | {nombre: 'Ionic 7'}, 6 | {nombre: 'Node'}, 7 | {nombre: 'MongoDB'}, 8 | {nombre: 'Angular 3'}, 9 | {nombre: 'Laravel'}, 10 | ], 11 | nuevaTecnologia: null, 12 | } 13 | }, 14 | methods: { 15 | agregarTecnologia() { 16 | this.aprender.unshift({ 17 | nombre: this.nuevaTecnologia, 18 | }); 19 | this.nuevaTecnologia = null; 20 | } 21 | } 22 | }; -------------------------------------------------------------------------------- /65-mixins-merge/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["latest", { 4 | "es2015": { "modules": false } 5 | }] 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /65-mixins-merge/README.md: -------------------------------------------------------------------------------- 1 | # 63-mixins-intro 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | ``` 17 | 18 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader). 19 | -------------------------------------------------------------------------------- /65-mixins-merge/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 65-mixins-merge 6 | 7 | 8 |
    9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /65-mixins-merge/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "63-mixins-intro", 3 | "description": "A Vue.js project", 4 | "version": "1.0.0", 5 | "author": "@juanwmedia ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 9 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 10 | }, 11 | "dependencies": { 12 | "vue": "^2.2.1" 13 | }, 14 | "devDependencies": { 15 | "babel-core": "^6.0.0", 16 | "babel-loader": "^6.0.0", 17 | "babel-preset-latest": "^6.0.0", 18 | "cross-env": "^3.0.0", 19 | "css-loader": "^0.25.0", 20 | "file-loader": "^0.9.0", 21 | "vue-loader": "^11.1.4", 22 | "vue-template-compiler": "^2.2.1", 23 | "webpack": "^2.2.0", 24 | "webpack-dev-server": "^2.2.0" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /65-mixins-merge/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juanwmedia/vue-firebase/f72f17a4943479bb32db9071b6057d78f0a1b3b5/65-mixins-merge/src/assets/logo.png -------------------------------------------------------------------------------- /65-mixins-merge/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | new Vue({ 5 | el: '#app', 6 | render: h => h(App) 7 | }) 8 | -------------------------------------------------------------------------------- /65-mixins-merge/src/mixins.js: -------------------------------------------------------------------------------- 1 | export const mixin = { 2 | created() { 3 | console.log('Created desde el mixin'); 4 | this.saludar(); 5 | }, 6 | data () { 7 | return { 8 | aprender: [ 9 | {nombre: 'Ionic 7'}, 10 | {nombre: 'Node'}, 11 | {nombre: 'MongoDB'}, 12 | {nombre: 'Angular 3'}, 13 | {nombre: 'Laravel'}, 14 | ], 15 | nuevaTecnologia: null, 16 | } 17 | }, 18 | methods: { 19 | agregarTecnologia() { 20 | this.aprender.unshift({ 21 | nombre: this.nuevaTecnologia, 22 | }); 23 | this.nuevaTecnologia = null; 24 | }, 25 | saludar() { 26 | alert('Hola desde el mixin'); 27 | } 28 | } 29 | }; -------------------------------------------------------------------------------- /66-global-mixins/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["latest", { 4 | "es2015": { "modules": false } 5 | }] 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /66-global-mixins/README.md: -------------------------------------------------------------------------------- 1 | # 63-mixins-intro 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | ``` 17 | 18 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader). 19 | -------------------------------------------------------------------------------- /66-global-mixins/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 66-global-mixins 6 | 7 | 8 |
    9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /66-global-mixins/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "63-mixins-intro", 3 | "description": "A Vue.js project", 4 | "version": "1.0.0", 5 | "author": "@juanwmedia ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 9 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 10 | }, 11 | "dependencies": { 12 | "vue": "^2.2.1" 13 | }, 14 | "devDependencies": { 15 | "babel-core": "^6.0.0", 16 | "babel-loader": "^6.0.0", 17 | "babel-preset-latest": "^6.0.0", 18 | "cross-env": "^3.0.0", 19 | "css-loader": "^0.25.0", 20 | "file-loader": "^0.9.0", 21 | "vue-loader": "^11.1.4", 22 | "vue-template-compiler": "^2.2.1", 23 | "webpack": "^2.2.0", 24 | "webpack-dev-server": "^2.2.0" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /66-global-mixins/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juanwmedia/vue-firebase/f72f17a4943479bb32db9071b6057d78f0a1b3b5/66-global-mixins/src/assets/logo.png -------------------------------------------------------------------------------- /66-global-mixins/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | new Vue({ 5 | el: '#app', 6 | render: h => h(App), 7 | nombre: 'Instancia principal', 8 | }); 9 | -------------------------------------------------------------------------------- /67-vue-filters/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { "modules": false }] 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /67-vue-filters/README.md: -------------------------------------------------------------------------------- 1 | # 67-vue-filters 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | ``` 17 | 18 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader). 19 | -------------------------------------------------------------------------------- /67-vue-filters/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 67-vue-filters 6 | 7 | 8 |
    9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /67-vue-filters/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "67-vue-filters", 3 | "description": "A Vue.js project", 4 | "version": "1.0.0", 5 | "author": "@juanwmedia ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 9 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 10 | }, 11 | "dependencies": { 12 | "vue": "^2.3.3" 13 | }, 14 | "devDependencies": { 15 | "babel-core": "^6.0.0", 16 | "babel-loader": "^6.0.0", 17 | "babel-preset-env": "^1.5.1", 18 | "cross-env": "^3.0.0", 19 | "css-loader": "^0.25.0", 20 | "file-loader": "^0.9.0", 21 | "vue-loader": "^12.1.0", 22 | "vue-template-compiler": "^2.3.3", 23 | "webpack": "^2.6.1", 24 | "webpack-dev-server": "^2.4.5" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /67-vue-filters/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juanwmedia/vue-firebase/f72f17a4943479bb32db9071b6057d78f0a1b3b5/67-vue-filters/src/assets/logo.png -------------------------------------------------------------------------------- /67-vue-filters/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | Vue.filter('mayusculas', function(valor){ 5 | return valor.toUpperCase(); 6 | }); 7 | 8 | new Vue({ 9 | el: '#app', 10 | render: h => h(App) 11 | }); 12 | -------------------------------------------------------------------------------- /7-filtros/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vue.js 8 | 9 | 10 | 11 | 12 | 13 |
    14 | 15 |
      16 |
    • 17 | {{ juego.titulo | alReves }} 18 |
      • 19 |
    20 | 21 | 
    {{ $data }}
    22 |
    23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /8-instancia-vue/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vue.js 8 | 9 | 10 | 11 | 12 | 13 |
    14 |

    15 | 16 | 
    {{ $data }}
    17 |
    18 |
    19 |

    {{ mensaje }}

    20 |
    21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /8-instancia-vue/js/main.js: -------------------------------------------------------------------------------- 1 | const vm1 = new Vue({ 2 | el: 'main', 3 | data: { 4 | mensaje: 'Instancia Vue 1', 5 | }, 6 | beforeUpdate() { 7 | console.log('BeforeUpdate: ', this.mensaje); 8 | }, 9 | updated() { 10 | console.log('Update: ', this.mensaje); 11 | }, 12 | methods: { 13 | alReves(){ 14 | this.mensaje = this.mensaje.split('').reverse().join(''); 15 | } 16 | }, 17 | computed: { 18 | mensajeMayusculas(){ 19 | return this.mensaje.toUpperCase(); 20 | } 21 | } 22 | }); 23 | 24 | const vm2 = new Vue({ 25 | el: '#app', 26 | data: { 27 | mensaje: 'Instancia Vue 2', 28 | } 29 | }); -------------------------------------------------------------------------------- /9-data-binding-atributos-clases/js/main.js: -------------------------------------------------------------------------------- 1 | new Vue({ 2 | el: 'main', 3 | data: { 4 | tareas: [ 5 | {titulo: 'Hacer la compra', completado: false}, 6 | {titulo: 'Aprender Vue.js', completado: false}, 7 | {titulo: 'Aprender Firebase', completado: false}, 8 | {titulo: 'Dominar ES6', completado: false}, 9 | {titulo: 'Salir a correr', completado: false}, 10 | ] 11 | }, 12 | methods: { 13 | completarTarea(tarea) { 14 | tarea.completado = !tarea.completado; 15 | } 16 | }, 17 | computed: { 18 | tareasCompletadas() { 19 | return this.tareas.filter((tarea) => tarea.completado); 20 | } 21 | } 22 | }); -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Aprende Vue2 y Firebase paso a paso 2 | 3 | Curso 100% gratuito. La mejor forma de dar el salto a JavaScript moderno. 4 | 5 | ## Repositorio del curso 6 | 7 | Este es el repositorio del curso. En el encontrarás todos los documentos y archivos que uso en cada una de las lecciones. Puedes clonarlo o descargarlo para utilizarlo en tu entorno de desarollo. 8 | 9 | ### Más información 10 | 11 | * [vue.wmedia.es](http://vue.wmedia.es/) - Landing page del curso. 12 | * [Curso](http://wmedia.teachable.com/) - Apúntate al curso --------------------------------------------------------------------------------