A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Utilizar componentes de terceros

34/38
Recursos

Aportes 55

Preguntas 15

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

Desde febrero de 2021 vue-chartkick laz贸 su version 1.0 la cual solo est谩 para Vue3,

Para aquellos siguiendo el curso con Vue2, pueden instalar la 煤ltima version anterior a ese relese de esta forma:

npm i -S [email protected]

adem谩s yo tuve que instalar espec铆ficamente la versi贸n 2.8.0 de chart.js
npm i -S [email protected]
si ya realizaron la instalaci贸n de versiones anteriores es conveniente actualizar npm

npm update

esto tendr铆a que solucionar el problema

Para evitar confusiones dejo aca el link a la libreria de Spinners.
Sigan las instrucciones al pie de la letra

https://github.com/Saeris/vue-spinners

Cada que avanza me encanta mas este curso! Al terminar comenzare a integrarlo con DjangoREST. Lastima que creo que no podre renovar mi suscripci贸n 馃槶

@TeamPlatzi que tal crear Grandes Proyectos o Big Challenges , donde unamos los conocimientos de distintos cursos, se me ocurre 鈥淏igChallenge! Vue.js + DjangoRest + Materialize + Git Pro鈥 o casos as铆. Donde se vea realmente como deben trabajar en conjunto las distintas 谩reas de conocimiento.

Para dejar un poco limpio el chart en CoinDetail separ茅 el array que mandamos a una computed nombrado chartaData:

<line-chart
  class="my-10"
  :colors="['orange']"
  :min="min"
  :max="max"
  :data="chartData"
/>	

Y la propiedad computada va:

chartData() {
  const data = []
  this.history.map(h => {
    data.push([h.date, parseFloat(h.priceUsd).toFixed(2)])
  })
  return data
}

Instalaci贸n:

npm i -S @saeris/vue-spinners vue-chartkick

Ojo senores en archivos y enlaces el link es incorrecto la libreria de spinners es: https://github.com/Saeris/vue-spinners

Si tienen problemas luego de instalada la dependencia de vue-chartkick algo como:

TypeError: Object(...) is not a function Chart

Esto se debe a la version de la dependencia, deben utilizar la version 0.6.0

$ npm i -S vue-chartkick@0.6.0

Documentaci贸n de Vue Spinners: https://github.com/greyby/vue-spinner
Documentaci贸n de Vue Chartkick: https://github.com/ankane/vue-chartkick

Desde febrero de 2021 vue-chartkick laz贸 su version 1.0 la cual solo est谩 para Vue3,

Para aquellos siguiendo el curso con Vue2, pueden instalar la 煤ltima version anterior a ese relese de esta forma:

npm i -S [email protected]0.6.1

para el dia de hoy 10-12-2021
para utilizar el spinner de

https://github.com/greyby/vue-spinner

basta con instalarlo
importarlo en la vista donde se va a utilizar

import RingLoader from 鈥渧ue-spinner/src/RingLoader.vue鈥;

agregar el componente

components: {
RingLoader,
},

y usarlo en el template

<ring-loader :loading=鈥渋sLoading鈥 :color="鈥#501c94鈥"></ring-loader>

el propertie size ya no se utilza.
y para el Chartkick:

https://github.com/ankane/vue-chartkick

debemos instalarlo
luego importarlo en el main

import VueChartkick from 鈥渧ue-chartkick鈥;
import 鈥渃hartkick/chart.js鈥;

agregarlo con .use

createApp(App)
.use(router)
.use(VueChartkick)
.mount("#app");

luego ya se importa en la vista y en el template como lo muestra en el video

Si alguien en la consola tiene el error de Unknown adapter use Highcharts en lugar de Chart.js, funciona de la misma manera

Vue Spinners visto en clase https://github.com/Saeris/vue-spinners

Para que funcione esto en Vue.js 2 necesitamos espec铆ficamente estas versiones:

Instalamos npm i -S @saeris/vue-spinners [email protected] [email protected]

