[ { "path": "1-instalacion-data-binding/index.html", "content": "\n\n\n \n \n Vue.js\n \n \n\n\n\n
\n

{{ mensaje }}

\n \n 
{{ $data }}
\n
\n \n \n\n\n" }, { "path": "1-instalacion-data-binding/js/main.js", "content": "// Vanilla JavaScript\n// const input = document.querySelector('input');\n// const h1 = document.querySelector('h1');\n// input.addEventListener('keyup', () => h1.innerHTML = input.value);\n\n// Vue.js\nnew Vue({\n el: 'main',\n data: {\n mensaje: 'Hola mundo!',\n }\n});" }, { "path": "10-transiciones/index.html", "content": "\n\n\n\n \n \n Vue.js\n \n \n \n \n\n\n\n
\n \n \n \n

\n \n\n \n \n

\n \n\n \n \n

\n \n\n \n \n

\n

No hay mensaje

\n \n 
{{ $data }}
\n
\n \n \n\n\n" }, { "path": "10-transiciones/main.js", "content": "new Vue({\n el: 'main',\n data: {\n mostrar: true,\n mensajes: {\n transicion: 'Transiciones CSS con Vue.js',\n animacion: 'Animaciones CSS con Vue.js',\n animationCustom: 'Animaciones custom CSS con Vue.js',\n entreElementos: 'Transiciones entre elementos con Vue.js'\n }\n },\n});" }, { "path": "11-ajax-vue-resource/index.html", "content": "\n\n\n\n \n \n Vue.js\n \n \n\n\n\n
\n \n 
{{ $data }}
\n
\n \n \n \n\n\n" }, { "path": "11-ajax-vue-resource/js/main.js", "content": "new Vue({\n el: 'main',\n mounted() {\n this.cargarPersonas();\n },\n data: {\n personas: []\n },\n methods: {\n cargarPersonas() {\n this.$http.get('https://randomuser.me/api/?results=500')\n .then((respuesta) => {\n this.personas = respuesta.body.results;\n });\n }\n }\n});" }, { "path": "12-ajax-axios/index.html", "content": "\n\n\n\n \n \n Vue.js\n \n \n\n\n\n
\n \n 
{{ $data }}
\n
\n \n \n \n\n\n" }, { "path": "12-ajax-axios/js/main.js", "content": "Vue.prototype.$http = axios;\n\nnew Vue({\n el: 'main',\n mounted() {\n this.cargarPersonas();\n },\n data: {\n personas: []\n },\n methods: {\n cargarPersonas() {\n this.$http.get('https://randomuser.me/api/?results=500')\n .then((respuesta) => {\n this.personas = respuesta.data.results;\n });\n // axios.get('https://randomuser.me/api/?results=500')\n // .then((respuesta) => {\n // this.personas = respuesta.data.results;\n // });\n }\n }\n});" }, { "path": "13-components-intro/index.html", "content": "\n\n\n\n \n \n Vue.js\n \n \n\n\n\n
\n \n\n\n\n

Las tareas

\n \n\n 
{{ $data }}
\n
\n \n \n \n\n\n" }, { "path": "13-components-intro/js/main.js", "content": "Vue.component('mis-tareas', {\n template: ``,\n mounted() {\n axios.get('https://jsonplaceholder.typicode.com/todos')\n .then((respuesta) => {\n this.tareas = respuesta.data;\n });\n },\n data() {\n return {\n tareas: [],\n }\n }\n});\n\nnew Vue({\n el: 'main',\n});" }, { "path": "14-components-templates/index.html", "content": "\n\n\n\n \n \n Vue.js\n \n \n\n\n\n
\n \n
\n

El ganador es: {{ ganador }}

\n \n \n
\n \n 
{{ $data }}
\n
\n\n\n\n\n\n\n\n\n\n\n" }, { "path": "14-components-templates/js/main.js", "content": "Vue.component('elegir-ganador', {\n props: ['listado'],\n //template: '#elegir-ganador-template',\n/* template: `
\n

El ganador es: {{ ganador }}

\n \n \n
\n `,*/\n methods: {\n elegirGanador() {\n let cantidad = this.participantes.length;\n let indice = Math.floor((Math.random() * cantidad));\n this.ganador = this.participantes[indice - 1];\n }\n },\n data() {\n return {\n ganador: false,\n participantes: this.listado\n }\n },\n});\n\nnew Vue({\n el: 'main',\n data: {\n personas: [\n 'Juan', 'Alicia', 'Pedro', 'Javier', 'Marcos'\n ]\n },\n});" }, { "path": "15-components-props/index.html", "content": "\n\n\n\n \n \n Vue.js\n \n \n\n\n\n
\n \n 
{{ $data }}
\n
\n\n\n\n\n\n" }, { "path": "15-components-props/js/main.js", "content": "Vue.component('autor', {\n props: ['nombre', 'edad'],\n mounted() {\n // Las props son accesibles desde this (proxy)\n //console.log(this.nombre);\n console.log(typeof this.edad);\n },\n template: `

{{ nombre }}

`,\n methods: {\n cambiarProp() {\n this.nombre = this.nombre.toUpperCase();\n }\n }\n});\n\nnew Vue({\n el: 'main',\n data: {\n autor: 'Juan Andrés',\n },\n});" }, { "path": "16-prop-validation/index.html", "content": "\n\n\n\n \n \n Vue.js\n \n \n\n\n\n\n
\n \n \n 
{{ $data }}
\n
\n\n\n\n\n\n\n\n\n" }, { "path": "16-prop-validation/js/main.js", "content": "Vue.component('candidato', {\n /*props: ['nombre', 'correoe', 'imagen'],*/\n props: {\n nombre: {\n type: [String, Array], // null = *\n required: true,\n },\n correoe: {\n type: String,\n default: 'juan@wmedia.es'\n },\n imagen: String,\n location: {\n type: Object,\n default() {\n return {\n ciudad: 'Valencia',\n }\n }\n },\n },\n template: '#candidato-template',\n});\n\nnew Vue({\n el: 'main',\n mounted() {\n this.obtenerCandidatos();\n },\n data: {\n candidatos: [],\n },\n methods: {\n obtenerCandidatos() {\n axios.get('https://randomuser.me/api/?results=100')\n .then((respuesta) => {\n this.candidatos = respuesta.data.results;\n });\n }\n }\n});" }, { "path": "17-slots-named-slots/css/main.css", "content": "/* Bloques */\n.alerta {\n width: 300px;\n border-radius: 15px;\n background-color: lightgray;\n border: 1px solid white;\n box-shadow: 1px 1px 2px gray;\n font-family: sans-serif;\n position: absolute;\n}\n\n/* Elementos */\n.alerta__header {\n border-bottom: 1px solid white;\n padding: 10px;\n text-align: center;\n font-weight: bold;\n}\n\n.alerta__contenido {\n font-size: 14px;\n padding: 20px;\n}\n\n.alerta__footer {\n border-top: 1px solid white;\n text-align: center;\n padding: 10px;\n font-size: 12px;\n}\n\n/* Modificadores */\n/* Estilo */\n.alerta--error {\n background-color: indianred;\n}\n.alerta--advertencia {\n background-color: lightgoldenrodyellow;\n}\n.alerta--exito {\n background-color: lightgreen;\n}\n\n/* Posición */\n.alerta--arriba-izquierda {\n left: 0;\n top: 0;\n}\n.alerta--abajo-izquierda {\n left: 0;\n bottom: 0;\n}\n.alerta--arriba-derecha {\n right: 0;\n top: 0;\n}\n.alerta--abajo-derecha {\n right: 0;\n bottom: 0;\n}" }, { "path": "17-slots-named-slots/index.html", "content": "\n\n\n \n \n Vue.js\n \n \n \n\n\n\n
\n \n \n \n \n \n\n \n \n \n \n \n\n \n \n \n \n \n\n 
{{ $data }}
\n
\n\n\n\n" }, { "path": "17-slots-named-slots/js/main.js", "content": "Vue.component('alerta', {\n props: ['tipo', 'posicion'],\n template: `\n
\n
\n Hola\n
\n
\n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dictum dui justo, at molestie orci dapibus\n vitae.\n \n
\n \n
`,\n});\n\nnew Vue({\n el: 'main',\n});" }, { "path": "18-scoped-slots/css/main.css", "content": "/* Bloques */\n.alerta {\n width: 300px;\n border-radius: 15px;\n background-color: lightgray;\n border: 1px solid white;\n box-shadow: 1px 1px 2px gray;\n font-family: sans-serif;\n position: absolute;\n}\n\n/* Elementos */\n.alerta__header {\n border-bottom: 1px solid white;\n padding: 10px;\n text-align: center;\n font-weight: bold;\n}\n\n.alerta__contenido {\n font-size: 14px;\n padding: 20px;\n}\n\n.alerta__footer {\n border-top: 1px solid white;\n text-align: center;\n padding: 10px;\n font-size: 12px;\n}\n\n/* Modificadores */\n/* Estilo */\n.alerta--error {\n background-color: indianred;\n}\n.alerta--advertencia {\n background-color: lightgoldenrodyellow;\n}\n.alerta--exito {\n background-color: lightgreen;\n}\n\n/* Posición */\n.alerta--arriba-izquierda {\n left: 0;\n top: 0;\n}\n.alerta--abajo-izquierda {\n left: 0;\n bottom: 0;\n}\n.alerta--arriba-derecha {\n right: 0;\n top: 0;\n}\n.alerta--abajo-derecha {\n right: 0;\n bottom: 0;\n}" }, { "path": "18-scoped-slots/index.html", "content": "\n\n\n \n \n Vue.js\n \n \n \n\n\n\n
\n \n \n \n\n \n \n \n\n \n \n \n\n 
{{ $data }}
\n
\n\n\n\n\n\n\n" }, { "path": "18-scoped-slots/js/main.js", "content": "Vue.component('mis-tareas', {\n props: ['listado'],\n template: '#mis-tareas-template'\n});\n\nnew Vue({\n el: 'main',\n data: {\n tareas: [\n { titulo: 'Salir a correr'},\n { titulo: 'Recoger la casa'},\n { titulo: 'Aprender Vue.js'},\n { titulo: 'Ir al gimnasio'},\n { titulo: 'Leer cada día'},\n ]\n }\n});" }, { "path": "19-custom-events/css/main.css", "content": "html, body {\n width: 100%;\n height: 100%;\n}\n\nbody {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\nbutton {\n font-size: 16px;\n}\n\n/* Bloques */\n.alerta {\n width: 300px;\n border-radius: 15px;\n background-color: lightgray;\n border: 1px solid white;\n box-shadow: 1px 1px 2px gray;\n font-family: sans-serif;\n position: absolute;\n}\n\n/* Elementos */\n.alerta__header {\n border-bottom: 1px solid white;\n padding: 10px;\n text-align: center;\n font-weight: bold;\n}\n\n.alerta__header a {\n float: right;\n font-size: 10px;\n text-decoration: none;\n color: black;\n}\n\n.alerta__contenido {\n font-size: 14px;\n padding: 20px;\n}\n\n.alerta__footer {\n border-top: 1px solid white;\n text-align: center;\n padding: 10px;\n font-size: 12px;\n}\n\n/* Modificadores */\n/* Estilo */\n.alerta--error {\n background-color: indianred;\n}\n.alerta--advertencia {\n background-color: lightgoldenrodyellow;\n}\n.alerta--exito {\n background-color: lightgreen;\n}\n\n/* Posición */\n.alerta--arriba-izquierda {\n left: 0;\n top: 0;\n}\n.alerta--abajo-izquierda {\n left: 0;\n bottom: 0;\n}\n.alerta--arriba-derecha {\n right: 0;\n top: 0;\n}\n.alerta--abajo-derecha {\n right: 0;\n bottom: 0;\n}" }, { "path": "19-custom-events/index.html", "content": "\n\n\n \n \n Vue.js\n \n \n \n\n\n\n
\n \n \n \n\n \n \n \n \n \n\n \n \n \n \n \n\n \n \n \n \n \n\n 
{{ $data }}
\n
\n\n\n\n" }, { "path": "19-custom-events/js/main.js", "content": "Vue.component('alerta', {\n props: ['tipo', 'posicion'],\n template: `\n
\n
\n Cerrar\n Hola\n
\n
\n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dictum dui justo, at molestie orci dapibus\n vitae.\n \n
\n \n
`,\n methods: {\n ocultarWidget() {\n this.$emit('ocultar');\n }\n }\n});\n\nnew Vue({\n el: 'main',\n data: {\n mostrarExito: false,\n mostrarError: false,\n mostrarAdvertencia: false,\n }\n});" }, { "path": "2-directivas-incluidas/index.html", "content": "\n\n\n \n \n Vue.js\n \n \n\n\n\n
\n

Estoy conectado

\n\n

No puedes entrar.

\n

200\">Eres inmortal.

\n

Puedes entrar.

\n\n \n

No estás conectado :(

\n\n 
{{ $data }}
\n
\n \n \n\n\n" }, { "path": "2-directivas-incluidas/js/main.js", "content": "const vm = new Vue({\n el: 'main',\n data: {\n conectado: false,\n edad: 44,\n },\n});" }, { "path": "20-component-communication/css/main.css", "content": "html {\n box-sizing: border-box;\n}\n*, *:before, *:after {\n box-sizing: inherit;\n}\n\nhtml, body {\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\nmain {\n display: flex;\n flex-wrap: wrap;\n width: 700px;\n justify-content: space-between;\n align-items: center;\n}\n\nhr, pre {\n flex-basis: 100%;\n}" }, { "path": "20-component-communication/index.html", "content": "\n\n\n \n \n Vue.js\n \n \n \n\n\n\n
\n \n \n
\n 
{{ $data }}
\n
\n\n\n\n" }, { "path": "20-component-communication/js/main.js", "content": "const eventBus = new Vue();\n\nVue.component('listado-productos', {\n props: ['productos'],\n template: `\n
\n \n
`,\n methods: {\n anadirProducto(precio){\n eventBus.$emit('anadir', precio);\n },\n eliminarProducto(precio) {\n eventBus.$emit('eliminar', precio);\n },\n }\n});\n\nVue.component('carrito-compra', {\n template: `\n
\n

{{ total.toFixed(2) }} €

\n

{{ cantidadProductos }} productos

\n
`,\n data() {\n return {\n cantidadProductos: 0,\n total: 0,\n }\n },\n created() {\n eventBus.$on('anadir', (precio) => {\n if (this.total >= 0) {\n this.total += precio;\n this.cantidadProductos++;\n }\n });\n eventBus.$on('eliminar', (precio) => {\n if (this.total > 0) {\n this.total -= precio;\n this.cantidadProductos--;\n }\n });\n }\n});\n\nnew Vue({\n el: 'main',\n data: {\n productos: [\n {nombre: 'Libro ES6', precio: 39},\n {nombre: 'Portátil', precio: 1300},\n {nombre: 'Café', precio: 2},\n {nombre: 'Auriculares', precio: 80},\n {nombre: 'Moleskine', precio: 19},\n ]\n }\n});" }, { "path": "21-components-inside-components/index.html", "content": "\n\n\n \n \n Vue.js\n \n \n\n\n\n
\n \n Tareas que necesito finalizar ya!\n \n 
{{ $data }}
\n
\n\n\n\n" }, { "path": "21-components-inside-components/js/main.js", "content": "Vue.component('lista-tareas', {\n props: ['tareas'],\n template: `
\n

\n \n
`,\n});\n\nVue.component('tarea', {\n props: ['tarea'],\n template: `
  • {{ tarea }}
    • `\n});\n\nnew Vue({\n el: 'main',\n data: {\n tareas: [\n 'Finalizar sección Componentes',\n 'Iniciar workflow con Vue CLI y Webpack',\n 'Terminar de estudiar la documentación de Vuex',\n 'Seguir jugando con Vue Router y grabar el primer vídeo',\n ]\n }\n});" }, { "path": "22-dynamic-components/index.html", "content": "\n\n\n \n \n Vue.js\n \n \n\n\n\n
    \n \n \n \n\n \n\n\n 
    {{ $data }}
    \n
    \n\n\n\n" }, { "path": "22-dynamic-components/js/main.js", "content": "Vue.component('lista-tareas', {\n template: `
    \n

    \n \n
    \n
    `,\n data() {\n return {\n tareas:[\n 'Finalizar sección Componentes',\n 'Iniciar workflow con Vue CLI y Webpack',\n 'Terminar de estudiar la documentación de Vuex',\n 'Seguir jugando con Vue Router y grabar el primer vídeo',\n ],\n }\n }\n});\n\nVue.component('tarea', {\n props: ['tarea'],\n template: `
  • {{ tarea }}
    • `\n});\n\nVue.component('contacto', {\n template: `
    juan@wmedia.es
    `,\n});\n\nVue.component('bio', {\n template: `

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lacinia sit amet magna quis maximus. Vivamus eget consectetur tellus. Sed diam ante, dictum sit amet tincidunt ac, facilisis eget dui.

    `,\n});\n\nnew Vue({\n el: 'main',\n data: {\n seleccionado: 'lista-tareas'\n }\n});" }, { "path": "23-custom-input-components/index.html", "content": "\n\n\n \n \n Vue.js\n \n \n\n\n\n
    \n \n \n \n 
    {{ $data }}
    \n
    \n\n\n\n" }, { "path": "23-custom-input-components/js/main.js", "content": "Vue.component('contrasena', {\n props: ['contrasena'],\n template: ``,\n methods: {\n comprobarContrasena(contrasena) {\n if (this.noValidas.includes(contrasena)) {\n this.$refs.pass.value = contrasena = '';\n }\n this.$emit('input', contrasena);\n }\n },\n data() {\n return {\n noValidas: ['abc', 'admin', '123456', 'root'],\n }\n }\n});\n\nnew Vue({\n el: 'main',\n data: {\n contrasena: 'es3Es653!*&__',\n },\n});" }, { "path": "24-ejercicio-components/finalizado/css/main.css", "content": "html {\n box-sizing: border-box;\n}\n*, *:before, *:after {\n box-sizing: inherit;\n}\n\nhtml, body {\n width: 100%;\n height: 100%;\n}\n\nbody {\n display: flex;\n justify-content: center;\n align-items: flex-start;\n}\n\n.cabecera {\n display: flex;\n justify-content: space-around;\n align-items: center;\n}\n\n.cabecera slot {\n flex-basis: 40%;\n}\n\n.cabecera input {\n flex-basis: 60%;\n}\n\n.usuarios {\n margin: 20px;\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n align-items: flex-start;\n}\n\n.usuario {\n padding: 10px;\n flex-basis: 33%;\n border: 1px solid gray;\n border-radius: 10px;\n display: flex;\n}\n\n.usuario img {\n flex-basis: 33%;\n}\n\n.usuario section {\n flex-basis: 66%;\n}\n\npre {\n flex-basis: 100%;\n}" }, { "path": "24-ejercicio-components/finalizado/index.html", "content": "\n\n\n \n \n Vue.js\n \n \n \n\n\n\n
    \n \n

    Usuarios de la empresa

    \n     \n
    \n\n\n\n\n\n\n\n" }, { "path": "24-ejercicio-components/finalizado/js/main.js", "content": "Vue.component('usuarios', {\n props: ['fuente'],\n template: '#usuarios-template',\n mounted() {\n axios.get('https://randomuser.me/api/?results=500')\n .then((datos) => {\n const listado = datos.data.results.map((usuario) => {\n return {\n nombre: `${usuario.name.title} ${usuario.name.first} ${usuario.name.last}`,\n correoe: usuario.email,\n foto: usuario.picture.medium,\n };\n });\n this.usuarios = listado;\n });\n },\n data() {\n return {\n usuarios: [],\n busqueda: '',\n }\n },\n computed: {\n filtrarUsuarios() {\n return this.usuarios.filter((usuario) => {\n return usuario.nombre.includes(this.busqueda)\n });\n }\n }\n});\n\nVue.component('usuario', {\n props: ['datos'],\n template: '#usuario-template',\n});\n\nnew Vue({\n el: 'main',\n});" }, { "path": "24-ejercicio-components/inicio/css/main.css", "content": "html {\n box-sizing: border-box;\n}\n*, *:before, *:after {\n box-sizing: inherit;\n}\n\nhtml, body {\n width: 100%;\n height: 100%;\n}\n\nbody {\n display: flex;\n justify-content: center;\n align-items: flex-start;\n}\n\n.cabecera {\n display: flex;\n justify-content: space-around;\n align-items: center;\n}\n\n.cabecera slot {\n flex-basis: 40%;\n}\n\n.cabecera input {\n flex-basis: 60%;\n}\n\n.usuarios {\n margin: 20px;\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n align-items: flex-start;\n}\n\n.usuario {\n padding: 10px;\n flex-basis: 33%;\n border: 1px solid gray;\n border-radius: 10px;\n display: flex;\n}\n\n.usuario img {\n flex-basis: 33%;\n}\n\n.usuario section {\n flex-basis: 66%;\n}\n\npre {\n flex-basis: 100%;\n}" }, { "path": "24-ejercicio-components/inicio/index.html", "content": "\n\n\n \n \n Vue.js\n \n \n \n\n\n\n
    \n \n

    Usuarios de mi startup

    \n     \n
    \n\n\n\n\n\n\n\n\n" }, { "path": "24-ejercicio-components/inicio/js/main.js", "content": "Vue.component('usuarios', {\n template: '#usuarios-template',\n mounted() {\n axios.get('https://randomuser.me/api/?results=500')\n .then((datos) => {\n const listado = datos.data.results.map((usuario) => {\n return {\n nombre: `${usuario.name.title} ${usuario.name.first} ${usuario.name.last}`,\n correoe: usuario.email,\n foto: usuario.picture.medium,\n }\n });\n this.usuarios = listado;\n });\n },\n data() {\n return {\n usuarios: [],\n busqueda: '',\n }\n },\n computed: {\n filtrarUsuarios() {\n return this.usuarios.filter((usuario) => {\n return usuario.nombre.includes(this.busqueda);\n });\n }\n }\n});\n\nVue.component('usuario', {\n props: ['datos'],\n template: '#usuario-template',\n});\n\nnew Vue({\n el: 'main',\n});" }, { "path": "25-vue-cli/.babelrc", "content": "{\n \"presets\": [\n [\"es2015\", { \"modules\": false }]\n ]\n}\n" }, { "path": "25-vue-cli/README.md", "content": "# 25-vue-cli\n\n> A Vue.js project\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# build for production with minification\nnpm run build\n```\n\nFor detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).\n" }, { "path": "25-vue-cli/index.html", "content": "\n\n \n \n 25-vue-cli\n \n \n
    \n\n
    \n \n \n\n" }, { "path": "25-vue-cli/package.json", "content": "{\n \"name\": \"25-vue-cli\",\n \"description\": \"A Vue.js project\",\n \"version\": \"1.0.0\",\n \"author\": \"@juanwmedia \",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"cross-env NODE_ENV=development webpack-dev-server --open --hot\",\n \"build\": \"cross-env NODE_ENV=production webpack --progress --hide-modules\"\n },\n \"dependencies\": {\n \"vue\": \"^2.1.0\"\n },\n \"devDependencies\": {\n \"babel-core\": \"^6.0.0\",\n \"babel-loader\": \"^6.0.0\",\n \"babel-preset-es2015\": \"^6.0.0\",\n \"cross-env\": \"^3.0.0\",\n \"css-loader\": \"^0.25.0\",\n \"file-loader\": \"^0.9.0\",\n \"vue-loader\": \"^10.0.0\",\n \"vue-template-compiler\": \"^2.1.0\",\n \"webpack\": \"^2.2.0\",\n \"webpack-dev-server\": \"^2.2.0\"\n }\n}\n" }, { "path": "25-vue-cli/src/App.vue", "content": "\n\n\n\n\n" }, { "path": "25-vue-cli/src/main.js", "content": "import Vue from 'vue'\nimport App from './App.vue'\n\nnew Vue({\n el: '#app',\n render: h => h(App)\n})\n" }, { "path": "25-vue-cli/webpack.config.js", "content": "var path = require('path')\nvar webpack = require('webpack')\n\nmodule.exports = {\n entry: './src/main.js',\n output: {\n path: path.resolve(__dirname, './dist'),\n publicPath: '/dist/',\n filename: 'build.js'\n },\n module: {\n rules: [\n {\n test: /\\.vue$/,\n loader: 'vue-loader',\n options: {\n loaders: {\n }\n // other vue-loader options go here\n }\n },\n {\n test: /\\.js$/,\n loader: 'babel-loader',\n exclude: /node_modules/\n },\n {\n test: /\\.(png|jpg|gif|svg)$/,\n loader: 'file-loader',\n options: {\n name: '[name].[ext]?[hash]'\n }\n }\n ]\n },\n resolve: {\n alias: {\n 'vue$': 'vue/dist/vue.common.js'\n }\n },\n devServer: {\n historyApiFallback: true,\n noInfo: true\n },\n performance: {\n hints: false\n },\n devtool: '#eval-source-map'\n}\n\nif (process.env.NODE_ENV === 'production') {\n module.exports.devtool = '#source-map'\n // http://vue-loader.vuejs.org/en/workflow/production.html\n module.exports.plugins = (module.exports.plugins || []).concat([\n new webpack.DefinePlugin({\n 'process.env': {\n NODE_ENV: '\"production\"'\n }\n }),\n new webpack.optimize.UglifyJsPlugin({\n sourceMap: true,\n compress: {\n warnings: false\n }\n }),\n new webpack.LoaderOptionsPlugin({\n minimize: true\n })\n ])\n}\n" }, { "path": "26-single-file-components/.babelrc", "content": "{\n \"presets\": [\n [\"es2015\", { \"modules\": false }]\n ]\n}\n" }, { "path": "26-single-file-components/README.md", "content": "# 26-single-file-components\n\n> A Vue.js project\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# build for production with minification\nnpm run build\n```\n\nFor detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).\n" }, { "path": "26-single-file-components/index.html", "content": "\n\n \n \n 26-single-file-components\n \n \n
    \n \n \n\n" }, { "path": "26-single-file-components/package.json", "content": "{\n \"name\": \"26-single-file-components\",\n \"description\": \"A Vue.js project\",\n \"version\": \"1.0.0\",\n \"author\": \"@juanwmedia \",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"cross-env NODE_ENV=development webpack-dev-server --open --hot\",\n \"build\": \"cross-env NODE_ENV=production webpack --progress --hide-modules\"\n },\n \"dependencies\": {\n \"axios\": \"^0.15.3\",\n \"vue\": \"^2.1.0\"\n },\n \"devDependencies\": {\n \"babel-core\": \"^6.0.0\",\n \"babel-loader\": \"^6.0.0\",\n \"babel-preset-es2015\": \"^6.0.0\",\n \"cross-env\": \"^3.0.0\",\n \"css-loader\": \"^0.25.0\",\n \"file-loader\": \"^0.9.0\",\n \"vue-loader\": \"^10.0.0\",\n \"vue-template-compiler\": \"^2.1.0\",\n \"webpack\": \"^2.2.0\",\n \"webpack-dev-server\": \"^2.2.0\"\n }\n}\n" }, { "path": "26-single-file-components/src/App.vue", "content": "\n\n\n\n\n" }, { "path": "26-single-file-components/src/components/Persona.vue", "content": "\n\n\n\n" }, { "path": "26-single-file-components/src/main.js", "content": "import Vue from 'vue'\nimport App from './App.vue'\n\nnew Vue({\n el: '#app',\n render: h => h(App)\n})\n" }, { "path": "26-single-file-components/webpack.config.js", "content": "var path = require('path')\nvar webpack = require('webpack')\n\nmodule.exports = {\n entry: './src/main.js',\n output: {\n path: path.resolve(__dirname, './dist'),\n publicPath: '/dist/',\n filename: 'build.js'\n },\n module: {\n rules: [\n {\n test: /\\.vue$/,\n loader: 'vue-loader',\n options: {\n loaders: {\n }\n // other vue-loader options go here\n }\n },\n {\n test: /\\.js$/,\n loader: 'babel-loader',\n exclude: /node_modules/\n },\n {\n test: /\\.(png|jpg|gif|svg)$/,\n loader: 'file-loader',\n options: {\n name: '[name].[ext]?[hash]'\n }\n }\n ]\n },\n resolve: {\n alias: {\n 'vue$': 'vue/dist/vue.common.js'\n }\n },\n devServer: {\n historyApiFallback: true,\n noInfo: true\n },\n performance: {\n hints: false\n },\n devtool: '#eval-source-map'\n}\n\nif (process.env.NODE_ENV === 'production') {\n module.exports.devtool = '#source-map'\n // http://vue-loader.vuejs.org/en/workflow/production.html\n module.exports.plugins = (module.exports.plugins || []).concat([\n new webpack.DefinePlugin({\n 'process.env': {\n NODE_ENV: '\"production\"'\n }\n }),\n new webpack.optimize.UglifyJsPlugin({\n sourceMap: true,\n compress: {\n warnings: false\n }\n }),\n new webpack.LoaderOptionsPlugin({\n minimize: true\n })\n ])\n}\n" }, { "path": "27-render-function/.babelrc", "content": "{\n \"presets\": [\n [\"es2015\", { \"modules\": false }]\n ]\n}\n" }, { "path": "27-render-function/README.md", "content": "# 27-render-function\n\n> A Vue.js project\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# build for production with minification\nnpm run build\n```\n\nFor detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).\n" }, { "path": "27-render-function/index.html", "content": "\n\n \n \n 27-render-function\n \n \n
    \n \n \n\n" }, { "path": "27-render-function/package.json", "content": "{\n \"name\": \"27-render-function\",\n \"description\": \"A Vue.js project\",\n \"version\": \"1.0.0\",\n \"author\": \"@juanwmedia \",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"cross-env NODE_ENV=development webpack-dev-server --open --hot\",\n \"build\": \"cross-env NODE_ENV=production webpack --progress --hide-modules\"\n },\n \"dependencies\": {\n \"vue\": \"^2.1.0\"\n },\n \"devDependencies\": {\n \"babel-core\": \"^6.0.0\",\n \"babel-loader\": \"^6.0.0\",\n \"babel-preset-es2015\": \"^6.0.0\",\n \"cross-env\": \"^3.0.0\",\n \"css-loader\": \"^0.25.0\",\n \"file-loader\": \"^0.9.0\",\n \"vue-loader\": \"^10.0.0\",\n \"vue-template-compiler\": \"^2.1.0\",\n \"webpack\": \"^2.2.0\",\n \"webpack-dev-server\": \"^2.2.0\"\n }\n}\n" }, { "path": "27-render-function/src/App.vue", "content": "\n\n\n\n" }, { "path": "27-render-function/src/components/Elemento.vue", "content": "\n\nc" }, { "path": "27-render-function/src/main.js", "content": "import Vue from 'vue'\nimport App from './App.vue'\n\nnew Vue({\n el: '#app',\n render: h => h(App)\n})" }, { "path": "27-render-function/webpack.config.js", "content": "var path = require('path')\nvar webpack = require('webpack')\n\nmodule.exports = {\n entry: './src/main.js',\n output: {\n path: path.resolve(__dirname, './dist'),\n publicPath: '/dist/',\n filename: 'build.js'\n },\n module: {\n rules: [\n {\n test: /\\.vue$/,\n loader: 'vue-loader',\n options: {\n loaders: {\n }\n // other vue-loader options go here\n }\n },\n {\n test: /\\.js$/,\n loader: 'babel-loader',\n exclude: /node_modules/\n },\n {\n test: /\\.(png|jpg|gif|svg)$/,\n loader: 'file-loader',\n options: {\n name: '[name].[ext]?[hash]'\n }\n }\n ]\n },\n resolve: {\n alias: {\n 'vue$': 'vue/dist/vue.common.js'\n }\n },\n devServer: {\n historyApiFallback: true,\n noInfo: true\n },\n performance: {\n hints: false\n },\n devtool: '#eval-source-map'\n}\n\nif (process.env.NODE_ENV === 'production') {\n module.exports.devtool = '#source-map'\n // http://vue-loader.vuejs.org/en/workflow/production.html\n module.exports.plugins = (module.exports.plugins || []).concat([\n new webpack.DefinePlugin({\n 'process.env': {\n NODE_ENV: '\"production\"'\n }\n }),\n new webpack.optimize.UglifyJsPlugin({\n sourceMap: true,\n compress: {\n warnings: false\n }\n }),\n new webpack.LoaderOptionsPlugin({\n minimize: true\n })\n ])\n}\n" }, { "path": "28-hot-reloading/.babelrc", "content": "{\n \"presets\": [\n [\"es2015\", { \"modules\": false }]\n ]\n}\n" }, { "path": "28-hot-reloading/README.md", "content": "# 28-hot-reloading\n\n> A Vue.js project\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# build for production with minification\nnpm run build\n```\n\nFor detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).\n" }, { "path": "28-hot-reloading/index.html", "content": "\n\n \n \n 28-hot-reloading\n \n \n
    \n \n \n\n" }, { "path": "28-hot-reloading/package.json", "content": "{\n \"name\": \"28-hot-reloading\",\n \"description\": \"A Vue.js project\",\n \"version\": \"1.0.0\",\n \"author\": \"@juanwmedia \",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"cross-env NODE_ENV=development webpack-dev-server --open --hot\",\n \"build\": \"cross-env NODE_ENV=production webpack --progress --hide-modules\"\n },\n \"dependencies\": {\n \"vue\": \"^2.1.0\"\n },\n \"devDependencies\": {\n \"babel-core\": \"^6.0.0\",\n \"babel-loader\": \"^6.0.0\",\n \"babel-preset-es2015\": \"^6.0.0\",\n \"cross-env\": \"^3.0.0\",\n \"css-loader\": \"^0.25.0\",\n \"file-loader\": \"^0.9.0\",\n \"vue-loader\": \"^10.0.0\",\n \"vue-template-compiler\": \"^2.1.0\",\n \"webpack\": \"^2.2.0\",\n \"webpack-dev-server\": \"^2.2.0\"\n }\n}\n" }, { "path": "28-hot-reloading/src/App.vue", "content": "\n\n\n" }, { "path": "28-hot-reloading/src/components/Tareas.vue", "content": "\n\n" }, { "path": "28-hot-reloading/src/main.js", "content": "import Vue from 'vue'\nimport App from './App.vue'\n\nnew Vue({\n el: '#app',\n render: h => h(App)\n})\n" }, { "path": "28-hot-reloading/webpack.config.js", "content": "var path = require('path')\nvar webpack = require('webpack')\n\nmodule.exports = {\n entry: './src/main.js',\n output: {\n path: path.resolve(__dirname, './dist'),\n publicPath: '/dist/',\n filename: 'build.js'\n },\n module: {\n rules: [\n {\n test: /\\.vue$/,\n loader: 'vue-loader',\n options: {\n loaders: {\n }\n // other vue-loader options go here\n }\n },\n {\n test: /\\.js$/,\n loader: 'babel-loader',\n exclude: /node_modules/\n },\n {\n test: /\\.(png|jpg|gif|svg)$/,\n loader: 'file-loader',\n options: {\n name: '[name].[ext]?[hash]'\n }\n }\n ]\n },\n resolve: {\n alias: {\n 'vue$': 'vue/dist/vue.common.js'\n }\n },\n devServer: {\n historyApiFallback: true,\n noInfo: true\n },\n performance: {\n hints: false\n },\n devtool: '#eval-source-map'\n}\n\nif (process.env.NODE_ENV === 'production') {\n module.exports.devtool = '#source-map'\n // http://vue-loader.vuejs.org/en/workflow/production.html\n module.exports.plugins = (module.exports.plugins || []).concat([\n new webpack.DefinePlugin({\n 'process.env': {\n NODE_ENV: '\"production\"'\n }\n }),\n new webpack.optimize.UglifyJsPlugin({\n sourceMap: true,\n compress: {\n warnings: false\n }\n }),\n new webpack.LoaderOptionsPlugin({\n minimize: true\n })\n ])\n}\n" }, { "path": "29-scoped-css/.babelrc", "content": "{\n \"presets\": [\n [\"es2015\", { \"modules\": false }]\n ]\n}\n" }, { "path": "29-scoped-css/README.md", "content": "# 29-scoped-css\n\n> A Vue.js project\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# build for production with minification\nnpm run build\n```\n\nFor detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).\n" }, { "path": "29-scoped-css/index.html", "content": "\n\n \n \n 29-scoped-css\n \n \n
    \n \n \n\n" }, { "path": "29-scoped-css/package.json", "content": "{\n \"name\": \"29-scoped-css\",\n \"description\": \"A Vue.js project\",\n \"version\": \"1.0.0\",\n \"author\": \"@juanwmedia \",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"cross-env NODE_ENV=development webpack-dev-server --open --hot\",\n \"build\": \"cross-env NODE_ENV=production webpack --progress --hide-modules\"\n },\n \"dependencies\": {\n \"vue\": \"^2.1.0\"\n },\n \"devDependencies\": {\n \"babel-core\": \"^6.0.0\",\n \"babel-loader\": \"^6.0.0\",\n \"babel-preset-es2015\": \"^6.0.0\",\n \"cross-env\": \"^3.0.0\",\n \"css-loader\": \"^0.25.0\",\n \"file-loader\": \"^0.9.0\",\n \"vue-loader\": \"^10.0.0\",\n \"vue-template-compiler\": \"^2.1.0\",\n \"webpack\": \"^2.2.0\",\n \"webpack-dev-server\": \"^2.2.0\"\n }\n}\n" }, { "path": "29-scoped-css/src/App.vue", "content": "\n\n" }, { "path": "29-scoped-css/src/components/Tareas.vue", "content": "\n\n" }, { "path": "29-scoped-css/src/main.js", "content": "import Vue from 'vue'\nimport App from './App.vue'\n\nnew Vue({\n el: '#app',\n render: h => h(App)\n})\n" }, { "path": "29-scoped-css/webpack.config.js", "content": "var path = require('path')\nvar webpack = require('webpack')\n\nmodule.exports = {\n entry: './src/main.js',\n output: {\n path: path.resolve(__dirname, './dist'),\n publicPath: '/dist/',\n filename: 'build.js'\n },\n module: {\n rules: [\n {\n test: /\\.vue$/,\n loader: 'vue-loader',\n options: {\n loaders: {\n }\n // other vue-loader options go here\n }\n },\n {\n test: /\\.js$/,\n loader: 'babel-loader',\n exclude: /node_modules/\n },\n {\n test: /\\.(png|jpg|gif|svg)$/,\n loader: 'file-loader',\n options: {\n name: '[name].[ext]?[hash]'\n }\n }\n ]\n },\n resolve: {\n alias: {\n 'vue$': 'vue/dist/vue.common.js'\n }\n },\n devServer: {\n historyApiFallback: true,\n noInfo: true\n },\n performance: {\n hints: false\n },\n devtool: '#eval-source-map'\n}\n\nif (process.env.NODE_ENV === 'production') {\n module.exports.devtool = '#source-map'\n // http://vue-loader.vuejs.org/en/workflow/production.html\n module.exports.plugins = (module.exports.plugins || []).concat([\n new webpack.DefinePlugin({\n 'process.env': {\n NODE_ENV: '\"production\"'\n }\n }),\n new webpack.optimize.UglifyJsPlugin({\n sourceMap: true,\n compress: {\n warnings: false\n }\n }),\n new webpack.LoaderOptionsPlugin({\n minimize: true\n })\n ])\n}\n" }, { "path": "3-renderizado-de-listas/index.html", "content": "\n\n\n \n \n Vue.js\n \n \n\n\n\n
    \n \n \n\n \n \n\n \n
      \n
    • \n {{ index }} - {{ key }}: {{value}} \n
      • \n
    \n 
    {{ $data }}
    \n
    \n \n \n\n\n" }, { "path": "3-renderizado-de-listas/js/main.js", "content": "const vm = new Vue({\n el: 'main',\n data: {\n laborales: ['Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes'],\n tareas: [\n {nombre: 'Hacer la compra', prioridad: 'baja'},\n {nombre: 'Aprender Vue y Firebase', prioridad: 'alta'},\n {nombre: 'Ir al gimnasio', prioridad: 'alta'},\n ],\n persona: {\n nombre: 'Juan',\n profesion: 'dev',\n ciudad: 'Valencia'\n }\n },\n});" }, { "path": "30-css-modules/.babelrc", "content": "{\n \"presets\": [\n [\"es2015\", { \"modules\": false }]\n ]\n}\n" }, { "path": "30-css-modules/README.md", "content": "# 30-css-modules\n\n> A Vue.js project\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# build for production with minification\nnpm run build\n```\n\nFor detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).\n" }, { "path": "30-css-modules/index.html", "content": "\n\n \n \n 30-css-modules\n \n \n
    \n \n \n\n" }, { "path": "30-css-modules/package.json", "content": "{\n \"name\": \"30-css-modules\",\n \"description\": \"A Vue.js project\",\n \"version\": \"1.0.0\",\n \"author\": \"@juanwmedia \",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"cross-env NODE_ENV=development webpack-dev-server --open --hot\",\n \"build\": \"cross-env NODE_ENV=production webpack --progress --hide-modules\"\n },\n \"dependencies\": {\n \"vue\": \"^2.1.0\"\n },\n \"devDependencies\": {\n \"babel-core\": \"^6.0.0\",\n \"babel-loader\": \"^6.0.0\",\n \"babel-preset-es2015\": \"^6.0.0\",\n \"cross-env\": \"^3.0.0\",\n \"css-loader\": \"^0.25.0\",\n \"file-loader\": \"^0.9.0\",\n \"vue-loader\": \"^10.0.0\",\n \"vue-template-compiler\": \"^2.1.0\",\n \"webpack\": \"^2.2.0\",\n \"webpack-dev-server\": \"^2.2.0\"\n }\n}\n" }, { "path": "30-css-modules/src/App.vue", "content": "\n\n\n\n\n" }, { "path": "30-css-modules/src/main.js", "content": "import Vue from 'vue'\nimport App from './App.vue'\n\nnew Vue({\n el: '#app',\n render: h => h(App)\n})\n" }, { "path": "30-css-modules/webpack.config.js", "content": "var path = require('path')\nvar webpack = require('webpack')\n\nmodule.exports = {\n entry: './src/main.js',\n output: {\n path: path.resolve(__dirname, './dist'),\n publicPath: '/dist/',\n filename: 'build.js'\n },\n module: {\n rules: [\n {\n test: /\\.vue$/,\n loader: 'vue-loader',\n options: {\n loaders: {\n }\n // other vue-loader options go here\n }\n },\n {\n test: /\\.js$/,\n loader: 'babel-loader',\n exclude: /node_modules/\n },\n {\n test: /\\.(png|jpg|gif|svg)$/,\n loader: 'file-loader',\n options: {\n name: '[name].[ext]?[hash]'\n }\n }\n ]\n },\n resolve: {\n alias: {\n 'vue$': 'vue/dist/vue.common.js'\n }\n },\n devServer: {\n historyApiFallback: true,\n noInfo: true\n },\n performance: {\n hints: false\n },\n devtool: '#eval-source-map'\n}\n\nif (process.env.NODE_ENV === 'production') {\n module.exports.devtool = '#source-map'\n // http://vue-loader.vuejs.org/en/workflow/production.html\n module.exports.plugins = (module.exports.plugins || []).concat([\n new webpack.DefinePlugin({\n 'process.env': {\n NODE_ENV: '\"production\"'\n }\n }),\n new webpack.optimize.UglifyJsPlugin({\n sourceMap: true,\n compress: {\n warnings: false\n }\n }),\n new webpack.LoaderOptionsPlugin({\n minimize: true\n })\n ])\n}\n" }, { "path": "31-shared-state/index.html", "content": "\n\n\n\n \n \n Vue.js\n \n \n\n\n\n

    {{ usuario.nombre }}

    \n

    {{ usuario.nombre }}

    \n \n \n\n\n" }, { "path": "31-shared-state/js/main.js", "content": "const compartido = {\n usuario: {\n nombre: 'Juan Andrés',\n }\n};\n\nnew Vue({\n el: '#app1',\n data: compartido,\n});\n\nnew Vue({\n el: '#app2',\n data: compartido,\n});" }, { "path": "32-vuex-central-store/.babelrc", "content": "{\n \"presets\": [\n [\"es2015\", { \"modules\": false }]\n ]\n}\n" }, { "path": "32-vuex-central-store/README.md", "content": "# 32-vuex-central-store\n\n> A Vue.js project\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# build for production with minification\nnpm run build\n```\n\nFor detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).\n" }, { "path": "32-vuex-central-store/index.html", "content": "\n\n \n \n 32-vuex-central-store\n \n \n
    \n \n \n\n" }, { "path": "32-vuex-central-store/package.json", "content": "{\n \"name\": \"32-vuex-central-store\",\n \"description\": \"A Vue.js project\",\n \"version\": \"1.0.0\",\n \"author\": \"@juanwmedia \",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"cross-env NODE_ENV=development webpack-dev-server --open --hot\",\n \"build\": \"cross-env NODE_ENV=production webpack --progress --hide-modules\"\n },\n \"dependencies\": {\n \"vue\": \"^2.1.0\",\n \"vuex\": \"^2.1.2\"\n },\n \"devDependencies\": {\n \"babel-core\": \"^6.0.0\",\n \"babel-loader\": \"^6.0.0\",\n \"babel-preset-es2015\": \"^6.0.0\",\n \"cross-env\": \"^3.0.0\",\n \"css-loader\": \"^0.25.0\",\n \"file-loader\": \"^0.9.0\",\n \"vue-loader\": \"^10.0.0\",\n \"vue-template-compiler\": \"^2.1.0\",\n \"webpack\": \"^2.2.0\",\n \"webpack-dev-server\": \"^2.2.0\"\n }\n}\n" }, { "path": "32-vuex-central-store/src/App.vue", "content": "\n\n\n" }, { "path": "32-vuex-central-store/src/components/Contador.vue", "content": "\n" }, { "path": "32-vuex-central-store/src/main.js", "content": "import Vue from 'vue';\nimport App from './App.vue';\nimport {store} from './store/store';\n\nnew Vue({\n el: '#app',\n store,\n render: h => h(App)\n});\n" }, { "path": "32-vuex-central-store/src/store/store.js", "content": "import Vue from 'vue';\nimport Vuex from 'vuex';\nVue.use(Vuex);\n\nexport const store = new Vuex.Store({\n state: {\n cantidad: 0,\n }\n});" }, { "path": "32-vuex-central-store/webpack.config.js", "content": "var path = require('path')\nvar webpack = require('webpack')\n\nmodule.exports = {\n entry: './src/main.js',\n output: {\n path: path.resolve(__dirname, './dist'),\n publicPath: '/dist/',\n filename: 'build.js'\n },\n module: {\n rules: [\n {\n test: /\\.vue$/,\n loader: 'vue-loader',\n options: {\n loaders: {\n }\n // other vue-loader options go here\n }\n },\n {\n test: /\\.js$/,\n loader: 'babel-loader',\n exclude: /node_modules/\n },\n {\n test: /\\.(png|jpg|gif|svg)$/,\n loader: 'file-loader',\n options: {\n name: '[name].[ext]?[hash]'\n }\n }\n ]\n },\n resolve: {\n alias: {\n 'vue$': 'vue/dist/vue.common.js'\n }\n },\n devServer: {\n historyApiFallback: true,\n noInfo: true\n },\n performance: {\n hints: false\n },\n devtool: '#eval-source-map'\n}\n\nif (process.env.NODE_ENV === 'production') {\n module.exports.devtool = '#source-map'\n // http://vue-loader.vuejs.org/en/workflow/production.html\n module.exports.plugins = (module.exports.plugins || []).concat([\n new webpack.DefinePlugin({\n 'process.env': {\n NODE_ENV: '\"production\"'\n }\n }),\n new webpack.optimize.UglifyJsPlugin({\n sourceMap: true,\n compress: {\n warnings: false\n }\n }),\n new webpack.LoaderOptionsPlugin({\n minimize: true\n })\n ])\n}\n" }, { "path": "33-vuex-state/.babelrc", "content": "{\n \"presets\": [\n [\"latest\", { \"modules\": false }]\n ]\n}\n" }, { "path": "33-vuex-state/README.md", "content": "# 33-vuex-state\n\n> A Vue.js project\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# build for production with minification\nnpm run build\n```\n\nFor detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).\n" }, { "path": "33-vuex-state/index.html", "content": "\n\n \n \n 33-vuex-state\n \n \n
    \n \n \n\n" }, { "path": "33-vuex-state/package.json", "content": "{\n \"name\": \"33-vuex-state\",\n \"description\": \"A Vue.js project\",\n \"version\": \"1.0.0\",\n \"author\": \"@juanwmedia \",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"cross-env NODE_ENV=development webpack-dev-server --open --hot\",\n \"build\": \"cross-env NODE_ENV=production webpack --progress --hide-modules\"\n },\n \"dependencies\": {\n \"vue\": \"^2.2.1\",\n \"vuex\": \"^2.1.2\"\n },\n \"devDependencies\": {\n \"babel-core\": \"^6.0.0\",\n \"babel-loader\": \"^6.0.0\",\n \"babel-preset-latest\": \"^6.0.0\",\n \"cross-env\": \"^3.0.0\",\n \"css-loader\": \"^0.25.0\",\n \"file-loader\": \"^0.9.0\",\n \"vue-loader\": \"^11.0.0\",\n \"vue-template-compiler\": \"^2.2.1\",\n \"webpack\": \"^2.2.0\",\n \"webpack-dev-server\": \"^2.2.0\"\n }\n}\n" }, { "path": "33-vuex-state/src/App.vue", "content": "\n" }, { "path": "33-vuex-state/src/main.js", "content": "import Vue from 'vue'\nimport App from './App.vue'\nimport {store} from './store/store';\n\nnew Vue({\n el: '#app',\n store,\n render: h => h(App)\n});" }, { "path": "33-vuex-state/src/store/store.js", "content": "import Vue from 'vue';\nimport Vuex from 'vuex';\nVue.use(Vuex);\n\nexport const store = new Vuex.Store({\n state: {\n nombre: 'Juan Andrés',\n apellidos: 'Núñez Charro',\n profesion: 'Developer',\n ciudad: 'Valencia'\n }\n});" }, { "path": "33-vuex-state/webpack.config.js", "content": "var path = require('path')\nvar webpack = require('webpack')\n\nmodule.exports = {\n entry: './src/main.js',\n output: {\n path: path.resolve(__dirname, './dist'),\n publicPath: '/dist/',\n filename: 'build.js'\n },\n module: {\n rules: [\n {\n test: /\\.vue$/,\n loader: 'vue-loader',\n options: {\n loaders: {\n }\n // other vue-loader options go here\n }\n },\n {\n test: /\\.js$/,\n loader: 'babel-loader',\n exclude: /node_modules/\n },\n {\n test: /\\.(png|jpg|gif|svg)$/,\n loader: 'file-loader',\n options: {\n name: '[name].[ext]?[hash]'\n }\n }\n ]\n },\n resolve: {\n alias: {\n 'vue$': 'vue/dist/vue.esm.js'\n }\n },\n devServer: {\n historyApiFallback: true,\n noInfo: true\n },\n performance: {\n hints: false\n },\n devtool: '#eval-source-map'\n}\n\nif (process.env.NODE_ENV === 'production') {\n module.exports.devtool = '#source-map'\n // http://vue-loader.vuejs.org/en/workflow/production.html\n module.exports.plugins = (module.exports.plugins || []).concat([\n new webpack.DefinePlugin({\n 'process.env': {\n NODE_ENV: '\"production\"'\n }\n }),\n new webpack.optimize.UglifyJsPlugin({\n sourceMap: true,\n compress: {\n warnings: false\n }\n }),\n new webpack.LoaderOptionsPlugin({\n minimize: true\n })\n ])\n}\n" }, { "path": "34-vuex-getters/.babelrc", "content": "{\n \"presets\": [\n [\"latest\", { \"modules\": false }]\n ]\n}\n" }, { "path": "34-vuex-getters/README.md", "content": "# 34-vuex-getters\n\n> A Vue.js project\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# build for production with minification\nnpm run build\n```\n\nFor detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).\n" }, { "path": "34-vuex-getters/index.html", "content": "\n\n \n \n 34-vuex-getters\n \n \n
    \n \n \n\n" }, { "path": "34-vuex-getters/package.json", "content": "{\n \"name\": \"34-vuex-getters\",\n \"description\": \"A Vue.js project\",\n \"version\": \"1.0.0\",\n \"author\": \"@juanwmedia \",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"cross-env NODE_ENV=development webpack-dev-server --open --hot\",\n \"build\": \"cross-env NODE_ENV=production webpack --progress --hide-modules\"\n },\n \"dependencies\": {\n \"vue\": \"^2.2.1\",\n \"vuex\": \"^2.2.1\"\n },\n \"devDependencies\": {\n \"babel-core\": \"^6.0.0\",\n \"babel-loader\": \"^6.0.0\",\n \"babel-preset-latest\": \"^6.0.0\",\n \"cross-env\": \"^3.0.0\",\n \"css-loader\": \"^0.25.0\",\n \"file-loader\": \"^0.9.0\",\n \"vue-loader\": \"^11.0.0\",\n \"vue-template-compiler\": \"^2.2.1\",\n \"webpack\": \"^2.2.0\",\n \"webpack-dev-server\": \"^2.2.0\"\n }\n}\n" }, { "path": "34-vuex-getters/src/Tareas.vue", "content": "\n\n\n" }, { "path": "34-vuex-getters/src/components/TareasRestantes.vue", "content": "\n" }, { "path": "34-vuex-getters/src/main.js", "content": "import Vue from 'vue';\nimport Tareas from './Tareas.vue';\nimport {store} from './store/store';\n\nnew Vue({\n el: '#app',\n store,\n render: h => h(Tareas)\n})\n" }, { "path": "34-vuex-getters/src/store/store.js", "content": "import Vue from 'vue';\nimport Vuex from 'vuex';\nVue.use(Vuex);\n\nexport const store = new Vuex.Store({\n state: {\n tareas: [\n {nombre: 'Aprender Vue Routing', completado: false},\n {nombre: 'Organizar lecciones restantes', completado: false},\n {nombre: 'Grabar lecciones mini curso ES6', completado: false},\n {nombre: 'Preparar landing page curso', completado: false},\n {nombre: 'Diseñar acciones de marketing', completado: true},\n ]\n },\n getters: {\n tareasCompletadas: (state) => {\n return state.tareas.filter((tarea) => tarea.completado).length;\n }\n }\n});" }, { "path": "34-vuex-getters/webpack.config.js", "content": "var path = require('path')\nvar webpack = require('webpack')\n\nmodule.exports = {\n entry: './src/main.js',\n output: {\n path: path.resolve(__dirname, './dist'),\n publicPath: '/dist/',\n filename: 'build.js'\n },\n module: {\n rules: [\n {\n test: /\\.vue$/,\n loader: 'vue-loader',\n options: {\n loaders: {\n }\n // other vue-loader options go here\n }\n },\n {\n test: /\\.js$/,\n loader: 'babel-loader',\n exclude: /node_modules/\n },\n {\n test: /\\.(png|jpg|gif|svg)$/,\n loader: 'file-loader',\n options: {\n name: '[name].[ext]?[hash]'\n }\n }\n ]\n },\n resolve: {\n alias: {\n 'vue$': 'vue/dist/vue.esm.js'\n }\n },\n devServer: {\n historyApiFallback: true,\n noInfo: true\n },\n performance: {\n hints: false\n },\n devtool: '#eval-source-map'\n}\n\nif (process.env.NODE_ENV === 'production') {\n module.exports.devtool = '#source-map'\n // http://vue-loader.vuejs.org/en/workflow/production.html\n module.exports.plugins = (module.exports.plugins || []).concat([\n new webpack.DefinePlugin({\n 'process.env': {\n NODE_ENV: '\"production\"'\n }\n }),\n new webpack.optimize.UglifyJsPlugin({\n sourceMap: true,\n compress: {\n warnings: false\n }\n }),\n new webpack.LoaderOptionsPlugin({\n minimize: true\n })\n ])\n}\n" }, { "path": "35-vuex-mutations/.babelrc", "content": "{\n \"presets\": [\n [\"latest\", {\n \"es2015\": { \"modules\": false }\n }]\n ]\n}\n" }, { "path": "35-vuex-mutations/README.md", "content": "# 35-vuex-mutations\n\n> A Vue.js project\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# build for production with minification\nnpm run build\n```\n\nFor detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).\n" }, { "path": "35-vuex-mutations/index.html", "content": "\n\n \n \n 35-vuex-mutations\n \n \n
    \n \n \n\n" }, { "path": "35-vuex-mutations/package.json", "content": "{\n \"name\": \"35-vuex-mutations\",\n \"description\": \"A Vue.js project\",\n \"version\": \"1.0.0\",\n \"author\": \"@juanwmedia \",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"cross-env NODE_ENV=development webpack-dev-server --open --hot\",\n \"build\": \"cross-env NODE_ENV=production webpack --progress --hide-modules\"\n },\n \"dependencies\": {\n \"vue\": \"^2.2.1\",\n \"vuex\": \"^2.2.1\"\n },\n \"devDependencies\": {\n \"babel-core\": \"^6.0.0\",\n \"babel-loader\": \"^6.0.0\",\n \"babel-preset-latest\": \"^6.0.0\",\n \"cross-env\": \"^3.0.0\",\n \"css-loader\": \"^0.25.0\",\n \"file-loader\": \"^0.9.0\",\n \"vue-loader\": \"^11.0.0\",\n \"vue-template-compiler\": \"^2.2.1\",\n \"webpack\": \"^2.2.0\",\n \"webpack-dev-server\": \"^2.2.0\"\n }\n}\n" }, { "path": "35-vuex-mutations/src/App.vue", "content": "\n" }, { "path": "35-vuex-mutations/src/components/Contador.vue", "content": "\n" }, { "path": "35-vuex-mutations/src/main.js", "content": "import Vue from 'vue';\nimport App from './App.vue';\nimport {store} from './store/store';\n\nnew Vue({\n el: '#app',\n store: store,\n render: h => h(App)\n})\n" }, { "path": "35-vuex-mutations/src/store/store.js", "content": "import Vue from 'vue';\nimport Vuex from 'vuex';\nVue.use(Vuex);\n\nexport const store = new Vuex.Store({\n state: {\n cantidad: 0,\n },\n mutations: {\n aumentar: (state) => state.cantidad++,\n reducir: (state) => state.cantidad--,\n }\n});" }, { "path": "35-vuex-mutations/webpack.config.js", "content": "var path = require('path')\nvar webpack = require('webpack')\n\nmodule.exports = {\n entry: './src/main.js',\n output: {\n path: path.resolve(__dirname, './dist'),\n publicPath: '/dist/',\n filename: 'build.js'\n },\n module: {\n rules: [\n {\n test: /\\.vue$/,\n loader: 'vue-loader',\n options: {\n loaders: {\n }\n // other vue-loader options go here\n }\n },\n {\n test: /\\.js$/,\n loader: 'babel-loader',\n exclude: /node_modules/\n },\n {\n test: /\\.(png|jpg|gif|svg)$/,\n loader: 'file-loader',\n options: {\n name: '[name].[ext]?[hash]'\n }\n }\n ]\n },\n resolve: {\n alias: {\n 'vue$': 'vue/dist/vue.esm.js'\n }\n },\n devServer: {\n historyApiFallback: true,\n noInfo: true\n },\n performance: {\n hints: false\n },\n devtool: '#eval-source-map'\n}\n\nif (process.env.NODE_ENV === 'production') {\n module.exports.devtool = '#source-map'\n // http://vue-loader.vuejs.org/en/workflow/production.html\n module.exports.plugins = (module.exports.plugins || []).concat([\n new webpack.DefinePlugin({\n 'process.env': {\n NODE_ENV: '\"production\"'\n }\n }),\n new webpack.optimize.UglifyJsPlugin({\n sourceMap: true,\n compress: {\n warnings: false\n }\n }),\n new webpack.LoaderOptionsPlugin({\n minimize: true\n })\n ])\n}\n" }, { "path": "36-vuex-actions/.babelrc", "content": "{\n \"presets\": [\n [\"latest\", {\n \"es2015\": { \"modules\": false }\n }]\n ]\n}\n" }, { "path": "36-vuex-actions/README.md", "content": "# 35-vuex-mutations\n\n> A Vue.js project\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# build for production with minification\nnpm run build\n```\n\nFor detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).\n" }, { "path": "36-vuex-actions/index.html", "content": "\n\n \n \n 36-vuex-actions\n \n \n
    \n \n \n\n" }, { "path": "36-vuex-actions/package.json", "content": "{\n \"name\": \"35-vuex-mutations\",\n \"description\": \"A Vue.js project\",\n \"version\": \"1.0.0\",\n \"author\": \"@juanwmedia \",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"cross-env NODE_ENV=development webpack-dev-server --open --hot\",\n \"build\": \"cross-env NODE_ENV=production webpack --progress --hide-modules\"\n },\n \"dependencies\": {\n \"vue\": \"^2.2.1\",\n \"vuex\": \"^2.2.1\"\n },\n \"devDependencies\": {\n \"babel-core\": \"^6.0.0\",\n \"babel-loader\": \"^6.0.0\",\n \"babel-preset-latest\": \"^6.0.0\",\n \"cross-env\": \"^3.0.0\",\n \"css-loader\": \"^0.25.0\",\n \"file-loader\": \"^0.9.0\",\n \"vue-loader\": \"^11.0.0\",\n \"vue-template-compiler\": \"^2.2.1\",\n \"webpack\": \"^2.2.0\",\n \"webpack-dev-server\": \"^2.2.0\"\n }\n}\n" }, { "path": "36-vuex-actions/src/App.vue", "content": "\n" }, { "path": "36-vuex-actions/src/components/Contador.vue", "content": "\n" }, { "path": "36-vuex-actions/src/main.js", "content": "import Vue from 'vue';\nimport App from './App.vue';\nimport {store} from './store/store';\n\nnew Vue({\n el: '#app',\n store: store,\n render: h => h(App)\n})\n" }, { "path": "36-vuex-actions/src/store/store.js", "content": "import Vue from 'vue';\nimport Vuex from 'vuex';\nVue.use(Vuex);\n\nexport const store = new Vuex.Store({\n state: {\n cantidad: 0,\n },\n mutations: {\n aumentar: (state, cantidad) => state.cantidad += cantidad,\n reducir: (state, cantidad) => state.cantidad -=cantidad,\n },\n actions: {\n aumentarAsync: (context, cantidad) => {\n setTimeout(() => context.commit('aumentar', cantidad), 2000);\n },\n reducirAsync: ({commit}, {cantidad}) => {\n setTimeout(() => commit('reducir', cantidad), 2000);\n }\n }\n});" }, { "path": "36-vuex-actions/webpack.config.js", "content": "var path = require('path')\nvar webpack = require('webpack')\n\nmodule.exports = {\n entry: './src/main.js',\n output: {\n path: path.resolve(__dirname, './dist'),\n publicPath: '/dist/',\n filename: 'build.js'\n },\n module: {\n rules: [\n {\n test: /\\.vue$/,\n loader: 'vue-loader',\n options: {\n loaders: {\n }\n // other vue-loader options go here\n }\n },\n {\n test: /\\.js$/,\n loader: 'babel-loader',\n exclude: /node_modules/\n },\n {\n test: /\\.(png|jpg|gif|svg)$/,\n loader: 'file-loader',\n options: {\n name: '[name].[ext]?[hash]'\n }\n }\n ]\n },\n resolve: {\n alias: {\n 'vue$': 'vue/dist/vue.esm.js'\n }\n },\n devServer: {\n historyApiFallback: true,\n noInfo: true\n },\n performance: {\n hints: false\n },\n devtool: '#eval-source-map'\n}\n\nif (process.env.NODE_ENV === 'production') {\n module.exports.devtool = '#source-map'\n // http://vue-loader.vuejs.org/en/workflow/production.html\n module.exports.plugins = (module.exports.plugins || []).concat([\n new webpack.DefinePlugin({\n 'process.env': {\n NODE_ENV: '\"production\"'\n }\n }),\n new webpack.optimize.UglifyJsPlugin({\n sourceMap: true,\n compress: {\n warnings: false\n }\n }),\n new webpack.LoaderOptionsPlugin({\n minimize: true\n })\n ])\n}\n" }, { "path": "37-vuex-modules/.babelrc", "content": "// http://stefan.magnuson.co/articles/frontend/using-es7-spread-operator-with-webpack/\n{\n \"presets\": [\n \"stage-2\",\n [\"latest\", {\n \"es2015\": { \"modules\": false }\n }]\n ]\n}\n" }, { "path": "37-vuex-modules/README.md", "content": "# 37-vuex-modules\n\n> A Vue.js project\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# build for production with minification\nnpm run build\n```\n\nFor detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).\n" }, { "path": "37-vuex-modules/index.html", "content": "\n\n \n \n 37-vuex-modules\n \n \n
    \n \n \n\n" }, { "path": "37-vuex-modules/package.json", "content": "{\n \"name\": \"37-vuex-modules\",\n \"description\": \"A Vue.js project\",\n \"version\": \"1.0.0\",\n \"author\": \"@juanwmedia \",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"cross-env NODE_ENV=development webpack-dev-server --open --hot\",\n \"build\": \"cross-env NODE_ENV=production webpack --progress --hide-modules\"\n },\n \"dependencies\": {\n \"babel-preset-stage-2\": \"^6.22.0\",\n \"vue\": \"^2.2.1\",\n \"vuex\": \"^2.2.1\"\n },\n \"devDependencies\": {\n \"babel-core\": \"^6.0.0\",\n \"babel-loader\": \"^6.0.0\",\n \"babel-preset-latest\": \"^6.0.0\",\n \"cross-env\": \"^3.0.0\",\n \"css-loader\": \"^0.25.0\",\n \"file-loader\": \"^0.9.0\",\n \"vue-loader\": \"^11.1.4\",\n \"vue-template-compiler\": \"^2.2.1\",\n \"webpack\": \"^2.2.0\",\n \"webpack-dev-server\": \"^2.2.0\"\n }\n}\n" }, { "path": "37-vuex-modules/src/App.vue", "content": "\n\n" }, { "path": "37-vuex-modules/src/components/Carro.vue", "content": "\n" }, { "path": "37-vuex-modules/src/components/Productos.vue", "content": "\n" }, { "path": "37-vuex-modules/src/main.js", "content": "import Vue from 'vue';\nimport App from './App.vue';\nimport {store} from './store/store';\n\nnew Vue({\n el: '#app',\n store,\n render: h => h(App)\n});" }, { "path": "37-vuex-modules/src/store/modules/productos.js", "content": "const productos = [\n {nombre: 'Steam Link', precio: 50},\n {nombre: 'Steam Controller', precio: 59},\n {nombre: 'Axiom Verge', precio: 17},\n];\n\nconst mutations = {\n anadirProducto: (state, producto) => state.productos.unshift(producto),\n};\n\nexport default {\n state: productos,\n mutations,\n};" }, { "path": "37-vuex-modules/src/store/store.js", "content": "import Vue from 'vue';\nimport Vuex from 'vuex';\nimport productos from './modules/productos';\nVue.use(Vuex);\n\nexport const store = new Vuex.Store({\n state: {\n/* productos: [\n {nombre: 'Steam Link', precio: 50},\n {nombre: 'Steam Controller', precio: 59},\n {nombre: 'Axiom Verge', precio: 17},\n ],*/\n carro: [],\n },\n getters: {\n totalCompra: (state) => state.carro.reduce((total, producto) => total + producto.precio, 0),\n },\n mutations: {\n /*anadirProducto: (state, producto) => state.productos.unshift(producto),*/\n comprarProducto: (state, indice) => state.carro.unshift(state.productos[indice]),\n eliminarProducto: (state, indice) => state.carro.splice(indice, 1),\n },\n modules: {\n productos\n }\n});\n" }, { "path": "37-vuex-modules/webpack.config.js", "content": "var path = require('path')\nvar webpack = require('webpack')\n\nmodule.exports = {\n entry: './src/main.js',\n output: {\n path: path.resolve(__dirname, './dist'),\n publicPath: '/dist/',\n filename: 'build.js'\n },\n module: {\n rules: [\n {\n test: /\\.vue$/,\n loader: 'vue-loader',\n options: {\n loaders: {\n }\n // other vue-loader options go here\n }\n },\n {\n test: /\\.js$/,\n loader: 'babel-loader',\n exclude: /node_modules/\n },\n {\n test: /\\.(png|jpg|gif|svg)$/,\n loader: 'file-loader',\n options: {\n name: '[name].[ext]?[hash]'\n }\n }\n ]\n },\n resolve: {\n alias: {\n 'vue$': 'vue/dist/vue.esm.js'\n }\n },\n devServer: {\n historyApiFallback: true,\n noInfo: true\n },\n performance: {\n hints: false\n },\n devtool: '#eval-source-map'\n}\n\nif (process.env.NODE_ENV === 'production') {\n module.exports.devtool = '#source-map'\n // http://vue-loader.vuejs.org/en/workflow/production.html\n module.exports.plugins = (module.exports.plugins || []).concat([\n new webpack.DefinePlugin({\n 'process.env': {\n NODE_ENV: '\"production\"'\n }\n }),\n new webpack.optimize.UglifyJsPlugin({\n sourceMap: true,\n compress: {\n warnings: false\n }\n }),\n new webpack.LoaderOptionsPlugin({\n minimize: true\n })\n ])\n}\n" }, { "path": "38-vuex-structure/.babelrc", "content": "// http://stefan.magnuson.co/articles/frontend/using-es7-spread-operator-with-webpack/\n{\n \"presets\": [\n \"stage-2\",\n [\"latest\", {\n \"es2015\": { \"modules\": false }\n }]\n ]\n}\n" }, { "path": "38-vuex-structure/README.md", "content": "# 37-vuex-modules\n\n> A Vue.js project\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# build for production with minification\nnpm run build\n```\n\nFor detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).\n" }, { "path": "38-vuex-structure/index.html", "content": "\n\n \n \n 38-vuex-structure\n \n \n
    \n \n \n\n" }, { "path": "38-vuex-structure/package.json", "content": "{\n \"name\": \"37-vuex-modules\",\n \"description\": \"A Vue.js project\",\n \"version\": \"1.0.0\",\n \"author\": \"@juanwmedia \",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"cross-env NODE_ENV=development webpack-dev-server --open --hot\",\n \"build\": \"cross-env NODE_ENV=production webpack --progress --hide-modules\"\n },\n \"dependencies\": {\n \"babel-preset-stage-2\": \"^6.22.0\",\n \"vue\": \"^2.2.1\",\n \"vuex\": \"^2.2.1\"\n },\n \"devDependencies\": {\n \"babel-core\": \"^6.0.0\",\n \"babel-loader\": \"^6.0.0\",\n \"babel-preset-latest\": \"^6.0.0\",\n \"cross-env\": \"^3.0.0\",\n \"css-loader\": \"^0.25.0\",\n \"file-loader\": \"^0.9.0\",\n \"vue-loader\": \"^11.1.4\",\n \"vue-template-compiler\": \"^2.2.1\",\n \"webpack\": \"^2.2.0\",\n \"webpack-dev-server\": \"^2.2.0\"\n }\n}\n" }, { "path": "38-vuex-structure/src/App.vue", "content": "\n\n" }, { "path": "38-vuex-structure/src/components/Carro.vue", "content": "\n" }, { "path": "38-vuex-structure/src/components/Productos.vue", "content": "\n" }, { "path": "38-vuex-structure/src/main.js", "content": "import Vue from 'vue';\nimport App from './App.vue';\nimport {store} from './store/store';\n\nnew Vue({\n el: '#app',\n store,\n render: h => h(App)\n});" }, { "path": "38-vuex-structure/src/store/getters.js", "content": "export const getters = {\n totalCompra: (state) => state.carro.reduce((total, producto) => total + producto.precio, 0),\n};" }, { "path": "38-vuex-structure/src/store/modules/productos.js", "content": "const productos = [\n {nombre: 'Steam Link', precio: 50},\n {nombre: 'Steam Controller', precio: 59},\n {nombre: 'Axiom Verge', precio: 17},\n];\n\nconst mutations = {\n anadirProducto: (state, producto) => state.productos.unshift(producto),\n};\n\nexport default {\n state: productos,\n mutations,\n};" }, { "path": "38-vuex-structure/src/store/mutations.js", "content": "export const mutations = {\n comprarProducto: (state, indice) => state.carro.unshift(state.productos[indice]),\n eliminarProducto: (state, indice) => state.carro.splice(indice, 1),\n};" }, { "path": "38-vuex-structure/src/store/store.js", "content": "import Vue from 'vue';\nimport Vuex from 'vuex';\nimport productos from './modules/productos';\nimport {getters} from './getters';\nimport {mutations} from './mutations';\nVue.use(Vuex);\n\nexport const store = new Vuex.Store({\n state: {\n carro: [],\n },\n getters: getters,\n mutations:mutations,\n modules: {\n productos\n }\n});\n" }, { "path": "38-vuex-structure/webpack.config.js", "content": "var path = require('path')\nvar webpack = require('webpack')\n\nmodule.exports = {\n entry: './src/main.js',\n output: {\n path: path.resolve(__dirname, './dist'),\n publicPath: '/dist/',\n filename: 'build.js'\n },\n module: {\n rules: [\n {\n test: /\\.vue$/,\n loader: 'vue-loader',\n options: {\n loaders: {\n }\n // other vue-loader options go here\n }\n },\n {\n test: /\\.js$/,\n loader: 'babel-loader',\n exclude: /node_modules/\n },\n {\n test: /\\.(png|jpg|gif|svg)$/,\n loader: 'file-loader',\n options: {\n name: '[name].[ext]?[hash]'\n }\n }\n ]\n },\n resolve: {\n alias: {\n 'vue$': 'vue/dist/vue.esm.js'\n }\n },\n devServer: {\n historyApiFallback: true,\n noInfo: true\n },\n performance: {\n hints: false\n },\n devtool: '#eval-source-map'\n}\n\nif (process.env.NODE_ENV === 'production') {\n module.exports.devtool = '#source-map'\n // http://vue-loader.vuejs.org/en/workflow/production.html\n module.exports.plugins = (module.exports.plugins || []).concat([\n new webpack.DefinePlugin({\n 'process.env': {\n NODE_ENV: '\"production\"'\n }\n }),\n new webpack.optimize.UglifyJsPlugin({\n sourceMap: true,\n compress: {\n warnings: false\n }\n }),\n new webpack.LoaderOptionsPlugin({\n minimize: true\n })\n ])\n}\n" }, { "path": "4-vue-devtools/index.html", "content": "\n\n\n \n \n Vue.js\n \n \n\n\n\n
    \n

    {{ mensaje }}

    \n 
    {{ $data }}
    \n
    \n \n \n\n\n" }, { "path": "4-vue-devtools/js/main.js", "content": "new Vue({\n el: 'main',\n data: {\n mensaje: 'Aprendiendo Vue.js :)'\n }\n});" }, { "path": "40-vue-router-intro/index.html", "content": "\n\n\n \n Vue Router\n\n\n
    \n

    Aprendiendo Vue-Router

    \n Portada\n Contacto\n
    \n \n
    \n\n\n\n\n" }, { "path": "40-vue-router-intro/js/main.js", "content": "// ¿Quién 'vive' en cada ruta?\nconst home = Vue.component('Home', {\n template: '

    Portada

    ',\n});\n\nconst contacto = Vue.component('Contacto', {\n template: '

    Contacto

    ',\n});\n\n// Plano de destinos con sus rutas\nconst routes = [\n {path: '/', component: home},\n {path: '/contacto', component: contacto},\n];\n\n// Instaciar el componente enrutador\nconst router = new VueRouter({\n routes: routes,\n});\n\nnew Vue({\n router: router,\n el: 'main',\n});" }, { "path": "41-vue-router-components/.babelrc", "content": "{\n \"presets\": [\n [\"latest\", {\n \"es2015\": { \"modules\": false }\n }]\n ]\n}\n" }, { "path": "41-vue-router-components/README.md", "content": "# 41-vue-router-components\n\n> A Vue.js project\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# build for production with minification\nnpm run build\n```\n\nFor detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).\n" }, { "path": "41-vue-router-components/index.html", "content": "\n\n \n \n 41-vue-router-components\n \n \n
    \n \n \n\n" }, { "path": "41-vue-router-components/package.json", "content": "{\n \"name\": \"41-vue-router-components\",\n \"description\": \"A Vue.js project\",\n \"version\": \"1.0.0\",\n \"author\": \"@juanwmedia \",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"cross-env NODE_ENV=development webpack-dev-server --open --hot\",\n \"build\": \"cross-env NODE_ENV=production webpack --progress --hide-modules\"\n },\n \"dependencies\": {\n \"vue\": \"^2.2.1\",\n \"vue-router\": \"^2.3.0\"\n },\n \"devDependencies\": {\n \"babel-core\": \"^6.0.0\",\n \"babel-loader\": \"^6.0.0\",\n \"babel-preset-latest\": \"^6.0.0\",\n \"cross-env\": \"^3.0.0\",\n \"css-loader\": \"^0.25.0\",\n \"file-loader\": \"^0.9.0\",\n \"vue-loader\": \"^11.1.4\",\n \"vue-template-compiler\": \"^2.2.1\",\n \"webpack\": \"^2.2.0\",\n \"webpack-dev-server\": \"^2.2.0\"\n }\n}\n" }, { "path": "41-vue-router-components/src/App.vue", "content": "\n\n" }, { "path": "41-vue-router-components/src/components/Contacto.vue", "content": "" }, { "path": "41-vue-router-components/src/components/Home.vue", "content": "" }, { "path": "41-vue-router-components/src/main.js", "content": "import Vue from 'vue';\nimport VueRouter from 'vue-router';\nimport {routes} from './routes';\nimport App from './App.vue';\n\nVue.use(VueRouter);\n\nconst router = new VueRouter({\n routes\n});\n\nnew Vue({\n el: '#app',\n router,\n render: h => h(App)\n})" }, { "path": "41-vue-router-components/src/routes.js", "content": "import Home from './components/Home.vue';\nimport Contacto from './components/Contacto.vue';\n\nexport const routes = [\n {path: '/', component: Home},\n {path: '/contacto', component: Contacto},\n];" }, { "path": "41-vue-router-components/webpack.config.js", "content": "var path = require('path')\nvar webpack = require('webpack')\n\nmodule.exports = {\n entry: './src/main.js',\n output: {\n path: path.resolve(__dirname, './dist'),\n publicPath: '/dist/',\n filename: 'build.js'\n },\n module: {\n rules: [\n {\n test: /\\.vue$/,\n loader: 'vue-loader',\n options: {\n loaders: {\n }\n // other vue-loader options go here\n }\n },\n {\n test: /\\.js$/,\n loader: 'babel-loader',\n exclude: /node_modules/\n },\n {\n test: /\\.(png|jpg|gif|svg)$/,\n loader: 'file-loader',\n options: {\n name: '[name].[ext]?[hash]'\n }\n }\n ]\n },\n resolve: {\n alias: {\n 'vue$': 'vue/dist/vue.esm.js'\n }\n },\n devServer: {\n historyApiFallback: true,\n noInfo: true\n },\n performance: {\n hints: false\n },\n devtool: '#eval-source-map'\n}\n\nif (process.env.NODE_ENV === 'production') {\n module.exports.devtool = '#source-map'\n // http://vue-loader.vuejs.org/en/workflow/production.html\n module.exports.plugins = (module.exports.plugins || []).concat([\n new webpack.DefinePlugin({\n 'process.env': {\n NODE_ENV: '\"production\"'\n }\n }),\n new webpack.optimize.UglifyJsPlugin({\n sourceMap: true,\n compress: {\n warnings: false\n }\n }),\n new webpack.LoaderOptionsPlugin({\n minimize: true\n })\n ])\n}\n" }, { "path": "42-vue-router-active-links/.babelrc", "content": "{\n \"presets\": [\n [\"latest\", {\n \"es2015\": { \"modules\": false }\n }]\n ]\n}\n" }, { "path": "42-vue-router-active-links/README.md", "content": "# 41-vue-router-components\n\n> A Vue.js project\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# build for production with minification\nnpm run build\n```\n\nFor detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).\n" }, { "path": "42-vue-router-active-links/index.html", "content": "\n\n \n \n 42-vue-router-active-links\n \n \n
    \n \n \n\n" }, { "path": "42-vue-router-active-links/package.json", "content": "{\n \"name\": \"41-vue-router-components\",\n \"description\": \"A Vue.js project\",\n \"version\": \"1.0.0\",\n \"author\": \"@juanwmedia \",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"cross-env NODE_ENV=development webpack-dev-server --open --hot\",\n \"build\": \"cross-env NODE_ENV=production webpack --progress --hide-modules\"\n },\n \"dependencies\": {\n \"vue\": \"^2.2.1\",\n \"vue-router\": \"^2.3.0\"\n },\n \"devDependencies\": {\n \"babel-core\": \"^6.0.0\",\n \"babel-loader\": \"^6.0.0\",\n \"babel-preset-latest\": \"^6.0.0\",\n \"cross-env\": \"^3.0.0\",\n \"css-loader\": \"^0.25.0\",\n \"file-loader\": \"^0.9.0\",\n \"vue-loader\": \"^11.1.4\",\n \"vue-template-compiler\": \"^2.2.1\",\n \"webpack\": \"^2.2.0\",\n \"webpack-dev-server\": \"^2.2.0\"\n }\n}\n" }, { "path": "42-vue-router-active-links/src/App.vue", "content": "\n\n\n\n" }, { "path": "42-vue-router-active-links/src/components/Contacto.vue", "content": "" }, { "path": "42-vue-router-active-links/src/components/Home.vue", "content": "" }, { "path": "42-vue-router-active-links/src/main.js", "content": "import Vue from 'vue';\nimport VueRouter from 'vue-router';\nimport {routes} from './routes';\nimport App from './App.vue';\n\nVue.use(VueRouter);\n\nconst router = new VueRouter({\n routes\n});\n\nnew Vue({\n el: '#app',\n router,\n render: h => h(App)\n})" }, { "path": "42-vue-router-active-links/src/routes.js", "content": "import Home from './components/Home.vue';\nimport Contacto from './components/Contacto.vue';\n\nexport const routes = [\n {path: '/', component: Home},\n {path: '/contacto', component: Contacto},\n];" }, { "path": "42-vue-router-active-links/webpack.config.js", "content": "var path = require('path')\nvar webpack = require('webpack')\n\nmodule.exports = {\n entry: './src/main.js',\n output: {\n path: path.resolve(__dirname, './dist'),\n publicPath: '/dist/',\n filename: 'build.js'\n },\n module: {\n rules: [\n {\n test: /\\.vue$/,\n loader: 'vue-loader',\n options: {\n loaders: {\n }\n // other vue-loader options go here\n }\n },\n {\n test: /\\.js$/,\n loader: 'babel-loader',\n exclude: /node_modules/\n },\n {\n test: /\\.(png|jpg|gif|svg)$/,\n loader: 'file-loader',\n options: {\n name: '[name].[ext]?[hash]'\n }\n }\n ]\n },\n resolve: {\n alias: {\n 'vue$': 'vue/dist/vue.esm.js'\n }\n },\n devServer: {\n historyApiFallback: true,\n noInfo: true\n },\n performance: {\n hints: false\n },\n devtool: '#eval-source-map'\n}\n\nif (process.env.NODE_ENV === 'production') {\n module.exports.devtool = '#source-map'\n // http://vue-loader.vuejs.org/en/workflow/production.html\n module.exports.plugins = (module.exports.plugins || []).concat([\n new webpack.DefinePlugin({\n 'process.env': {\n NODE_ENV: '\"production\"'\n }\n }),\n new webpack.optimize.UglifyJsPlugin({\n sourceMap: true,\n compress: {\n warnings: false\n }\n }),\n new webpack.LoaderOptionsPlugin({\n minimize: true\n })\n ])\n}\n" }, { "path": "43-vue-programmatic-nav/.babelrc", "content": "{\n \"presets\": [\n [\"latest\", {\n \"es2015\": { \"modules\": false }\n }]\n ]\n}\n" }, { "path": "43-vue-programmatic-nav/README.md", "content": "# 41-vue-router-components\n\n> A Vue.js project\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# build for production with minification\nnpm run build\n```\n\nFor detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).\n" }, { "path": "43-vue-programmatic-nav/index.html", "content": "\n\n \n \n 43-vue-router-prog-nav\n \n \n
    \n \n \n\n" }, { "path": "43-vue-programmatic-nav/package.json", "content": "{\n \"name\": \"41-vue-router-components\",\n \"description\": \"A Vue.js project\",\n \"version\": \"1.0.0\",\n \"author\": \"@juanwmedia \",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"cross-env NODE_ENV=development webpack-dev-server --open --hot\",\n \"build\": \"cross-env NODE_ENV=production webpack --progress --hide-modules\"\n },\n \"dependencies\": {\n \"vue\": \"^2.2.1\",\n \"vue-router\": \"^2.3.0\"\n },\n \"devDependencies\": {\n \"babel-core\": \"^6.0.0\",\n \"babel-loader\": \"^6.0.0\",\n \"babel-preset-latest\": \"^6.0.0\",\n \"cross-env\": \"^3.0.0\",\n \"css-loader\": \"^0.25.0\",\n \"file-loader\": \"^0.9.0\",\n \"vue-loader\": \"^11.1.4\",\n \"vue-template-compiler\": \"^2.2.1\",\n \"webpack\": \"^2.2.0\",\n \"webpack-dev-server\": \"^2.2.0\"\n }\n}\n" }, { "path": "43-vue-programmatic-nav/src/App.vue", "content": "\n\n\n\n" }, { "path": "43-vue-programmatic-nav/src/components/Contacto.vue", "content": "\n\n\n" }, { "path": "43-vue-programmatic-nav/src/components/Home.vue", "content": "" }, { "path": "43-vue-programmatic-nav/src/main.js", "content": "import Vue from 'vue';\nimport VueRouter from 'vue-router';\nimport {routes} from './routes';\nimport App from './App.vue';\n\nVue.use(VueRouter);\n\nconst router = new VueRouter({\n routes\n});\n\nnew Vue({\n el: '#app',\n router,\n render: h => h(App)\n})" }, { "path": "43-vue-programmatic-nav/src/routes.js", "content": "import Home from './components/Home.vue';\nimport Contacto from './components/Contacto.vue';\n\nexport const routes = [\n {path: '/', component: Home},\n {path: '/contacto', component: Contacto},\n];" }, { "path": "43-vue-programmatic-nav/webpack.config.js", "content": "var path = require('path')\nvar webpack = require('webpack')\n\nmodule.exports = {\n entry: './src/main.js',\n output: {\n path: path.resolve(__dirname, './dist'),\n publicPath: '/dist/',\n filename: 'build.js'\n },\n module: {\n rules: [\n {\n test: /\\.vue$/,\n loader: 'vue-loader',\n options: {\n loaders: {\n }\n // other vue-loader options go here\n }\n },\n {\n test: /\\.js$/,\n loader: 'babel-loader',\n exclude: /node_modules/\n },\n {\n test: /\\.(png|jpg|gif|svg)$/,\n loader: 'file-loader',\n options: {\n name: '[name].[ext]?[hash]'\n }\n }\n ]\n },\n resolve: {\n alias: {\n 'vue$': 'vue/dist/vue.esm.js'\n }\n },\n devServer: {\n historyApiFallback: true,\n noInfo: true\n },\n performance: {\n hints: false\n },\n devtool: '#eval-source-map'\n}\n\nif (process.env.NODE_ENV === 'production') {\n module.exports.devtool = '#source-map'\n // http://vue-loader.vuejs.org/en/workflow/production.html\n module.exports.plugins = (module.exports.plugins || []).concat([\n new webpack.DefinePlugin({\n 'process.env': {\n NODE_ENV: '\"production\"'\n }\n }),\n new webpack.optimize.UglifyJsPlugin({\n sourceMap: true,\n compress: {\n warnings: false\n }\n }),\n new webpack.LoaderOptionsPlugin({\n minimize: true\n })\n ])\n}\n" }, { "path": "44-vue-router-dynamic-routes/.babelrc", "content": "{\n \"presets\": [\n [\"latest\", {\n \"es2015\": { \"modules\": false }\n }]\n ]\n}\n" }, { "path": "44-vue-router-dynamic-routes/README.md", "content": "# 41-vue-router-components\n\n> A Vue.js project\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# build for production with minification\nnpm run build\n```\n\nFor detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).\n" }, { "path": "44-vue-router-dynamic-routes/index.html", "content": "\n\n \n \n 44-vue-router-dynamic-routes\n \n \n
    \n \n \n\n" }, { "path": "44-vue-router-dynamic-routes/package.json", "content": "{\n \"name\": \"41-vue-router-components\",\n \"description\": \"A Vue.js project\",\n \"version\": \"1.0.0\",\n \"author\": \"@juanwmedia \",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"cross-env NODE_ENV=development webpack-dev-server --open --hot\",\n \"build\": \"cross-env NODE_ENV=production webpack --progress --hide-modules\"\n },\n \"dependencies\": {\n \"vue\": \"^2.2.1\",\n \"vue-router\": \"^2.3.0\"\n },\n \"devDependencies\": {\n \"babel-core\": \"^6.0.0\",\n \"babel-loader\": \"^6.0.0\",\n \"babel-preset-latest\": \"^6.0.0\",\n \"cross-env\": \"^3.0.0\",\n \"css-loader\": \"^0.25.0\",\n \"file-loader\": \"^0.9.0\",\n \"vue-loader\": \"^11.1.4\",\n \"vue-template-compiler\": \"^2.2.1\",\n \"webpack\": \"^2.2.0\",\n \"webpack-dev-server\": \"^2.2.0\"\n }\n}\n" }, { "path": "44-vue-router-dynamic-routes/src/App.vue", "content": "\n\n\n\n" }, { "path": "44-vue-router-dynamic-routes/src/components/Contacto.vue", "content": "\n\n\n" }, { "path": "44-vue-router-dynamic-routes/src/components/Home.vue", "content": "" }, { "path": "44-vue-router-dynamic-routes/src/components/Usuario.vue", "content": "\n" }, { "path": "44-vue-router-dynamic-routes/src/main.js", "content": "import Vue from 'vue';\nimport VueRouter from 'vue-router';\nimport {routes} from './routes';\nimport App from './App.vue';\n\nVue.use(VueRouter);\n\nconst router = new VueRouter({\n routes\n});\n\nnew Vue({\n el: '#app',\n router,\n render: h => h(App)\n})" }, { "path": "44-vue-router-dynamic-routes/src/routes.js", "content": "import Home from './components/Home.vue';\nimport Contacto from './components/Contacto.vue';\nimport Usuario from './components/Usuario.vue';\n\nexport const routes = [\n {path: '/', component: Home},\n {path: '/contacto', component: Contacto},\n {path: '/usuario/:id', component: Usuario},\n];" }, { "path": "44-vue-router-dynamic-routes/webpack.config.js", "content": "var path = require('path')\nvar webpack = require('webpack')\n\nmodule.exports = {\n entry: './src/main.js',\n output: {\n path: path.resolve(__dirname, './dist'),\n publicPath: '/dist/',\n filename: 'build.js'\n },\n module: {\n rules: [\n {\n test: /\\.vue$/,\n loader: 'vue-loader',\n options: {\n loaders: {\n }\n // other vue-loader options go here\n }\n },\n {\n test: /\\.js$/,\n loader: 'babel-loader',\n exclude: /node_modules/\n },\n {\n test: /\\.(png|jpg|gif|svg)$/,\n loader: 'file-loader',\n options: {\n name: '[name].[ext]?[hash]'\n }\n }\n ]\n },\n resolve: {\n alias: {\n 'vue$': 'vue/dist/vue.esm.js'\n }\n },\n devServer: {\n historyApiFallback: true,\n noInfo: true\n },\n performance: {\n hints: false\n },\n devtool: '#eval-source-map'\n}\n\nif (process.env.NODE_ENV === 'production') {\n module.exports.devtool = '#source-map'\n // http://vue-loader.vuejs.org/en/workflow/production.html\n module.exports.plugins = (module.exports.plugins || []).concat([\n new webpack.DefinePlugin({\n 'process.env': {\n NODE_ENV: '\"production\"'\n }\n }),\n new webpack.optimize.UglifyJsPlugin({\n sourceMap: true,\n compress: {\n warnings: false\n }\n }),\n new webpack.LoaderOptionsPlugin({\n minimize: true\n })\n ])\n}\n" }, { "path": "45-vue-router-reacting/.babelrc", "content": "{\n \"presets\": [\n [\"latest\", {\n \"es2015\": { \"modules\": false }\n }]\n ]\n}\n" }, { "path": "45-vue-router-reacting/README.md", "content": "# 41-vue-router-components\n\n> A Vue.js project\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# build for production with minification\nnpm run build\n```\n\nFor detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).\n" }, { "path": "45-vue-router-reacting/index.html", "content": "\n\n \n \n 45-vue-router-reacting\n \n \n
    \n \n \n\n" }, { "path": "45-vue-router-reacting/package.json", "content": "{\n \"name\": \"41-vue-router-components\",\n \"description\": \"A Vue.js project\",\n \"version\": \"1.0.0\",\n \"author\": \"@juanwmedia \",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"cross-env NODE_ENV=development webpack-dev-server --open --hot\",\n \"build\": \"cross-env NODE_ENV=production webpack --progress --hide-modules\"\n },\n \"dependencies\": {\n \"vue\": \"^2.2.1\",\n \"vue-router\": \"^2.3.0\"\n },\n \"devDependencies\": {\n \"babel-core\": \"^6.0.0\",\n \"babel-loader\": \"^6.0.0\",\n \"babel-preset-latest\": \"^6.0.0\",\n \"cross-env\": \"^3.0.0\",\n \"css-loader\": \"^0.25.0\",\n \"file-loader\": \"^0.9.0\",\n \"vue-loader\": \"^11.1.4\",\n \"vue-template-compiler\": \"^2.2.1\",\n \"webpack\": \"^2.2.0\",\n \"webpack-dev-server\": \"^2.2.0\"\n }\n}\n" }, { "path": "45-vue-router-reacting/src/App.vue", "content": "\n\n\n\n" }, { "path": "45-vue-router-reacting/src/components/Contacto.vue", "content": "\n\n\n" }, { "path": "45-vue-router-reacting/src/components/Home.vue", "content": "" }, { "path": "45-vue-router-reacting/src/components/Usuario.vue", "content": "\n" }, { "path": "45-vue-router-reacting/src/main.js", "content": "import Vue from 'vue';\nimport VueRouter from 'vue-router';\nimport {routes} from './routes';\nimport App from './App.vue';\n\nVue.use(VueRouter);\n\nconst router = new VueRouter({\n routes\n});\n\nnew Vue({\n el: '#app',\n router,\n render: h => h(App)\n})" }, { "path": "45-vue-router-reacting/src/routes.js", "content": "import Home from './components/Home.vue';\nimport Contacto from './components/Contacto.vue';\nimport Usuario from './components/Usuario.vue';\n\nexport const routes = [\n {path: '/', component: Home},\n {path: '/contacto', component: Contacto},\n {path: '/usuario/:id', component: Usuario},\n];" }, { "path": "45-vue-router-reacting/webpack.config.js", "content": "var path = require('path')\nvar webpack = require('webpack')\n\nmodule.exports = {\n entry: './src/main.js',\n output: {\n path: path.resolve(__dirname, './dist'),\n publicPath: '/dist/',\n filename: 'build.js'\n },\n module: {\n rules: [\n {\n test: /\\.vue$/,\n loader: 'vue-loader',\n options: {\n loaders: {\n }\n // other vue-loader options go here\n }\n },\n {\n test: /\\.js$/,\n loader: 'babel-loader',\n exclude: /node_modules/\n },\n {\n test: /\\.(png|jpg|gif|svg)$/,\n loader: 'file-loader',\n options: {\n name: '[name].[ext]?[hash]'\n }\n }\n ]\n },\n resolve: {\n alias: {\n 'vue$': 'vue/dist/vue.esm.js'\n }\n },\n devServer: {\n historyApiFallback: true,\n noInfo: true\n },\n performance: {\n hints: false\n },\n devtool: '#eval-source-map'\n}\n\nif (process.env.NODE_ENV === 'production') {\n module.exports.devtool = '#source-map'\n // http://vue-loader.vuejs.org/en/workflow/production.html\n module.exports.plugins = (module.exports.plugins || []).concat([\n new webpack.DefinePlugin({\n 'process.env': {\n NODE_ENV: '\"production\"'\n }\n }),\n new webpack.optimize.UglifyJsPlugin({\n sourceMap: true,\n compress: {\n warnings: false\n }\n }),\n new webpack.LoaderOptionsPlugin({\n minimize: true\n })\n ])\n}\n" }, { "path": "46-vue-router-nested-routes/.babelrc", "content": "{\n \"presets\": [\n [\"latest\", {\n \"es2015\": { \"modules\": false }\n }]\n ]\n}\n" }, { "path": "46-vue-router-nested-routes/README.md", "content": "# 46-vue-router-nested-routes\n\n> A Vue.js project\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# build for production with minification\nnpm run build\n```\n\nFor detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).\n" }, { "path": "46-vue-router-nested-routes/index.html", "content": "\n\n \n \n 46-vue-router-nested-routes\n \n \n
    \n \n \n\n" }, { "path": "46-vue-router-nested-routes/package.json", "content": "{\n \"name\": \"46-vue-router-nested-routes\",\n \"description\": \"A Vue.js project\",\n \"version\": \"1.0.0\",\n \"author\": \"@juanwmedia \",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"cross-env NODE_ENV=development webpack-dev-server --open --hot\",\n \"build\": \"cross-env NODE_ENV=production webpack --progress --hide-modules\"\n },\n \"dependencies\": {\n \"vue\": \"^2.2.1\",\n \"vue-router\": \"^2.3.0\"\n },\n \"devDependencies\": {\n \"babel-core\": \"^6.0.0\",\n \"babel-loader\": \"^6.0.0\",\n \"babel-preset-latest\": \"^6.0.0\",\n \"cross-env\": \"^3.0.0\",\n \"css-loader\": \"^0.25.0\",\n \"file-loader\": \"^0.9.0\",\n \"vue-loader\": \"^11.1.4\",\n \"vue-template-compiler\": \"^2.2.1\",\n \"webpack\": \"^2.2.0\",\n \"webpack-dev-server\": \"^2.2.0\"\n }\n}\n" }, { "path": "46-vue-router-nested-routes/src/App.vue", "content": "\n\n" }, { "path": "46-vue-router-nested-routes/src/components/Equipo.vue", "content": "" }, { "path": "46-vue-router-nested-routes/src/components/EquipoJuan.vue", "content": "" }, { "path": "46-vue-router-nested-routes/src/components/Home.vue", "content": "" }, { "path": "46-vue-router-nested-routes/src/main.js", "content": "import Vue from 'vue';\nimport App from './App.vue';\nimport VueRouter from 'vue-router';\nimport {routes} from './routes';\nVue.use(VueRouter);\n\nconst router = new VueRouter({\n routes\n});\n\nnew Vue({\n el: '#app',\n router,\n render: h => h(App)\n})\n" }, { "path": "46-vue-router-nested-routes/src/routes.js", "content": "import Home from './components/Home.vue';\nimport Equipo from './components/Equipo.vue';\nimport EquipoJuan from './components/EquipoJuan.vue';\n\nexport const routes = [\n {path: '/', component: Home},\n {path: '/equipo', component: Equipo, children: [\n {path: 'juan', component: EquipoJuan},\n ]},\n];" }, { "path": "46-vue-router-nested-routes/webpack.config.js", "content": "var path = require('path')\nvar webpack = require('webpack')\n\nmodule.exports = {\n entry: './src/main.js',\n output: {\n path: path.resolve(__dirname, './dist'),\n publicPath: '/dist/',\n filename: 'build.js'\n },\n module: {\n rules: [\n {\n test: /\\.vue$/,\n loader: 'vue-loader',\n options: {\n loaders: {\n }\n // other vue-loader options go here\n }\n },\n {\n test: /\\.js$/,\n loader: 'babel-loader',\n exclude: /node_modules/\n },\n {\n test: /\\.(png|jpg|gif|svg)$/,\n loader: 'file-loader',\n options: {\n name: '[name].[ext]?[hash]'\n }\n }\n ]\n },\n resolve: {\n alias: {\n 'vue$': 'vue/dist/vue.esm.js'\n }\n },\n devServer: {\n historyApiFallback: true,\n noInfo: true\n },\n performance: {\n hints: false\n },\n devtool: '#eval-source-map'\n}\n\nif (process.env.NODE_ENV === 'production') {\n module.exports.devtool = '#source-map'\n // http://vue-loader.vuejs.org/en/workflow/production.html\n module.exports.plugins = (module.exports.plugins || []).concat([\n new webpack.DefinePlugin({\n 'process.env': {\n NODE_ENV: '\"production\"'\n }\n }),\n new webpack.optimize.UglifyJsPlugin({\n sourceMap: true,\n compress: {\n warnings: false\n }\n }),\n new webpack.LoaderOptionsPlugin({\n minimize: true\n })\n ])\n}\n" }, { "path": "47-vue-router-nested-nav/.babelrc", "content": "{\n \"presets\": [\n [\"latest\", {\n \"es2015\": { \"modules\": false }\n }]\n ]\n}\n" }, { "path": "47-vue-router-nested-nav/README.md", "content": "# 46-vue-router-nested-routes\n\n> A Vue.js project\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# build for production with minification\nnpm run build\n```\n\nFor detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).\n" }, { "path": "47-vue-router-nested-nav/index.html", "content": "\n\n \n \n 47-vue-router-nested-nav\n \n \n
    \n \n \n\n" }, { "path": "47-vue-router-nested-nav/package.json", "content": "{\n \"name\": \"46-vue-router-nested-routes\",\n \"description\": \"A Vue.js project\",\n \"version\": \"1.0.0\",\n \"author\": \"@juanwmedia \",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"cross-env NODE_ENV=development webpack-dev-server --open --hot\",\n \"build\": \"cross-env NODE_ENV=production webpack --progress --hide-modules\"\n },\n \"dependencies\": {\n \"vue\": \"^2.2.1\",\n \"vue-router\": \"^2.3.0\"\n },\n \"devDependencies\": {\n \"babel-core\": \"^6.0.0\",\n \"babel-loader\": \"^6.0.0\",\n \"babel-preset-latest\": \"^6.0.0\",\n \"cross-env\": \"^3.0.0\",\n \"css-loader\": \"^0.25.0\",\n \"file-loader\": \"^0.9.0\",\n \"vue-loader\": \"^11.1.4\",\n \"vue-template-compiler\": \"^2.2.1\",\n \"webpack\": \"^2.2.0\",\n \"webpack-dev-server\": \"^2.2.0\"\n }\n}\n" }, { "path": "47-vue-router-nested-nav/src/App.vue", "content": "\n\n" }, { "path": "47-vue-router-nested-nav/src/components/Equipo.vue", "content": "" }, { "path": "47-vue-router-nested-nav/src/components/Home.vue", "content": "\n\n" }, { "path": "47-vue-router-nested-nav/src/components/Usuario.vue", "content": "\n" }, { "path": "47-vue-router-nested-nav/src/components/UsuarioBio.vue", "content": "" }, { "path": "47-vue-router-nested-nav/src/components/UsuarioFotos.vue", "content": "" }, { "path": "47-vue-router-nested-nav/src/main.js", "content": "import Vue from 'vue';\nimport App from './App.vue';\nimport VueRouter from 'vue-router';\nimport {routes} from './routes';\nVue.use(VueRouter);\n\nconst router = new VueRouter({\n routes\n});\n\nnew Vue({\n el: '#app',\n router,\n render: h => h(App)\n})\n" }, { "path": "47-vue-router-nested-nav/src/routes.js", "content": "import Home from './components/Home.vue';\nimport Equipo from './components/Equipo.vue';\nimport Usuario from './components/Usuario.vue';\nimport UsuarioFotos from './components/UsuarioFotos.vue';\nimport UsuarioBio from './components/UsuarioBio.vue';\n\nexport const routes = [\n {path: '/', component: Home},\n {path: '/equipo/:id', component: Equipo, children: [\n {path: '', component: Usuario, children: [\n {path: 'fotos', component: UsuarioFotos},\n {path: 'bio', component: UsuarioBio}\n ]},\n ]},\n];" }, { "path": "47-vue-router-nested-nav/webpack.config.js", "content": "var path = require('path')\nvar webpack = require('webpack')\n\nmodule.exports = {\n entry: './src/main.js',\n output: {\n path: path.resolve(__dirname, './dist'),\n publicPath: '/dist/',\n filename: 'build.js'\n },\n module: {\n rules: [\n {\n test: /\\.vue$/,\n loader: 'vue-loader',\n options: {\n loaders: {\n }\n // other vue-loader options go here\n }\n },\n {\n test: /\\.js$/,\n loader: 'babel-loader',\n exclude: /node_modules/\n },\n {\n test: /\\.(png|jpg|gif|svg)$/,\n loader: 'file-loader',\n options: {\n name: '[name].[ext]?[hash]'\n }\n }\n ]\n },\n resolve: {\n alias: {\n 'vue$': 'vue/dist/vue.esm.js'\n }\n },\n devServer: {\n historyApiFallback: true,\n noInfo: true\n },\n performance: {\n hints: false\n },\n devtool: '#eval-source-map'\n}\n\nif (process.env.NODE_ENV === 'production') {\n module.exports.devtool = '#source-map'\n // http://vue-loader.vuejs.org/en/workflow/production.html\n module.exports.plugins = (module.exports.plugins || []).concat([\n new webpack.DefinePlugin({\n 'process.env': {\n NODE_ENV: '\"production\"'\n }\n }),\n new webpack.optimize.UglifyJsPlugin({\n sourceMap: true,\n compress: {\n warnings: false\n }\n }),\n new webpack.LoaderOptionsPlugin({\n minimize: true\n })\n ])\n}\n" }, { "path": "48-vue-router-named-routes/.babelrc", "content": "{\n \"presets\": [\n [\"latest\", {\n \"es2015\": { \"modules\": false }\n }]\n ]\n}\n" }, { "path": "48-vue-router-named-routes/README.md", "content": "# 46-vue-router-nested-routes\n\n> A Vue.js project\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# build for production with minification\nnpm run build\n```\n\nFor detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).\n" }, { "path": "48-vue-router-named-routes/index.html", "content": "\n\n \n \n 48-vue-router-named-routes\n \n \n
    \n \n \n\n" }, { "path": "48-vue-router-named-routes/package.json", "content": "{\n \"name\": \"46-vue-router-nested-routes\",\n \"description\": \"A Vue.js project\",\n \"version\": \"1.0.0\",\n \"author\": \"@juanwmedia \",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"cross-env NODE_ENV=development webpack-dev-server --open --hot\",\n \"build\": \"cross-env NODE_ENV=production webpack --progress --hide-modules\"\n },\n \"dependencies\": {\n \"vue\": \"^2.2.1\",\n \"vue-router\": \"^2.3.0\"\n },\n \"devDependencies\": {\n \"babel-core\": \"^6.0.0\",\n \"babel-loader\": \"^6.0.0\",\n \"babel-preset-latest\": \"^6.0.0\",\n \"cross-env\": \"^3.0.0\",\n \"css-loader\": \"^0.25.0\",\n \"file-loader\": \"^0.9.0\",\n \"vue-loader\": \"^11.1.4\",\n \"vue-template-compiler\": \"^2.2.1\",\n \"webpack\": \"^2.2.0\",\n \"webpack-dev-server\": \"^2.2.0\"\n }\n}\n" }, { "path": "48-vue-router-named-routes/src/App.vue", "content": "\n\n" }, { "path": "48-vue-router-named-routes/src/components/Equipo.vue", "content": "" }, { "path": "48-vue-router-named-routes/src/components/Home.vue", "content": "\n\n" }, { "path": "48-vue-router-named-routes/src/components/Usuario.vue", "content": "\n" }, { "path": "48-vue-router-named-routes/src/components/UsuarioBio.vue", "content": "" }, { "path": "48-vue-router-named-routes/src/components/UsuarioFotos.vue", "content": "" }, { "path": "48-vue-router-named-routes/src/main.js", "content": "import Vue from 'vue';\nimport App from './App.vue';\nimport VueRouter from 'vue-router';\nimport {routes} from './routes';\nVue.use(VueRouter);\n\nconst router = new VueRouter({\n routes\n});\n\nnew Vue({\n el: '#app',\n router,\n render: h => h(App)\n})\n" }, { "path": "48-vue-router-named-routes/src/routes.js", "content": "import Home from './components/Home.vue';\nimport Equipo from './components/Equipo.vue';\nimport Usuario from './components/Usuario.vue';\nimport UsuarioFotos from './components/UsuarioFotos.vue';\nimport UsuarioBio from './components/UsuarioBio.vue';\n\nexport const routes = [\n {path: '/', component: Home},\n {path: '/equipo/:id', component: Equipo, children: [\n {path: '', component: Usuario, name:'equipo', children: [\n {path: 'fotos', component: UsuarioFotos, name: 'fotos'},\n {path: 'bio', component: UsuarioBio, name: 'bio'}\n ]},\n ]},\n];" }, { "path": "48-vue-router-named-routes/webpack.config.js", "content": "var path = require('path')\nvar webpack = require('webpack')\n\nmodule.exports = {\n entry: './src/main.js',\n output: {\n path: path.resolve(__dirname, './dist'),\n publicPath: '/dist/',\n filename: 'build.js'\n },\n module: {\n rules: [\n {\n test: /\\.vue$/,\n loader: 'vue-loader',\n options: {\n loaders: {\n }\n // other vue-loader options go here\n }\n },\n {\n test: /\\.js$/,\n loader: 'babel-loader',\n exclude: /node_modules/\n },\n {\n test: /\\.(png|jpg|gif|svg)$/,\n loader: 'file-loader',\n options: {\n name: '[name].[ext]?[hash]'\n }\n }\n ]\n },\n resolve: {\n alias: {\n 'vue$': 'vue/dist/vue.esm.js'\n }\n },\n devServer: {\n historyApiFallback: true,\n noInfo: true\n },\n performance: {\n hints: false\n },\n devtool: '#eval-source-map'\n}\n\nif (process.env.NODE_ENV === 'production') {\n module.exports.devtool = '#source-map'\n // http://vue-loader.vuejs.org/en/workflow/production.html\n module.exports.plugins = (module.exports.plugins || []).concat([\n new webpack.DefinePlugin({\n 'process.env': {\n NODE_ENV: '\"production\"'\n }\n }),\n new webpack.optimize.UglifyJsPlugin({\n sourceMap: true,\n compress: {\n warnings: false\n }\n }),\n new webpack.LoaderOptionsPlugin({\n minimize: true\n })\n ])\n}\n" }, { "path": "49-vue-router-named-views/.babelrc", "content": "{\n \"presets\": [\n [\"latest\", {\n \"es2015\": { \"modules\": false }\n }]\n ]\n}\n" }, { "path": "49-vue-router-named-views/README.md", "content": "# 46-vue-router-nested-routes\n\n> A Vue.js project\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# build for production with minification\nnpm run build\n```\n\nFor detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).\n" }, { "path": "49-vue-router-named-views/index.html", "content": "\n\n \n \n 49-vue-router-named-views\n \n \n
    \n \n \n\n" }, { "path": "49-vue-router-named-views/package.json", "content": "{\n \"name\": \"46-vue-router-nested-routes\",\n \"description\": \"A Vue.js project\",\n \"version\": \"1.0.0\",\n \"author\": \"@juanwmedia \",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"cross-env NODE_ENV=development webpack-dev-server --open --hot\",\n \"build\": \"cross-env NODE_ENV=production webpack --progress --hide-modules\"\n },\n \"dependencies\": {\n \"vue\": \"^2.2.1\",\n \"vue-router\": \"^2.3.0\"\n },\n \"devDependencies\": {\n \"babel-core\": \"^6.0.0\",\n \"babel-loader\": \"^6.0.0\",\n \"babel-preset-latest\": \"^6.0.0\",\n \"cross-env\": \"^3.0.0\",\n \"css-loader\": \"^0.25.0\",\n \"file-loader\": \"^0.9.0\",\n \"vue-loader\": \"^11.1.4\",\n \"vue-template-compiler\": \"^2.2.1\",\n \"webpack\": \"^2.2.0\",\n \"webpack-dev-server\": \"^2.2.0\"\n }\n}\n" }, { "path": "49-vue-router-named-views/src/App.vue", "content": "\n\n" }, { "path": "49-vue-router-named-views/src/components/Equipo.vue", "content": "" }, { "path": "49-vue-router-named-views/src/components/Home.vue", "content": "\n\n" }, { "path": "49-vue-router-named-views/src/components/Usuario.vue", "content": "\n" }, { "path": "49-vue-router-named-views/src/components/UsuarioBio.vue", "content": "" }, { "path": "49-vue-router-named-views/src/components/UsuarioFotos.vue", "content": "" }, { "path": "49-vue-router-named-views/src/main.js", "content": "import Vue from 'vue';\nimport App from './App.vue';\nimport VueRouter from 'vue-router';\nimport {routes} from './routes';\nVue.use(VueRouter);\n\nconst router = new VueRouter({\n routes\n});\n\nnew Vue({\n el: '#app',\n router,\n render: h => h(App)\n})\n" }, { "path": "49-vue-router-named-views/src/routes.js", "content": "import Home from './components/Home.vue';\nimport Equipo from './components/Equipo.vue';\nimport Usuario from './components/Usuario.vue';\nimport UsuarioFotos from './components/UsuarioFotos.vue';\nimport UsuarioBio from './components/UsuarioBio.vue';\n\nexport const routes = [\n {path: '/', component: Home},\n {path: '/equipo/:id', component: Equipo, children: [\n {path: '', components: {\n default: Usuario,\n bio: UsuarioBio,\n fotos: UsuarioFotos,\n }, name:'equipo'},\n ]},\n];" }, { "path": "49-vue-router-named-views/webpack.config.js", "content": "var path = require('path')\nvar webpack = require('webpack')\n\nmodule.exports = {\n entry: './src/main.js',\n output: {\n path: path.resolve(__dirname, './dist'),\n publicPath: '/dist/',\n filename: 'build.js'\n },\n module: {\n rules: [\n {\n test: /\\.vue$/,\n loader: 'vue-loader',\n options: {\n loaders: {\n }\n // other vue-loader options go here\n }\n },\n {\n test: /\\.js$/,\n loader: 'babel-loader',\n exclude: /node_modules/\n },\n {\n test: /\\.(png|jpg|gif|svg)$/,\n loader: 'file-loader',\n options: {\n name: '[name].[ext]?[hash]'\n }\n }\n ]\n },\n resolve: {\n alias: {\n 'vue$': 'vue/dist/vue.esm.js'\n }\n },\n devServer: {\n historyApiFallback: true,\n noInfo: true\n },\n performance: {\n hints: false\n },\n devtool: '#eval-source-map'\n}\n\nif (process.env.NODE_ENV === 'production') {\n module.exports.devtool = '#source-map'\n // http://vue-loader.vuejs.org/en/workflow/production.html\n module.exports.plugins = (module.exports.plugins || []).concat([\n new webpack.DefinePlugin({\n 'process.env': {\n NODE_ENV: '\"production\"'\n }\n }),\n new webpack.optimize.UglifyJsPlugin({\n sourceMap: true,\n compress: {\n warnings: false\n }\n }),\n new webpack.LoaderOptionsPlugin({\n minimize: true\n })\n ])\n}\n" }, { "path": "5-eventos/index.html", "content": "\n\n\n\n \n \n Vue.js\n \n \n\n\n\n
    \n
      \n
    • \n {{ tarea }}\n
      • \n
    \n
    \n \n \n
    \n 
    {{ $data }}
    \n
    \n \n \n\n\n" }, { "path": "5-eventos/js/main.js", "content": "const vm = new Vue({\n el: 'main',\n data: {\n nuevaTarea: null,\n tareas: [\n 'Aprender Vue.js',\n 'Aprender ES6',\n 'Publicar algo todos los días'\n ]\n },\n methods: {\n agregarTarea() {\n // this, hace referencia a la instancia Vue\n this.tareas.unshift(this.nuevaTarea);\n this.nuevaTarea = null;\n }\n }\n});\n\n// Vanilla JavaScript\n// function agregarTarea() {\n// const input = document.querySelector('input[type=text]');\n// vm.tareas.unshift(input.value);\n// input.value = '';\n// }" }, { "path": "50-vue-router-redirect/.babelrc", "content": "{\n \"presets\": [\n [\"latest\", {\n \"es2015\": { \"modules\": false }\n }]\n ]\n}\n" }, { "path": "50-vue-router-redirect/README.md", "content": "# 46-vue-router-nested-routes\n\n> A Vue.js project\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# build for production with minification\nnpm run build\n```\n\nFor detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).\n" }, { "path": "50-vue-router-redirect/index.html", "content": "\n\n \n \n 50-vue-router-redirection\n \n \n
    \n \n \n\n" }, { "path": "50-vue-router-redirect/package.json", "content": "{\n \"name\": \"46-vue-router-nested-routes\",\n \"description\": \"A Vue.js project\",\n \"version\": \"1.0.0\",\n \"author\": \"@juanwmedia \",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"cross-env NODE_ENV=development webpack-dev-server --open --hot\",\n \"build\": \"cross-env NODE_ENV=production webpack --progress --hide-modules\"\n },\n \"dependencies\": {\n \"vue\": \"^2.2.1\",\n \"vue-router\": \"^2.3.0\"\n },\n \"devDependencies\": {\n \"babel-core\": \"^6.0.0\",\n \"babel-loader\": \"^6.0.0\",\n \"babel-preset-latest\": \"^6.0.0\",\n \"cross-env\": \"^3.0.0\",\n \"css-loader\": \"^0.25.0\",\n \"file-loader\": \"^0.9.0\",\n \"vue-loader\": \"^11.1.4\",\n \"vue-template-compiler\": \"^2.2.1\",\n \"webpack\": \"^2.2.0\",\n \"webpack-dev-server\": \"^2.2.0\"\n }\n}\n" }, { "path": "50-vue-router-redirect/src/App.vue", "content": "\n\n" }, { "path": "50-vue-router-redirect/src/components/Equipo.vue", "content": "" }, { "path": "50-vue-router-redirect/src/components/Home.vue", "content": "\n\n" }, { "path": "50-vue-router-redirect/src/components/Usuario.vue", "content": "\n" }, { "path": "50-vue-router-redirect/src/components/UsuarioBio.vue", "content": "" }, { "path": "50-vue-router-redirect/src/components/UsuarioFotos.vue", "content": "" }, { "path": "50-vue-router-redirect/src/main.js", "content": "import Vue from 'vue';\nimport App from './App.vue';\nimport VueRouter from 'vue-router';\nimport {routes} from './routes';\nVue.use(VueRouter);\n\nconst router = new VueRouter({\n routes\n});\n\nnew Vue({\n el: '#app',\n router,\n render: h => h(App)\n})\n" }, { "path": "50-vue-router-redirect/src/routes.js", "content": "import Home from './components/Home.vue';\nimport Equipo from './components/Equipo.vue';\nimport Usuario from './components/Usuario.vue';\nimport UsuarioFotos from './components/UsuarioFotos.vue';\nimport UsuarioBio from './components/UsuarioBio.vue';\n\nexport const routes = [\n {path: '/', component: Home, name: 'home'},\n {path: '/prueba', alias: '/otraprueba', redirect: {name: 'home'}, component: Home},\n {path: '/equipo/:id', component: Equipo, children: [\n {path: '', components: {\n default: Usuario,\n bio: UsuarioBio,\n fotos: UsuarioFotos,\n }, name:'equipo'},\n ]},\n];" }, { "path": "50-vue-router-redirect/webpack.config.js", "content": "var path = require('path')\nvar webpack = require('webpack')\n\nmodule.exports = {\n entry: './src/main.js',\n output: {\n path: path.resolve(__dirname, './dist'),\n publicPath: '/dist/',\n filename: 'build.js'\n },\n module: {\n rules: [\n {\n test: /\\.vue$/,\n loader: 'vue-loader',\n options: {\n loaders: {\n }\n // other vue-loader options go here\n }\n },\n {\n test: /\\.js$/,\n loader: 'babel-loader',\n exclude: /node_modules/\n },\n {\n test: /\\.(png|jpg|gif|svg)$/,\n loader: 'file-loader',\n options: {\n name: '[name].[ext]?[hash]'\n }\n }\n ]\n },\n resolve: {\n alias: {\n 'vue$': 'vue/dist/vue.esm.js'\n }\n },\n devServer: {\n historyApiFallback: true,\n noInfo: true\n },\n performance: {\n hints: false\n },\n devtool: '#eval-source-map'\n}\n\nif (process.env.NODE_ENV === 'production') {\n module.exports.devtool = '#source-map'\n // http://vue-loader.vuejs.org/en/workflow/production.html\n module.exports.plugins = (module.exports.plugins || []).concat([\n new webpack.DefinePlugin({\n 'process.env': {\n NODE_ENV: '\"production\"'\n }\n }),\n new webpack.optimize.UglifyJsPlugin({\n sourceMap: true,\n compress: {\n warnings: false\n }\n }),\n new webpack.LoaderOptionsPlugin({\n minimize: true\n })\n ])\n}\n" }, { "path": "51-vue-router-passing-props/.babelrc", "content": "{\n \"presets\": [\n [\"latest\", {\n \"es2015\": { \"modules\": false }\n }]\n ]\n}\n" }, { "path": "51-vue-router-passing-props/README.md", "content": "# 46-vue-router-nested-routes\n\n> A Vue.js project\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# build for production with minification\nnpm run build\n```\n\nFor detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).\n" }, { "path": "51-vue-router-passing-props/index.html", "content": "\n\n \n \n 51-vue-router-passing-props\n \n \n
    \n \n \n\n" }, { "path": "51-vue-router-passing-props/package.json", "content": "{\n \"name\": \"46-vue-router-nested-routes\",\n \"description\": \"A Vue.js project\",\n \"version\": \"1.0.0\",\n \"author\": \"@juanwmedia \",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"cross-env NODE_ENV=development webpack-dev-server --open --hot\",\n \"build\": \"cross-env NODE_ENV=production webpack --progress --hide-modules\"\n },\n \"dependencies\": {\n \"vue\": \"^2.2.1\",\n \"vue-router\": \"^2.3.0\"\n },\n \"devDependencies\": {\n \"babel-core\": \"^6.0.0\",\n \"babel-loader\": \"^6.0.0\",\n \"babel-preset-latest\": \"^6.0.0\",\n \"cross-env\": \"^3.0.0\",\n \"css-loader\": \"^0.25.0\",\n \"file-loader\": \"^0.9.0\",\n \"vue-loader\": \"^11.1.4\",\n \"vue-template-compiler\": \"^2.2.1\",\n \"webpack\": \"^2.2.0\",\n \"webpack-dev-server\": \"^2.2.0\"\n }\n}\n" }, { "path": "51-vue-router-passing-props/src/App.vue", "content": "\n\n" }, { "path": "51-vue-router-passing-props/src/components/Contacto.vue", "content": "\n\n" }, { "path": "51-vue-router-passing-props/src/components/Equipo.vue", "content": "" }, { "path": "51-vue-router-passing-props/src/components/Home.vue", "content": "\n\n" }, { "path": "51-vue-router-passing-props/src/components/Usuario.vue", "content": "\n" }, { "path": "51-vue-router-passing-props/src/components/UsuarioBio.vue", "content": "" }, { "path": "51-vue-router-passing-props/src/components/UsuarioFotos.vue", "content": "" }, { "path": "51-vue-router-passing-props/src/main.js", "content": "import Vue from 'vue';\nimport App from './App.vue';\nimport VueRouter from 'vue-router';\nimport {routes} from './routes';\nVue.use(VueRouter);\n\nconst router = new VueRouter({\n routes\n});\n\nnew Vue({\n el: '#app',\n router,\n render: h => h(App)\n})\n" }, { "path": "51-vue-router-passing-props/src/routes.js", "content": "import Home from './components/Home.vue';\nimport Equipo from './components/Equipo.vue';\nimport Usuario from './components/Usuario.vue';\nimport UsuarioFotos from './components/UsuarioFotos.vue';\nimport UsuarioBio from './components/UsuarioBio.vue';\nimport Contacto from './components/Contacto.vue';\n\nexport const routes = [\n {path: '/', component: Home, name: 'home'},\n {path: '/prueba', alias: '/otraprueba', redirect: {name: 'home'}, component: Home},\n {path: '/equipo/:id', component: Equipo, children: [\n {path: '', components: {\n default: Usuario,\n bio: UsuarioBio,\n fotos: UsuarioFotos,\n }, name:'equipo'},\n ]},\n {path: '/contacto', component: Contacto, name: 'contacto', props: {newsletter: false}}\n];" }, { "path": "51-vue-router-passing-props/webpack.config.js", "content": "var path = require('path')\nvar webpack = require('webpack')\n\nmodule.exports = {\n entry: './src/main.js',\n output: {\n path: path.resolve(__dirname, './dist'),\n publicPath: '/dist/',\n filename: 'build.js'\n },\n module: {\n rules: [\n {\n test: /\\.vue$/,\n loader: 'vue-loader',\n options: {\n loaders: {\n }\n // other vue-loader options go here\n }\n },\n {\n test: /\\.js$/,\n loader: 'babel-loader',\n exclude: /node_modules/\n },\n {\n test: /\\.(png|jpg|gif|svg)$/,\n loader: 'file-loader',\n options: {\n name: '[name].[ext]?[hash]'\n }\n }\n ]\n },\n resolve: {\n alias: {\n 'vue$': 'vue/dist/vue.esm.js'\n }\n },\n devServer: {\n historyApiFallback: true,\n noInfo: true\n },\n performance: {\n hints: false\n },\n devtool: '#eval-source-map'\n}\n\nif (process.env.NODE_ENV === 'production') {\n module.exports.devtool = '#source-map'\n // http://vue-loader.vuejs.org/en/workflow/production.html\n module.exports.plugins = (module.exports.plugins || []).concat([\n new webpack.DefinePlugin({\n 'process.env': {\n NODE_ENV: '\"production\"'\n }\n }),\n new webpack.optimize.UglifyJsPlugin({\n sourceMap: true,\n compress: {\n warnings: false\n }\n }),\n new webpack.LoaderOptionsPlugin({\n minimize: true\n })\n ])\n}\n" }, { "path": "52-vue-router-history-mode/.babelrc", "content": "{\n \"presets\": [\n [\"latest\", {\n \"es2015\": { \"modules\": false }\n }]\n ]\n}\n" }, { "path": "52-vue-router-history-mode/README.md", "content": "# 46-vue-router-nested-routes\n\n> A Vue.js project\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# build for production with minification\nnpm run build\n```\n\nFor detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).\n" }, { "path": "52-vue-router-history-mode/index.html", "content": "\n\n\n \n 52-vue-router-history-mode\n\n\n

    Bienvenid@ a mi super App

    \n
    \n\n\n\n" }, { "path": "52-vue-router-history-mode/package.json", "content": "{\n \"name\": \"46-vue-router-nested-routes\",\n \"description\": \"A Vue.js project\",\n \"version\": \"1.0.0\",\n \"author\": \"@juanwmedia \",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"cross-env NODE_ENV=development webpack-dev-server --open --hot\",\n \"build\": \"cross-env NODE_ENV=production webpack --progress --hide-modules\"\n },\n \"dependencies\": {\n \"vue\": \"^2.2.1\",\n \"vue-router\": \"^2.3.0\"\n },\n \"devDependencies\": {\n \"babel-core\": \"^6.0.0\",\n \"babel-loader\": \"^6.0.0\",\n \"babel-preset-latest\": \"^6.0.0\",\n \"cross-env\": \"^3.0.0\",\n \"css-loader\": \"^0.25.0\",\n \"file-loader\": \"^0.9.0\",\n \"vue-loader\": \"^11.1.4\",\n \"vue-template-compiler\": \"^2.2.1\",\n \"webpack\": \"^2.2.0\",\n \"webpack-dev-server\": \"^2.2.0\"\n }\n}\n" }, { "path": "52-vue-router-history-mode/src/App.vue", "content": "\n\n" }, { "path": "52-vue-router-history-mode/src/components/Contacto.vue", "content": "\n\n" }, { "path": "52-vue-router-history-mode/src/components/Equipo.vue", "content": "" }, { "path": "52-vue-router-history-mode/src/components/Home.vue", "content": "\n\n" }, { "path": "52-vue-router-history-mode/src/components/NoEncontrado.vue", "content": "" }, { "path": "52-vue-router-history-mode/src/components/Usuario.vue", "content": "\n" }, { "path": "52-vue-router-history-mode/src/components/UsuarioBio.vue", "content": "" }, { "path": "52-vue-router-history-mode/src/components/UsuarioFotos.vue", "content": "" }, { "path": "52-vue-router-history-mode/src/main.js", "content": "import Vue from 'vue';\nimport App from './App.vue';\nimport VueRouter from 'vue-router';\nimport {routes} from './routes';\nVue.use(VueRouter);\n\nconst router = new VueRouter({\n mode: 'history',\n routes,\n});\n\nnew Vue({\n el: '#app',\n router,\n render: h => h(App)\n})\n" }, { "path": "52-vue-router-history-mode/src/routes.js", "content": "import Home from './components/Home.vue';\nimport Equipo from './components/Equipo.vue';\nimport Usuario from './components/Usuario.vue';\nimport UsuarioFotos from './components/UsuarioFotos.vue';\nimport UsuarioBio from './components/UsuarioBio.vue';\nimport Contacto from './components/Contacto.vue';\nimport NoEncontrado from './components/NoEncontrado.vue';\n\nexport const routes = [\n {path: '', component: Home, name: 'home'},\n {path: '/prueba', alias: '/otraprueba', redirect: {name: 'home'}, component: Home},\n {path: '/equipo/:id', component: Equipo, children: [\n {path: '', components: {\n default: Usuario,\n bio: UsuarioBio,\n fotos: UsuarioFotos,\n }, name:'equipo'},\n ]},\n {path: '/contacto', component: Contacto, name: 'contacto', props: {newsletter: false}},\n {path: '*', component: NoEncontrado}\n];" }, { "path": "52-vue-router-history-mode/webpack.config.js", "content": "var path = require('path')\nvar webpack = require('webpack')\n\nmodule.exports = {\n entry: './src/main.js',\n output: {\n path: path.resolve(__dirname, './dist'),\n publicPath: '/dist/',\n filename: 'build.js'\n },\n module: {\n rules: [\n {\n test: /\\.vue$/,\n loader: 'vue-loader',\n options: {\n loaders: {\n }\n // other vue-loader options go here\n }\n },\n {\n test: /\\.js$/,\n loader: 'babel-loader',\n exclude: /node_modules/\n },\n {\n test: /\\.(png|jpg|gif|svg)$/,\n loader: 'file-loader',\n options: {\n name: '[name].[ext]?[hash]'\n }\n }\n ]\n },\n resolve: {\n alias: {\n 'vue$': 'vue/dist/vue.esm.js'\n }\n },\n devServer: {\n historyApiFallback: true,\n noInfo: true\n },\n performance: {\n hints: false\n },\n devtool: '#eval-source-map'\n}\n\nif (process.env.NODE_ENV === 'production') {\n module.exports.devtool = '#source-map'\n // http://vue-loader.vuejs.org/en/workflow/production.html\n module.exports.plugins = (module.exports.plugins || []).concat([\n new webpack.DefinePlugin({\n 'process.env': {\n NODE_ENV: '\"production\"'\n }\n }),\n new webpack.optimize.UglifyJsPlugin({\n sourceMap: true,\n compress: {\n warnings: false\n }\n }),\n new webpack.LoaderOptionsPlugin({\n minimize: true\n })\n ])\n}\n" }, { "path": "53-vue-router-global-guard/.babelrc", "content": "{\n \"presets\": [\n [\"latest\", {\n \"es2015\": { \"modules\": false }\n }]\n ]\n}\n" }, { "path": "53-vue-router-global-guard/README.md", "content": "# 46-vue-router-nested-routes\n\n> A Vue.js project\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# build for production with minification\nnpm run build\n```\n\nFor detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).\n" }, { "path": "53-vue-router-global-guard/index.html", "content": "\n\n\n \n 53-vue-router-global-guard\n\n\n

    Bienvenid@ a mi super App

    \n
    \n\n\n\n" }, { "path": "53-vue-router-global-guard/package.json", "content": "{\n \"name\": \"46-vue-router-nested-routes\",\n \"description\": \"A Vue.js project\",\n \"version\": \"1.0.0\",\n \"author\": \"@juanwmedia \",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"cross-env NODE_ENV=development webpack-dev-server --open --hot\",\n \"build\": \"cross-env NODE_ENV=production webpack --progress --hide-modules\"\n },\n \"dependencies\": {\n \"vue\": \"^2.2.1\",\n \"vue-router\": \"^2.3.0\",\n \"vuex\": \"^2.2.1\"\n },\n \"devDependencies\": {\n \"babel-core\": \"^6.0.0\",\n \"babel-loader\": \"^6.0.0\",\n \"babel-preset-latest\": \"^6.0.0\",\n \"cross-env\": \"^3.0.0\",\n \"css-loader\": \"^0.25.0\",\n \"file-loader\": \"^0.9.0\",\n \"vue-loader\": \"^11.1.4\",\n \"vue-template-compiler\": \"^2.2.1\",\n \"webpack\": \"^2.2.0\",\n \"webpack-dev-server\": \"^2.2.0\"\n }\n}\n" }, { "path": "53-vue-router-global-guard/src/App.vue", "content": "\n\n" }, { "path": "53-vue-router-global-guard/src/components/Contacto.vue", "content": "\n\n" }, { "path": "53-vue-router-global-guard/src/components/Equipo.vue", "content": "" }, { "path": "53-vue-router-global-guard/src/components/Home.vue", "content": "\n\n" }, { "path": "53-vue-router-global-guard/src/components/NoEncontrado.vue", "content": "" }, { "path": "53-vue-router-global-guard/src/components/Usuario.vue", "content": "\n" }, { "path": "53-vue-router-global-guard/src/components/UsuarioBio.vue", "content": "" }, { "path": "53-vue-router-global-guard/src/components/UsuarioFotos.vue", "content": "" }, { "path": "53-vue-router-global-guard/src/main.js", "content": "import Vue from 'vue';\nimport App from './App.vue';\nimport VueRouter from 'vue-router';\nimport {routes} from './routes';\nimport {store} from './store';\n\nVue.use(VueRouter);\n\nconst router = new VueRouter({\n mode: 'history',\n routes,\n});\n\nrouter.beforeEach((to, from, next) => {\n console.log('Acceso a ruta');\n next(store.state.auth);\n});\n\nnew Vue({\n el: '#app',\n router,\n store,\n render: h => h(App)\n});\n" }, { "path": "53-vue-router-global-guard/src/routes.js", "content": "import Home from './components/Home.vue';\nimport Equipo from './components/Equipo.vue';\nimport Usuario from './components/Usuario.vue';\nimport UsuarioFotos from './components/UsuarioFotos.vue';\nimport UsuarioBio from './components/UsuarioBio.vue';\nimport Contacto from './components/Contacto.vue';\nimport NoEncontrado from './components/NoEncontrado.vue';\n\nexport const routes = [\n {path: '/', component: Home, name: 'home'},\n {path: '/prueba', alias: '/otraprueba', redirect: {name: 'home'}, component: Home},\n {path: '/equipo/:id', component: Equipo, children: [\n {path: '', components: {\n default: Usuario,\n bio: UsuarioBio,\n fotos: UsuarioFotos,\n }, name:'equipo'},\n ]},\n {path: '/contacto', component: Contacto, name: 'contacto', props: {newsletter: false}},\n {path: '*', component: NoEncontrado}\n];" }, { "path": "53-vue-router-global-guard/src/store.js", "content": "import Vue from 'vue';\nimport Vuex from 'vuex';\nVue.use(Vuex);\n\nexport const store = new Vuex.Store({\n state: {\n auth: true,\n },\n mutations: {\n cambiar: (state) => state.auth = !state.auth,\n }\n});" }, { "path": "53-vue-router-global-guard/webpack.config.js", "content": "var path = require('path')\nvar webpack = require('webpack')\n\nmodule.exports = {\n entry: './src/main.js',\n output: {\n path: path.resolve(__dirname, './dist'),\n publicPath: '/dist/',\n filename: 'build.js'\n },\n module: {\n rules: [\n {\n test: /\\.vue$/,\n loader: 'vue-loader',\n options: {\n loaders: {\n }\n // other vue-loader options go here\n }\n },\n {\n test: /\\.js$/,\n loader: 'babel-loader',\n exclude: /node_modules/\n },\n {\n test: /\\.(png|jpg|gif|svg)$/,\n loader: 'file-loader',\n options: {\n name: '[name].[ext]?[hash]'\n }\n }\n ]\n },\n resolve: {\n alias: {\n 'vue$': 'vue/dist/vue.esm.js'\n }\n },\n devServer: {\n historyApiFallback: true,\n noInfo: true\n },\n performance: {\n hints: false\n },\n devtool: '#eval-source-map'\n}\n\nif (process.env.NODE_ENV === 'production') {\n module.exports.devtool = '#source-map'\n // http://vue-loader.vuejs.org/en/workflow/production.html\n module.exports.plugins = (module.exports.plugins || []).concat([\n new webpack.DefinePlugin({\n 'process.env': {\n NODE_ENV: '\"production\"'\n }\n }),\n new webpack.optimize.UglifyJsPlugin({\n sourceMap: true,\n compress: {\n warnings: false\n }\n }),\n new webpack.LoaderOptionsPlugin({\n minimize: true\n })\n ])\n}\n" }, { "path": "54-vue-router-route-guard/.babelrc", "content": "{\n \"presets\": [\n [\"latest\", {\n \"es2015\": { \"modules\": false }\n }]\n ]\n}\n" }, { "path": "54-vue-router-route-guard/README.md", "content": "# 46-vue-router-nested-routes\n\n> A Vue.js project\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# build for production with minification\nnpm run build\n```\n\nFor detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).\n" }, { "path": "54-vue-router-route-guard/index.html", "content": "\n\n\n \n 54-vue-router-route-guard\n\n\n

    Bienvenid@ a mi super App

    \n
    \n\n\n\n" }, { "path": "54-vue-router-route-guard/package.json", "content": "{\n \"name\": \"46-vue-router-nested-routes\",\n \"description\": \"A Vue.js project\",\n \"version\": \"1.0.0\",\n \"author\": \"@juanwmedia \",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"cross-env NODE_ENV=development webpack-dev-server --open --hot\",\n \"build\": \"cross-env NODE_ENV=production webpack --progress --hide-modules\"\n },\n \"dependencies\": {\n \"vue\": \"^2.2.1\",\n \"vue-router\": \"^2.3.0\",\n \"vuex\": \"^2.2.1\"\n },\n \"devDependencies\": {\n \"babel-core\": \"^6.0.0\",\n \"babel-loader\": \"^6.0.0\",\n \"babel-preset-latest\": \"^6.0.0\",\n \"cross-env\": \"^3.0.0\",\n \"css-loader\": \"^0.25.0\",\n \"file-loader\": \"^0.9.0\",\n \"vue-loader\": \"^11.1.4\",\n \"vue-template-compiler\": \"^2.2.1\",\n \"webpack\": \"^2.2.0\",\n \"webpack-dev-server\": \"^2.2.0\"\n }\n}\n" }, { "path": "54-vue-router-route-guard/src/App.vue", "content": "\n\n" }, { "path": "54-vue-router-route-guard/src/components/Contacto.vue", "content": "\n\n" }, { "path": "54-vue-router-route-guard/src/components/Equipo.vue", "content": "" }, { "path": "54-vue-router-route-guard/src/components/Home.vue", "content": "\n\n" }, { "path": "54-vue-router-route-guard/src/components/NoEncontrado.vue", "content": "" }, { "path": "54-vue-router-route-guard/src/components/Usuario.vue", "content": "\n" }, { "path": "54-vue-router-route-guard/src/components/UsuarioBio.vue", "content": "" }, { "path": "54-vue-router-route-guard/src/components/UsuarioFotos.vue", "content": "" }, { "path": "54-vue-router-route-guard/src/main.js", "content": "import Vue from 'vue';\nimport App from './App.vue';\nimport VueRouter from 'vue-router';\nimport {routes} from './routes';\nimport {store} from './store';\nVue.use(VueRouter);\n\nconst router = new VueRouter({\n mode: 'history',\n routes,\n});\n\nrouter.beforeEach((to, from, next) => {\n console.log('Acceso global a ruta');\n next();\n});\n\nnew Vue({\n el: '#app',\n router,\n store,\n render: h => h(App)\n});\n" }, { "path": "54-vue-router-route-guard/src/routes.js", "content": "import Home from './components/Home.vue';\nimport Equipo from './components/Equipo.vue';\nimport Usuario from './components/Usuario.vue';\nimport UsuarioFotos from './components/UsuarioFotos.vue';\nimport UsuarioBio from './components/UsuarioBio.vue';\nimport Contacto from './components/Contacto.vue';\nimport NoEncontrado from './components/NoEncontrado.vue';\nimport {store} from './store';\n\nexport const routes = [\n {path: '/', component: Home, name: 'home'},\n {path: '/prueba', alias: '/otraprueba', redirect: {name: 'home'}, component: Home},\n {path: '/equipo/:id', component: Equipo, children: [\n {path: '', components: {\n default: Usuario,\n bio: UsuarioBio,\n fotos: UsuarioFotos,\n }, name:'equipo'},\n ]},\n { beforeEnter: ((to, from, next) => {\n console.log('Acceso a ruta contacto');\n next(store.state.auth);\n }),\n path: '/contacto', component: Contacto, name: 'contacto', props: {newsletter: false}},\n {path: '*', component: NoEncontrado}\n];" }, { "path": "54-vue-router-route-guard/src/store.js", "content": "import Vue from 'vue';\nimport Vuex from 'vuex';\nVue.use(Vuex);\n\nexport const store = new Vuex.Store({\n state: {\n auth: true,\n },\n mutations: {\n cambiar: (state) => state.auth = !state.auth,\n }\n});" }, { "path": "54-vue-router-route-guard/webpack.config.js", "content": "var path = require('path')\nvar webpack = require('webpack')\n\nmodule.exports = {\n entry: './src/main.js',\n output: {\n path: path.resolve(__dirname, './dist'),\n publicPath: '/dist/',\n filename: 'build.js'\n },\n module: {\n rules: [\n {\n test: /\\.vue$/,\n loader: 'vue-loader',\n options: {\n loaders: {\n }\n // other vue-loader options go here\n }\n },\n {\n test: /\\.js$/,\n loader: 'babel-loader',\n exclude: /node_modules/\n },\n {\n test: /\\.(png|jpg|gif|svg)$/,\n loader: 'file-loader',\n options: {\n name: '[name].[ext]?[hash]'\n }\n }\n ]\n },\n resolve: {\n alias: {\n 'vue$': 'vue/dist/vue.esm.js'\n }\n },\n devServer: {\n historyApiFallback: true,\n noInfo: true\n },\n performance: {\n hints: false\n },\n devtool: '#eval-source-map'\n}\n\nif (process.env.NODE_ENV === 'production') {\n module.exports.devtool = '#source-map'\n // http://vue-loader.vuejs.org/en/workflow/production.html\n module.exports.plugins = (module.exports.plugins || []).concat([\n new webpack.DefinePlugin({\n 'process.env': {\n NODE_ENV: '\"production\"'\n }\n }),\n new webpack.optimize.UglifyJsPlugin({\n sourceMap: true,\n compress: {\n warnings: false\n }\n }),\n new webpack.LoaderOptionsPlugin({\n minimize: true\n })\n ])\n}\n" }, { "path": "55-vue-router-component-guard/.babelrc", "content": "{\n \"presets\": [\n [\"latest\", {\n \"es2015\": { \"modules\": false }\n }]\n ]\n}\n" }, { "path": "55-vue-router-component-guard/README.md", "content": "# 46-vue-router-nested-routes\n\n> A Vue.js project\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# build for production with minification\nnpm run build\n```\n\nFor detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).\n" }, { "path": "55-vue-router-component-guard/index.html", "content": "\n\n\n \n 55-vue-router-component-guard\n\n\n

    Bienvenid@ a mi super App

    \n
    \n\n\n\n" }, { "path": "55-vue-router-component-guard/package.json", "content": "{\n \"name\": \"46-vue-router-nested-routes\",\n \"description\": \"A Vue.js project\",\n \"version\": \"1.0.0\",\n \"author\": \"@juanwmedia \",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"cross-env NODE_ENV=development webpack-dev-server --open --hot\",\n \"build\": \"cross-env NODE_ENV=production webpack --progress --hide-modules\"\n },\n \"dependencies\": {\n \"vue\": \"^2.2.1\",\n \"vue-router\": \"^2.3.0\",\n \"vuex\": \"^2.2.1\"\n },\n \"devDependencies\": {\n \"babel-core\": \"^6.0.0\",\n \"babel-loader\": \"^6.0.0\",\n \"babel-preset-latest\": \"^6.0.0\",\n \"cross-env\": \"^3.0.0\",\n \"css-loader\": \"^0.25.0\",\n \"file-loader\": \"^0.9.0\",\n \"vue-loader\": \"^11.1.4\",\n \"vue-template-compiler\": \"^2.2.1\",\n \"webpack\": \"^2.2.0\",\n \"webpack-dev-server\": \"^2.2.0\"\n }\n}\n" }, { "path": "55-vue-router-component-guard/src/App.vue", "content": "\n\n" }, { "path": "55-vue-router-component-guard/src/components/Contacto.vue", "content": "\n\n" }, { "path": "55-vue-router-component-guard/src/components/Equipo.vue", "content": "" }, { "path": "55-vue-router-component-guard/src/components/Home.vue", "content": "\n\n" }, { "path": "55-vue-router-component-guard/src/components/NoEncontrado.vue", "content": "" }, { "path": "55-vue-router-component-guard/src/components/Usuario.vue", "content": "\n\n\n\n\n" }, { "path": "55-vue-router-component-guard/src/components/UsuarioBio.vue", "content": "" }, { "path": "55-vue-router-component-guard/src/components/UsuarioFotos.vue", "content": "" }, { "path": "55-vue-router-component-guard/src/main.js", "content": "import Vue from 'vue';\nimport App from './App.vue';\nimport VueRouter from 'vue-router';\nimport {routes} from './routes';\nimport {store} from './store';\nVue.use(VueRouter);\n\nconst router = new VueRouter({\n routes,\n});\n\nrouter.beforeEach((to, from, next) => {\n console.log('Acceso global a ruta');\n next();\n});\n\nnew Vue({\n el: '#app',\n router,\n store,\n render: h => h(App)\n});\n" }, { "path": "55-vue-router-component-guard/src/routes.js", "content": "import Home from './components/Home.vue';\nimport Equipo from './components/Equipo.vue';\nimport Usuario from './components/Usuario.vue';\nimport UsuarioFotos from './components/UsuarioFotos.vue';\nimport UsuarioBio from './components/UsuarioBio.vue';\nimport Contacto from './components/Contacto.vue';\nimport NoEncontrado from './components/NoEncontrado.vue';\nimport {store} from './store';\n\nexport const routes = [\n {path: '/', component: Home, name: 'home'},\n {path: '/prueba', alias: '/otraprueba', redirect: {name: 'home'}, component: Home},\n {path: '/equipo/:id', component: Equipo, children: [\n {path: '', components: {\n default: Usuario,\n bio: UsuarioBio,\n fotos: UsuarioFotos,\n }, name:'equipo'},\n ]},\n { beforeEnter: ((to, from, next) => {\n console.log('Acceso a ruta contacto');\n next(store.state.auth);\n }),\n path: '/contacto', component: Contacto, name: 'contacto', props: {newsletter: false}},\n {path: '*', component: NoEncontrado}\n];" }, { "path": "55-vue-router-component-guard/src/store.js", "content": "import Vue from 'vue';\nimport Vuex from 'vuex';\nVue.use(Vuex);\n\nexport const store = new Vuex.Store({\n state: {\n auth: true,\n },\n mutations: {\n cambiar: (state) => state.auth = !state.auth,\n }\n});" }, { "path": "55-vue-router-component-guard/webpack.config.js", "content": "var path = require('path')\nvar webpack = require('webpack')\n\nmodule.exports = {\n entry: './src/main.js',\n output: {\n path: path.resolve(__dirname, './dist'),\n publicPath: '/dist/',\n filename: 'build.js'\n },\n module: {\n rules: [\n {\n test: /\\.vue$/,\n loader: 'vue-loader',\n options: {\n loaders: {\n }\n // other vue-loader options go here\n }\n },\n {\n test: /\\.js$/,\n loader: 'babel-loader',\n exclude: /node_modules/\n },\n {\n test: /\\.(png|jpg|gif|svg)$/,\n loader: 'file-loader',\n options: {\n name: '[name].[ext]?[hash]'\n }\n }\n ]\n },\n resolve: {\n alias: {\n 'vue$': 'vue/dist/vue.esm.js'\n }\n },\n devServer: {\n historyApiFallback: true,\n noInfo: true\n },\n performance: {\n hints: false\n },\n devtool: '#eval-source-map'\n}\n\nif (process.env.NODE_ENV === 'production') {\n module.exports.devtool = '#source-map'\n // http://vue-loader.vuejs.org/en/workflow/production.html\n module.exports.plugins = (module.exports.plugins || []).concat([\n new webpack.DefinePlugin({\n 'process.env': {\n NODE_ENV: '\"production\"'\n }\n }),\n new webpack.optimize.UglifyJsPlugin({\n sourceMap: true,\n compress: {\n warnings: false\n }\n }),\n new webpack.LoaderOptionsPlugin({\n minimize: true\n })\n ])\n}\n" }, { "path": "56-vue-router-meta-field/.babelrc", "content": "{\n \"presets\": [\n [\"latest\", {\n \"es2015\": { \"modules\": false }\n }]\n ]\n}\n" }, { "path": "56-vue-router-meta-field/README.md", "content": "# 46-vue-router-nested-routes\n\n> A Vue.js project\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# build for production with minification\nnpm run build\n```\n\nFor detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).\n" }, { "path": "56-vue-router-meta-field/index.html", "content": "\n\n\n \n 55-vue-router-component-guard\n\n\n

    Bienvenid@ a mi super App

    \n
    \n\n\n\n" }, { "path": "56-vue-router-meta-field/package.json", "content": "{\n \"name\": \"46-vue-router-nested-routes\",\n \"description\": \"A Vue.js project\",\n \"version\": \"1.0.0\",\n \"author\": \"@juanwmedia \",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"cross-env NODE_ENV=development webpack-dev-server --open --hot\",\n \"build\": \"cross-env NODE_ENV=production webpack --progress --hide-modules\"\n },\n \"dependencies\": {\n \"vue\": \"^2.2.1\",\n \"vue-router\": \"^2.3.0\",\n \"vuex\": \"^2.2.1\"\n },\n \"devDependencies\": {\n \"babel-core\": \"^6.0.0\",\n \"babel-loader\": \"^6.0.0\",\n \"babel-preset-latest\": \"^6.0.0\",\n \"cross-env\": \"^3.0.0\",\n \"css-loader\": \"^0.25.0\",\n \"file-loader\": \"^0.9.0\",\n \"vue-loader\": \"^11.1.4\",\n \"vue-template-compiler\": \"^2.2.1\",\n \"webpack\": \"^2.2.0\",\n \"webpack-dev-server\": \"^2.2.0\"\n }\n}\n" }, { "path": "56-vue-router-meta-field/src/App.vue", "content": "\n\n" }, { "path": "56-vue-router-meta-field/src/components/Contacto.vue", "content": "\n\n" }, { "path": "56-vue-router-meta-field/src/components/Equipo.vue", "content": "" }, { "path": "56-vue-router-meta-field/src/components/Home.vue", "content": "\n\n" }, { "path": "56-vue-router-meta-field/src/components/NoEncontrado.vue", "content": "" }, { "path": "56-vue-router-meta-field/src/components/Usuario.vue", "content": "\n\n\n\n\n" }, { "path": "56-vue-router-meta-field/src/components/UsuarioBio.vue", "content": "" }, { "path": "56-vue-router-meta-field/src/components/UsuarioFotos.vue", "content": "" }, { "path": "56-vue-router-meta-field/src/main.js", "content": "import Vue from 'vue';\nimport App from './App.vue';\nimport VueRouter from 'vue-router';\nimport {routes} from './routes';\nimport {store} from './store';\nVue.use(VueRouter);\n\nconst router = new VueRouter({\n routes,\n});\n\nrouter.beforeEach((to, from, next) => {\n console.log('Acceso global a ruta');\n\n if (to.meta.privado)\n next(store.state.auth);\n else\n next();\n});\n\nnew Vue({\n el: '#app',\n router,\n store,\n render: h => h(App)\n});\n" }, { "path": "56-vue-router-meta-field/src/routes.js", "content": "import Home from './components/Home.vue';\nimport Equipo from './components/Equipo.vue';\nimport Usuario from './components/Usuario.vue';\nimport UsuarioFotos from './components/UsuarioFotos.vue';\nimport UsuarioBio from './components/UsuarioBio.vue';\nimport Contacto from './components/Contacto.vue';\nimport NoEncontrado from './components/NoEncontrado.vue';\n\nexport const routes = [\n {path: '/', component: Home, name: 'home'},\n {path: '/prueba', alias: '/otraprueba', redirect: {name: 'home'}, component: Home},\n {\n path: '/equipo/:id', component: Equipo, children: [\n {\n path: '', components: {\n default: Usuario,\n bio: UsuarioBio,\n fotos: UsuarioFotos,\n }, name: 'equipo'\n },\n ]\n },\n {path: '/contacto', meta: {privado: true}, component: Contacto, name: 'contacto', props: {newsletter: false}},\n {path: '*', component: NoEncontrado}\n];" }, { "path": "56-vue-router-meta-field/src/store.js", "content": "import Vue from 'vue';\nimport Vuex from 'vuex';\nVue.use(Vuex);\n\nexport const store = new Vuex.Store({\n state: {\n auth: true,\n },\n mutations: {\n cambiar: (state) => state.auth = !state.auth,\n }\n});" }, { "path": "56-vue-router-meta-field/webpack.config.js", "content": "var path = require('path')\nvar webpack = require('webpack')\n\nmodule.exports = {\n entry: './src/main.js',\n output: {\n path: path.resolve(__dirname, './dist'),\n publicPath: '/dist/',\n filename: 'build.js'\n },\n module: {\n rules: [\n {\n test: /\\.vue$/,\n loader: 'vue-loader',\n options: {\n loaders: {\n }\n // other vue-loader options go here\n }\n },\n {\n test: /\\.js$/,\n loader: 'babel-loader',\n exclude: /node_modules/\n },\n {\n test: /\\.(png|jpg|gif|svg)$/,\n loader: 'file-loader',\n options: {\n name: '[name].[ext]?[hash]'\n }\n }\n ]\n },\n resolve: {\n alias: {\n 'vue$': 'vue/dist/vue.esm.js'\n }\n },\n devServer: {\n historyApiFallback: true,\n noInfo: true\n },\n performance: {\n hints: false\n },\n devtool: '#eval-source-map'\n}\n\nif (process.env.NODE_ENV === 'production') {\n module.exports.devtool = '#source-map'\n // http://vue-loader.vuejs.org/en/workflow/production.html\n module.exports.plugins = (module.exports.plugins || []).concat([\n new webpack.DefinePlugin({\n 'process.env': {\n NODE_ENV: '\"production\"'\n }\n }),\n new webpack.optimize.UglifyJsPlugin({\n sourceMap: true,\n compress: {\n warnings: false\n }\n }),\n new webpack.LoaderOptionsPlugin({\n minimize: true\n })\n ])\n}\n" }, { "path": "57-vue-router-transitions/.babelrc", "content": "{\n \"presets\": [\n [\"latest\", {\n \"es2015\": { \"modules\": false }\n }]\n ]\n}\n" }, { "path": "57-vue-router-transitions/README.md", "content": "# 46-vue-router-nested-routes\n\n> A Vue.js project\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# build for production with minification\nnpm run build\n```\n\nFor detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).\n" }, { "path": "57-vue-router-transitions/index.html", "content": "\n\n\n \n 56-vue-router-transtions\n\n\n

    Bienvenid@ a mi super App

    \n
    \n\n\n\n" }, { "path": "57-vue-router-transitions/package.json", "content": "{\n \"name\": \"46-vue-router-nested-routes\",\n \"description\": \"A Vue.js project\",\n \"version\": \"1.0.0\",\n \"author\": \"@juanwmedia \",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"cross-env NODE_ENV=development webpack-dev-server --open --hot\",\n \"build\": \"cross-env NODE_ENV=production webpack --progress --hide-modules\"\n },\n \"dependencies\": {\n \"vue\": \"^2.2.1\",\n \"vue-router\": \"^2.3.0\",\n \"vuex\": \"^2.2.1\"\n },\n \"devDependencies\": {\n \"babel-core\": \"^6.0.0\",\n \"babel-loader\": \"^6.0.0\",\n \"babel-preset-latest\": \"^6.0.0\",\n \"cross-env\": \"^3.0.0\",\n \"css-loader\": \"^0.25.0\",\n \"file-loader\": \"^0.9.0\",\n \"vue-loader\": \"^11.1.4\",\n \"vue-template-compiler\": \"^2.2.1\",\n \"webpack\": \"^2.2.0\",\n \"webpack-dev-server\": \"^2.2.0\"\n }\n}\n" }, { "path": "57-vue-router-transitions/src/App.vue", "content": "\n\n\n" }, { "path": "57-vue-router-transitions/src/components/Contacto.vue", "content": "\n\n" }, { "path": "57-vue-router-transitions/src/components/Equipo.vue", "content": "" }, { "path": "57-vue-router-transitions/src/components/Home.vue", "content": "\n\n" }, { "path": "57-vue-router-transitions/src/components/NoEncontrado.vue", "content": "" }, { "path": "57-vue-router-transitions/src/components/Usuario.vue", "content": "\n\n\n\n\n" }, { "path": "57-vue-router-transitions/src/components/UsuarioBio.vue", "content": "" }, { "path": "57-vue-router-transitions/src/components/UsuarioFotos.vue", "content": "" }, { "path": "57-vue-router-transitions/src/main.js", "content": "import Vue from 'vue';\nimport App from './App.vue';\nimport VueRouter from 'vue-router';\nimport {routes} from './routes';\nimport {store} from './store';\nVue.use(VueRouter);\n\nconst router = new VueRouter({\n routes,\n});\n\nrouter.beforeEach((to, from, next) => {\n console.log('Acceso global a ruta');\n\n if (to.meta.privado)\n next(store.state.auth);\n else\n next();\n});\n\nnew Vue({\n el: '#app',\n router,\n store,\n render: h => h(App)\n});\n" }, { "path": "57-vue-router-transitions/src/routes.js", "content": "import Home from './components/Home.vue';\nimport Equipo from './components/Equipo.vue';\nimport Usuario from './components/Usuario.vue';\nimport UsuarioFotos from './components/UsuarioFotos.vue';\nimport UsuarioBio from './components/UsuarioBio.vue';\nimport Contacto from './components/Contacto.vue';\nimport NoEncontrado from './components/NoEncontrado.vue';\n\nexport const routes = [\n {path: '/', component: Home, name: 'home'},\n {path: '/prueba', alias: '/otraprueba', redirect: {name: 'home'}, component: Home},\n {\n path: '/equipo/:id', component: Equipo, children: [\n {\n path: '', components: {\n default: Usuario,\n bio: UsuarioBio,\n fotos: UsuarioFotos,\n }, name: 'equipo'\n },\n ]\n },\n {path: '/contacto', meta: {privado: true}, component: Contacto, name: 'contacto', props: {newsletter: false}},\n {path: '*', component: NoEncontrado}\n];" }, { "path": "57-vue-router-transitions/src/store.js", "content": "import Vue from 'vue';\nimport Vuex from 'vuex';\nVue.use(Vuex);\n\nexport const store = new Vuex.Store({\n state: {\n auth: true,\n },\n mutations: {\n cambiar: (state) => state.auth = !state.auth,\n }\n});" }, { "path": "57-vue-router-transitions/webpack.config.js", "content": "var path = require('path')\nvar webpack = require('webpack')\n\nmodule.exports = {\n entry: './src/main.js',\n output: {\n path: path.resolve(__dirname, './dist'),\n publicPath: '/dist/',\n filename: 'build.js'\n },\n module: {\n rules: [\n {\n test: /\\.vue$/,\n loader: 'vue-loader',\n options: {\n loaders: {\n }\n // other vue-loader options go here\n }\n },\n {\n test: /\\.js$/,\n loader: 'babel-loader',\n exclude: /node_modules/\n },\n {\n test: /\\.(png|jpg|gif|svg)$/,\n loader: 'file-loader',\n options: {\n name: '[name].[ext]?[hash]'\n }\n }\n ]\n },\n resolve: {\n alias: {\n 'vue$': 'vue/dist/vue.esm.js'\n }\n },\n devServer: {\n historyApiFallback: true,\n noInfo: true\n },\n performance: {\n hints: false\n },\n devtool: '#eval-source-map'\n}\n\nif (process.env.NODE_ENV === 'production') {\n module.exports.devtool = '#source-map'\n // http://vue-loader.vuejs.org/en/workflow/production.html\n module.exports.plugins = (module.exports.plugins || []).concat([\n new webpack.DefinePlugin({\n 'process.env': {\n NODE_ENV: '\"production\"'\n }\n }),\n new webpack.optimize.UglifyJsPlugin({\n sourceMap: true,\n compress: {\n warnings: false\n }\n }),\n new webpack.LoaderOptionsPlugin({\n minimize: true\n })\n ])\n}\n" }, { "path": "58-vue-router-data-fetch/.babelrc", "content": "{\n \"presets\": [\n [\"latest\", {\n \"es2015\": { \"modules\": false }\n }]\n ]\n}\n" }, { "path": "58-vue-router-data-fetch/README.md", "content": "# 46-vue-router-nested-routes\n\n> A Vue.js project\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# build for production with minification\nnpm run build\n```\n\nFor detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).\n" }, { "path": "58-vue-router-data-fetch/index.html", "content": "\n\n\n \n 58-vue-router-data-fetch\n\n\n

    Bienvenid@ a mi super App

    \n
    \n\n\n\n" }, { "path": "58-vue-router-data-fetch/package.json", "content": "{\n \"name\": \"46-vue-router-nested-routes\",\n \"description\": \"A Vue.js project\",\n \"version\": \"1.0.0\",\n \"author\": \"@juanwmedia \",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"cross-env NODE_ENV=development webpack-dev-server --open --hot\",\n \"build\": \"cross-env NODE_ENV=production webpack --progress --hide-modules\"\n },\n \"dependencies\": {\n \"vue\": \"^2.2.1\",\n \"vue-router\": \"^2.3.0\",\n \"vuex\": \"^2.2.1\"\n },\n \"devDependencies\": {\n \"babel-core\": \"^6.0.0\",\n \"babel-loader\": \"^6.0.0\",\n \"babel-preset-latest\": \"^6.0.0\",\n \"cross-env\": \"^3.0.0\",\n \"css-loader\": \"^0.25.0\",\n \"file-loader\": \"^0.9.0\",\n \"vue-loader\": \"^11.1.4\",\n \"vue-template-compiler\": \"^2.2.1\",\n \"webpack\": \"^2.2.0\",\n \"webpack-dev-server\": \"^2.2.0\"\n }\n}\n" }, { "path": "58-vue-router-data-fetch/src/App.vue", "content": "\n\n\n" }, { "path": "58-vue-router-data-fetch/src/components/Contacto.vue", "content": "\n\n" }, { "path": "58-vue-router-data-fetch/src/components/Equipo.vue", "content": "" }, { "path": "58-vue-router-data-fetch/src/components/Home.vue", "content": "\n\n" }, { "path": "58-vue-router-data-fetch/src/components/NoEncontrado.vue", "content": "" }, { "path": "58-vue-router-data-fetch/src/components/Usuario.vue", "content": "\n\n\n\n\n" }, { "path": "58-vue-router-data-fetch/src/components/UsuarioBio.vue", "content": "" }, { "path": "58-vue-router-data-fetch/src/components/UsuarioFotos.vue", "content": "" }, { "path": "58-vue-router-data-fetch/src/main.js", "content": "import Vue from 'vue';\nimport App from './App.vue';\nimport VueRouter from 'vue-router';\nimport {routes} from './routes';\nimport {store} from './store';\nVue.use(VueRouter);\n\nconst router = new VueRouter({\n routes,\n});\n\nrouter.beforeEach((to, from, next) => {\n console.log('Acceso global a ruta');\n\n if (to.meta.privado)\n next(store.state.auth);\n else\n next();\n});\n\nnew Vue({\n el: '#app',\n router,\n store,\n render: h => h(App)\n});\n" }, { "path": "58-vue-router-data-fetch/src/routes.js", "content": "import Home from './components/Home.vue';\nimport Equipo from './components/Equipo.vue';\nimport Usuario from './components/Usuario.vue';\nimport UsuarioFotos from './components/UsuarioFotos.vue';\nimport UsuarioBio from './components/UsuarioBio.vue';\nimport Contacto from './components/Contacto.vue';\nimport NoEncontrado from './components/NoEncontrado.vue';\n\nexport const routes = [\n {path: '/', component: Home, name: 'home'},\n {path: '/prueba', alias: '/otraprueba', redirect: {name: 'home'}, component: Home},\n {\n path: '/equipo/:id', component: Equipo, children: [\n {\n path: '', components: {\n default: Usuario,\n bio: UsuarioBio,\n fotos: UsuarioFotos,\n }, name: 'equipo'\n },\n ]\n },\n {path: '/contacto', meta: {privado: true}, component: Contacto, name: 'contacto', props: {newsletter: false}},\n {path: '*', component: NoEncontrado}\n];" }, { "path": "58-vue-router-data-fetch/src/store.js", "content": "import Vue from 'vue';\nimport Vuex from 'vuex';\nVue.use(Vuex);\n\nexport const store = new Vuex.Store({\n state: {\n auth: true,\n },\n mutations: {\n cambiar: (state) => state.auth = !state.auth,\n }\n});" }, { "path": "58-vue-router-data-fetch/webpack.config.js", "content": "var path = require('path')\nvar webpack = require('webpack')\n\nmodule.exports = {\n entry: './src/main.js',\n output: {\n path: path.resolve(__dirname, './dist'),\n publicPath: '/dist/',\n filename: 'build.js'\n },\n module: {\n rules: [\n {\n test: /\\.vue$/,\n loader: 'vue-loader',\n options: {\n loaders: {\n }\n // other vue-loader options go here\n }\n },\n {\n test: /\\.js$/,\n loader: 'babel-loader',\n exclude: /node_modules/\n },\n {\n test: /\\.(png|jpg|gif|svg)$/,\n loader: 'file-loader',\n options: {\n name: '[name].[ext]?[hash]'\n }\n }\n ]\n },\n resolve: {\n alias: {\n 'vue$': 'vue/dist/vue.esm.js'\n }\n },\n devServer: {\n historyApiFallback: true,\n noInfo: true\n },\n performance: {\n hints: false\n },\n devtool: '#eval-source-map'\n}\n\nif (process.env.NODE_ENV === 'production') {\n module.exports.devtool = '#source-map'\n // http://vue-loader.vuejs.org/en/workflow/production.html\n module.exports.plugins = (module.exports.plugins || []).concat([\n new webpack.DefinePlugin({\n 'process.env': {\n NODE_ENV: '\"production\"'\n }\n }),\n new webpack.optimize.UglifyJsPlugin({\n sourceMap: true,\n compress: {\n warnings: false\n }\n }),\n new webpack.LoaderOptionsPlugin({\n minimize: true\n })\n ])\n}\n" }, { "path": "59-vue-router-srcoll/.babelrc", "content": "{\n \"presets\": [\n [\"latest\", {\n \"es2015\": { \"modules\": false }\n }]\n ]\n}\n" }, { "path": "59-vue-router-srcoll/README.md", "content": "# 59-vue-router-srcoll\n\n> A Vue.js project\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# build for production with minification\nnpm run build\n```\n\nFor detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).\n" }, { "path": "59-vue-router-srcoll/index.html", "content": "\n\n \n \n 59-vue-router-srcoll\n \n \n
    \n \n \n\n" }, { "path": "59-vue-router-srcoll/package.json", "content": "{\n \"name\": \"59-vue-router-srcoll\",\n \"description\": \"A Vue.js project\",\n \"version\": \"1.0.0\",\n \"author\": \"@juanwmedia \",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"cross-env NODE_ENV=development webpack-dev-server --open --hot\",\n \"build\": \"cross-env NODE_ENV=production webpack --progress --hide-modules\"\n },\n \"dependencies\": {\n \"vue\": \"^2.2.1\",\n \"vue-router\": \"^2.5.2\"\n },\n \"devDependencies\": {\n \"babel-core\": \"^6.0.0\",\n \"babel-loader\": \"^6.0.0\",\n \"babel-preset-latest\": \"^6.0.0\",\n \"cross-env\": \"^3.0.0\",\n \"css-loader\": \"^0.25.0\",\n \"file-loader\": \"^0.9.0\",\n \"vue-loader\": \"^11.1.4\",\n \"vue-template-compiler\": \"^2.2.1\",\n \"webpack\": \"^2.2.0\",\n \"webpack-dev-server\": \"^2.2.0\"\n }\n}\n" }, { "path": "59-vue-router-srcoll/src/App.vue", "content": "" }, { "path": "59-vue-router-srcoll/src/components/Bio.vue", "content": "\n\n" }, { "path": "59-vue-router-srcoll/src/components/Info.vue", "content": "\n\n\n\n\n" }, { "path": "59-vue-router-srcoll/src/main.js", "content": "import Vue from 'vue';\nimport App from './App.vue';\nimport Info from './components/Info.vue';\nimport Bio from './components/Bio.vue';\n\n/* Router */\nimport VueRouter from 'vue-router';\n\nVue.use(VueRouter);\n\nconst routes = [\n {path: '/', component: Info},\n {path: '/bio', component: Bio},\n];\n\nconst router = new VueRouter({\n routes,\n mode: 'history',\n scrollBehavior(to, from, savedPosition) {\n const position = {};\n console.log(to);\n if (to.hash) {\n position.selector = to.hash;\n } else {\n position.x = 200;\n position.y = 100;\n }\n return position;\n }\n});\n\nnew Vue({\n el: '#app',\n router,\n render: h => h(App)\n});" }, { "path": "59-vue-router-srcoll/webpack.config.js", "content": "var path = require('path')\nvar webpack = require('webpack')\n\nmodule.exports = {\n entry: './src/main.js',\n output: {\n path: path.resolve(__dirname, './dist'),\n publicPath: '/dist/',\n filename: 'build.js'\n },\n module: {\n rules: [\n {\n test: /\\.vue$/,\n loader: 'vue-loader',\n options: {\n loaders: {\n }\n // other vue-loader options go here\n }\n },\n {\n test: /\\.js$/,\n loader: 'babel-loader',\n exclude: /node_modules/\n },\n {\n test: /\\.(png|jpg|gif|svg)$/,\n loader: 'file-loader',\n options: {\n name: '[name].[ext]?[hash]'\n }\n }\n ]\n },\n resolve: {\n alias: {\n 'vue$': 'vue/dist/vue.esm.js'\n }\n },\n devServer: {\n historyApiFallback: true,\n noInfo: true\n },\n performance: {\n hints: false\n },\n devtool: '#eval-source-map'\n}\n\nif (process.env.NODE_ENV === 'production') {\n module.exports.devtool = '#source-map'\n // http://vue-loader.vuejs.org/en/workflow/production.html\n module.exports.plugins = (module.exports.plugins || []).concat([\n new webpack.DefinePlugin({\n 'process.env': {\n NODE_ENV: '\"production\"'\n }\n }),\n new webpack.optimize.UglifyJsPlugin({\n sourceMap: true,\n compress: {\n warnings: false\n }\n }),\n new webpack.LoaderOptionsPlugin({\n minimize: true\n })\n ])\n}\n" }, { "path": "6-propiedades-computadas/index.html", "content": "\n\n\n\n \n \n Vue.js\n \n \n\n\n\n
    \n
      \n
    • \n {{ tarea.titulo }}\n
      • \n
    \n
    \n \n \n
    \n 
    {{ $data }}
    \n
    \n \n \n\n\n" }, { "path": "6-propiedades-computadas/js/main.js", "content": "new Vue({\n el: 'main',\n data: {\n mensaje: 'Hola Mundo :) !',\n nuevaTarea: null,\n tareas: [{\n titulo: 'Aprender Vue.js',\n prioridad: true,\n antiguedad: 23\n },\n {\n titulo: 'Aprender ES6',\n prioridad: false,\n antiguedad: 135\n },\n {\n titulo: 'Publicar algo todos los días',\n prioridad: true,\n antiguedad: 378\n },\n ]\n },\n methods: {\n agregarTarea() {\n // this, hace referencia a la instancia Vue\n this.tareas.unshift({\n titulo: this.nuevaTarea,\n prioridad: false,\n antiguedad: 0,\n });\n this.nuevaTarea = null;\n },\n },\n computed: {\n tareasConPrioridad() {\n return this.tareas.filter((tarea) => tarea.prioridad);\n },\n mensajeAlReves() {\n return this.mensaje.split('').reverse().join('');\n },\n tareasPorAntiguedad() {\n return this.tareas.sort((a, b) => b.antiguedad - a.antiguedad);\n }\n }\n});" }, { "path": "60-vue-router-lazy-load/.babelrc", "content": "{\n \"presets\": [\n [\"latest\", {\n \"es2015\": { \"modules\": false }\n }]\n ]\n}\n" }, { "path": "60-vue-router-lazy-load/README.md", "content": "# 59-vue-router-srcoll\n\n> A Vue.js project\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# build for production with minification\nnpm run build\n```\n\nFor detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).\n" }, { "path": "60-vue-router-lazy-load/index.html", "content": "\n\n \n \n 60-vue-router-lazy-load\n \n \n
    \n \n \n\n" }, { "path": "60-vue-router-lazy-load/package.json", "content": "{\n \"name\": \"59-vue-router-srcoll\",\n \"description\": \"A Vue.js project\",\n \"version\": \"1.0.0\",\n \"author\": \"@juanwmedia \",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"cross-env NODE_ENV=development webpack-dev-server --open --hot\",\n \"build\": \"cross-env NODE_ENV=production webpack --progress --hide-modules\"\n },\n \"dependencies\": {\n \"vue\": \"^2.2.1\",\n \"vue-router\": \"^2.5.2\"\n },\n \"devDependencies\": {\n \"babel-core\": \"^6.0.0\",\n \"babel-loader\": \"^6.0.0\",\n \"babel-preset-latest\": \"^6.0.0\",\n \"cross-env\": \"^3.0.0\",\n \"css-loader\": \"^0.25.0\",\n \"file-loader\": \"^0.9.0\",\n \"vue-loader\": \"^11.1.4\",\n \"vue-template-compiler\": \"^2.2.1\",\n \"webpack\": \"^2.2.0\",\n \"webpack-dev-server\": \"^2.2.0\"\n }\n}\n" }, { "path": "60-vue-router-lazy-load/src/App.vue", "content": "" }, { "path": "60-vue-router-lazy-load/src/components/Bio.vue", "content": "\n\n" }, { "path": "60-vue-router-lazy-load/src/components/Info.vue", "content": "\n\n\n\n\n" }, { "path": "60-vue-router-lazy-load/src/main.js", "content": "import Vue from 'vue';\nimport App from './App.vue';\nimport Info from './components/Info.vue';\n//import Bio from './components/Bio.vue';\n\nconst Bio = resolve => {\n require.ensure(['./components/Bio.vue'], () => {\n resolve(require('./components/Bio.vue'));\n });\n};\n\n/* Router */\nimport VueRouter from 'vue-router';\n\nVue.use(VueRouter);\n\nconst routes = [\n {path: '/', component: Info},\n {path: '/bio', component: Bio},\n];\n\nconst router = new VueRouter({\n routes,\n mode: 'history',\n scrollBehavior(to, from, savedPosition) {\n const position = {};\n console.log(to);\n if (to.hash) {\n position.selector = to.hash;\n } else {\n position.x = 200;\n position.y = 100;\n }\n return position;\n }\n});\n\nnew Vue({\n el: '#app',\n router,\n render: h => h(App)\n});" }, { "path": "60-vue-router-lazy-load/webpack.config.js", "content": "var path = require('path')\nvar webpack = require('webpack')\n\nmodule.exports = {\n entry: './src/main.js',\n output: {\n path: path.resolve(__dirname, './dist'),\n publicPath: '/dist/',\n filename: 'build.js'\n },\n module: {\n rules: [\n {\n test: /\\.vue$/,\n loader: 'vue-loader',\n options: {\n loaders: {\n }\n // other vue-loader options go here\n }\n },\n {\n test: /\\.js$/,\n loader: 'babel-loader',\n exclude: /node_modules/\n },\n {\n test: /\\.(png|jpg|gif|svg)$/,\n loader: 'file-loader',\n options: {\n name: '[name].[ext]?[hash]'\n }\n }\n ]\n },\n resolve: {\n alias: {\n 'vue$': 'vue/dist/vue.esm.js'\n }\n },\n devServer: {\n historyApiFallback: true,\n noInfo: true\n },\n performance: {\n hints: false\n },\n devtool: '#eval-source-map'\n}\n\nif (process.env.NODE_ENV === 'production') {\n module.exports.devtool = '#source-map'\n // http://vue-loader.vuejs.org/en/workflow/production.html\n module.exports.plugins = (module.exports.plugins || []).concat([\n new webpack.DefinePlugin({\n 'process.env': {\n NODE_ENV: '\"production\"'\n }\n }),\n new webpack.optimize.UglifyJsPlugin({\n sourceMap: true,\n compress: {\n warnings: false\n }\n }),\n new webpack.LoaderOptionsPlugin({\n minimize: true\n })\n ])\n}\n" }, { "path": "61-vue-directive-hooks/index.html", "content": "\n\n\n \n Vue Custom Directives\n\n\n
    \n

    Hola desde el curso de Vue & Firebase

    \n

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid consectetur consequuntur cumque dolorum earum\n inventore ipsa laboriosam maxime nesciunt non quaerat, quas quia ratione veniam voluptatem. Magnam nostrum\n repellat veritatis!

    \n

    Ab animi commodi consequatur culpa deserunt eos, facilis ipsum itaque neque nisi, officia officiis pariatur\n praesentium quis quos recusandae unde, vero voluptas. Adipisci enim fuga quod sed. Nesciunt, pariatur ullam!

    \n

    Animi, et fuga id iste laudantium officia quae recusandae. Amet dolor dolore, dolorem eius eos fugit inventore\n ipsa, laboriosam magnam, nam omnis quo reprehenderit sint tempore tenetur? Incidunt, iure sunt?

    \n

    Aspernatur beatae dignissimos dolore dolores dolorum eveniet explicabo fugiat ipsa minus praesentium quibusdam\n quis, reprehenderit sed, suscipit tempore ullam unde vero. Atque facere, iste. Assumenda earum ex incidunt\n laudantium obcaecati?

    \n

    A adipisci atque beatae distinctio dolor dolorem facilis harum, libero magni nemo odit possimus reiciendis\n repudiandae soluta ut vel voluptatum. Amet delectus dolorum nemo obcaecati pariatur praesentium, tempore\n voluptatem. Repudiandae?

    \n

    Non odio tenetur ut. Ad beatae blanditiis, consequuntur corporis debitis dignissimos dolorum ea ex in inventore\n ipsa iste iure laborum modi nam natus nostrum perferendis, quis, reiciendis repellendus ullam veniam!

    \n

    Aspernatur, assumenda culpa cumque dolorem exercitationem fugiat iste molestiae neque nesciunt nisi placeat\n repellendus, sequi vel velit voluptates? Dolor ea eos error esse eum impedit labore ratione, ullam unde\n veniam!

    \n

    Architecto at beatae consequatur debitis deserunt dolore explicabo illo, impedit ipsam iusto libero magni, nemo,\n nesciunt nisi nulla odio quasi qui quo ratione tempora temporibus voluptates voluptatibus. Est, natus\n similique!

    \n

    A accusantium dolorem facilis illo in non perferendis quam totam unde voluptatibus. A asperiores dolore minus quo\n vel, vero? Dolor dolorum inventore magni minus neque nesciunt nobis velit veritatis voluptas.

    \n

    Numquam, qui, quo. Ipsam magni saepe velit? A libero nam quae quam! At aut dolore doloribus illum necessitatibus\n nobis similique sint, velit. Fugiat natus nobis optio, quaerat quisquam ratione temporibus!

    \n

    Aspernatur, dolores error esse nihil omnis rem veniam. Consequuntur, deleniti distinctio dolore dolorem et\n laboriosam maxime nemo neque nobis officiis quidem reiciendis rem suscipit, tempora, vel. Cupiditate eum fugiat\n laudantium!

    \n

    Aliquam amet deleniti dicta dolor dolore dolorum ducimus eligendi error est eveniet excepturi impedit ipsam iste\n itaque natus nobis nostrum omnis, repellat rerum saepe sunt suscipit veniam veritatis! Exercitationem,\n quidem?

    \n

    Aliquam consequuntur culpa cupiditate deleniti ea eos excepturi illum, itaque maxime natus nihil non pariatur\n possimus quam, quibusdam quidem, sapiente tempora temporibus totam ut! Commodi harum illo praesentium reiciendis\n repellat!

    \n

    Dicta dolore esse et fugit id laboriosam necessitatibus, officiis quaerat quasi ratione reiciendis tempora\n tempore voluptas. Facilis fugiat, quis. Esse iste maiores optio voluptas voluptatum? Aperiam deleniti quae\n repellendus tenetur.

    \n

    Ab ad assumenda consectetur consequuntur esse eum ex excepturi expedita explicabo hic maiores, obcaecati odio,\n quasi quia quod, recusandae repellendus reprehenderit saepe similique temporibus velit vitae voluptas\n voluptates! Consequatur, sit?

    \n

    Cum debitis delectus doloremque labore laudantium natus nihil omnis quidem. Aliquid architecto aut, corporis\n fugiat iure nobis quia repellendus sapiente soluta unde! Deserunt ducimus expedita impedit ipsam quisquam sed\n veritatis!

    \n

    Alias dolorem earum error expedita impedit ipsam iste, itaque magnam, minus molestiae officia quas qui quisquam\n rerum sapiente sunt tempora tempore temporibus ullam voluptate! Accusamus aut fuga ipsam non sunt.

    \n

    Consectetur exercitationem illo inventore iste nulla optio pariatur quae quasi recusandae tenetur? Atque cum\n cupiditate earum iusto nulla obcaecati odio omnis praesentium, quidem, quis quo quod repellat tempore,\n temporibus voluptate?

    \n

    Amet at deleniti, distinctio dolor esse excepturi hic ipsum iusto nihil, officiis placeat provident quidem\n repellat rerum saepe sequi soluta ullam voluptates? In nihil omnis quos rerum suscipit totam voluptate.

    \n

    Accusantium amet aperiam debitis dolorem, eius eligendi error esse est excepturi exercitationem expedita facere\n iure mollitia nisi possimus provident quibusdam quidem quis quod reiciendis sed suscipit tempore temporibus\n totam vitae?

    \n

    Accusamus animi aut cum cupiditate debitis, delectus earum exercitationem explicabo facere id illum, molestiae\n nostrum numquam obcaecati odit officia optio porro qui quod ratione repellat, similique suscipit unde vel\n vero.

    \n

    Amet aperiam architecto asperiores aspernatur beatae commodi dolore, eligendi, et eum fuga harum illum iusto\n neque nisi nulla obcaecati odio omnis perferendis perspiciatis reiciendis soluta totam velit. Dolor, fuga,\n modi?

    \n

    Asperiores aspernatur, at commodi cum dolore dolorem error expedita facilis fugiat inventore ipsam, mollitia nam\n nisi non nulla possimus quis quod ratione repudiandae rerum saepe, similique tempora ut veritatis\n voluptatibus.

    \n

    Amet consequatur enim, esse eum facilis incidunt numquam porro quidem saepe, soluta sunt temporibus voluptates?\n Amet aspernatur enim fuga minus mollitia odio perferendis quis quod sequi suscipit tempora totam, voluptas?

    \n

    Itaque magni modi sint? Deleniti esse et facere hic iure iusto laborum magni nesciunt, nisi odit, provident quasi\n sunt velit! Aliquid cumque debitis eos eveniet illum in placeat porro. Ea.

    \n

    Ab amet atque aut, cupiditate eaque facere id ipsum iste magnam molestiae omnis quam quas quasi qui quos ratione\n repellat repellendus sequi similique, sunt tenetur unde vel voluptatem! Quis, reiciendis.

    \n

    A distinctio odit quisquam! Accusamus, accusantium aperiam atque aut cupiditate ex maxime non provident quibusdam\n voluptatibus? Aliquid amet cupiditate ea error facere iste maiores maxime, nemo quisquam saepe similique ut.

    \n

    Ab atque, enim magnam nihil obcaecati officia rem soluta. Adipisci alias cumque dolor, ea fugit illo, ipsum modi\n mollitia natus officia provident quae quod reiciendis saepe sint vero voluptatibus. Iure!

    \n

    Ab consequuntur laudantium maiores quasi quo, reprehenderit tempore? Accusamus assumenda ducimus ex expedita\n ipsum necessitatibus, nihil, non nostrum quas recusandae repudiandae, temporibus vel! Inventore molestias, porro\n praesentium quas unde voluptatibus.

    \n

    Accusamus ad dolor, dolorem enim, facere hic non, quae ratione recusandae soluta tempora veritatis! Alias\n assumenda deleniti enim fuga illo incidunt, laboriosam laudantium libero magnam modi nobis totam vero\n voluptates.

    \n

    Illo iusto nam nemo quisquam, quos sed temporibus? Ad adipisci assumenda blanditiis debitis, dicta, dolor,\n dolores illo natus necessitatibus nihil praesentium quos suscipit! Cumque dolore eveniet, ex magni neque\n obcaecati!

    \n

    Cum laborum minus molestias obcaecati quae. Amet aspernatur error ipsum iure, minus nostrum odit totam vitae.\n Aliquam aperiam, beatae cum est eveniet fugit incidunt inventore magni nemo quia, quo repellat.

    \n

    Ad commodi dolore earum et molestias nisi quam sint voluptatibus. Id illum obcaecati quia quo voluptates. Alias\n animi aperiam aut commodi delectus, earum eos neque odio, pariatur perspiciatis rem, tenetur?

    \n

    Accusantium amet asperiores delectus dolorem error expedita impedit itaque laboriosam magni maiores natus\n necessitatibus non, officia officiis provident quas quos reiciendis repellat sapiente, sed similique tempore\n velit veniam veritatis voluptate.

    \n

    Accusantium amet deserunt itaque molestiae sunt voluptates. Animi aut, consectetur deserunt ducimus ipsam natus\n sunt. Consequuntur, cupiditate dicta eaque, esse inventore modi nam numquam odio quis sapiente sit totam\n voluptas.

    \n

    Ab fugit nostrum perspiciatis sunt! Accusantium assumenda dicta dolorem, et ex, expedita facilis fugit id itaque\n laboriosam maxime nisi numquam obcaecati optio placeat possimus quaerat unde voluptatem. Amet, id mollitia.

    \n

    Laboriosam, odit quod! Ab animi blanditiis culpa cumque distinctio dolorem earum harum illo in, maxime modi\n molestiae nemo numquam odit rem saepe sapiente soluta unde, voluptatem voluptatibus! Accusamus nam, rerum?

    \n

    Architecto blanditiis deleniti ducimus facilis illo modi officiis quaerat repellat vel, voluptatum. Alias,\n aliquam amet cum cumque expedita odit quasi quis quod reprehenderit saepe sunt suscipit tempore ullam voluptates\n voluptatibus?

    \n

    Aliquam harum illo ipsum obcaecati praesentium quod tempora veniam. Adipisci aperiam cumque harum nemo rerum\n tempora voluptate. Id mollitia nihil nisi veniam vitae? Dicta id nisi qui quia recusandae repellat.

    \n

    Beatae dolorum explicabo impedit libero, magni minus necessitatibus quidem recusandae tempore? Atque, delectus\n dolorem ea ex expedita harum ipsum itaque maxime nihil omnis perferendis quae, qui quisquam saepe temporibus\n unde!

    \n
    \n\n\n\n" }, { "path": "61-vue-directive-hooks/js/main.js", "content": "Vue.directive('fijar', {\n bind(el, binding) {\n console.log(el,binding);\n el.style.position = 'fixed';\n\n if (binding.expression) {\n el.style.top = binding.expression + 'px';\n }\n\n if (binding.arg) {\n let color = 'goldenrod';\n let modificadores = Object.keys(binding.modifiers);\n if (modificadores.length > 0) {\n color = modificadores[0];\n }\n el.style.backgroundColor = color;\n }\n }\n});\n\nnew Vue({\n el: '#app',\n});" }, { "path": "62-vue-directive-object-literals/index.html", "content": "\n\n\n \n Vue Custom Directives\n\n\n
    \n

    Hola desde el curso de Vue & Firebase

    \n

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid consectetur consequuntur cumque dolorum earum\n inventore ipsa laboriosam maxime nesciunt non quaerat, quas quia ratione veniam voluptatem. Magnam nostrum\n repellat veritatis!

    \n

    Ab animi commodi consequatur culpa deserunt eos, facilis ipsum itaque neque nisi, officia officiis pariatur\n praesentium quis quos recusandae unde, vero voluptas. Adipisci enim fuga quod sed. Nesciunt, pariatur ullam!

    \n

    Animi, et fuga id iste laudantium officia quae recusandae. Amet dolor dolore, dolorem eius eos fugit inventore\n ipsa, laboriosam magnam, nam omnis quo reprehenderit sint tempore tenetur? Incidunt, iure sunt?

    \n

    Aspernatur beatae dignissimos dolore dolores dolorum eveniet explicabo fugiat ipsa minus praesentium quibusdam\n quis, reprehenderit sed, suscipit tempore ullam unde vero. Atque facere, iste. Assumenda earum ex incidunt\n laudantium obcaecati?

    \n

    A adipisci atque beatae distinctio dolor dolorem facilis harum, libero magni nemo odit possimus reiciendis\n repudiandae soluta ut vel voluptatum. Amet delectus dolorum nemo obcaecati pariatur praesentium, tempore\n voluptatem. Repudiandae?

    \n

    Non odio tenetur ut. Ad beatae blanditiis, consequuntur corporis debitis dignissimos dolorum ea ex in inventore\n ipsa iste iure laborum modi nam natus nostrum perferendis, quis, reiciendis repellendus ullam veniam!

    \n

    Aspernatur, assumenda culpa cumque dolorem exercitationem fugiat iste molestiae neque nesciunt nisi placeat\n repellendus, sequi vel velit voluptates? Dolor ea eos error esse eum impedit labore ratione, ullam unde\n veniam!

    \n

    Architecto at beatae consequatur debitis deserunt dolore explicabo illo, impedit ipsam iusto libero magni, nemo,\n nesciunt nisi nulla odio quasi qui quo ratione tempora temporibus voluptates voluptatibus. Est, natus\n similique!

    \n

    A accusantium dolorem facilis illo in non perferendis quam totam unde voluptatibus. A asperiores dolore minus quo\n vel, vero? Dolor dolorum inventore magni minus neque nesciunt nobis velit veritatis voluptas.

    \n

    Numquam, qui, quo. Ipsam magni saepe velit? A libero nam quae quam! At aut dolore doloribus illum necessitatibus\n nobis similique sint, velit. Fugiat natus nobis optio, quaerat quisquam ratione temporibus!

    \n

    Aspernatur, dolores error esse nihil omnis rem veniam. Consequuntur, deleniti distinctio dolore dolorem et\n laboriosam maxime nemo neque nobis officiis quidem reiciendis rem suscipit, tempora, vel. Cupiditate eum fugiat\n laudantium!

    \n

    Aliquam amet deleniti dicta dolor dolore dolorum ducimus eligendi error est eveniet excepturi impedit ipsam iste\n itaque natus nobis nostrum omnis, repellat rerum saepe sunt suscipit veniam veritatis! Exercitationem,\n quidem?

    \n

    Aliquam consequuntur culpa cupiditate deleniti ea eos excepturi illum, itaque maxime natus nihil non pariatur\n possimus quam, quibusdam quidem, sapiente tempora temporibus totam ut! Commodi harum illo praesentium reiciendis\n repellat!

    \n

    Dicta dolore esse et fugit id laboriosam necessitatibus, officiis quaerat quasi ratione reiciendis tempora\n tempore voluptas. Facilis fugiat, quis. Esse iste maiores optio voluptas voluptatum? Aperiam deleniti quae\n repellendus tenetur.

    \n

    Ab ad assumenda consectetur consequuntur esse eum ex excepturi expedita explicabo hic maiores, obcaecati odio,\n quasi quia quod, recusandae repellendus reprehenderit saepe similique temporibus velit vitae voluptas\n voluptates! Consequatur, sit?

    \n

    Cum debitis delectus doloremque labore laudantium natus nihil omnis quidem. Aliquid architecto aut, corporis\n fugiat iure nobis quia repellendus sapiente soluta unde! Deserunt ducimus expedita impedit ipsam quisquam sed\n veritatis!

    \n

    Alias dolorem earum error expedita impedit ipsam iste, itaque magnam, minus molestiae officia quas qui quisquam\n rerum sapiente sunt tempora tempore temporibus ullam voluptate! Accusamus aut fuga ipsam non sunt.

    \n

    Consectetur exercitationem illo inventore iste nulla optio pariatur quae quasi recusandae tenetur? Atque cum\n cupiditate earum iusto nulla obcaecati odio omnis praesentium, quidem, quis quo quod repellat tempore,\n temporibus voluptate?

    \n

    Amet at deleniti, distinctio dolor esse excepturi hic ipsum iusto nihil, officiis placeat provident quidem\n repellat rerum saepe sequi soluta ullam voluptates? In nihil omnis quos rerum suscipit totam voluptate.

    \n

    Accusantium amet aperiam debitis dolorem, eius eligendi error esse est excepturi exercitationem expedita facere\n iure mollitia nisi possimus provident quibusdam quidem quis quod reiciendis sed suscipit tempore temporibus\n totam vitae?

    \n

    Accusamus animi aut cum cupiditate debitis, delectus earum exercitationem explicabo facere id illum, molestiae\n nostrum numquam obcaecati odit officia optio porro qui quod ratione repellat, similique suscipit unde vel\n vero.

    \n

    Amet aperiam architecto asperiores aspernatur beatae commodi dolore, eligendi, et eum fuga harum illum iusto\n neque nisi nulla obcaecati odio omnis perferendis perspiciatis reiciendis soluta totam velit. Dolor, fuga,\n modi?

    \n

    Asperiores aspernatur, at commodi cum dolore dolorem error expedita facilis fugiat inventore ipsam, mollitia nam\n nisi non nulla possimus quis quod ratione repudiandae rerum saepe, similique tempora ut veritatis\n voluptatibus.

    \n

    Amet consequatur enim, esse eum facilis incidunt numquam porro quidem saepe, soluta sunt temporibus voluptates?\n Amet aspernatur enim fuga minus mollitia odio perferendis quis quod sequi suscipit tempora totam, voluptas?

    \n

    Itaque magni modi sint? Deleniti esse et facere hic iure iusto laborum magni nesciunt, nisi odit, provident quasi\n sunt velit! Aliquid cumque debitis eos eveniet illum in placeat porro. Ea.

    \n

    Ab amet atque aut, cupiditate eaque facere id ipsum iste magnam molestiae omnis quam quas quasi qui quos ratione\n repellat repellendus sequi similique, sunt tenetur unde vel voluptatem! Quis, reiciendis.

    \n

    A distinctio odit quisquam! Accusamus, accusantium aperiam atque aut cupiditate ex maxime non provident quibusdam\n voluptatibus? Aliquid amet cupiditate ea error facere iste maiores maxime, nemo quisquam saepe similique ut.

    \n

    Ab atque, enim magnam nihil obcaecati officia rem soluta. Adipisci alias cumque dolor, ea fugit illo, ipsum modi\n mollitia natus officia provident quae quod reiciendis saepe sint vero voluptatibus. Iure!

    \n

    Ab consequuntur laudantium maiores quasi quo, reprehenderit tempore? Accusamus assumenda ducimus ex expedita\n ipsum necessitatibus, nihil, non nostrum quas recusandae repudiandae, temporibus vel! Inventore molestias, porro\n praesentium quas unde voluptatibus.

    \n

    Accusamus ad dolor, dolorem enim, facere hic non, quae ratione recusandae soluta tempora veritatis! Alias\n assumenda deleniti enim fuga illo incidunt, laboriosam laudantium libero magnam modi nobis totam vero\n voluptates.

    \n

    Illo iusto nam nemo quisquam, quos sed temporibus? Ad adipisci assumenda blanditiis debitis, dicta, dolor,\n dolores illo natus necessitatibus nihil praesentium quos suscipit! Cumque dolore eveniet, ex magni neque\n obcaecati!

    \n

    Cum laborum minus molestias obcaecati quae. Amet aspernatur error ipsum iure, minus nostrum odit totam vitae.\n Aliquam aperiam, beatae cum est eveniet fugit incidunt inventore magni nemo quia, quo repellat.

    \n

    Ad commodi dolore earum et molestias nisi quam sint voluptatibus. Id illum obcaecati quia quo voluptates. Alias\n animi aperiam aut commodi delectus, earum eos neque odio, pariatur perspiciatis rem, tenetur?

    \n

    Accusantium amet asperiores delectus dolorem error expedita impedit itaque laboriosam magni maiores natus\n necessitatibus non, officia officiis provident quas quos reiciendis repellat sapiente, sed similique tempore\n velit veniam veritatis voluptate.

    \n

    Accusantium amet deserunt itaque molestiae sunt voluptates. Animi aut, consectetur deserunt ducimus ipsam natus\n sunt. Consequuntur, cupiditate dicta eaque, esse inventore modi nam numquam odio quis sapiente sit totam\n voluptas.

    \n

    Ab fugit nostrum perspiciatis sunt! Accusantium assumenda dicta dolorem, et ex, expedita facilis fugit id itaque\n laboriosam maxime nisi numquam obcaecati optio placeat possimus quaerat unde voluptatem. Amet, id mollitia.

    \n

    Laboriosam, odit quod! Ab animi blanditiis culpa cumque distinctio dolorem earum harum illo in, maxime modi\n molestiae nemo numquam odit rem saepe sapiente soluta unde, voluptatem voluptatibus! Accusamus nam, rerum?

    \n

    Architecto blanditiis deleniti ducimus facilis illo modi officiis quaerat repellat vel, voluptatum. Alias,\n aliquam amet cum cumque expedita odit quasi quis quod reprehenderit saepe sunt suscipit tempore ullam voluptates\n voluptatibus?

    \n

    Aliquam harum illo ipsum obcaecati praesentium quod tempora veniam. Adipisci aperiam cumque harum nemo rerum\n tempora voluptate. Id mollitia nihil nisi veniam vitae? Dicta id nisi qui quia recusandae repellat.

    \n

    Beatae dolorum explicabo impedit libero, magni minus necessitatibus quidem recusandae tempore? Atque, delectus\n dolorem ea ex expedita harum ipsum itaque maxime nihil omnis perferendis quae, qui quisquam saepe temporibus\n unde!

    \n
    \n\n\n\n" }, { "path": "62-vue-directive-object-literals/js/main.js", "content": "Vue.directive('fijar', {\n bind(el, binding) {\n console.log(binding.value);\n/* el.style.position = 'fixed';\n\n if (binding.expression) {\n el.style.top = binding.expression + 'px';\n }\n\n if (binding.arg) {\n let color = 'goldenrod';\n let modificadores = Object.keys(binding.modifiers);\n if (modificadores.length > 0) {\n color = modificadores[0];\n }\n el.style.backgroundColor = color;\n }*/\n }\n});\n\nnew Vue({\n el: '#app',\n});" }, { "path": "64-mixins-intro/.babelrc", "content": "{\n \"presets\": [\n [\"latest\", {\n \"es2015\": { \"modules\": false }\n }]\n ]\n}\n" }, { "path": "64-mixins-intro/README.md", "content": "# 63-mixins-intro\n\n> A Vue.js project\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# build for production with minification\nnpm run build\n```\n\nFor detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).\n" }, { "path": "64-mixins-intro/index.html", "content": "\n\n \n \n 63-mixins-intro\n \n \n
    \n \n \n\n" }, { "path": "64-mixins-intro/package.json", "content": "{\n \"name\": \"63-mixins-intro\",\n \"description\": \"A Vue.js project\",\n \"version\": \"1.0.0\",\n \"author\": \"@juanwmedia \",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"cross-env NODE_ENV=development webpack-dev-server --open --hot\",\n \"build\": \"cross-env NODE_ENV=production webpack --progress --hide-modules\"\n },\n \"dependencies\": {\n \"vue\": \"^2.2.1\"\n },\n \"devDependencies\": {\n \"babel-core\": \"^6.0.0\",\n \"babel-loader\": \"^6.0.0\",\n \"babel-preset-latest\": \"^6.0.0\",\n \"cross-env\": \"^3.0.0\",\n \"css-loader\": \"^0.25.0\",\n \"file-loader\": \"^0.9.0\",\n \"vue-loader\": \"^11.1.4\",\n \"vue-template-compiler\": \"^2.2.1\",\n \"webpack\": \"^2.2.0\",\n \"webpack-dev-server\": \"^2.2.0\"\n }\n}\n" }, { "path": "64-mixins-intro/src/App.vue", "content": "\n\n\n\n\n" }, { "path": "64-mixins-intro/src/main.js", "content": "import Vue from 'vue'\nimport App from './App.vue'\n\nnew Vue({\n el: '#app',\n render: h => h(App)\n})\n" }, { "path": "64-mixins-intro/src/mixins.js", "content": "export const mixin = {\n data () {\n return {\n aprender: [\n {nombre: 'Ionic 7'},\n {nombre: 'Node'},\n {nombre: 'MongoDB'},\n {nombre: 'Angular 3'},\n {nombre: 'Laravel'},\n ],\n nuevaTecnologia: null,\n }\n },\n methods: {\n agregarTecnologia() {\n this.aprender.unshift({\n nombre: this.nuevaTecnologia,\n });\n this.nuevaTecnologia = null;\n }\n }\n};" }, { "path": "64-mixins-intro/webpack.config.js", "content": "var path = require('path')\nvar webpack = require('webpack')\n\nmodule.exports = {\n entry: './src/main.js',\n output: {\n path: path.resolve(__dirname, './dist'),\n publicPath: '/dist/',\n filename: 'build.js'\n },\n module: {\n rules: [\n {\n test: /\\.vue$/,\n loader: 'vue-loader',\n options: {\n loaders: {\n }\n // other vue-loader options go here\n }\n },\n {\n test: /\\.js$/,\n loader: 'babel-loader',\n exclude: /node_modules/\n },\n {\n test: /\\.(png|jpg|gif|svg)$/,\n loader: 'file-loader',\n options: {\n name: '[name].[ext]?[hash]'\n }\n }\n ]\n },\n resolve: {\n alias: {\n 'vue$': 'vue/dist/vue.esm.js'\n }\n },\n devServer: {\n historyApiFallback: true,\n noInfo: true\n },\n performance: {\n hints: false\n },\n devtool: '#eval-source-map'\n}\n\nif (process.env.NODE_ENV === 'production') {\n module.exports.devtool = '#source-map'\n // http://vue-loader.vuejs.org/en/workflow/production.html\n module.exports.plugins = (module.exports.plugins || []).concat([\n new webpack.DefinePlugin({\n 'process.env': {\n NODE_ENV: '\"production\"'\n }\n }),\n new webpack.optimize.UglifyJsPlugin({\n sourceMap: true,\n compress: {\n warnings: false\n }\n }),\n new webpack.LoaderOptionsPlugin({\n minimize: true\n })\n ])\n}\n" }, { "path": "65-mixins-merge/.babelrc", "content": "{\n \"presets\": [\n [\"latest\", {\n \"es2015\": { \"modules\": false }\n }]\n ]\n}\n" }, { "path": "65-mixins-merge/README.md", "content": "# 63-mixins-intro\n\n> A Vue.js project\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# build for production with minification\nnpm run build\n```\n\nFor detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).\n" }, { "path": "65-mixins-merge/index.html", "content": "\n\n \n \n 65-mixins-merge\n \n \n
    \n \n \n\n" }, { "path": "65-mixins-merge/package.json", "content": "{\n \"name\": \"63-mixins-intro\",\n \"description\": \"A Vue.js project\",\n \"version\": \"1.0.0\",\n \"author\": \"@juanwmedia \",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"cross-env NODE_ENV=development webpack-dev-server --open --hot\",\n \"build\": \"cross-env NODE_ENV=production webpack --progress --hide-modules\"\n },\n \"dependencies\": {\n \"vue\": \"^2.2.1\"\n },\n \"devDependencies\": {\n \"babel-core\": \"^6.0.0\",\n \"babel-loader\": \"^6.0.0\",\n \"babel-preset-latest\": \"^6.0.0\",\n \"cross-env\": \"^3.0.0\",\n \"css-loader\": \"^0.25.0\",\n \"file-loader\": \"^0.9.0\",\n \"vue-loader\": \"^11.1.4\",\n \"vue-template-compiler\": \"^2.2.1\",\n \"webpack\": \"^2.2.0\",\n \"webpack-dev-server\": \"^2.2.0\"\n }\n}\n" }, { "path": "65-mixins-merge/src/App.vue", "content": "\n\n\n\n\n" }, { "path": "65-mixins-merge/src/main.js", "content": "import Vue from 'vue'\nimport App from './App.vue'\n\nnew Vue({\n el: '#app',\n render: h => h(App)\n})\n" }, { "path": "65-mixins-merge/src/mixins.js", "content": "export const mixin = {\n created() {\n console.log('Created desde el mixin');\n this.saludar();\n },\n data () {\n return {\n aprender: [\n {nombre: 'Ionic 7'},\n {nombre: 'Node'},\n {nombre: 'MongoDB'},\n {nombre: 'Angular 3'},\n {nombre: 'Laravel'},\n ],\n nuevaTecnologia: null,\n }\n },\n methods: {\n agregarTecnologia() {\n this.aprender.unshift({\n nombre: this.nuevaTecnologia,\n });\n this.nuevaTecnologia = null;\n },\n saludar() {\n alert('Hola desde el mixin');\n }\n }\n};" }, { "path": "65-mixins-merge/webpack.config.js", "content": "var path = require('path')\nvar webpack = require('webpack')\n\nmodule.exports = {\n entry: './src/main.js',\n output: {\n path: path.resolve(__dirname, './dist'),\n publicPath: '/dist/',\n filename: 'build.js'\n },\n module: {\n rules: [\n {\n test: /\\.vue$/,\n loader: 'vue-loader',\n options: {\n loaders: {\n }\n // other vue-loader options go here\n }\n },\n {\n test: /\\.js$/,\n loader: 'babel-loader',\n exclude: /node_modules/\n },\n {\n test: /\\.(png|jpg|gif|svg)$/,\n loader: 'file-loader',\n options: {\n name: '[name].[ext]?[hash]'\n }\n }\n ]\n },\n resolve: {\n alias: {\n 'vue$': 'vue/dist/vue.esm.js'\n }\n },\n devServer: {\n historyApiFallback: true,\n noInfo: true\n },\n performance: {\n hints: false\n },\n devtool: '#eval-source-map'\n}\n\nif (process.env.NODE_ENV === 'production') {\n module.exports.devtool = '#source-map'\n // http://vue-loader.vuejs.org/en/workflow/production.html\n module.exports.plugins = (module.exports.plugins || []).concat([\n new webpack.DefinePlugin({\n 'process.env': {\n NODE_ENV: '\"production\"'\n }\n }),\n new webpack.optimize.UglifyJsPlugin({\n sourceMap: true,\n compress: {\n warnings: false\n }\n }),\n new webpack.LoaderOptionsPlugin({\n minimize: true\n })\n ])\n}\n" }, { "path": "66-global-mixins/.babelrc", "content": "{\n \"presets\": [\n [\"latest\", {\n \"es2015\": { \"modules\": false }\n }]\n ]\n}\n" }, { "path": "66-global-mixins/README.md", "content": "# 63-mixins-intro\n\n> A Vue.js project\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# build for production with minification\nnpm run build\n```\n\nFor detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).\n" }, { "path": "66-global-mixins/index.html", "content": "\n\n \n \n 66-global-mixins\n \n \n
    \n \n \n\n" }, { "path": "66-global-mixins/package.json", "content": "{\n \"name\": \"63-mixins-intro\",\n \"description\": \"A Vue.js project\",\n \"version\": \"1.0.0\",\n \"author\": \"@juanwmedia \",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"cross-env NODE_ENV=development webpack-dev-server --open --hot\",\n \"build\": \"cross-env NODE_ENV=production webpack --progress --hide-modules\"\n },\n \"dependencies\": {\n \"vue\": \"^2.2.1\"\n },\n \"devDependencies\": {\n \"babel-core\": \"^6.0.0\",\n \"babel-loader\": \"^6.0.0\",\n \"babel-preset-latest\": \"^6.0.0\",\n \"cross-env\": \"^3.0.0\",\n \"css-loader\": \"^0.25.0\",\n \"file-loader\": \"^0.9.0\",\n \"vue-loader\": \"^11.1.4\",\n \"vue-template-compiler\": \"^2.2.1\",\n \"webpack\": \"^2.2.0\",\n \"webpack-dev-server\": \"^2.2.0\"\n }\n}\n" }, { "path": "66-global-mixins/src/App.vue", "content": "\n\n\n\n\n" }, { "path": "66-global-mixins/src/main.js", "content": "import Vue from 'vue'\nimport App from './App.vue'\n\nnew Vue({\n el: '#app',\n render: h => h(App),\n nombre: 'Instancia principal',\n});\n" }, { "path": "66-global-mixins/src/mixins.js", "content": "// Global mixin\nimport Vue from 'vue';\nVue.mixin({\n created() {\n //console.info('Hola desde mixin global');\n this.saludar(this.$options.nombre)\n },\n methods: {\n saludar(nombre) {\n alert(`Hola desde ${nombre}!`);\n }\n }\n});\n\n// Local mixin\nexport const mixin = {\n created() {\n console.log('Created desde el mixin');\n },\n data () {\n return {\n aprender: [\n {nombre: 'Ionic 7'},\n {nombre: 'Node'},\n {nombre: 'MongoDB'},\n {nombre: 'Angular 3'},\n {nombre: 'Laravel'},\n ],\n nuevaTecnologia: null,\n }\n },\n methods: {\n agregarTecnologia() {\n this.aprender.unshift({\n nombre: this.nuevaTecnologia,\n });\n this.nuevaTecnologia = null;\n },\n }\n};" }, { "path": "66-global-mixins/webpack.config.js", "content": "var path = require('path')\nvar webpack = require('webpack')\n\nmodule.exports = {\n entry: './src/main.js',\n output: {\n path: path.resolve(__dirname, './dist'),\n publicPath: '/dist/',\n filename: 'build.js'\n },\n module: {\n rules: [\n {\n test: /\\.vue$/,\n loader: 'vue-loader',\n options: {\n loaders: {\n }\n // other vue-loader options go here\n }\n },\n {\n test: /\\.js$/,\n loader: 'babel-loader',\n exclude: /node_modules/\n },\n {\n test: /\\.(png|jpg|gif|svg)$/,\n loader: 'file-loader',\n options: {\n name: '[name].[ext]?[hash]'\n }\n }\n ]\n },\n resolve: {\n alias: {\n 'vue$': 'vue/dist/vue.esm.js'\n }\n },\n devServer: {\n historyApiFallback: true,\n noInfo: true\n },\n performance: {\n hints: false\n },\n devtool: '#eval-source-map'\n}\n\nif (process.env.NODE_ENV === 'production') {\n module.exports.devtool = '#source-map'\n // http://vue-loader.vuejs.org/en/workflow/production.html\n module.exports.plugins = (module.exports.plugins || []).concat([\n new webpack.DefinePlugin({\n 'process.env': {\n NODE_ENV: '\"production\"'\n }\n }),\n new webpack.optimize.UglifyJsPlugin({\n sourceMap: true,\n compress: {\n warnings: false\n }\n }),\n new webpack.LoaderOptionsPlugin({\n minimize: true\n })\n ])\n}\n" }, { "path": "67-vue-filters/.babelrc", "content": "{\n \"presets\": [\n [\"env\", { \"modules\": false }]\n ]\n}\n" }, { "path": "67-vue-filters/README.md", "content": "# 67-vue-filters\n\n> A Vue.js project\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# build for production with minification\nnpm run build\n```\n\nFor detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).\n" }, { "path": "67-vue-filters/index.html", "content": "\n\n\n \n 67-vue-filters\n\n\n
    \n \n \n\n\n" }, { "path": "67-vue-filters/package.json", "content": "{\n \"name\": \"67-vue-filters\",\n \"description\": \"A Vue.js project\",\n \"version\": \"1.0.0\",\n \"author\": \"@juanwmedia \",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"cross-env NODE_ENV=development webpack-dev-server --open --hot\",\n \"build\": \"cross-env NODE_ENV=production webpack --progress --hide-modules\"\n },\n \"dependencies\": {\n \"vue\": \"^2.3.3\"\n },\n \"devDependencies\": {\n \"babel-core\": \"^6.0.0\",\n \"babel-loader\": \"^6.0.0\",\n \"babel-preset-env\": \"^1.5.1\",\n \"cross-env\": \"^3.0.0\",\n \"css-loader\": \"^0.25.0\",\n \"file-loader\": \"^0.9.0\",\n \"vue-loader\": \"^12.1.0\",\n \"vue-template-compiler\": \"^2.3.3\",\n \"webpack\": \"^2.6.1\",\n \"webpack-dev-server\": \"^2.4.5\"\n }\n}\n" }, { "path": "67-vue-filters/src/App.vue", "content": "\n\n\n\n\n" }, { "path": "67-vue-filters/src/main.js", "content": "import Vue from 'vue'\nimport App from './App.vue'\n\nVue.filter('mayusculas', function(valor){\n return valor.toUpperCase();\n});\n\nnew Vue({\n el: '#app',\n render: h => h(App)\n});\n" }, { "path": "67-vue-filters/webpack.config.js", "content": "var path = require('path')\nvar webpack = require('webpack')\n\nmodule.exports = {\n entry: './src/main.js',\n output: {\n path: path.resolve(__dirname, './dist'),\n publicPath: '/dist/',\n filename: 'build.js'\n },\n module: {\n rules: [\n {\n test: /\\.vue$/,\n loader: 'vue-loader',\n options: {\n loaders: {\n }\n // other vue-loader options go here\n }\n },\n {\n test: /\\.js$/,\n loader: 'babel-loader',\n exclude: /node_modules/\n },\n {\n test: /\\.(png|jpg|gif|svg)$/,\n loader: 'file-loader',\n options: {\n name: '[name].[ext]?[hash]'\n }\n }\n ]\n },\n resolve: {\n alias: {\n 'vue$': 'vue/dist/vue.esm.js'\n }\n },\n devServer: {\n historyApiFallback: true,\n noInfo: true\n },\n performance: {\n hints: false\n },\n devtool: '#eval-source-map'\n}\n\nif (process.env.NODE_ENV === 'production') {\n module.exports.devtool = '#source-map'\n // http://vue-loader.vuejs.org/en/workflow/production.html\n module.exports.plugins = (module.exports.plugins || []).concat([\n new webpack.DefinePlugin({\n 'process.env': {\n NODE_ENV: '\"production\"'\n }\n }),\n new webpack.optimize.UglifyJsPlugin({\n sourceMap: true,\n compress: {\n warnings: false\n }\n }),\n new webpack.LoaderOptionsPlugin({\n minimize: true\n })\n ])\n}\n" }, { "path": "68-form-input-basic/index.html", "content": "\n\n\n \n Vue\n \n\n\n
    \n

    Formulario

    \n
    \n
    \n \n \n \n \n \n \n\n \n \n
    \n \n \n
    \n\n \n \n\n \n\n \n \n
    \n
    \n 
    {{ $data }}
    \n
    \n\n\n\n" }, { "path": "69-form-value-bindings/index.html", "content": "\n\n\n \n Vue\n\n\n
    \n \n \n\n \n \n \n\n \n \n
    \n 
    {{ $data }}
    \n
    \n\n\n\n" }, { "path": "7-filtros/index.html", "content": "\n\n\n\n \n \n Vue.js\n \n \n\n\n\n
    \n \n
      \n
    • \n {{ juego.titulo | alReves }}\n
      • \n
    \n \n 
    {{ $data }}
    \n
    \n \n \n\n\n" }, { "path": "7-filtros/js/main.js", "content": "Vue.filter('alReves',(valor) => valor.split('').reverse().join(''));\n\nnew Vue({\n el: 'main',\n data: {\n busqueda: '',\n minimo: 5,\n juegos: [{\n titulo: 'Battlefield 1',\n genero: 'FPS',\n puntuacion: 9\n },\n {\n titulo: 'Civilization VI',\n genero: 'Estrategia',\n puntuacion: 10\n },\n {\n titulo: 'Resident Evil 7',\n genero: 'Survival Horror',\n puntuacion: 7,\n },\n ]\n },\n computed: {\n mejoresJuegos() {\n return this.juegos.filter((juego) => juego.puntuacion >= this.minimo);\n },\n buscarJuego() {\n return this.juegos.filter((juego) => juego.titulo.includes(this.busqueda));\n }\n }\n});\n\n" }, { "path": "70-form-input-modifiers/index.html", "content": "\n\n\n \n Vue\n \n\n\n
    \n

    Formulario

    \n
    \n
    \n \n \n
    \n
    \n 
    {{ $data }}
    \n
    \n\n\n\n" }, { "path": "71-firebase-agregar/index.html", "content": "\n\n\n \n Vue\n\n\n
    \n \n
    \n \n
    \n\n\n\n\n" }, { "path": "72-firebase-leer/index.html", "content": "\n\n\n \n Vue\n\n\n
    \n
    \n \n
    \n \n
    \n
    \n

    Mensajes

    \n
      \n
    • \n {{ mensaje.mensaje}}\n ({{ mensaje.username }})\n
      • \n
    \n
    \n\n\n\n\n" }, { "path": "73-firebase-actualizar/index.html", "content": "\n\n\n \n Vue\n\n\n
    \n
    \n \n
    \n \n
    \n
    \n

    Mensajes

    \n
      \n
    • \n \n {{ mensaje.mensaje}}\n \n ({{ mensaje.username }})\n
      • \n
    \n
    \n\n\n\n\n" }, { "path": "74-firebase-eliminar/index.html", "content": "\n\n\n \n Vue\n\n\n
    \n
    \n \n
    \n \n
    \n
    \n

    Mensajes

    \n
      \n
    • \n \n {{ mensaje.mensaje}}\n \n ({{ mensaje.username }})\n \n
      • \n
    \n
    \n\n\n\n\n" }, { "path": "75-firebase-transactions/index.html", "content": "\n\n\n \n Vue\n\n\n
    \n

    Datos del usuario

    \n
    \n
    Username:
    \n
    {{ datosPerfil.username }}
    \n
    Ciudad:
    \n
    {{ datosPerfil.ciudad }}
    \n
    País:
    \n
    {{ datosPerfil.pais }}
    \n
    Likes:
    \n
    {{ datosPerfil.likes }}
    \n \n
    \n
    \n\n\n\n\n" }, { "path": "76-firebase-push-agregar/index.html", "content": "\n\n\n \n Vue\n\n\n
    \n\n\n\n\n" }, { "path": "77-firebase-listas-eventos/index.html", "content": "\n\n\n \n Vue\n\n\n
    \n\n\n\n\n" }, { "path": "78-firebase-ordenar/index.html", "content": "\n\n\n \n Vue\n\n\n
    \n \n \n \n \n
    \n\n\n\n\n" }, { "path": "79-firebase-filtrar/index.html", "content": "\n\n\n \n Vue\n\n\n
    \n\n\n\n\n" }, { "path": "8-instancia-vue/index.html", "content": "\n\n\n\n \n \n Vue.js\n \n \n\n\n\n
    \n

    \n \n 
    {{ $data }}
    \n
    \n
    \n

    {{ mensaje }}

    \n
    \n \n \n\n\n" }, { "path": "8-instancia-vue/js/main.js", "content": "const vm1 = new Vue({\n el: 'main',\n data: {\n mensaje: 'Instancia Vue 1',\n },\n beforeUpdate() {\n console.log('BeforeUpdate: ', this.mensaje);\n },\n updated() {\n console.log('Update: ', this.mensaje);\n },\n methods: {\n alReves(){\n this.mensaje = this.mensaje.split('').reverse().join('');\n }\n },\n computed: {\n mensajeMayusculas(){\n return this.mensaje.toUpperCase();\n }\n }\n});\n\nconst vm2 = new Vue({\n el: '#app',\n data: {\n mensaje: 'Instancia Vue 2',\n }\n});" }, { "path": "9-data-binding-atributos-clases/index.html", "content": "\n\n\n\n \n \n Vue.js\n \n \n \n\n\n\n
    \n

    Tareas

    \n

    {{ tareasCompletadas.length }} completadas

    \n
      \n
    • \n {{ tarea.titulo }}\n
      • \n
    \n 
    {{ $data }}
    \n
    \n \n \n\n\n" }, { "path": "9-data-binding-atributos-clases/js/main.js", "content": "new Vue({\n el: 'main',\n data: {\n tareas: [\n {titulo: 'Hacer la compra', completado: false},\n {titulo: 'Aprender Vue.js', completado: false},\n {titulo: 'Aprender Firebase', completado: false},\n {titulo: 'Dominar ES6', completado: false},\n {titulo: 'Salir a correr', completado: false},\n ]\n },\n methods: {\n completarTarea(tarea) {\n tarea.completado = !tarea.completado;\n }\n },\n computed: {\n tareasCompletadas() {\n return this.tareas.filter((tarea) => tarea.completado);\n }\n }\n});" }, { "path": "README.md", "content": "# Aprende Vue2 y Firebase paso a paso\n\nCurso 100% gratuito. La mejor forma de dar el salto a JavaScript moderno.\n\n## Repositorio del curso\n\nEste 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.\n\n### Más información\n\n* [vue.wmedia.es](http://vue.wmedia.es/) - Landing page del curso.\n* [Curso](http://wmedia.teachable.com/) - Apúntate al curso" } ]