Utilisation de Vue.js pour créer un tableau de bord météo interactif avec des API

Prenez un moment pour actualiser la page Web à l'adresse localhost: 8080 et voir le changement reflété dans la barre de titre de l'onglet du navigateur – il devrait indiquer «Vue Weather Dashboard». Cependant, il s’agissait simplement de vous montrer comment procéder pour apporter des modifications et vérifier s’il fonctionne. Nous avons plus de choses à faire!

Cette page HTML simple manque beaucoup de choses que nous souhaitons dans notre projet, notamment les suivantes:

• Quelques méta-informations
• Les liens au format CDN vers Bootstrap (framework CSS)
• vers feuille de style personnalisée (à ajouter dans le projet)
• Pointeurs sur l'API de géolocalisation de Google Maps à partir de la balise        
       

  Enregistrez le fichier et actualisez la page Web. Vous avez peut-être remarqué une légère secousse pendant le chargement de la page - cela est principalement dû au fait que le style de page est maintenant contrôlé par Bootstrap et que les éléments de style tels que les polices, l'espacement, etc. sont différents de ceux par défaut. plus tôt (si vous n’êtes pas sûr, revenez à la valeur par défaut et voyez la différence.)

  
  

  Note : Avant de poursuivre, l'URL de l'API Google Maps contient une clé qui est une propriété de FusionCharts. Pour le moment, vous pouvez utiliser cette clé pour construire le projet, car nous ne voulons pas que vous vous perdiez dans ce type de détails infimes (qui peuvent être une source de distraction lorsque vous êtes nouveau). Cependant, nous vous incitons vivement à générer et utiliser votre propre clé d’API Google Maps une fois que vous avez progressé et que vous êtes à l’aise pour prêter attention à ces petits détails.

  package.json

  Au moment de la rédaction, nous avons utilisé certaines versions des packages npm pour notre projet, et nous savons avec certitude que ces éléments fonctionnent ensemble. Cependant, au moment où vous exécutez le projet, il est fort possible que les dernières versions stables des packages que npm télécharge pour vous ne soient pas les mêmes que ceux que nous utilisions, ce qui pourrait casser le code (ou faire des choses au-delà). notre contrôle). Il est donc très important d’avoir exactement le même fichier package.json qui a été utilisé pour générer ce projet, afin que notre code / explications et les résultats obtenus soient cohérents.

  Le fichier package.json devrait être:

   {
   "name": "vue_weather_dashboard",
   "description": "Un projet Vue.js",
   "version": "1.0.0",
   "author": "FusionCharts",
   "licence": "MIT",
   "privé": vrai,
   "scripts": {
     "dev": "cross-env NODE_ENV = développement webpack-dev-server --open --hot",
     "build": "cross-env NODE_ENV = pack de production --progress --hide-modules"
   },
   "dépendances": {
     "axios": "^ 0.18.0",
     "babel": "^ 6.23.0",
     "babel-cli": "^ 6.26.0",
     "babel-polyfill": "^ 6.26.0",
     "fusioncharts": "^ 3.13.3",
     "moment": "^ 2.22.2",
     "moment-fuseau horaire": "^ 0.5.21",
     "vue": "^ 2.5.11",
     "vue-fusioncharts": "^ 2.0.4"
   },
   "liste de navigateurs": [
     "> 1%",
     "2 dernières versions",
     "not ie 

  Nous vous encourageons à parcourir le nouveau package.json et à déterminer quelles sont les fonctions de différents objets du json. Vous préférerez peut-être modifier la valeur de l'auteur" "clé de votre nom. De plus, les paquets mentionnés dans les dépendances se révéleront au bon moment dans le code. Pour le moment, il suffit de savoir que:

  • babel - les paquets associés permettent de gérer correctement le code de style ES6 par le navigateur;
  • axios traite les demandes basées sur la promesse ;
  • moment et moment -timezone sert à la manipulation de la date / heure;
  • fusioncharts et vue-fusioncharts sont responsables du rendu des graphiques:
  • vue pour des raisons évidentes.

  webpack.config.js

  Comme pour package.json nous vous suggérons de maintenir un webpa ck.config.js qui correspond à celui que nous avons utilisé pour construire le projet. Cependant, avant d’apporter des modifications, nous vous recommandons de comparer soigneusement le code par défaut du fichier webpack.config.js et le code fourni ci-dessous. Vous remarquerez quelques différences - google les et avoir une idée de base de ce qu'ils signifient. Comme l'explication détaillée des configurations de WebPack dépasse le cadre de cet article, vous êtes autonome à cet égard.

  Le fichier personnalisé webpack.config.js est le suivant:

   var chemin = require ('path')
  var webpack = require ('webpack')
  
  module.exports = {
   entrée: ['babel-polyfill', './src/main.js'],
   sortie: {
     path: path.resolve (__ dirname, './dist'),
     publicPath: '/ dist /',
     nom du fichier: 'build.js'
   },
   module: {
     règles: [
       {
         test: /.css$/,
         use: [
           'vue-style-loader',
           'css-loader'
         ],
       }, {
         test: /.vue$/,
         loader: 'vue-loader',
         options: {
           chargeurs: {
           }
           // autres options de vue-loader allez ici
         }
       },
       {
         test: /.js$/,
         chargeur: 'babel-loader',
         exclure: / node_modules /
       },
       {
         test: /.(png|jpg|gif|svg)$/,
         loader: 'chargeur de fichiers',
         options: {
           nom: "[name]. [ext]? [hash]"
         }
       }
     ]
   },
   résoudre: {
     alias: {
       'vue $': 'vue / dist / vue.esm.js'
     },
     extensions: ['*', '.js', '.vue', '.json']
   },
   devServer: {
     historyApiFallback: true,
     noInfo: true,
     superposition: vrai,
     hôte: '0.0.0.0',
     port: 8080
   },
   performance: {
     allusions: faux
   },
   devtool: '# eval-source-map'
  }
  
  if (process.env.NODE_ENV === 'production') {
   module.exports.devtool = '# source-map'
   // http://vue-loader.vuejs.org/fr/workflow/production.html
   module.exports.plugins = (module.exports.plugins || []). concat ([
     new webpack.DefinePlugin({
       'process.env': {
         NODE_ENV: '"production"'
       }
     }),
     new webpack.optimize.UglifyJsPlugin({
       sourceMap: true,
       compress: {
         warnings: false
       }
     }),
     new webpack.LoaderOptionsPlugin({
       minimize: true
     })
   ])
  }
  

  Avec les modifications apportées au projet webpack.config.js il est impératif d'arrêter le serveur de développement en cours d'exécution ( Ctrl + C ). et redémarrez-le avec la commande suivante exécutée à partir du répertoire du projet après avoir installé tous les packages mentionnés dans le fichier package.json :

   npm install
  
  npm run dev
  

  Avec cela, se termine l'épreuve consistant à peaufiner les configurations et à s'assurer que les bons packages sont en place. Cependant, cela marque également le chemin de la modification et de l'écriture de code, ce qui est un peu long mais aussi très enrichissant!

  src / main.js

  Ce fichier est la clé de l'orchestration de haut niveau du projet - il est voici ce que nous définissons:

  • Quelles sont les dépendances de niveau supérieur (où obtenir les packages npm les plus importants nécessaires);
  • Comment résoudre les dépendances, ainsi que les instructions à Vue pour l'utilisation de plugins / wrappers, le cas échéant; [19659015] Instance Vue qui gère le composant le plus important du projet: src / App.vue (fichier nodal .vue ).

  Conformément à nos objectifs pour le src / main.js le code devrait être:

   // Importez les dépendances et les modules nécessaires.
  importer Vue de 'vue';
  importer l'application depuis './App.vue';
  importer des FusionCharts à partir de 'fusioncharts';
  importer des graphiques à partir de "fusioncharts / fusioncharts.charts";
  importer des widgets à partir de 'fusioncharts / fusioncharts.widgets';
  importer des PowerCharts à partir de 'fusioncharts / fusioncharts.powercharts';
  importer FusionTheme à partir de 'fusioncharts / themes / fusioncharts.theme.fusion';
  importer VueFusionCharts à partir de 'vue-fusioncharts';
  
  // Résoudre les dépendances
  Les graphiques (FusionCharts);
  PowerCharts (FusionCharts);
  Widgets (FusionCharts);
  FusionTheme (FusionCharts);
  
  // Enregistrer globalement les composants pour une utilisation dans l'ensemble du projet
  Vue.use (VueFusionCharts, FusionCharts);
  
  // Instancie l'instance Vue qui contrôle l'application
  nouveau Vue ({
   el: '#app',
   rendre: h => h (App)
  })
  

  src / App.vue

  Il s'agit de l'un des fichiers les plus importants de l'ensemble du projet. Il représente le composant le plus haut de la hiérarchie - l'ensemble de l'application elle-même. Pour notre projet, cette composante fera le gros du travail, que nous explorerons plus tard. Pour l'instant, nous voulons supprimer le passe-partout par défaut et mettre quelque chose de propre.

  Si vous connaissez encore mieux la façon dont Code a organisé le code, il serait préférable de se faire une idée de la structure générale au sein du . ] .vue fichiers. Les fichiers .vue se composent de trois sections:

  • Modèle
    C'est ici que le modèle HTML de la page est défini. Outre le code HTML statique, cette section contient également la méthode d’incorporation de contenu dynamique de Vue à l’aide des doubles accolades {{}} .
  • Script
    Le code JavaScript qui régit cette section est la responsabilité de la génération contenu dynamique qui va et se repose dans le modèle HTML aux endroits appropriés. Cette section est principalement un objet qui est exporté et comprend:
    • Données
      Il s'agit d'une fonction elle-même, qui renvoie généralement certaines données souhaitées encapsulées dans une structure de données intéressante.
    • Méthodes
      Un objet qui consiste en une ou plusieurs fonctions / méthodes, chacune qui manipule généralement les données d’une manière ou d’une autre, et contrôle également le contenu dynamique du modèle HTML.
    • Calculée
      Tout comme l’objet méthode décrit ci-dessus avec une distinction importante: toutes les fonctions de l’objet méthode sont identiques. sont exécutées à chaque appel de l'une d'entre elles, les fonctions de l'objet calculé se comportent beaucoup plus judicieusement et s'exécutent si et seulement si cet appel a été appelé.
  • Style
    Cette section concerne le style CSS qui s'applique au code HTML de la page (écrit dans un modèle) - placez le bon vieux CSS ici pour rendre vos pages superbes!

  Conserver le paradigme ci-dessus l'esprit, personnalisons le code au minimum dans App.vue :

  N'oubliez pas que l'extrait de code ci-dessus sert simplement à vérifier que App.vue utilise notre propre code. Il faudra ensuite beaucoup de modifications, mais enregistrez d'abord le fichier et actualisez la page sur le navigateur.

  
  

  À ce stade, c’est probablement une bonne idée de demander de l’aide en outillage. Consultez la Vue devtools pour Chrome et si vous n’avez pas beaucoup de problèmes à utiliser Google Chrome comme navigateur par défaut pour le développement, installez l’outil et jouez un peu avec lui. Cela s'avérera extrêmement pratique pour le développement ultérieur et le débogage, lorsque la situation deviendra plus compliquée.

  Répertoires et fichiers supplémentaires

  La ​​prochaine étape consistera à ajouter des fichiers supplémentaires afin que la structure de notre projet soit complète. Nous ajouterions les répertoires et les fichiers suivants:

  Note : Enregistrez les fichiers .svg avec hyperliens dans votre projet.

  Créez les répertoires et les fichiers. mentionné ci-dessus. La structure finale du projet doit ressembler (rappelez-vous de supprimer les dossiers et les fichiers de la structure par défaut désormais inutiles):

   vue_weather_dashboard /
  | --- LISEZMOI.md
  | --- node_modules /
  | | --- ...
  | | --- ...
  | | --- [many npm packages we installed]
  | | --- ...
  | | --- ...
  | --- package.json
  | --- package-lock.json
  | --- webpack.config.js
  | --- index.html
  | --- src /
  | | --- App.vue
  | | --- css /
  | | | --- style.css
  | | --- actifs /
  | | | --- calendar.svg
  | | | --- location.svg
  | | | --- location.svg
  | | | --- winddirection.svg
  | | | --- windspeed.svg
  | | --- main.js
  | | --- composants /
  | | | --- Content.vue
  | | | --- Highlights.vue
  | | | --- TempVarChart.vue
  | | | --- UVIndex.vue
  | | | --- Visibility.vue
  | | | --- WindStatus.vue
  

  Il peut y avoir d'autres fichiers, tels que .babelrc .gitignore .editorconfig etc. dans le dossier racine du projet. Vous pouvez les ignorer en toute sécurité pour le moment.

  Dans la section suivante, nous allons ajouter un contenu minimal aux nouveaux fichiers ajoutés et tester leur fonctionnement.

  src / css / style.css [19659115] Bien que cela ne soit pas très utile immédiatement, copiez le code suivant dans le fichier:

   @import url ("https://fonts.googleapis.com/css?family=Roboto:300,400,500");
  
  :racine {
     taille de police: 62,5%;
  }
  
  corps {
     famille de polices: Roboto;
     poids de la police: 400;
     largeur: 100%;
     marge: 0;
     taille de la police: 1.6rem;
  }
  
  #sidebar {
     position: relative;
     affichage: flex;
     direction de flexion: colonne;
     image d'arrière-plan: gradient linéaire (-180deg, # 80b6db 0%, # 7da7e2 100%);
  }
  
  #chercher {
     text-align: center;
     hauteur: 20vh;
     position: relative;
  }
  
  # location-input {
     hauteur: 42px;
     largeur: 100%;
     opacité: 1;
     bordure: 0;
     border-radius: 2px;
     couleur de fond: rgba (255, 255, 255, 0.2);
     marge supérieure: 16px;
     padding-left: 16px;
     couleur: #ffffff;
     taille de la police: 1.8rem;
     hauteur de ligne: 21px;
  }
  
  # location-input: focus {
     contour: aucun;
  }
  
  :: espace réservé {
     couleur: #FFFFFF;
     opacité: 0,6;
  }
  
  #météo actuelle {
     couleur: #ffffff;
     taille de police: 8rem;
     hauteur de ligne: 106px;
     position: relative;
  }
  
  # météo actuelle> span {
     couleur: #ffffff;
     taille de la police: 3.6rem;
     hauteur de ligne: 42px;
     alignement vertical: super;
     opacité: 0,8;
     en haut: 15px;
     position: absolue;
  }
  
  # weather-desc {
     taille de la police: 2.0rem;
     couleur: #ffffff;
     poids de la police: 500;
     hauteur de ligne: 24px;
  }
  
  #possibility {
     couleur: #ffffff;
     taille de police: 16px;
     poids de la police: 500;
     hauteur de ligne: 19px;
  }
  
  # max-detail,
  # min-detail {
     couleur: #ffffff;
     taille de la police: 2.0rem;
     poids de la police: 500;
     hauteur de ligne: 24px;
  }
  
  # max-detail> i,
  # min-detail> i {
     style de police: normal;
     hauteur: 13.27px;
     largeur: 16.5px;
     opacité: 0,4;
  }
  
  # max-detail> span,
  # min-detail> span {
     couleur: #ffffff;
     famille de polices: Roboto;
     taille de la police: 1.2rem;
     hauteur de ligne: 10px;
     alignement vertical: super;
  }
  
  # max-summary,
  # min-summary {
     opacité: 0,9;
     couleur: #ffffff;
     taille de la police: 1.4rem;
     hauteur de ligne: 16px;
     marge supérieure: 2px;
     opacité: 0,7;
  }
  
  # search-btn {
     position: absolue;
     à droite: 0;
     en haut: 16px;
     rembourrage: 2px;
     z-index: 999;
     hauteur: 42px;
     largeur: 45px;
     couleur de fond: rgba (255, 255, 255, 0.2);
     bordure: aucune;
  }
  
  # contenu du tableau de bord {
     text-align: center;
     hauteur: 100vh;
  }
  
  # date-desc,
  # location-desc {
     couleur: #ffffff;
     taille de la police: 1.6rem;
     poids de la police: 500;
     hauteur de ligne: 19px;
     marge inférieure: 15 px;
  }
  
  # date-desc> img {
     en haut: -3px;
     position: relative;
     marge droite: 10px;
  }
  
  # location-desc> img {
     en haut: -3px;
     position: relative;
     marge gauche: 5px;
     marge droite: 15px;
  }
  
  # location-detail {
     opacité: 0,7;
     couleur: #ffffff;
     taille de la police: 1.4rem;
     hauteur de ligne: 20px;
     marge gauche: 35px;
  }
  
  .centered {
     position: fixe;
     en haut: 45%;
     à gauche: 50%;
     transformer: traduire (-50%, -50%);
  }
  
  .max-desc {
     largeur: 80px;
     float: gauche;
     marge droite: 28px;
  }
  
  .temp-max-min {
     marge supérieure: 40px
  }
  
  # contenu du tableau de bord {
     couleur de fond: # F7F7F7;
  }
  
  .custom-card {
     background-color: #FFFFFF! important;
     bordure: 0! important;
     margin-top: 16px! important;
     margin-bottom: 20px! important;
  }
  
  .custom-content-card {
     background-color: #FFFFFF! important;
     bordure: 0! important;
     margin-top: 16px! important;
     margin-bottom: 0px! important;
  }
  
  .header-card {
     hauteur: 50vh;
  }
  
  .content-card {
     hauteur: 43vh;
  }
  
  .card-divider {
     marge supérieure: 0;
  }
  
  .content-header {
     couleur: # 8786A4;
     taille de la police: 1.4rem;
     hauteur de ligne: 16px;
     poids de la police: 500;
     remplissage: 15px 10px 5px 15px;
  }
  
  .highlights-item {
     hauteur minimale: 37vh;
     hauteur maximale: 38vh;
     couleur de fond: #FFFFFF;
  }
  
  
  .card-heading {
     couleur: RGB (33, 34, 68);
     taille de la police: 1.8rem;
     poids de la police: 500;
     hauteur de ligne: 21px;
     text-align: center;
  }
  
  .card-sous-rubrique {
     couleur: # 73748C;
     taille de la police: 1.6rem;
     hauteur de ligne: 19px;
  }
  
  .card-value {
     couleur: # 000000;
     taille de la police: 1.8rem;
     hauteur de ligne: 21px;
  }
  
  span text {
     poids de la police: 500! important;
  }
  
  hr {
     rembourrage en haut: 1.5px;
     rembourrage en bas: 1px;
     marge inférieure: 0;
     marge supérieure: 0;
     hauteur de ligne: 0.5px;
  }
  
  Écran @média uniquement et (largeur minimale: 768 pixels) {
     #sidebar {
         hauteur: 100vh;
     }
  
     #Info {
         position: fixed;
         bottom: 50px;
         largeur: 100%;
         padding-left: 15px;
     }
  
     .wrapper-right {
         margin-top: 80px;
     }
  }
  
  @media only screen and (min-width:1440px) {
     #sidebar {
         width: 350px;
         max-width: 350px;
         flex: auto;
     }
  
     #dashboard-content {
         width: calc(100% — 350px);
         max-width: calc(100% — 350px);
         flex: auto;
     }
  }
  

  src/assets/

  In this directory, download and save the .svg files mentioned below:

  src/components/Content.vue

  This is what we call a dumb component — a placeholder, that is there just to maintain the hierarchy, and essentially passes on data to its child components.

  Remember that there is no technical bar for writing all our code in the App.vue file, but we take the approach of splitting up the code by nesting the components for two reasons:

  • To write clean code, which aids readability and maintainability;
  • To replicate the same structure that we will see on screen, i.e., the hierarchy.

  Before we nest the component defined in Content.vue within the root component App.vuelet’s write some toy (but educational) code for Content.vue:

  In the code, carefully observe and understand the following:

  • Within the

    
    

    With the data defined and passed from the source (parent component), it is now the child’s responsibility to receive the data and render it appropriately, as explained in the next two steps.

    • Receiving the data by the child
      The child component, in this case Content.vuemust receive the weather_data object send to it by the parent component App.vue. Vue.js provides a mechanism to do so — all you need is an array object called propsdefined in the default object exported by Content.vue. Each element of the array props is a name of the data objects it wants to receive from its parent. For now, the only data object that it is supposed to receive is weather_data from App.vue. Thus, the props array looks like:
    • Rendering the data in the page
      Now that we have ensured receiving the data, the last task we need to complete is to render the data. For this example, we will directly dump the received data on the web page, just to illustrate the technique. However, in real applications (like the one we are about to build), data normally goes through lots of processing, and only the relevant parts of it are displayed in ways that suits the purpose. For example, in this project we will eventually get raw data from the weather API, clean and format it, feed the data to the data structures necessary for the charts, and then visualize it. Anyway, to display the raw data dump, we will just use the {{ }} brackets that Vue understands, as shown in the snippet below:

    It’s now time to assimilate all the bits and pieces. The code for Content.vue — at its current status — is given below:

    
    

    After making the changes discussed above, refresh the webpage on the browser and see how it looks. Take a moment to appreciate the complexity that Vue handles — if you modify the weather_data object in App.vueit gets silently conveyed to Content.vueand eventually to the browser displaying the webpage! Try by changing the value for the key location.

    Although we have learned about props and data binding using static data, we will be using dynamic data collected using web APIs in the application, and will change the code accordingly.

    Summary

    Before we move on to the rest of the .vue files, let’s summarize what we have learnt while we wrote the code for App.vue and components/Content.vue:

    • The App.vue file is what we call the root component — the one that sits at the top of the component hierarchy. The rest of the .vue files represents components that are its direct child, grandchild, and so on.
    • The Content.vue file is a dummy component — its responsibility is to pass on the data to levels below and maintain the structural hierarchy, so that our code remains consistent with the philosophy “*what we see is what we implement*”.
    • The parent-child relationship of component does not happen out of thin air — you must register a component (either globally or locally, depending on the intended usage of the component), and then nest it using custom HTML tags (whose spellings are the exact same as that of the names with which the components has been registered).
    • Once registered and nested, data is passed on from parent to child components, and the flow is never reverse (bad things will happen if the project architecture allows backflow). The parent component is the relative source of the data, and it passes down relevant data to its children using the v-bind directive for the attributes of the custom HTML elements. The child receives the data intended for it using props, and then decides on its own what to do with the data.

    For the rest of the components, we will not indulge in detailed explanation — we will just write the code based on the learnings from the above summary. The code will be self-evident, and if you get confused about the hierarchy, refer to the diagram below:

    
    

    The diagram says that TempVarChart.vue and Highlights.vue are the direct child of Content.vue. Thus, it might be a good idea to prepare Content.vue for sending data to those components, which we do using the code below:

    Once you save this code, you will get errors — don’t worry, it is expected. It will be fixed once you have the rest of the component files ready. If it bothers you not to be able to see the output, comment out the lines containing the custom element tags and .

    For this section, this is the final code of Content.vue. For the rest of this section, we will reference to this codeand not the previous ones that we wrote for learning.

    src/components/TempVarChart.vue

    With its parent component Content.vue passing on the data, TempVarChart.vue must be set up to receive and render the data, as shown in the code below:

    src/components/Highlights.vue

    This component will also receive data from App.vue — its parent component. After that, it should be linked with its child components, and relevant data should be passed on to them.

    Let’s first see the code for receiving data from the parent:

    At this point, the web page looks like the image below:

    
    

    Now we need to modify the code of Highlights.vue to register and nest its child components, followed by passing the data to children. The code for it is as follows:

    Once you save the code and see the web page, you are expected to see errors in the Developer Console tool provided by the browser; they appear because although Highlights.vue is sending data, nobody is receiving them. We are yet to write the code for the children of Highlights.vue.

    Observe that we have not done much of the data processing, i.e, we have not extracted the individual factors of weather data that goes under the Highlights section of the dashboard. We could have done that in the data() function, but we preferred to keep Highlights.vue a dumb component that just passes on the entire data dump it receives to each of the children, who then own their own extracts what is necessary for them. However, we encourage you to try out extracting data in the Highlights.vueand send relevant data down to each child component — it’s a good practice exercise nonetheless!

    src/components/UVIndex.vue

    The code for this component receives the data dump of highlights from Highlights.vueextracts the data for UV Index, and renders it on the page.

    src/components/Visibility.vue

    The code for this component receives the data dump of highlights from Highlights.vueextracts the data for Visibility, and renders it on the page.

    src/components/WindStatus.vue

    The code for this component receives the data dump of highlights from Highlights.vueextracts the data for Wind Status (speed and direction), and renders it on the page.

    After adding the code for all the components, take a look at the web page on the browser.

    
    

    Not to dishearten, but all these toiling was just to link the components in hierarchy, and test out whether data flow is happening between them or not! In the next section, we will throw away most of the code we have written so farand add a lot more pertaining to the actual project. However, we will certainly retain the structure and nesting of the components; the learnings from this section will allow us to build a decent dashboard with Vue.js.

    4. Data Acquisition And Processing

    Remember the weather_data object in App.vue? It had some hard-coded data that we used to test whether all the components are working correctly, and also to help you learn some basic aspects of Vue application without getting bogged down in the details of real-world data. However, it’s now time that we shed our shell, and step out into the real world, where data from the API will dominate most of our code.

    Preparing Child Components To Receive And Process Real Data

    In this section, you will get code dump for all the components except App.vue. The code will handle receiving real data from App.vue (unlike the code we wrote in the previous section to receive and render dummy data).

    We strongly encourage to read the code of each component carefully, so that you form an idea of what data each of those components are expecting, and will eventually use in visualization.

    Some of the code, and the overall structure, will be similar to the ones you have seen in the previous structure — so you will not face something drastically different. However, the devil is in the details! So examine the code carefully, and when you have understood them reasonably well, copy the code to the respective component files in your project.

    Note: All the components in this section are in the src/components/ directory. So each time, the path will not be mentioned — only the .vue file name will be mentioned to identify the component.

    Content.vue

    The following changes have been made from the previous code:

    • In the