Si no quieren batallar con las dependencias y usar exactamente la misma versi贸n que el instructor pueden simplemente usar package.json que esta en los recursos y hacer npm install

Ya ha estas alturas a los principiantes ya casi que nos toca aprender lo ya hecho y nos facilitan las cosas, sin dejar de lado los fundamentos.
Y ya en un futuro poder crear nosotros mismos librerias o aportar al codigo libre

Vue 3
.
npm i -S vue-spinners vue-chartkick

main.js

import Chartkick from 'vue-chartkick'
import { VueSpinners } from '@saeris/vue-spinners'
import {Chart} from 'chart.js'

Vue.use(VueSpinners)
Vue.use(Chartkick.use(Chart))

Si estas usando Vue 3, en Noviembre 2020, el paquete de spinners no esta actualizado y solo funciona en Vue 2. Pero, encontre otro que si funciona y es super sencillo, aqui va el link:
https://github.com/greyby/vue-spinner
Buena suerte 馃槃

En mi caso, quiz谩s por la fecha en la que ya ando haciendo el curso me dio problemas la versi贸n de chartkick. En la documentaci贸n indica que se debe usar la version 0.6.1 con Vue 2, pero adem谩s yo tuve que instalar espec铆ficamente la version 2.8.0 de chart.js para que funcionara (un error al acceso de esta librer铆a me dejaba en blanco la carga de la aplicaci贸n). Espero que pueda ser de ayuda a alguien. Tremendo curso! Felicitaciones.

Para los que tiene problemas con la visualizaci贸n del Line-chart en vue 2.x.x, verifiquen que la versi贸n del paquete vue-chartkick en el package.json sea la 0.6.1. caso contrario desinstalen el paquete e instalen esa versi贸n.

que dice el maestro en el minuto 03:05?

_"Que en definitiva es un ' ? ' "_

y que es eso?

Vue Spinners visto en clase:
https://github.com/Saeris/vue-spinners

por alguna rara razon tuve que inicializar isLoading como true para que funcione鈥

Si aparece un error en la instalaci贸n intenta con

npm install [email protected]0.6.1

que es la versi贸n para Vue 2

Hola, si no les funciona el chart y estan trabajando con Vue 2. Asi me funcion贸 a mi:
Run

npm install vue-chartkick chart.js

Y se a帽ade.

import Vue from 'vue鈥
import Chartkick from 'vue-chartkick鈥
import Chart from 鈥榗hart.js鈥

Vue.use(Chartkick.use(Chart))

Genial, lamentablemente la gran mayor铆a de componentes no funcionan para Vue 3, as铆 que tocar谩 quedarse con Vue 2 o reinventar los componentes en Vue 3鈥

Para los que estan usando Vue en su versi贸n 3.x y desean a帽adir el bounce. A mi me funcion贸 de la siguiente forma. Solo hay que hacer modificaciones en el componente Home.vue

<template>
  <div>
    <bounce-loader :loading="isLoading" :color="'#68d391'" :size="'100px'">
    </bounce-loader>
    <px-assets-table v-if="!isLoading" :assets="assets"></px-assets-table>
  </div>
</template>

<script>
import api from "@/api";
import PxAssetsTable from "@/components/PxAssetsTable";
import BounceLoader from "vue-spinner/src/BounceLoader.vue";

export default {
  name: "Home",
  components: {
    PxAssetsTable,
    BounceLoader,
  },

  data() {
    return {
      isLoading: false,
      assets: [],
    };
  },

  created() {
    this.isLoading = true;
    api
      .getAssets()
      .then((assets) => (this.assets = assets))
      .finally(() => (this.isLoading = false));
  },
};
</script>

Qu茅 hace en esa linea, me explican porfa, o como busco esa forma de iterar para entender los conceptos?

history.map(h => [h.date, parseFloat(h.priceUsd).toFixed(2)])

