{"id":9552,"date":"2021-09-14T06:48:14","date_gmt":"2021-09-14T06:48:14","guid":{"rendered":"https:\/\/exceptionly.com\/?p=9552"},"modified":"2022-06-29T16:40:43","modified_gmt":"2022-06-29T16:40:43","slug":"how-to-start-coding-vuejs-in-60-minutes","status":"publish","type":"post","link":"https:\/\/exceptionly.com\/ar\/2021\/09\/14\/how-to-start-coding-vuejs-in-60-minutes\/","title":{"rendered":"How to start coding VueJS in 60 minutes"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"9552\" class=\"elementor elementor-9552\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-5e93468 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"5e93468\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-b96b995\" data-id=\"b96b995\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-e677720 elementor-widget elementor-widget-text-editor\" data-id=\"e677720\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>VueJS is an open-source Javascript framework for building single-page user interfaces.<\/p><p>Evan You &#8211; the author of VueJS, decided to implement VueJS when working for Google and using AngularJS for several projects. So he dropped the bad parts of AngularJS and extracted the parts he likes to form his new fancy framework VueJS.<\/p><p>As a backend-focused software engineer who challenged many JS frameworks and libraries such as BackboneJS, KnockoutJS, AngularJS, and ReactJS, I find the Vue as the easiest one to implement something with. You do not have to have broad Javascript knowledge to create an application in minutes with VueJS. But of course, \u201ceasy to implement &#8221; is not the only argument we are looking for, so let&#8217;s check other core features at a high level.<\/p><ul><li aria-level=\"1\">Lightweight,\u00a0<\/li><li aria-level=\"1\">Simple and readable<\/li><li>Virtual DOM rendering<\/li><li>Two-way data binding<\/li><li aria-level=\"1\">Component support<\/li><\/ul><h2><b>An Interactive VueJS Project\u00a0<\/b><\/h2><div>This tutorial aims to practice VueJS-3 with Axios at the beginner level.\u00a0<\/div><p>For building large-scale Vue applications, you need to install <a href=\"https:\/\/nodejs.org\/en\/\">node.js<\/a> on your machine.<\/p><h3>How to install Vue<\/h3><p>To install the latest stable version of Vue, run the below command on the terminal;<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-6d6c866 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"6d6c866\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-78f6c1e\" data-id=\"78f6c1e\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-ea21f3f elementor-widget elementor-widget-code-highlight\" data-id=\"ea21f3f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-dark copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript \">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>$ npm install -g @vue\/cli@latest\n\nadded 1 package, and audited 2 packages in 653ms\nfound 0 vulnerabilities<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-ef4199f elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"ef4199f\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-6577e4a\" data-id=\"6577e4a\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-49f1058 elementor-widget elementor-widget-text-editor\" data-id=\"49f1058\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Troubleshooting: if you get a similar error as below, which mentions that the package.json is not found, you probably have a package-lock.json file under your user. Just delete it and try again.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-e255339 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"e255339\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-e69a809\" data-id=\"e69a809\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-54d290a elementor-widget elementor-widget-code-highlight\" data-id=\"54d290a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-dark copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript \">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>npm ERR! code ENOENT\nnpm ERR! syscall open\nnpm ERR! path \/Users\/<your_user>\/package.json\nnpm ERR! errno -2\nnpm ERR! enoent ENOENT: no such file or directory, open '\/Users\/<your_user>\/package.json'\nnpm ERR! enoent This is related to npm not being able to find a file.\nnpm ERR! enoent \n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-1a9da08 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"1a9da08\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-d64d63f\" data-id=\"d64d63f\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-38e9f3e elementor-widget elementor-widget-text-editor\" data-id=\"38e9f3e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3>How to create a project with Vue<\/h3><p>You can spawn up a project in minutes with Vue. Run the below command to initiate an application.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-071adfd elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"071adfd\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-6786f6b\" data-id=\"6786f6b\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-e8ddf71 elementor-widget elementor-widget-code-highlight\" data-id=\"e8ddf71\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-dark copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript \">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>\n$ vue create my-first-vue-app\n> Default (Vue 3) ([Vue 3] babel, eslint) \n\n\ud83c\udf89  Successfully created project my-first-vue-app.\n\ud83d\udc49  Get started with the following commands:\n $ cd my-first-vue-app\n $ npm run serve\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-34bdfb6 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"34bdfb6\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-c1bc825\" data-id=\"c1bc825\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-f2fc020 elementor-widget elementor-widget-text-editor\" data-id=\"f2fc020\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Fire your very first Vue application with the <\/span><span style=\"font-weight: 400;\">\u201c<\/span><span style=\"font-weight: 400;\"> npm run serve<\/span><span style=\"font-weight: 400;\">\u201d command<\/span><span style=\"font-weight: 400;\"> in the project directory.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-47ba58e elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"47ba58e\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-daeb9ed\" data-id=\"daeb9ed\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-ebd30ee elementor-widget elementor-widget-code-highlight\" data-id=\"ebd30ee\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-dark copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript \">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>$ cd my-first-vue-app\n$ npm run serve\n\n DONE  Compiled successfully in 2183ms                                \n  App running at:\n  - Local:   http:\/\/localhost:8080\/ \n\n  Note that the development build is not optimized.\n  To create a production build, run npm run build.\n <\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-a164020 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"a164020\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-f4d79a6\" data-id=\"f4d79a6\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-856d1c5 elementor-widget elementor-widget-text-editor\" data-id=\"856d1c5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Now we have a user interface that is running on localhost:8080. It is time to enrich this UI with some dynamic features.<\/p><h2>Using Axios to consume Data from an API<\/h2><p><a href=\"https:\/\/www.npmjs.com\/package\/axios\">Axios<\/a> is an HTTP client for interacting with APIs. I will show how to fetch data with REST API from a public source and display it in the next steps.<\/p><h3>Axios Installation<\/h3>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-01301da elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"01301da\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-b9e5c93\" data-id=\"b9e5c93\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-df5ea2c elementor-widget elementor-widget-code-highlight\" data-id=\"df5ea2c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-dark copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript \">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>npm install --save axios vue-axios<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-d6e6c0d elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"d6e6c0d\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-b39f609\" data-id=\"b39f609\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-aa07a79 elementor-widget elementor-widget-text-editor\" data-id=\"aa07a79\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Import and use Axios in src\/main.js file in the my-first-vue-app application, update the code;<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-5baf9a8 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"5baf9a8\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-a9e3a4b\" data-id=\"a9e3a4b\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-34fbcd8 elementor-widget elementor-widget-code-highlight\" data-id=\"34fbcd8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-dark copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript \">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>import { createApp } from 'vue'\nimport App from '.\/App.vue'\nimport axios from 'axios'\nimport VueAxios from 'vue-axios'\n \nconst app = createApp(App)\napp.use(VueAxios, axios)\napp.mount('#app')<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-08a6312 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"08a6312\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-99fac90\" data-id=\"99fac90\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-633affe elementor-widget elementor-widget-text-editor\" data-id=\"633affe\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3>Making an API request with Axios<\/h3><p>I will be using the <a href=\"https:\/\/api.artic.edu\/docs\/#introduction\">\u00a0Art Institute of Chicago API<\/a> to fetch artwork data in JSON formatted and display it in an iteration.<\/p><p>Create a function to fetch artworks from Art Institute of Chicago API with Axios. We will place this code in the HelloWorld.vue component. The created lifecycle hook will trigger the getArtWorks() method, and the component will expose the artworks in the data block.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-99f4bec elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"99f4bec\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-52fe095\" data-id=\"52fe095\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-96b5d2b elementor-widget elementor-widget-code-highlight\" data-id=\"96b5d2b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-dark copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript \">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp><script>\nexport default {\n data() {\n   return {\n     artworks: [],\n   };\n },\n methods: {\n   async getArtWorks() {\n     try {\n       const response = await this.$http.get(\n         \"https:\/\/api.artic.edu\/api\/v1\/artworks?page=1&limit=50\"\n       );\n       this.artworks = response.data.data;\n     } catch (error) {\n       console.log(error);\n     }\n   },\n },\ncreated() {\n   this.getArtWorks();\n }\n};\n<\/script>\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-80eb1f7 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"80eb1f7\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-b595fad\" data-id=\"b595fad\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-ee9eefb elementor-widget elementor-widget-text-editor\" data-id=\"ee9eefb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>We fetched the artworks in a function and exposed them in a data block, but we did not use this anywhere; no binding yet! So let\u2019s loop artworks and display the artists and their styles.\u00a0<\/p><p>Delete everything in HelloWorld.vue component template and place the below code block there.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-7cf8b84 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"7cf8b84\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-f2cfacc\" data-id=\"f2cfacc\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-e6fe3ed elementor-widget elementor-widget-code-highlight\" data-id=\"e6fe3ed\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-dark copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript \">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp><template>\n    <div v-for=\"artwork in artworks\"  v-bind:key=\"artwork.id\">\n    <div> {{ artwork.artist_title }}, {{ artwork.style_title }} <\/div><br>\n  <\/div>\n<\/template>\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-4336b3c elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"4336b3c\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-e03bbe4\" data-id=\"e03bbe4\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-55144be elementor-widget elementor-widget-text-editor\" data-id=\"55144be\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Enjoy the extensive collections of 19th-century French painting and 20th-century sculpture from <a href=\"http:\/\/localhost:8080\/\">http:\/\/localhost:8080\/<\/a>&nbsp;<span style=\"font-family: var( --e-global-typography-text-font-family ), Sans-serif; font-weight: var( --e-global-typography-text-font-weight );\">&nbsp;<\/span><span style=\"font-family: var( --e-global-typography-text-font-family ), Sans-serif; font-weight: var( --e-global-typography-text-font-weight );\">\ud83e\udd73&nbsp;<\/span><span style=\"font-family: var( --e-global-typography-text-font-family ), Sans-serif; font-weight: var( --e-global-typography-text-font-weight );\">&nbsp;<\/span><span style=\"font-family: var( --e-global-typography-text-font-family ), Sans-serif; font-weight: var( --e-global-typography-text-font-weight );\">\ud83e\udd73&nbsp;<\/span><span style=\"font-family: var( --e-global-typography-text-font-family ), Sans-serif; font-weight: var( --e-global-typography-text-font-weight );\">&nbsp;<\/span><span style=\"font-family: var( --e-global-typography-text-font-family ), Sans-serif; font-weight: var( --e-global-typography-text-font-weight );\">\ud83e\udd73&nbsp;<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-6f44a0a elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"6f44a0a\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-9ea5666\" data-id=\"9ea5666\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-b1528c8 elementor-widget elementor-widget-code-highlight\" data-id=\"b1528c8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript \">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>Juan S\u00e1nchez Cot\u00e1n, Renaissance\nWilliam Morris, Arts and Crafts Movement\nJohn Henry Dearle, 19th century\nTanaka Ryohei, Japanese (culture or style)<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-40fa140 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"40fa140\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-fb4e126\" data-id=\"fb4e126\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-ff9bd48 elementor-widget elementor-widget-text-editor\" data-id=\"ff9bd48\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\tEnjoyed starting coding in 60 minutes and want to challenge other libraries &amp; frameworks? Feel free to check out my other posts <a href=\"https:\/\/exceptionly.com\/2021\/08\/07\/how-to-start-coding-react-in-60-minutes\/\">Start Coding React in 60 minutes<\/a>, <a href=\"https:\/\/exceptionly.com\/2021\/08\/23\/how-to-start-coding-javascript-in-60-minutes\/\">Start Coding JavaScript in 60 minutes<\/a>, <a href=\"https:\/\/exceptionly.com\/2021\/07\/07\/how-to-start-coding-java-in-60-minutes\/\">Start Coding Java in 60 minutes<\/a>, or <a href=\"https:\/\/exceptionly.com\/2021\/07\/21\/how-to-start-coding-python-in-60-minutes\/\">Start Coding Python in 60 minutes<\/a>!\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>VueJS is an open-source Javascript framework for building single-page user interfaces. Evan You &#8211; the author of VueJS, decided to implement VueJS when working for Google and using AngularJS for several projects. So he dropped the bad parts of AngularJS and extracted the parts he likes to form his new fancy framework VueJS. As a [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":9636,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[82],"tags":[122,90,213,220,124,113,107,123,101,121,104],"class_list":["post-9552","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-axios","tag-developer-tutorials","tag-frontend","tag-fullstack","tag-http-clients","tag-javascript","tag-modern-js-frameworks","tag-progressive","tag-reactjs","tag-vue","tag-vuejs"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v18.5 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to start coding VueJS in 60 minutes - Exceptionly<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/exceptionly.com\/ar\/2021\/09\/14\/how-to-start-coding-vuejs-in-60-minutes\/\" \/>\n<meta property=\"og:locale\" content=\"ar_AR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to start coding VueJS in 60 minutes\" \/>\n<meta property=\"og:description\" content=\"VueJS is an open-source Javascript framework for building single-page user interfaces. Evan You - the author of VueJS, decided to implement VueJS when\" \/>\n<meta property=\"og:url\" content=\"https:\/\/exceptionly.com\/ar\/2021\/09\/14\/how-to-start-coding-vuejs-in-60-minutes\/\" \/>\n<meta property=\"og:site_name\" content=\"Exceptionly\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/exceptionly\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-09-14T06:48:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-06-29T16:40:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/exceptionly.com\/wp-content\/uploads\/2021\/09\/how-to-start-coding-vuejs-in-60-minutes.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1930\" \/>\n\t<meta property=\"og:image:height\" content=\"766\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Fatma Elverir\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@exceptionly\" \/>\n<meta name=\"twitter:site\" content=\"@exceptionly\" \/>\n<meta name=\"twitter:label1\" content=\"\u0643\u064f\u062a\u0628 \u0628\u0648\u0627\u0633\u0637\u0629\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatma Elverir\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u0648\u0642\u062a \u0627\u0644\u0642\u0631\u0627\u0621\u0629 \u0627\u0644\u0645\u064f\u0642\u062f\u0651\u0631\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 \u062f\u0642\u0627\u0626\u0642\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/exceptionly.com\\\/2021\\\/09\\\/14\\\/how-to-start-coding-vuejs-in-60-minutes\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/exceptionly.com\\\/2021\\\/09\\\/14\\\/how-to-start-coding-vuejs-in-60-minutes\\\/\"},\"author\":{\"name\":\"Fatma Elverir\",\"@id\":\"https:\\\/\\\/exceptionly.com\\\/#\\\/schema\\\/person\\\/a2600170dfb4513350affede916c0ccf\"},\"headline\":\"How to start coding VueJS in 60 minutes\",\"datePublished\":\"2021-09-14T06:48:14+00:00\",\"dateModified\":\"2022-06-29T16:40:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/exceptionly.com\\\/2021\\\/09\\\/14\\\/how-to-start-coding-vuejs-in-60-minutes\\\/\"},\"wordCount\":539,\"commentCount\":4,\"publisher\":{\"@id\":\"https:\\\/\\\/exceptionly.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/exceptionly.com\\\/2021\\\/09\\\/14\\\/how-to-start-coding-vuejs-in-60-minutes\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/exceptionly.com\\\/wp-content\\\/uploads\\\/2021\\\/09\\\/how-to-start-coding-vuejs-in-60-minutes.jpg\",\"keywords\":[\"Axios\",\"Developer Tutorials\",\"Frontend\",\"Fullstack\",\"HTTP clients\",\"JavaScript\",\"Modern JS Frameworks\",\"progressive\",\"ReactJS\",\"Vue\",\"VueJS\"],\"articleSection\":[\"Tutorials\"],\"inLanguage\":\"ar\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/exceptionly.com\\\/2021\\\/09\\\/14\\\/how-to-start-coding-vuejs-in-60-minutes\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/exceptionly.com\\\/2021\\\/09\\\/14\\\/how-to-start-coding-vuejs-in-60-minutes\\\/\",\"url\":\"https:\\\/\\\/exceptionly.com\\\/2021\\\/09\\\/14\\\/how-to-start-coding-vuejs-in-60-minutes\\\/\",\"name\":\"How to start coding VueJS in 60 minutes - Exceptionly\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/exceptionly.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/exceptionly.com\\\/2021\\\/09\\\/14\\\/how-to-start-coding-vuejs-in-60-minutes\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/exceptionly.com\\\/2021\\\/09\\\/14\\\/how-to-start-coding-vuejs-in-60-minutes\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/exceptionly.com\\\/wp-content\\\/uploads\\\/2021\\\/09\\\/how-to-start-coding-vuejs-in-60-minutes.jpg\",\"datePublished\":\"2021-09-14T06:48:14+00:00\",\"dateModified\":\"2022-06-29T16:40:43+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/exceptionly.com\\\/2021\\\/09\\\/14\\\/how-to-start-coding-vuejs-in-60-minutes\\\/#breadcrumb\"},\"inLanguage\":\"ar\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/exceptionly.com\\\/2021\\\/09\\\/14\\\/how-to-start-coding-vuejs-in-60-minutes\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"ar\",\"@id\":\"https:\\\/\\\/exceptionly.com\\\/2021\\\/09\\\/14\\\/how-to-start-coding-vuejs-in-60-minutes\\\/#primaryimage\",\"url\":\"https:\\\/\\\/exceptionly.com\\\/wp-content\\\/uploads\\\/2021\\\/09\\\/how-to-start-coding-vuejs-in-60-minutes.jpg\",\"contentUrl\":\"https:\\\/\\\/exceptionly.com\\\/wp-content\\\/uploads\\\/2021\\\/09\\\/how-to-start-coding-vuejs-in-60-minutes.jpg\",\"width\":1930,\"height\":766,\"caption\":\"How to start coding VueJS in 60 minutes\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/exceptionly.com\\\/2021\\\/09\\\/14\\\/how-to-start-coding-vuejs-in-60-minutes\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/exceptionly.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to start coding VueJS in 60 minutes\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/exceptionly.com\\\/#website\",\"url\":\"https:\\\/\\\/exceptionly.com\\\/\",\"name\":\"Exceptionly\",\"description\":\"Remote software talent acquisition at scale\",\"publisher\":{\"@id\":\"https:\\\/\\\/exceptionly.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/exceptionly.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ar\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/exceptionly.com\\\/#organization\",\"name\":\"Exceptionly\",\"url\":\"https:\\\/\\\/exceptionly.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ar\",\"@id\":\"https:\\\/\\\/exceptionly.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/exceptionly.com\\\/wp-content\\\/uploads\\\/2021\\\/05\\\/exceptionly-search-logo.png\",\"contentUrl\":\"https:\\\/\\\/exceptionly.com\\\/wp-content\\\/uploads\\\/2021\\\/05\\\/exceptionly-search-logo.png\",\"width\":400,\"height\":400,\"caption\":\"Exceptionly\"},\"image\":{\"@id\":\"https:\\\/\\\/exceptionly.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/exceptionly\\\/\",\"https:\\\/\\\/x.com\\\/exceptionly\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/exceptionly\\\/\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCet5wATTyif6knI0h4vUkNA\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/exceptionly.com\\\/#\\\/schema\\\/person\\\/a2600170dfb4513350affede916c0ccf\",\"name\":\"Fatma Elverir\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ar\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/93179e5b3e943c5bcda6ea20d6b37723c01dedb150ab7724bb4fb9af22eb3de6?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/93179e5b3e943c5bcda6ea20d6b37723c01dedb150ab7724bb4fb9af22eb3de6?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/93179e5b3e943c5bcda6ea20d6b37723c01dedb150ab7724bb4fb9af22eb3de6?s=96&d=mm&r=g\",\"caption\":\"Fatma Elverir\"},\"sameAs\":[\"https:\\\/\\\/exceptionly.com\"],\"url\":\"https:\\\/\\\/exceptionly.com\\\/ar\\\/author\\\/fatmaelverir\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to start coding VueJS in 60 minutes - Exceptionly","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/exceptionly.com\/ar\/2021\/09\/14\/how-to-start-coding-vuejs-in-60-minutes\/","og_locale":"ar_AR","og_type":"article","og_title":"How to start coding VueJS in 60 minutes","og_description":"VueJS is an open-source Javascript framework for building single-page user interfaces. Evan You - the author of VueJS, decided to implement VueJS when","og_url":"https:\/\/exceptionly.com\/ar\/2021\/09\/14\/how-to-start-coding-vuejs-in-60-minutes\/","og_site_name":"Exceptionly","article_publisher":"https:\/\/www.facebook.com\/exceptionly\/","article_published_time":"2021-09-14T06:48:14+00:00","article_modified_time":"2022-06-29T16:40:43+00:00","og_image":[{"width":1930,"height":766,"url":"https:\/\/exceptionly.com\/wp-content\/uploads\/2021\/09\/how-to-start-coding-vuejs-in-60-minutes.jpg","type":"image\/jpeg"}],"author":"Fatma Elverir","twitter_card":"summary_large_image","twitter_creator":"@exceptionly","twitter_site":"@exceptionly","twitter_misc":{"\u0643\u064f\u062a\u0628 \u0628\u0648\u0627\u0633\u0637\u0629":"Fatma Elverir","\u0648\u0642\u062a \u0627\u0644\u0642\u0631\u0627\u0621\u0629 \u0627\u0644\u0645\u064f\u0642\u062f\u0651\u0631":"4 \u062f\u0642\u0627\u0626\u0642"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/exceptionly.com\/2021\/09\/14\/how-to-start-coding-vuejs-in-60-minutes\/#article","isPartOf":{"@id":"https:\/\/exceptionly.com\/2021\/09\/14\/how-to-start-coding-vuejs-in-60-minutes\/"},"author":{"name":"Fatma Elverir","@id":"https:\/\/exceptionly.com\/#\/schema\/person\/a2600170dfb4513350affede916c0ccf"},"headline":"How to start coding VueJS in 60 minutes","datePublished":"2021-09-14T06:48:14+00:00","dateModified":"2022-06-29T16:40:43+00:00","mainEntityOfPage":{"@id":"https:\/\/exceptionly.com\/2021\/09\/14\/how-to-start-coding-vuejs-in-60-minutes\/"},"wordCount":539,"commentCount":4,"publisher":{"@id":"https:\/\/exceptionly.com\/#organization"},"image":{"@id":"https:\/\/exceptionly.com\/2021\/09\/14\/how-to-start-coding-vuejs-in-60-minutes\/#primaryimage"},"thumbnailUrl":"https:\/\/exceptionly.com\/wp-content\/uploads\/2021\/09\/how-to-start-coding-vuejs-in-60-minutes.jpg","keywords":["Axios","Developer Tutorials","Frontend","Fullstack","HTTP clients","JavaScript","Modern JS Frameworks","progressive","ReactJS","Vue","VueJS"],"articleSection":["Tutorials"],"inLanguage":"ar","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/exceptionly.com\/2021\/09\/14\/how-to-start-coding-vuejs-in-60-minutes\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/exceptionly.com\/2021\/09\/14\/how-to-start-coding-vuejs-in-60-minutes\/","url":"https:\/\/exceptionly.com\/2021\/09\/14\/how-to-start-coding-vuejs-in-60-minutes\/","name":"How to start coding VueJS in 60 minutes - Exceptionly","isPartOf":{"@id":"https:\/\/exceptionly.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/exceptionly.com\/2021\/09\/14\/how-to-start-coding-vuejs-in-60-minutes\/#primaryimage"},"image":{"@id":"https:\/\/exceptionly.com\/2021\/09\/14\/how-to-start-coding-vuejs-in-60-minutes\/#primaryimage"},"thumbnailUrl":"https:\/\/exceptionly.com\/wp-content\/uploads\/2021\/09\/how-to-start-coding-vuejs-in-60-minutes.jpg","datePublished":"2021-09-14T06:48:14+00:00","dateModified":"2022-06-29T16:40:43+00:00","breadcrumb":{"@id":"https:\/\/exceptionly.com\/2021\/09\/14\/how-to-start-coding-vuejs-in-60-minutes\/#breadcrumb"},"inLanguage":"ar","potentialAction":[{"@type":"ReadAction","target":["https:\/\/exceptionly.com\/2021\/09\/14\/how-to-start-coding-vuejs-in-60-minutes\/"]}]},{"@type":"ImageObject","inLanguage":"ar","@id":"https:\/\/exceptionly.com\/2021\/09\/14\/how-to-start-coding-vuejs-in-60-minutes\/#primaryimage","url":"https:\/\/exceptionly.com\/wp-content\/uploads\/2021\/09\/how-to-start-coding-vuejs-in-60-minutes.jpg","contentUrl":"https:\/\/exceptionly.com\/wp-content\/uploads\/2021\/09\/how-to-start-coding-vuejs-in-60-minutes.jpg","width":1930,"height":766,"caption":"How to start coding VueJS in 60 minutes"},{"@type":"BreadcrumbList","@id":"https:\/\/exceptionly.com\/2021\/09\/14\/how-to-start-coding-vuejs-in-60-minutes\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/exceptionly.com\/"},{"@type":"ListItem","position":2,"name":"How to start coding VueJS in 60 minutes"}]},{"@type":"WebSite","@id":"https:\/\/exceptionly.com\/#website","url":"https:\/\/exceptionly.com\/","name":"Exceptionly","description":"Remote software talent acquisition at scale","publisher":{"@id":"https:\/\/exceptionly.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/exceptionly.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ar"},{"@type":"Organization","@id":"https:\/\/exceptionly.com\/#organization","name":"Exceptionly","url":"https:\/\/exceptionly.com\/","logo":{"@type":"ImageObject","inLanguage":"ar","@id":"https:\/\/exceptionly.com\/#\/schema\/logo\/image\/","url":"https:\/\/exceptionly.com\/wp-content\/uploads\/2021\/05\/exceptionly-search-logo.png","contentUrl":"https:\/\/exceptionly.com\/wp-content\/uploads\/2021\/05\/exceptionly-search-logo.png","width":400,"height":400,"caption":"Exceptionly"},"image":{"@id":"https:\/\/exceptionly.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/exceptionly\/","https:\/\/x.com\/exceptionly","https:\/\/www.linkedin.com\/company\/exceptionly\/","https:\/\/www.youtube.com\/channel\/UCet5wATTyif6knI0h4vUkNA"]},{"@type":"Person","@id":"https:\/\/exceptionly.com\/#\/schema\/person\/a2600170dfb4513350affede916c0ccf","name":"Fatma Elverir","image":{"@type":"ImageObject","inLanguage":"ar","@id":"https:\/\/secure.gravatar.com\/avatar\/93179e5b3e943c5bcda6ea20d6b37723c01dedb150ab7724bb4fb9af22eb3de6?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/93179e5b3e943c5bcda6ea20d6b37723c01dedb150ab7724bb4fb9af22eb3de6?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/93179e5b3e943c5bcda6ea20d6b37723c01dedb150ab7724bb4fb9af22eb3de6?s=96&d=mm&r=g","caption":"Fatma Elverir"},"sameAs":["https:\/\/exceptionly.com"],"url":"https:\/\/exceptionly.com\/ar\/author\/fatmaelverir\/"}]}},"_links":{"self":[{"href":"https:\/\/exceptionly.com\/ar\/wp-json\/wp\/v2\/posts\/9552","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/exceptionly.com\/ar\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/exceptionly.com\/ar\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/exceptionly.com\/ar\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/exceptionly.com\/ar\/wp-json\/wp\/v2\/comments?post=9552"}],"version-history":[{"count":0,"href":"https:\/\/exceptionly.com\/ar\/wp-json\/wp\/v2\/posts\/9552\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/exceptionly.com\/ar\/wp-json\/wp\/v2\/media\/9636"}],"wp:attachment":[{"href":"https:\/\/exceptionly.com\/ar\/wp-json\/wp\/v2\/media?parent=9552"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/exceptionly.com\/ar\/wp-json\/wp\/v2\/categories?post=9552"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/exceptionly.com\/ar\/wp-json\/wp\/v2\/tags?post=9552"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}