!Hola a todos! He llegado hasta este video y en el home se me queda el loading pegado y no aparece la tabla, descargue el repo de esta clase para correrlo y verificar que no me ha saltado un typo, y tambien sucede los mismo, 驴Alguien tuvo este problema?. Dejo mi repo si alguien le quiere dar un ojo o hasta quizas ambos 馃憖.
https://github.com/jbarriospd/vue-2019/tree/platzi-exchange
Rama platzi-exchange

Este curso es lo mejor!!

integrar componentes o librerias de terceros es algo muy sencillo solo con instalar desde el npm e importar en el main.js podemos hacer uso de las librerias.

2021 y funcionando con vue.js 2 馃槃

  • main.js
import Vue from "vue";
import App from "./App.vue";
import "@/assets/css/tailwind.css";
import router from "@/router";
import Chartkick from 'vue-chartkick'
import { VueSpinners } from '@saeris/vue-spinners'
import {Chart} from 'chart.js'
import { dollarFilter, percentFilter } from "@/filters";

Vue.use(VueSpinners)
Vue.use(Chartkick.use(Chart))
  • Home.vue
<template>
  <div>
    <bounce-loader :loading="isLoading" :color="'#68d391'" :size="100" />
    <px-assets-table v-bind:assets="assets" />
  </div>
</template>

<script>
import PxAssetsTable from "@/components/PxAssetsTable.vue";
import { getAssets } from "@/api";
export default {
  name: "Home",
  components: { PxAssetsTable },
  data() {
    return {
      assets: [],
      isLoading: false,
    };
  },
  created() {
    this.getData();
    this.isLoading = true;
  },
  methods: {
    async getData() {
      try {
        this.assets = await getAssets();
      } catch (error) {
        throw new Error(`Something failed`);
      } finally {
        this.isLoading = false;
      }
    },
  },
};
</script>

  • package.json
  "dependencies": {
    "@saeris/vue-spinners": "^1.0.8",
    "chart.js": "^2.8.0",
    "vue-chartkick": "^0.6.0",
    "core-js": "^3.6.5",
    "numeral": "^2.0.6",
    "tailwindcss": "^1.1.2",
    "vue": "^2.6.11",
    "vue-router": "^3.5.2"
  },
  • api.js
const url = "https://api.coincap.io/v2";

const getAssets = async () => {
  try {
    const req = await fetch(`${url}/assets?limit=20`);
    const res = await req.json();
    return await res.data;
  } catch (error) {
    console.error(error);
    throw new Error(error);
  }
};

const getAsset = async (coin) => {
  try {
    const req = await fetch(`${url}/assets/${coin}`);
    const res = await req.json();
    return await res.data;
  } catch (error) {
    console.error(error);
    throw new Error(error);
  }
};

const getAssetHistory = async (coin) => {
  try {
    const now = new Date();
    const end = now.getTime();
    now.setDate(now.getDate() - 1);
    const start = now.getTime();
    const req = await fetch(
      `${url}/assets/${coin}/history?interval=h1&start=${start}&end=${end}`
    );
    const res = await req.json();
    return await res.data;
  } catch (error) {
    console.log(error);
    throw new Error(error);
  }
};

export { getAssets, getAsset, getAssetHistory };

  • CoinDetail.vue
 methods: {
    async getCoin() {
      try {
        const id = this.$route.params.id;
        this.isLoading = true;
        let [asset, history] = await Promise.all([
          getAsset(id),
          getAssetHistory(id),
        ]);
        this.asset = asset;
        this.history = history;
      } catch (error) {
        console.error(error);
        throw new Error(error);
      } finally {
        this.isLoading = false;
      }
    },
  },

Waaao alg煤n d铆a me justar铆a ser un tipo que tiene un problema y diga: 鈥淒ise帽are una soluci贸n que no solo sirva para mi sino que tambi茅n para que no le suceda a nadie en el mundo entero, y la compartir茅 abierta y gratuitamente para que la puedan usar libremente.鈥 Que fil谩ntropo. Waao

Para los que tengan problema en su codigo con las versiones, ve a tu package.json, remplaza todo por este json que te paso aqui

{
  "name": "platzi-exchange",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@saeris/vue-spinners": "^1.0.8",
    "chart.js": "^2.9.2",
    "core-js": "^3.3.2",
    "numeral": "^2.0.6",
    "tailwindcss": "^1.1.2",
    "vue": "^2.6.10",
    "vue-chartkick": "^0.6.0",
    "vue-router": "^3.1.3"
  },
  "devDependencies": {
    "@ianaya89/vue-cli-plugin-tailwind": "^1.0.2",
    "@vue/cli-plugin-babel": "^4.0.0",
    "@vue/cli-plugin-eslint": "^4.0.0",
    "@vue/cli-service": "^4.0.0",
    "@vue/eslint-config-prettier": "^5.0.0",
    "babel-eslint": "^10.0.3",
    "eslint": "^5.16.0",
    "eslint-plugin-prettier": "^3.1.1",
    "eslint-plugin-vue": "^5.0.0",
    "prettier": "^1.18.2",
    "vue-template-compiler": "^2.6.10"
  }
}

En el caso de que alguien tenga el mismo problema que yo al querer instalar los spinners y las alternativas a estos sin exito. Cree otro componente con un template y estilos sacados de html y css de estos spinners
https://epic-spinners.epicmax.co

<template>
    <div class="orbit-spinner">
        <div class="orbit"></div>
        <div class="orbit"></div>
        <div class="orbit"></div>
    </div>
</template>


<style scoped>
    .orbit-spinner, .orbit-spinner * {
        box-sizing: border-box;
    }

    .orbit-spinner {
        height: 200px;
        width: 200px;
        border-radius: 50%;
        perspective: 800px;
    }

    .orbit-spinner .orbit {
        position: absolute;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }

    .orbit-spinner .orbit:nth-child(1) {
        left: 0%;
        top: 0%;
        animation: orbit-spinner-orbit-one-animation 1200ms linear infinite;
        border-bottom: 3px solid #501c94;
    }

    .orbit-spinner .orbit:nth-child(2) {
        right: 0%;
        top: 0%;
        animation: orbit-spinner-orbit-two-animation 1200ms linear infinite;
        border-right: 3px solid #501c94;
    }

    .orbit-spinner .orbit:nth-child(3) {
        right: 0%;
        bottom: 0%;
        animation: orbit-spinner-orbit-three-animation 1200ms linear infinite;
        border-top: 3px solid #501c94;
    }

    @keyframes orbit-spinner-orbit-one-animation {
        0% {
            transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
        }
        100% {
            transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
        }
    }

    @keyframes orbit-spinner-orbit-two-animation {
        0% {
            transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
        }
        100% {
            transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
        }
    }

    @keyframes orbit-spinner-orbit-three-animation {
        0% {
            transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
        }
        100% {
            transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
        }
    }
</style>

y en el home lo puse asi

<template>
    <div>
        <Loading v-if="isLoading == true"/>
        <px-assets-table :assets='assets' v-if="!isLoading"/>
    </div>
</template>

<script>
import api from '@/api';
import PxAssetsTable from '@/components/PxAssetsTable';
import Loading from '@/components/Loading';

export default {
    components: { 
        PxAssetsTable,
        Loading 
    },
    name: "Home",

    data() {
        return{
            assets: [],
            isLoading: true
        }
    },

    created() {
        this.isLoading = true
        api.getAssets().then( assets => (this.assets = assets)).finally( () => this.isLoading = false)
    }
}
</script>

En mi caso debi importar las librerias de graficado de la siguiente manera:

import Chartkick from 'vue-chartkick'
import {Chart} from 'chart.js'

Vue.use(Chartkick.use(Chart))

,me sale el siguiente error:
驴alguien que me pueda ayudar?

Failed to compile.

./node_modules/chart.js/dist/chart.esm.js
Module build failed: Error: ENOENT: no such file or directory, open 'C:\Users\Yovanna\Desktop\017\nuevocodigo2\vue.js\Exchange\plz-exchange\node_modules\chart.js\dist\chart.esm.js'

馃憣

Cuando instalo: npm install --save @saeris/vue-spinners
me sale error, indica que no es compatible con el SO

Siempre he tenido problemas con la documentacion

recien entre a https://github.com/greyby/vue-spinner
quize instalarlo por mi cuenta y no veo en ningun lado donde dice el import y el use

:C

Me sale el siguiente error鈥 no se que hacer me vuelvo loco por que encima no dice en que linea es!!

![](

Excelente, ya lo hab铆a trabajado, pero las dos que usamos aqui estaban m谩s talachudas de agregar

Me aparece este error, me carga la url pero no el contenido, genero el archivo CoinDetail.vue a partir del repositorio de aqu铆 pero eso me aparece, alguien tiene idea de qu茅 pueda ser?

<code>

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in created hook: 鈥淭ypeError: api__WEBPACK_IMPORTED_MODULE_7_.default.getAsset is not a function鈥

found in

鈥> <CoinDetail> at src/views/CoinDetail.vue
<App> at src/App.vue
<Root>
warn @ vue.runtime.esm.js?2b0e:619
logError @ vue.runtime.esm.js?2b0e:1884
globalHandleError @ vue.runtime.esm.js?2b0e:1879
handleError @ vue.runtime.esm.js?2b0e:1839
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1862
callHook @ vue.runtime.esm.js?2b0e:4219
Vue._init @ vue.runtime.esm.js?2b0e:5008
VueComponent @ vue.runtime.esm.js?2b0e:5154
createComponentInstanceForVnode @ vue.runtime.esm.js?2b0e:3283
init @ vue.runtime.esm.js?2b0e:3114
merged @ vue.runtime.esm.js?2b0e:3301
createComponent @ vue.runtime.esm.js?2b0e:5978
createElm @ vue.runtime.esm.js?2b0e:5925
createChildren @ vue.runtime.esm.js?2b0e:6053
createElm @ vue.runtime.esm.js?2b0e:5954
patch @ vue.runtime.esm.js?2b0e:6477
Vue._update @ vue.runtime.esm.js?2b0e:3945
updateComponent @ vue.runtime.esm.js?2b0e:4066
get @ vue.runtime.esm.js?2b0e:4479
Watcher @ vue.runtime.esm.js?2b0e:4468
mountComponent @ vue.runtime.esm.js?2b0e:4073
Vue.$mount @ vue.runtime.esm.js?2b0e:8415
init @ vue.runtime.esm.js?2b0e:3118
createComponent @ vue.runtime.esm.js?2b0e:5978
createElm @ vue.runtime.esm.js?2b0e:5925
patch @ vue.runtime.esm.js?2b0e:6516
Vue.update @ vue.runtime.esm.js?2b0e:3945
updateComponent @ vue.runtime.esm.js?2b0e:4066
get @ vue.runtime.esm.js?2b0e:4479
Watcher @ vue.runtime.esm.js?2b0e:4468
mountComponent @ vue.runtime.esm.js?2b0e:4073
Vue.$mount @ vue.runtime.esm.js?2b0e:8415
eval @ main.js?56d7:13
./src/main.js @ app.js:1373
webpack_require @ app.js:849
fn @ app.js:151
1 @ app.js:1530
webpack_require @ app.js:849
checkDeferredModules @ app.js:46
(an贸nimo) @ app.js:925
(an贸nimo) @ app.js:928
Mostrar 11 fotogramas m谩s del c贸digo de biblioteca
vue.runtime.esm.js?2b0e:1888 TypeError: api__WEBPACK_IMPORTED_MODULE_7
.default.getAsset is not a function
at VueComponent.getCoin (CoinDetail.vue?264d:123)
at VueComponent.created (CoinDetail.vue?264d:115)
at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
at callHook (vue.runtime.esm.js?2b0e:4219)
at VueComponent.Vue._init (vue.runtime.esm.js?2b0e:5008)
at new VueComponent (vue.runtime.esm.js?2b0e:5154)
at createComponentInstanceForVnode (vue.runtime.esm.js?2b0e:3283)
at init (vue.runtime.esm.js?2b0e:3114)
at merged (vue.runtime.esm.js?2b0e:3301)
at createComponent (vue.runtime.esm.js?2b0e:5978)

Viejo que tal curso! Que b谩rbaro he aprendido, la primera vez que lleve el curso lo odi茅 jaja y ahora me encanta, incluso es uno de los mejores que he llevado!

Casi me pierdo con algunos errores pero pude resolver!!!
Excelente la clase

馃く馃く馃く馃く馃く

npm i -S vue-spinner vue-chartkick

驴A alguien m谩s le sale esto?

vue.runtime.esm.js?2b0e:5106 Uncaught TypeError: Cannot read property 'install' of undefined
    at Function.Vue.use (vue.runtime.esm.js?2b0e:5106)
    at eval (main.js?56d7:12)
    at Module../src/main.js (app.js:1384)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at Object.1 (app.js:1541)
    at __webpack_require__ (app.js:849)
    at checkDeferredModules (app.js:46)
    at app.js:925
    at app.js:928

Mi main es este

import Vue from "vue";
import App from "./App.vue";
import "@/assets/css/tailwind.css";

import Chart from "chart.js";
import Chartkick from "vue-chartkick";
import { vueSpinners } from "@saeris/vue-spinners";

import router from "@/router";
import { dollarFilter, percentFilter } from "@/filters";

Vue.use(vueSpinners);
Vue.use(Chartkick.use(Chart));
Vue.filter("dollar", dollarFilter);
Vue.filter("percent", percentFilter);
Vue.config.productionTip = false;

new Vue({
  router,
  render: h => h(App),
}).$mount("#app");

mi package.json es

  "dependencies": {
    "@saeris/vue-spinners": "^1.0.8",
    "chart.js": "^2.9.4",
    "core-js": "^3.6.5",
    "numeral": "^2.0.6",
    "tailwindcss": "^1.1.2",
    "vue": "^2.6.11",
    "vue-chartkick": "^0.6.1",
    "vue-router": "^3.4.9"
  },
  "devDependencies": {
    "@ianaya89/vue-cli-plugin-tailwind": "~1.1.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-vue": "^6.2.2",
    "prettier": "1.19.1",
    "vue-template-compiler": "^2.6.11"
  }

y el home

<template>
  <div>
    <bounce-loader :loading="isLoading" :color="'#68d391'" :size="100" />
    <px-assets-table :assets="assets" />
  </div>
</template>

<script>
import PxAssetsTable from "@/components/PxAssetsTable";
import api from "@/api";

export default {
  name: "Home",
  components: { PxAssetsTable },

  data() {
    return {
      isLoading: false,
      assets: [],
    };
  },
  created() {
    this.isLoading = true;
    api
      .getAssets()
      .then(assets => (this.assets = assets))
      .finally(() => (this.isLoading = false));
  },
};
</script>

<style></style>

Me sale un error al renderizar la gr谩fica:

[Vue warn]: Error in render: 鈥淭ypeError: Object(鈥) is not a function鈥

found in

鈥> <LineChart>
<CoinDetail> at src/views/CoinDetail.vue
<App> at src/App.vue
<Root>

mucho mejor usar ring-loader que el bounce.loader, me gusto la estetica

Este curso esta genial. Cada d铆a me parece mas hermoso Vue

Estoy siguiendo las pasos al pie de la letra pero veo que no tiene funcionalidad para vue 3

Graficos

Para Vue 3, en Noviembre 2020. No hay soporte en chart.js por ahora: https://github.com/apertureless/vue-chartjs/issues/637