{"id":304,"date":"2022-01-06T13:24:20","date_gmt":"2022-01-06T13:24:20","guid":{"rendered":"http:\/\/frontendguruji.com\/?post_type=web-story&#038;p=304"},"modified":"2022-01-09T10:19:29","modified_gmt":"2022-01-09T10:19:29","slug":"setup-a-vue-js-project-from-scratch-without-vue-cli","status":"publish","type":"web-story","link":"https:\/\/frontendguruji.com\/blog\/web-stories\/setup-a-vue-js-project-from-scratch-without-vue-cli\/","title":{"rendered":"Setup a Vue 3 project from scratch, without Vue CLI"},"content":{"rendered":"<p><html amp=\"\" lang=\"en\"><head><meta charSet=\"utf-8\"\/><meta name=\"viewport\" content=\"width=device-width,minimum-scale=1,initial-scale=1\"\/><script async=\"\" src=\"https:\/\/cdn.ampproject.org\/v0.js\"><\/script><script async=\"\" src=\"https:\/\/cdn.ampproject.org\/v0\/amp-story-1.0.js\" custom-element=\"amp-story\"><\/script><link href=\"https:\/\/fonts.googleapis.com\/css2?display=swap&amp;family=Anton&amp;family=Roboto\" rel=\"stylesheet\"\/><link href=\"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/image-1.png\" rel=\"preload\" as=\"image\"\/>\n<style amp-boilerplate=\"\">body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}<\/style>\n<p><noscript><\/p>\n<style amp-boilerplate=\"\">body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}<\/style>\n<p><\/noscript><\/p>\n<style amp-custom=\"\">\n              amp-story-page {\n                background-color: #131516;\n              }<\/p>\n<p>              amp-story-grid-layer {\n                overflow: visible;\n              }<\/p>\n<p>              @media (max-aspect-ratio: 9 \/ 16)  {\n                @media (min-aspect-ratio: 320 \/ 678) {\n                  amp-story-grid-layer.grid-layer {\n                    margin-top: calc((100% \/ 0.5625 - 100% \/ 0.6666666666666666) \/ 2);\n                  }\n                }\n              }<\/p>\n<p>              @media not all and (min-resolution:.001dpcm) {\n                @media {\n                  p.text-wrapper > span {\n                    font-size: calc(100% - 0.5px);\n                  }\n                }\n              }<\/p>\n<p>              .page-fullbleed-area,\n              .page-background-overlay-area {\n                position: absolute;\n                overflow: hidden;\n                width: 100%;\n                left: 0;\n                height: calc(1.1851851851851851 * 100%);\n                top: calc((1 - 1.1851851851851851) * 100% \/ 2);\n              }<\/p>\n<p>              .element-overlay-area {\n                position: absolute;\n                width: 100%;\n                height: 100%;\n                top: 0;\n                left: 0;\n              }<\/p>\n<p>              .page-safe-area {\n                overflow: visible;\n                position: absolute;\n                top: 0;\n                bottom: 0;\n                left: 0;\n                right: 0;\n                width: 100%;\n                height: calc(0.84375 * 100%);\n                margin: auto 0;\n              }<\/p>\n<p>              .mask {\n                position: absolute;\n                overflow: hidden;\n              }<\/p>\n<p>              .fill {\n                position: absolute;\n                top: 0;\n                left: 0;\n                right: 0;\n                bottom: 0;\n                margin: 0;\n              }<\/p>\n<p>              @media (prefers-reduced-motion: no-preference) {\n                .animation-wrapper {\n                  opacity: var(--initial-opacity);\n                  transform: var(--initial-transform);\n                }\n              }<\/p>\n<p>              .align-bottom {\n                align-content: end;\n                padding: 0;\n              }<\/p>\n<p>              .captions-area {\n                padding: 0 32px 0;\n              }<\/p>\n<p>              amp-story-captions {\n                margin-bottom: 16px;\n                text-align: center;\n              }<\/p>\n<p>              amp-story-captions span {\n                display: inline-block;\n                margin: 0;\n                padding: 6px 12px;\n                vertical-align: middle;\n                border-radius: 15px;\n                background: rgba(11, 11, 11, 0.6);\n                color: rgba(255, 255, 255, 1);\n                font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif;;\n                font-size: calc(4 * var(--story-page-vw));\n                line-height: 1.4;\n                word-break: break-word;\n                word-wrap: break-word;\n                overflow-wrap: break-word;\n              }\n              <\/style>\n<p><meta name=\"web-stories-replace-head-start\"\/><title>Setup a Vue 3 project from scratch, without Vue CLI<\/title><link rel=\"canonical\" href=\"http:\/\/frontendguruji.com\/web-stories\/setup-a-vue-js-project-from-scratch-without-vue-cli\/\"\/><meta name=\"web-stories-replace-head-end\"\/><\/head><body><amp-story standalone=\"\" publisher=\"&amp;lt; FrontendGuruji \/&amp;gt;\" publisher-logo-src=\"http:\/\/frontendguruji.com\/wp-content\/uploads\/2021\/12\/cropped-cropped-logo-text-only-1.jpg\" title=\"Setup a Vue 3 project from scratch, without Vue CLI\" poster-portrait-src=\"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/cropped-vue-poster.jpg\"><amp-story-page id=\"02d473e3-9875-413e-861b-ab8258947f69\" auto-advance-after=\"7s\"><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-92f3c2ff-0ed6-431d-b0ba-de6ca564aa6e\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.2, 0.6, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-d9e1cca5-fba7-4133-99ea-680c92ba6063\",\"keyframes\":{\"transform\":[\"translate3d(0px, -177.86596%, 0)\",\"translate3d(0px, 0px, 0)\"]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.2, 0.6, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-34fb6974-e087-423d-aa03-43c1f65ac57e\",\"keyframes\":{\"opacity\":[1,1]},\"delay\":0,\"duration\":500,\"easing\":\"cubic-bezier(.3,0,.55,1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-575eb4e2-c137-4dec-a466-1396c5345cfd\",\"keyframes\":{\"transform\":[\"scale(3)\",\"scale(1)\"]},\"delay\":0,\"duration\":500,\"easing\":\"cubic-bezier(.3,0,.55,1)\",\"fill\":\"forwards\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-4bacb6b0-581b-4de9-b405-63fe96afd757\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.2, 0.6, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-4fdf793d-a371-4432-a406-cdfae69cc113\",\"keyframes\":{\"transform\":[\"translate3d(0px, 250.20574%, 0)\",\"translate3d(0px, 0px, 0)\"]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.2, 0.6, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-43dc9c71-5fe2-4ca1-89c8-9bb809dbbc72\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":0,\"duration\":500,\"easing\":\"cubic-bezier(.3,0,.55,1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-54bb5788-deff-49ba-afe8-c7e90a2f35d9\",\"keyframes\":{\"transform\":[\"scale(0.3333333333333333)\",\"scale(1)\"]},\"delay\":0,\"duration\":500,\"easing\":\"cubic-bezier(.3,0,.55,1)\",\"fill\":\"forwards\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-343b402a-d791-461a-bad2-662c9171095c\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.2, 0.6, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-c690062d-c097-4589-820b-2f342000e4c8\",\"keyframes\":{\"transform\":[\"translate3d(0px, 463.19479%, 0)\",\"translate3d(0px, 0px, 0)\"]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.2, 0.6, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><\/p>\n<div class=\"page-fullbleed-area\" style=\"background-color:#0c1013\">\n<div class=\"page-safe-area\">\n<div style=\"position:absolute;pointer-events:none;left:0;top:-9.25926%;width:100%;height:118.51852%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-595cb755-261f-485f-a058-66b8593c0512\">\n<div style=\"position:absolute;width:176.42689%;height:100%;left:0%;top:0%\" data-leaf-element=\"true\"><amp-img layout=\"fill\" src=\"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/image-1.png\" alt=\"Vue JS,vue js tutorial,configure webpack,setup vue project from scratch,setup vue 3 project, configure babel, setup vue project without cli\" srcSet=\"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/image-1.png 653w,http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/image-1-298x300.png 298w,http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/image-1-150x150.png 150w\" sizes=\"(min-width: 1024px) 80vh, 177vw\" disable-inline-width=\"true\"><\/amp-img><\/div>\n<div class=\"element-overlay-area\" style=\"background-color:rgba(0,0,0,0.5)\"><\/div>\n<\/div>\n<\/div>\n<div class=\"page-background-overlay-area\" style=\"background-color:rgba(0,0,0,0.5)\"><\/div>\n<\/div>\n<\/div>\n<p><\/amp-story-grid-layer><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><\/p>\n<div class=\"page-fullbleed-area\">\n<div class=\"page-safe-area\">\n<div style=\"position:absolute;pointer-events:none;left:11.65049%;top:22.49191%;width:80.09709%;height:40.7767%;opacity:1\">\n<div id=\"anim-92f3c2ff-0ed6-431d-b0ba-de6ca564aa6e\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\">\n<div id=\"anim-d9e1cca5-fba7-4133-99ea-680c92ba6063\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:translate3d(0px, -177.86596%, 0)\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" id=\"el-44f0e691-e7e6-435f-8082-ca463b044c00\">\n<p class=\"fill text-wrapper\" style=\"white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word;margin:0% 0;font-family:&quot;Anton&quot;,sans-serif;font-size:1.359223em;line-height:1;text-align:center;padding:0;color:#000000\"><span><span style=\"color: #faf4ea; text-transform: uppercase\">SETUP<\/span><br \/>\n<span style=\"color: #faf4ea; text-transform: uppercase\">VUE 3&nbsp;<\/span><br \/>\n<span style=\"color: #faf4ea; text-transform: uppercase\">PROJECT&nbsp;<\/span><\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:36.77184%;top:-5.33981%;width:29.85437%;height:2.91262%;opacity:1\">\n<div id=\"anim-34fb6974-e087-423d-aa03-43c1f65ac57e\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:none\">\n<div id=\"anim-575eb4e2-c137-4dec-a466-1396c5345cfd\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:scale(3)\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" id=\"el-9c86fb0f-4dab-4a81-8da1-f65a75ce4f8e\">\n<p class=\"fill text-wrapper\" style=\"white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word;margin:0% 0;font-family:&quot;Anton&quot;,sans-serif;font-size:0.226537em;line-height:1.3;text-align:center;padding:0;color:#000000\"><span><span style=\"color: #fff; text-transform: uppercase\">&lt; FrontENDguruji \/&gt;<\/span><\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:13.22816%;top:65.53398%;width:76.94175%;height:17.47573%;opacity:1\">\n<div id=\"anim-4bacb6b0-581b-4de9-b405-63fe96afd757\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\">\n<div id=\"anim-4fdf793d-a371-4432-a406-cdfae69cc113\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:translate3d(0px, 250.20574%, 0)\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:0.6309148264984227% 0.6309148264984227% 0.6309148264984227% 0.6309148264984227% \/ 1.8518518518518516% 1.8518518518518516% 1.8518518518518516% 1.8518518518518516%\" id=\"el-cfcbd4cc-d323-49f8-932d-88c7f12efa25\">\n<p class=\"fill text-wrapper\" style=\"white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word;margin:1.9266315063091484% 0;font-family:&quot;Anton&quot;,sans-serif;font-size:0.647249em;line-height:1.2;text-align:center;padding:0;color:#000000\"><span><span style=\"color: #3fb984\">WITHOUT&nbsp;<\/span><br \/>\n<span style=\"color: #3fb984\">VUE-CLI<\/span><\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:31.91748%;top:1.61812%;width:39.56311%;height:18.60841%;opacity:1\">\n<div id=\"anim-43dc9c71-5fe2-4ca1-89c8-9bb809dbbc72\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\">\n<div id=\"anim-54bb5788-deff-49ba-afe8-c7e90a2f35d9\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:scale(0.3333333333333333)\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-ec693630-afb8-4a6d-bfd4-c054ec3cc52c\">\n<div style=\"position:absolute;width:100%;height:122.82466%;left:0%;top:-11.41233%\" data-leaf-element=\"true\"><amp-img layout=\"fill\" src=\"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1184px-Vue.js_Logo_2.svg_.png\" alt=\"Vue JS,vue js tutorial,configure webpack,setup vue project from scratch,setup vue 3 project, configure babel, setup vue project without cli\" srcSet=\"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1184px-Vue.js_Logo_2.svg_.png 1184w,http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1184px-Vue.js_Logo_2.svg_-1024x887.png 1024w,http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1184px-Vue.js_Logo_2.svg_-768x666.png 768w,http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1184px-Vue.js_Logo_2.svg_-300x260.png 300w,http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1184px-Vue.js_Logo_2.svg_-150x130.png 150w\" sizes=\"(min-width: 1024px) 18vh, 40vw\" disable-inline-width=\"true\"><\/amp-img><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:13.34951%;top:85.27508%;width:76.69903%;height:5.17799%;opacity:1\">\n<div id=\"anim-343b402a-d791-461a-bad2-662c9171095c\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\">\n<div id=\"anim-c690062d-c097-4589-820b-2f342000e4c8\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:translate3d(0px, 463.19479%, 0)\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:0.6329113924050633% 0.6329113924050633% 0.6329113924050633% 0.6329113924050633% \/ 6.25% 6.25% 6.25% 6.25%\" id=\"el-3b0c6f27-c2b1-425c-8e2c-c25b9f8b5a91\">\n<p class=\"fill text-wrapper\" style=\"white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word;margin:-0.6230221518987342% 0;font-family:&quot;Roboto&quot;,&quot;Helvetica Neue&quot;,&quot;Helvetica&quot;,sans-serif;font-size:0.194175em;line-height:1.5;text-align:center;padding:0;color:#000000\"><span><span style=\"color: #fff\">LEARN WHAT VUE-CLI<\/span><br \/>\n<span style=\"color: #fff\">USE UNDER THE HOOD<\/span><\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><\/amp-story-grid-layer><amp-story-page-outlink layout=\"nodisplay\" cta-image=\"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/cropped-1184px-Vue.js_Logo_2.svg_.png\" theme=\"light\"><a href=\"http:\/\/frontendguruji.com\/how-to-setup-a-vue-js-project-from-scratch-without-vue-cli\/\" rel=\"\">Learn more<\/a><\/amp-story-page-outlink><\/amp-story-page><amp-story-page id=\"8f73a2ad-73bb-44c3-b640-8a1e5b7d392e\" auto-advance-after=\"7s\"><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-94078e5d-4720-44c9-b03a-0be779eed3a7\",\"keyframes\":{\"transform\":[\"translate3d(111.21212%, 0px, 0)\",\"translate3d(0px, 0px, 0)\"]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-ff134eab-fe24-49ff-bf09-7585dc3cfbb4\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-fcbca65e-7058-44ab-aea2-749f2047dbab\",\"keyframes\":{\"transform\":[\"scale(0.15)\",\"scale(1)\"]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"forwards\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-628f20df-ba4a-4007-b29e-dbfb78a05b04\",\"keyframes\":{\"opacity\":[1,1]},\"delay\":0,\"duration\":500,\"easing\":\"cubic-bezier(.3,0,.55,1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-4d5c1192-b112-4ffb-bf48-b0d549298dda\",\"keyframes\":{\"transform\":[\"scale(3)\",\"scale(1)\"]},\"delay\":0,\"duration\":500,\"easing\":\"cubic-bezier(.3,0,.55,1)\",\"fill\":\"forwards\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-67cae52d-cf85-4db8-b0bf-8272734658aa\",\"keyframes\":{\"transform\":[\"translate3d(-116.40379%, 0px, 0)\",\"translate3d(0px, 0px, 0)\"]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-f2dd6a82-89d6-4cd7-89ad-4b571bd7e04a\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-103c940e-a019-4a6f-9d4b-18788adf823a\",\"keyframes\":{\"transform\":[\"scale(0.15)\",\"scale(1)\"]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"forwards\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-1f8aa60b-a31e-40b9-9b7b-31cd2d8777b5\",\"keyframes\":{\"transform\":[\"translate3d(111.21212%, 0px, 0)\",\"translate3d(0px, 0px, 0)\"]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-ad57c0fe-be78-4879-8fbe-be1496ecf3b1\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-1c44ff65-c865-44c1-a7be-8d735e5bfd1a\",\"keyframes\":{\"transform\":[\"scale(0.15)\",\"scale(1)\"]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"forwards\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-dae858c0-cc91-4b2d-bdc8-307244f128c7\",\"keyframes\":{\"transform\":[\"translate3d(-116.40379%, 0px, 0)\",\"translate3d(0px, 0px, 0)\"]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-d99c1909-c266-407b-ad76-45113d34501e\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-2a82d90b-d9c7-4a65-9399-425b98b3bd79\",\"keyframes\":{\"transform\":[\"scale(0.15)\",\"scale(1)\"]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"forwards\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-a4ae8406-892f-4f78-a4e9-872c6e69c826\",\"keyframes\":{\"transform\":[\"translate3d(-116.40379%, 0px, 0)\",\"translate3d(0px, 0px, 0)\"]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-73f9bbed-d01b-41e9-892e-4b48187604a4\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-dc1d2a5b-f16e-47e9-aab5-a7bdc2d2dcfb\",\"keyframes\":{\"transform\":[\"scale(0.15)\",\"scale(1)\"]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"forwards\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-b14ed114-b672-4aae-9db3-9071590ddd5d\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-1d506e01-ba0e-46b5-a573-8672f635a010\",\"keyframes\":{\"transform\":[\"translate3d(111.21212%, 0px, 0)\",\"translate3d(0px, 0px, 0)\"]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-e8ee2199-6376-45fb-86a0-3f9d4f47c406\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-0d22f1a1-945b-4818-935b-23603109668d\",\"keyframes\":{\"transform\":[\"scale(0.15)\",\"scale(1)\"]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"forwards\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-ccc9e59f-eb38-4955-b842-afb2ecde597f\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":0,\"duration\":500,\"easing\":\"cubic-bezier(.3,0,.55,1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-49e98877-8f53-4108-8559-c76275134502\",\"keyframes\":{\"transform\":[\"scale(0.3333333333333333)\",\"scale(1)\"]},\"delay\":0,\"duration\":500,\"easing\":\"cubic-bezier(.3,0,.55,1)\",\"fill\":\"forwards\"}]<\/script><\/amp-story-animation><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><\/p>\n<div class=\"page-fullbleed-area\" style=\"background-color:#0c1013\">\n<div class=\"page-safe-area\">\n<div style=\"position:absolute;pointer-events:none;left:0;top:-9.25926%;width:100%;height:118.51852%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-16dbc2f8-35e8-4a9c-9c52-c837898532bb\">\n<div style=\"position:absolute;width:176.42689%;height:100%;left:0%;top:0%\" data-leaf-element=\"true\"><amp-img layout=\"fill\" src=\"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/image-1.png\" alt=\"Vue JS,vue js tutorial,configure webpack,setup vue project from scratch,setup vue 3 project, configure babel, setup vue project without cli\" srcSet=\"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/image-1.png 653w,http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/image-1-298x300.png 298w,http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/image-1-150x150.png 150w\" sizes=\"(min-width: 1024px) 80vh, 177vw\" disable-inline-width=\"true\"><\/amp-img><\/div>\n<div class=\"element-overlay-area\" style=\"background-color:rgba(0,0,0,0.5)\"><\/div>\n<\/div>\n<\/div>\n<div class=\"page-background-overlay-area\" style=\"background-color:rgba(0,0,0,0.5)\"><\/div>\n<\/div>\n<\/div>\n<p><\/amp-story-grid-layer><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><\/p>\n<div class=\"page-fullbleed-area\">\n<div class=\"page-safe-area\">\n<div style=\"position:absolute;pointer-events:none;left:10.92233%;top:51.61812%;width:80.09709%;height:7.28155%;opacity:1\">\n<div id=\"anim-94078e5d-4720-44c9-b03a-0be779eed3a7\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:translate3d(111.21212%, 0px, 0)\">\n<div id=\"anim-ff134eab-fe24-49ff-bf09-7585dc3cfbb4\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\">\n<div id=\"anim-fcbca65e-7058-44ab-aea2-749f2047dbab\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:scale(0.15)\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" id=\"el-441a9630-e92b-42f3-b528-ffe0d3deaff2\">\n<p class=\"fill text-wrapper\" style=\"white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word;margin:0% 0;font-family:&quot;Anton&quot;,sans-serif;font-size:0.728155em;line-height:1;text-align:center;padding:0;color:#000000\"><span><span style=\"color: #3fb984; text-transform: uppercase\">VUE V3<\/span><\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:36.04369%;top:-5.33981%;width:29.85437%;height:2.91262%;opacity:1\">\n<div id=\"anim-628f20df-ba4a-4007-b29e-dbfb78a05b04\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:none\">\n<div id=\"anim-4d5c1192-b112-4ffb-bf48-b0d549298dda\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:scale(3)\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" id=\"el-8a5cc949-8230-4747-ab91-20e258c12976\"><a href=\"http:\/\/frontendguruji.com\" data-tooltip-icon=\"http:\/\/frontendguruji.com\/wp-content\/uploads\/2021\/12\/cropped-logo-text-only-1.jpg\" data-tooltip-text=\"Exploring What, Why &amp; How of Frontend - &lt; FrontendGuruji \/&gt;\" target=\"_blank\" rel=\"noreferrer noopener\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0\"><\/p>\n<p class=\"fill text-wrapper\" style=\"white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word;margin:0% 0;font-family:&quot;Anton&quot;,sans-serif;font-size:0.226537em;line-height:1.3;text-align:center;padding:0;color:#000000\"><span><span style=\"color: #fff; text-transform: uppercase\">&lt; FrontENDguruji \/&gt;<\/span><\/span><\/p>\n<p><\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:12.62136%;top:61.16505%;width:76.94175%;height:11.00324%;opacity:1\">\n<div id=\"anim-67cae52d-cf85-4db8-b0bf-8272734658aa\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:translate3d(-116.40379%, 0px, 0)\">\n<div id=\"anim-f2dd6a82-89d6-4cd7-89ad-4b571bd7e04a\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\">\n<div id=\"anim-103c940e-a019-4a6f-9d4b-18788adf823a\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:scale(0.15)\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:0.6309148264984227% 0.6309148264984227% 0.6309148264984227% 0.6309148264984227% \/ 2.941176470588235% 2.941176470588235% 2.941176470588235% 2.941176470588235%\" id=\"el-3be5acd0-0e3f-4f2b-9255-cb7db212252b\">\n<p class=\"fill text-wrapper\" style=\"white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word;margin:2.1674604445977916% 0;font-family:&quot;Anton&quot;,sans-serif;font-size:0.728155em;line-height:1.2;text-align:center;padding:0;color:#000000\"><span><span style=\"color: #fff\">VUE ROUTER V4<\/span><\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:10.92233%;top:72.3301%;width:80.09709%;height:7.28155%;opacity:1\">\n<div id=\"anim-1f8aa60b-a31e-40b9-9b7b-31cd2d8777b5\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:translate3d(111.21212%, 0px, 0)\">\n<div id=\"anim-ad57c0fe-be78-4879-8fbe-be1496ecf3b1\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\">\n<div id=\"anim-1c44ff65-c865-44c1-a7be-8d735e5bfd1a\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:scale(0.15)\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" id=\"el-832da199-74bb-450d-b9e2-537ef010cb1e\">\n<p class=\"fill text-wrapper\" style=\"white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word;margin:0% 0;font-family:&quot;Anton&quot;,sans-serif;font-size:0.728155em;line-height:1;text-align:center;padding:0;color:#000000\"><span><span style=\"color: #3fb984; text-transform: uppercase\">webpack v5<\/span><\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:12.62136%;top:81.22977%;width:76.94175%;height:11.00324%;opacity:1\">\n<div id=\"anim-dae858c0-cc91-4b2d-bdc8-307244f128c7\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:translate3d(-116.40379%, 0px, 0)\">\n<div id=\"anim-d99c1909-c266-407b-ad76-45113d34501e\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\">\n<div id=\"anim-2a82d90b-d9c7-4a65-9399-425b98b3bd79\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:scale(0.15)\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:0.6309148264984227% 0.6309148264984227% 0.6309148264984227% 0.6309148264984227% \/ 2.941176470588235% 2.941176470588235% 2.941176470588235% 2.941176470588235%\" id=\"el-7b1e0f11-5945-4f4b-8a77-136a276cc5ad\">\n<p class=\"fill text-wrapper\" style=\"white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word;margin:2.1674604445977916% 0;font-family:&quot;Anton&quot;,sans-serif;font-size:0.728155em;line-height:1.2;text-align:center;padding:0;color:#000000\"><span><span style=\"color: #fff\">scss<\/span><\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:12.62136%;top:40.45307%;width:76.94175%;height:11.00324%;opacity:1\">\n<div id=\"anim-a4ae8406-892f-4f78-a4e9-872c6e69c826\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:translate3d(-116.40379%, 0px, 0)\">\n<div id=\"anim-73f9bbed-d01b-41e9-892e-4b48187604a4\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\">\n<div id=\"anim-dc1d2a5b-f16e-47e9-aab5-a7bdc2d2dcfb\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:scale(0.15)\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:0.6309148264984227% 0.6309148264984227% 0.6309148264984227% 0.6309148264984227% \/ 2.941176470588235% 2.941176470588235% 2.941176470588235% 2.941176470588235%\" id=\"el-7b621dff-c611-4076-a145-041f32af0711\">\n<p class=\"fill text-wrapper\" style=\"white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word;margin:2.1674604445977916% 0;font-family:&quot;Anton&quot;,sans-serif;font-size:0.728155em;line-height:1.2;text-align:center;padding:0;color:#000000\"><span><span style=\"color: #fff\">NODE V17<\/span><\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:10.92233%;top:22.16828%;width:80.09709%;height:5.66343%;opacity:1\">\n<div id=\"anim-b14ed114-b672-4aae-9db3-9071590ddd5d\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" id=\"el-55fe76f3-4eb9-4b05-a63b-d1d1205f2f54\">\n<p class=\"fill text-wrapper\" style=\"white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word;margin:0% 0;font-family:&quot;Anton&quot;,sans-serif;font-size:0.566343em;line-height:1;text-align:center;padding:0;color:#000000\"><span><span style=\"color: #faf4ea; text-transform: uppercase\">what will you use?<\/span><\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:10.92233%;top:31.06796%;width:80.09709%;height:7.28155%;opacity:1\">\n<div id=\"anim-1d506e01-ba0e-46b5-a573-8672f635a010\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:translate3d(111.21212%, 0px, 0)\">\n<div id=\"anim-e8ee2199-6376-45fb-86a0-3f9d4f47c406\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\">\n<div id=\"anim-0d22f1a1-945b-4818-935b-23603109668d\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:scale(0.15)\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" id=\"el-f0d92200-fa77-4924-ae32-06f63390084d\">\n<p class=\"fill text-wrapper\" style=\"white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word;margin:0% 0;font-family:&quot;Anton&quot;,sans-serif;font-size:0.728155em;line-height:1;text-align:center;padding:0;color:#000000\"><span><span style=\"color: #3fb984; text-transform: uppercase\">NPM<\/span><\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:31.91748%;top:1.61812%;width:39.56311%;height:18.60841%;opacity:1\">\n<div id=\"anim-ccc9e59f-eb38-4955-b842-afb2ecde597f\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\">\n<div id=\"anim-49e98877-8f53-4108-8559-c76275134502\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:scale(0.3333333333333333)\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-b0d93824-c5c8-4448-852c-35b0e4470cbf\">\n<div style=\"position:absolute;width:100%;height:122.82466%;left:0%;top:-11.41233%\" data-leaf-element=\"true\"><amp-img layout=\"fill\" src=\"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1184px-Vue.js_Logo_2.svg_.png\" alt=\"Vue JS,vue js tutorial,configure webpack,setup vue project from scratch,setup vue 3 project, configure babel, setup vue project without cli\" srcSet=\"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1184px-Vue.js_Logo_2.svg_.png 1184w,http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1184px-Vue.js_Logo_2.svg_-1024x887.png 1024w,http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1184px-Vue.js_Logo_2.svg_-768x666.png 768w,http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1184px-Vue.js_Logo_2.svg_-300x260.png 300w,http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1184px-Vue.js_Logo_2.svg_-150x130.png 150w\" sizes=\"(min-width: 1024px) 18vh, 40vw\" disable-inline-width=\"true\"><\/amp-img><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><\/amp-story-grid-layer><amp-story-page-outlink layout=\"nodisplay\" cta-image=\"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/cropped-1184px-Vue.js_Logo_2.svg_.png\"><a href=\"http:\/\/frontendguruji.com\/how-to-setup-a-vue-js-project-from-scratch-without-vue-cli\/\" rel=\"\">Learn more<\/a><\/amp-story-page-outlink><\/amp-story-page><amp-story-page id=\"c52eb59b-fae9-448f-af5a-200b62f487cd\" auto-advance-after=\"7s\"><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-a00bd404-cb2b-452c-bcb0-a1aef0e9dcb2\",\"keyframes\":{\"transform\":[\"translate3d(112.57575%, 0px, 0)\",\"translate3d(0px, 0px, 0)\"]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-ad5fad65-6542-4656-af43-94502dad6c1b\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-c0d26f53-89fc-48aa-b033-53205661bf70\",\"keyframes\":{\"transform\":[\"scale(0.15)\",\"scale(1)\"]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"forwards\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-feecaedb-a930-41a8-9830-64b5d442dab3\",\"keyframes\":{\"opacity\":[1,1]},\"delay\":0,\"duration\":500,\"easing\":\"cubic-bezier(.3,0,.55,1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-7bdbb380-c6e8-4034-b034-95333b558152\",\"keyframes\":{\"transform\":[\"scale(3)\",\"scale(1)\"]},\"delay\":0,\"duration\":500,\"easing\":\"cubic-bezier(.3,0,.55,1)\",\"fill\":\"forwards\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-5229a615-c910-4368-b7b1-ef8a2f86bf45\",\"keyframes\":{\"transform\":[\"translate3d(-114.8265%, 0px, 0)\",\"translate3d(0px, 0px, 0)\"]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-967046cc-3814-431a-aa35-ad9b8e8a73ef\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-5994aaba-fdff-4a1b-924f-d5693ddf2010\",\"keyframes\":{\"transform\":[\"scale(0.15)\",\"scale(1)\"]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"forwards\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-1e102cd9-4ec2-4efc-9a9f-90536a36877e\",\"keyframes\":{\"transform\":[\"translate3d(112.57575%, 0px, 0)\",\"translate3d(0px, 0px, 0)\"]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-b7ae8713-6607-4166-8c54-346c1317c165\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-c5767571-f722-4ffd-9067-585d5f646f28\",\"keyframes\":{\"transform\":[\"scale(0.15)\",\"scale(1)\"]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"forwards\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-37990e86-ae8f-4154-ab99-f47605951392\",\"keyframes\":{\"transform\":[\"translate3d(-114.8265%, 0px, 0)\",\"translate3d(0px, 0px, 0)\"]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-0b90f5c2-0b6f-4965-a5fe-cb7984ed8c07\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-5666d932-a560-48bf-9a8f-9a623898d4ff\",\"keyframes\":{\"transform\":[\"scale(0.15)\",\"scale(1)\"]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"forwards\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-04f3a322-be85-4fd6-878d-b13814f4f748\",\"keyframes\":{\"transform\":[\"translate3d(-114.8265%, 0px, 0)\",\"translate3d(0px, 0px, 0)\"]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-45790c31-6b16-43bf-8fff-ee2c4b7f1821\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-c1ceb7a4-e126-4aac-8af7-4b05436ea214\",\"keyframes\":{\"transform\":[\"scale(0.15)\",\"scale(1)\"]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"forwards\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-979742a3-097f-49cb-be53-9fd200f51f95\",\"keyframes\":{\"transform\":[\"translate3d(112.57575%, 0px, 0)\",\"translate3d(0px, 0px, 0)\"]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-94b1fee6-b759-41fb-8a4a-8582aa1c0071\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-0ded8b32-57a8-46ec-9e2a-9574febf7f95\",\"keyframes\":{\"transform\":[\"scale(0.15)\",\"scale(1)\"]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"forwards\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-e9b4a559-4fc0-4d59-8e47-d311ac70c578\",\"keyframes\":{\"transform\":[\"translate3d(112.57575%, 0px, 0)\",\"translate3d(0px, 0px, 0)\"]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-99970c48-0b11-41f3-8f4b-a17f1aa9839f\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-1daaeca9-8491-4510-bb2d-216e598b4615\",\"keyframes\":{\"transform\":[\"scale(0.15)\",\"scale(1)\"]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"forwards\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-a5755936-3906-4fe7-b03e-c60ff1c66c1e\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":0,\"duration\":500,\"easing\":\"cubic-bezier(.3,0,.55,1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-f56749b5-fb0c-4421-86f0-f74557886764\",\"keyframes\":{\"transform\":[\"scale(0.3333333333333333)\",\"scale(1)\"]},\"delay\":0,\"duration\":500,\"easing\":\"cubic-bezier(.3,0,.55,1)\",\"fill\":\"forwards\"}]<\/script><\/amp-story-animation><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><\/p>\n<div class=\"page-fullbleed-area\" style=\"background-color:#0c1013\">\n<div class=\"page-safe-area\">\n<div style=\"position:absolute;pointer-events:none;left:0;top:-9.25926%;width:100%;height:118.51852%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-3a2b9bf1-e39c-450a-b119-53bc24038c63\">\n<div style=\"position:absolute;width:176.42689%;height:100%;left:0%;top:0%\" data-leaf-element=\"true\"><amp-img layout=\"fill\" src=\"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/image-1.png\" alt=\"Vue JS,vue js tutorial,configure webpack,setup vue project from scratch,setup vue 3 project, configure babel, setup vue project without cli\" srcSet=\"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/image-1.png 653w,http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/image-1-298x300.png 298w,http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/image-1-150x150.png 150w\" sizes=\"(min-width: 1024px) 80vh, 177vw\" disable-inline-width=\"true\"><\/amp-img><\/div>\n<div class=\"element-overlay-area\" style=\"background-color:rgba(0,0,0,0.5)\"><\/div>\n<\/div>\n<\/div>\n<div class=\"page-background-overlay-area\" style=\"background-color:rgba(0,0,0,0.5)\"><\/div>\n<\/div>\n<\/div>\n<p><\/amp-story-grid-layer><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><\/p>\n<div class=\"page-fullbleed-area\">\n<div class=\"page-safe-area\">\n<div style=\"position:absolute;pointer-events:none;left:9.8301%;top:50.16181%;width:80.09709%;height:5.66343%;opacity:1\">\n<div id=\"anim-a00bd404-cb2b-452c-bcb0-a1aef0e9dcb2\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:translate3d(112.57575%, 0px, 0)\">\n<div id=\"anim-ad5fad65-6542-4656-af43-94502dad6c1b\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\">\n<div id=\"anim-c0d26f53-89fc-48aa-b033-53205661bf70\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:scale(0.15)\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" id=\"el-a15ac36a-c8f2-45a3-8bd6-1dad0dc5056b\">\n<p class=\"fill text-wrapper\" style=\"white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word;margin:0% 0;font-family:&quot;Anton&quot;,sans-serif;font-size:0.566343em;line-height:1;text-align:center;padding:0;color:#000000\"><span><span style=\"color: #faf4ea; text-transform: uppercase\">Add Dependencies<\/span><\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:34.95146%;top:-5.33981%;width:29.85437%;height:2.91262%;opacity:1\">\n<div id=\"anim-feecaedb-a930-41a8-9830-64b5d442dab3\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:none\">\n<div id=\"anim-7bdbb380-c6e8-4034-b034-95333b558152\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:scale(3)\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" id=\"el-7c672c92-29df-41a8-a71b-28864ff42334\"><a href=\"http:\/\/frontendguruji.com\" data-tooltip-icon=\"http:\/\/frontendguruji.com\/wp-content\/uploads\/2021\/12\/cropped-logo-text-only-1.jpg\" data-tooltip-text=\"Exploring What, Why &amp; How of Frontend - &lt; FrontendGuruji \/&gt;\" target=\"_blank\" rel=\"noreferrer noopener\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0\"><\/p>\n<p class=\"fill text-wrapper\" style=\"white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word;margin:0% 0;font-family:&quot;Anton&quot;,sans-serif;font-size:0.226537em;line-height:1.3;text-align:center;padding:0;color:#000000\"><span><span style=\"color: #fff; text-transform: uppercase\">&lt; FrontENDguruji \/&gt;<\/span><\/span><\/p>\n<p><\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:11.40777%;top:58.09061%;width:76.94175%;height:8.57605%;opacity:1\">\n<div id=\"anim-5229a615-c910-4368-b7b1-ef8a2f86bf45\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:translate3d(-114.8265%, 0px, 0)\">\n<div id=\"anim-967046cc-3814-431a-aa35-ad9b8e8a73ef\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\">\n<div id=\"anim-5994aaba-fdff-4a1b-924f-d5693ddf2010\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:scale(0.15)\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:0.6309148264984227% 0.6309148264984227% 0.6309148264984227% 0.6309148264984227% \/ 3.7735849056603774% 3.7735849056603774% 3.7735849056603774% 3.7735849056603774%\" id=\"el-92ab6cc1-786f-4526-b5fa-845d404b07f8\">\n<p class=\"fill text-wrapper\" style=\"white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word;margin:1.6858025680205047% 0;font-family:&quot;Anton&quot;,sans-serif;font-size:0.566343em;line-height:1.2;text-align:center;padding:0;color:#000000\"><span><span style=\"color: #3fb984; text-transform: uppercase\">CreatE VUE App<\/span><\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:9.8301%;top:66.50485%;width:80.09709%;height:5.66343%;opacity:1\">\n<div id=\"anim-1e102cd9-4ec2-4efc-9a9f-90536a36877e\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:translate3d(112.57575%, 0px, 0)\">\n<div id=\"anim-b7ae8713-6607-4166-8c54-346c1317c165\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\">\n<div id=\"anim-c5767571-f722-4ffd-9067-585d5f646f28\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:scale(0.15)\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" id=\"el-f48a3544-b877-4c2f-a164-872ff1b34b75\">\n<p class=\"fill text-wrapper\" style=\"white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word;margin:0% 0;font-family:&quot;Anton&quot;,sans-serif;font-size:0.566343em;line-height:1;text-align:center;padding:0;color:#000000\"><span><span style=\"color: #faf4ea; text-transform: uppercase\">ConfigurE Webpack<\/span><\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:11.40777%;top:41.26214%;width:76.94175%;height:8.57605%;opacity:1\">\n<div id=\"anim-37990e86-ae8f-4154-ab99-f47605951392\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:translate3d(-114.8265%, 0px, 0)\">\n<div id=\"anim-0b90f5c2-0b6f-4965-a5fe-cb7984ed8c07\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\">\n<div id=\"anim-5666d932-a560-48bf-9a8f-9a623898d4ff\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:scale(0.15)\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:0.6309148264984227% 0.6309148264984227% 0.6309148264984227% 0.6309148264984227% \/ 3.7735849056603774% 3.7735849056603774% 3.7735849056603774% 3.7735849056603774%\" id=\"el-b02bc787-14b2-40bf-b003-1325eaa982f6\">\n<p class=\"fill text-wrapper\" style=\"white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word;margin:1.6858025680205047% 0;font-family:&quot;Anton&quot;,sans-serif;font-size:0.566343em;line-height:1.2;text-align:center;padding:0;color:#000000\"><span><span style=\"color: #3fb984; text-transform: uppercase\">Initialize a folder<\/span><\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:11.40777%;top:73.94822%;width:76.94175%;height:8.57605%;opacity:1\">\n<div id=\"anim-04f3a322-be85-4fd6-878d-b13814f4f748\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:translate3d(-114.8265%, 0px, 0)\">\n<div id=\"anim-45790c31-6b16-43bf-8fff-ee2c4b7f1821\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\">\n<div id=\"anim-c1ceb7a4-e126-4aac-8af7-4b05436ea214\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:scale(0.15)\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:0.6309148264984227% 0.6309148264984227% 0.6309148264984227% 0.6309148264984227% \/ 3.7735849056603774% 3.7735849056603774% 3.7735849056603774% 3.7735849056603774%\" id=\"el-f480be14-4aae-4d41-9078-e6439cb7084a\">\n<p class=\"fill text-wrapper\" style=\"white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word;margin:1.6858025680205047% 0;font-family:&quot;Anton&quot;,sans-serif;font-size:0.566343em;line-height:1.2;text-align:center;padding:0;color:#000000\"><span><span style=\"color: #3fb984; text-transform: uppercase\">ADD commands<\/span><\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:9.8301%;top:24.43366%;width:80.09709%;height:5.66343%;opacity:1\">\n<div id=\"anim-979742a3-097f-49cb-be53-9fd200f51f95\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:translate3d(112.57575%, 0px, 0)\">\n<div id=\"anim-94b1fee6-b759-41fb-8a4a-8582aa1c0071\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\">\n<div id=\"anim-0ded8b32-57a8-46ec-9e2a-9574febf7f95\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:scale(0.15)\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" id=\"el-6b6620ae-bbe0-46e9-8191-86b1db3fa587\">\n<p class=\"fill text-wrapper\" style=\"white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word;margin:0% 0;font-family:&quot;Anton&quot;,sans-serif;font-size:0.566343em;line-height:1;text-align:center;padding:0;color:#000000\"><span><span style=\"color: #faf4ea; text-transform: uppercase\">What you will learn?<\/span><\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:9.8301%;top:82.68608%;width:80.09709%;height:5.66343%;opacity:1\">\n<div id=\"anim-e9b4a559-4fc0-4d59-8e47-d311ac70c578\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:translate3d(112.57575%, 0px, 0)\">\n<div id=\"anim-99970c48-0b11-41f3-8f4b-a17f1aa9839f\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\">\n<div id=\"anim-1daaeca9-8491-4510-bb2d-216e598b4615\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:scale(0.15)\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" id=\"el-3a00beb5-119d-470a-b8a1-522c590a7a20\">\n<p class=\"fill text-wrapper\" style=\"white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word;margin:0% 0;font-family:&quot;Anton&quot;,sans-serif;font-size:0.566343em;line-height:1;text-align:center;padding:0;color:#000000\"><span><span style=\"color: #faf4ea; text-transform: uppercase\">build the project<\/span><\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:31.91748%;top:1.61812%;width:39.56311%;height:18.60841%;opacity:1\">\n<div id=\"anim-a5755936-3906-4fe7-b03e-c60ff1c66c1e\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\">\n<div id=\"anim-f56749b5-fb0c-4421-86f0-f74557886764\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:scale(0.3333333333333333)\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-568c2d37-193c-4aa7-ac3b-ef98dd7017b1\">\n<div style=\"position:absolute;width:100%;height:122.82466%;left:0%;top:-11.41233%\" data-leaf-element=\"true\"><amp-img layout=\"fill\" src=\"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1184px-Vue.js_Logo_2.svg_.png\" alt=\"Vue JS,vue js tutorial,configure webpack,setup vue project from scratch,setup vue 3 project, configure babel, setup vue project without cli\" srcSet=\"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1184px-Vue.js_Logo_2.svg_.png 1184w,http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1184px-Vue.js_Logo_2.svg_-1024x887.png 1024w,http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1184px-Vue.js_Logo_2.svg_-768x666.png 768w,http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1184px-Vue.js_Logo_2.svg_-300x260.png 300w,http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1184px-Vue.js_Logo_2.svg_-150x130.png 150w\" sizes=\"(min-width: 1024px) 18vh, 40vw\" disable-inline-width=\"true\"><\/amp-img><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><\/amp-story-grid-layer><amp-story-page-outlink layout=\"nodisplay\" cta-image=\"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/cropped-1184px-Vue.js_Logo_2.svg_.png\"><a href=\"http:\/\/frontendguruji.com\/how-to-setup-a-vue-js-project-from-scratch-without-vue-cli\/\" rel=\"\">Learn more<\/a><\/amp-story-page-outlink><\/amp-story-page><amp-story-page id=\"9c23ba61-9cc4-4bc1-80ae-2c5c4194609e\" auto-advance-after=\"7s\"><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-3f2cf8bd-4857-4dd5-8e9b-799c7ac4afcb\",\"keyframes\":{\"opacity\":[1,1]},\"delay\":0,\"duration\":500,\"easing\":\"cubic-bezier(.3,0,.55,1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-cf9467d0-a84c-44bf-bad9-58787448e83d\",\"keyframes\":{\"transform\":[\"scale(3)\",\"scale(1)\"]},\"delay\":0,\"duration\":500,\"easing\":\"cubic-bezier(.3,0,.55,1)\",\"fill\":\"forwards\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-ea0f01b3-9ef4-41a3-98c5-8338c8aa2105\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":0,\"duration\":500,\"easing\":\"cubic-bezier(.3,0,.55,1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-80b06e66-ba7d-452a-8cb0-a5449a7f533b\",\"keyframes\":{\"transform\":[\"scale(0.3333333333333333)\",\"scale(1)\"]},\"delay\":0,\"duration\":500,\"easing\":\"cubic-bezier(.3,0,.55,1)\",\"fill\":\"forwards\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-b5dcc119-a617-4319-a173-8fb4fee29ace\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":0,\"duration\":500,\"easing\":\"cubic-bezier(.3,0,.55,1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-9268fa86-5c2c-4613-81b5-011de50f505a\",\"keyframes\":{\"transform\":[\"scale(0.3333333333333333)\",\"scale(1)\"]},\"delay\":0,\"duration\":500,\"easing\":\"cubic-bezier(.3,0,.55,1)\",\"fill\":\"forwards\"}]<\/script><\/amp-story-animation><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><\/p>\n<div class=\"page-fullbleed-area\" style=\"background-color:#0c1013\">\n<div class=\"page-safe-area\">\n<div style=\"position:absolute;pointer-events:none;left:0;top:-9.25926%;width:100%;height:118.51852%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-4132b607-efd1-42f5-8203-4149d1236c78\">\n<div style=\"position:absolute;width:176.42689%;height:100%;left:0%;top:0%\" data-leaf-element=\"true\"><amp-img layout=\"fill\" src=\"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/image-1.png\" alt=\"Vue JS,vue js tutorial,configure webpack,setup vue project from scratch,setup vue 3 project, configure babel, setup vue project without cli\" srcSet=\"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/image-1.png 653w,http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/image-1-298x300.png 298w,http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/image-1-150x150.png 150w\" sizes=\"(min-width: 1024px) 80vh, 177vw\" disable-inline-width=\"true\"><\/amp-img><\/div>\n<div class=\"element-overlay-area\" style=\"background-color:rgba(0,0,0,0.5)\"><\/div>\n<\/div>\n<\/div>\n<div class=\"page-background-overlay-area\" style=\"background-color:rgba(0,0,0,0.5)\"><\/div>\n<\/div>\n<\/div>\n<p><\/amp-story-grid-layer><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><\/p>\n<div class=\"page-fullbleed-area\">\n<div class=\"page-safe-area\">\n<div style=\"position:absolute;pointer-events:none;left:35.07282%;top:-5.33981%;width:29.85437%;height:2.91262%;opacity:1\">\n<div id=\"anim-3f2cf8bd-4857-4dd5-8e9b-799c7ac4afcb\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:none\">\n<div id=\"anim-cf9467d0-a84c-44bf-bad9-58787448e83d\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:scale(3)\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" id=\"el-3b1339a8-f688-4366-a3db-1d6fff9641b4\"><a href=\"http:\/\/frontendguruji.com\" data-tooltip-icon=\"http:\/\/frontendguruji.com\/wp-content\/uploads\/2021\/12\/cropped-logo-text-only-1.jpg\" data-tooltip-text=\"Exploring What, Why &amp; How of Frontend - &lt; FrontendGuruji \/&gt;\" target=\"_blank\" rel=\"noreferrer noopener\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0\"><\/p>\n<p class=\"fill text-wrapper\" style=\"white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word;margin:0% 0;font-family:&quot;Anton&quot;,sans-serif;font-size:0.226537em;line-height:1.3;text-align:center;padding:0;color:#000000\"><span><span style=\"color: #fff; text-transform: uppercase\">&lt; FrontENDguruji \/&gt;<\/span><\/span><\/p>\n<p><\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:29.97573%;top:17.1521%;width:40.04854%;height:3.07443%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:1.2121212121212122% 1.2121212121212122% 1.2121212121212122% 1.2121212121212122% \/ 10.526315789473683% 10.526315789473683% 10.526315789473683% 10.526315789473683%\" id=\"el-85bdbb76-0973-45c9-9298-42d85dc428f0\">\n<p class=\"fill text-wrapper\" style=\"white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word;margin:-1.6107954545454537% 0;font-family:&quot;Roboto&quot;,&quot;Helvetica Neue&quot;,&quot;Helvetica&quot;,sans-serif;font-size:0.262136em;line-height:1.5;text-align:center;padding:0;color:#000000\"><span>Fill in some text<\/span><\/p>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:14.07767%;top:23.78641%;width:72.08738%;height:65.53398%;opacity:1\">\n<div id=\"anim-ea0f01b3-9ef4-41a3-98c5-8338c8aa2105\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\">\n<div id=\"anim-80b06e66-ba7d-452a-8cb0-a5449a7f533b\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:scale(0.3333333333333333)\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:0.6734006734006733% 0.6734006734006733% 0.6734006734006733% 0.6734006734006733% \/ 0.49382716049382713% 0.49382716049382713% 0.49382716049382713% 0.49382716049382713%\" id=\"el-ea58713a-4f1e-4de4-b7fe-539cbddf656c\">\n<p class=\"fill text-wrapper\" style=\"white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word;margin:0.027126736111111112% 0;font-family:&quot;Anton&quot;,sans-serif;font-size:0.485437em;line-height:1.5;text-align:center;padding:0;color:#000000\"><span><span style=\"color: #fff; text-transform: uppercase\">VUE JS project can be setup using only one command.<\/span><\/p>\n<p><span style=\"color: #fff; text-transform: uppercase\">But this tutorial will do it hard way, to help you see what&nbsp;<\/span><br \/>\n<span style=\"color: #fff; text-transform: uppercase\">VUE-CLI&nbsp;<\/span><br \/>\n<span style=\"color: #fff; text-transform: uppercase\">use under the hood.<\/span><\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:31.91748%;top:1.77994%;width:39.56311%;height:18.60841%;opacity:1\">\n<div id=\"anim-b5dcc119-a617-4319-a173-8fb4fee29ace\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\">\n<div id=\"anim-9268fa86-5c2c-4613-81b5-011de50f505a\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:scale(0.3333333333333333)\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-2919e98b-b71e-4513-936f-16b128b19d84\">\n<div style=\"position:absolute;width:100%;height:122.82466%;left:0%;top:-11.41233%\" data-leaf-element=\"true\"><amp-img layout=\"fill\" src=\"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1184px-Vue.js_Logo_2.svg_.png\" alt=\"Vue JS,vue js tutorial,configure webpack,setup vue project from scratch,setup vue 3 project, configure babel, setup vue project without cli\" srcSet=\"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1184px-Vue.js_Logo_2.svg_.png 1184w,http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1184px-Vue.js_Logo_2.svg_-1024x887.png 1024w,http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1184px-Vue.js_Logo_2.svg_-768x666.png 768w,http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1184px-Vue.js_Logo_2.svg_-300x260.png 300w,http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1184px-Vue.js_Logo_2.svg_-150x130.png 150w\" sizes=\"(min-width: 1024px) 18vh, 40vw\" disable-inline-width=\"true\"><\/amp-img><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><\/amp-story-grid-layer><amp-story-page-outlink layout=\"nodisplay\" cta-image=\"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/cropped-1184px-Vue.js_Logo_2.svg_.png\"><a href=\"http:\/\/frontendguruji.com\/how-to-setup-a-vue-js-project-from-scratch-without-vue-cli\/\" rel=\"\">Learn more<\/a><\/amp-story-page-outlink><\/amp-story-page><\/amp-story><\/body><\/html><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to setup Vue 3 project from scratch, without using Vue CLI and also how to configure webpack, configure babel, configure Webpack loaders and plugins and add build commands.<\/p>\n","protected":false},"author":1,"featured_media":339,"template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-global-header-display":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","web_stories_products":[],"web_stories_publisher_logo":218,"web_stories_poster":[]},"web_story_category":[68,69,71,74,67],"web_story_tag":[64,62,61,70,66,72,73,63],"story_data":{"version":36,"pages":[{"elements":[{"x":0,"y":-58,"width":729,"height":733,"type":"image","opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"mask":{"type":"rectangle"},"isBackground":true,"id":"595cb755-261f-485f-a058-66b8593c0512","basedOn":"acc2f8e0-b819-4adf-9b9f-7bf7c878d7b9","scale":100,"focalX":27.957503828483933,"focalY":50,"resource":{"baseColor":"#0c1013","type":"image","mimeType":"image\/png","creationDate":"2022-01-01T18:38:46","src":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/image-1.png","width":653,"height":658,"id":176,"alt":"","sizes":{"medium":{"file":"image-1-298x300.png","width":298,"height":300,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/image-1-298x300.png"},"thumbnail":{"file":"image-1-150x150.png","width":150,"height":150,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/image-1-150x150.png"},"full":{"file":"image-1.png","width":653,"height":658,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/image-1.png"}},"local":false,"isPlaceholder":false,"isOptimized":false,"isMuted":false,"isExternal":false,"needsProxy":false},"overlay":{"color":{"r":0,"g":0,"b":0,"a":0.5}},"alt":"Vue JS,vue js tutorial,configure webpack,setup vue project from scratch,setup vue 3 project, configure babel, setup vue project without cli"},{"x":48,"y":139,"width":330,"height":252,"font":{"service":"fonts.google.com","family":"Anton","fallbacks":["sans-serif"]},"type":"text","opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1,"textAlign":"center","id":"44f0e691-e7e6-435f-8082-ca463b044c00","scale":100,"focalX":50,"focalY":50,"content":"<span style=\"color: #faf4ea; text-transform: uppercase\">SETUP<\/span>\n<span style=\"color: #faf4ea; text-transform: uppercase\">VUE 3&nbsp;<\/span>\n<span style=\"color: #faf4ea; text-transform: uppercase\">PROJECT&nbsp;<\/span>","fontSize":84,"padding":{"horizontal":0,"vertical":0},"basedOn":"a3a89bb8-b960-4f06-994d-585888f9e766","link":null},{"x":151.5,"y":-33,"width":123,"height":18,"font":{"service":"fonts.google.com","family":"Anton","fallbacks":["sans-serif"]},"type":"text","opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.3,"textAlign":"center","scale":100,"focalX":50,"focalY":50,"basedOn":"96020cbe-2b51-4cf9-8fdd-5f78457072fd","id":"9c86fb0f-4dab-4a81-8da1-f65a75ce4f8e","content":"<span style=\"color: #fff; text-transform: uppercase\">&lt; FrontENDguruji \/&gt;<\/span>","fontSize":14,"padding":{"horizontal":0,"vertical":0}},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Anton","service":"fonts.google.com","fallbacks":["sans-serif"],"weights":[400],"styles":["regular"],"variants":[[0,400]],"metrics":{"upm":2048,"asc":2409,"des":-674,"tAsc":2409,"tDes":-674,"tLGap":0,"wAsc":2876,"wDes":674,"xH":1500,"capH":1760,"yMin":-667,"yMax":2874,"hAsc":2409,"hDes":-674,"lGap":0}},"fontSize":40,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.2,"textAlign":"center","padding":{"locked":true,"hasHiddenPadding":false,"horizontal":0,"vertical":0},"type":"text","content":"<span style=\"color: #3fb984\">WITHOUT&nbsp;<\/span>\n<span style=\"color: #3fb984\">VUE-CLI<\/span>","fontWeight":700,"borderRadius":{"locked":true,"topLeft":2,"topRight":2,"bottomRight":2,"bottomLeft":2},"x":54.5,"y":405,"width":317,"height":108,"scale":100,"focalX":50,"focalY":50,"id":"cfcbd4cc-d323-49f8-932d-88c7f12efa25","basedOn":"68dfda35-19d0-46ce-868e-a10d351b885c"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"scale":100,"focalX":50,"focalY":50,"resource":{"baseColor":"#34445c","type":"image","mimeType":"image\/png","creationDate":1641475822000,"src":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1184px-Vue.js_Logo_2.svg_.png","width":1184,"height":1026,"id":306,"alt":"1184px-Vue.js_Logo_2.svg","sizes":{"medium":{"file":"1184px-Vue.js_Logo_2.svg_-300x260.png","width":300,"height":260,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1184px-Vue.js_Logo_2.svg_-300x260.png"},"large":{"file":"1184px-Vue.js_Logo_2.svg_-1024x887.png","width":1024,"height":887,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1184px-Vue.js_Logo_2.svg_-1024x887.png"},"thumbnail":{"file":"1184px-Vue.js_Logo_2.svg_-150x150.png","width":150,"height":150,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1184px-Vue.js_Logo_2.svg_-150x150.png"},"medium_large":{"file":"1184px-Vue.js_Logo_2.svg_-768x666.png","width":768,"height":666,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1184px-Vue.js_Logo_2.svg_-768x666.png"},"web-stories-poster-portrait":{"file":"1184px-Vue.js_Logo_2.svg_-640x853.png","width":640,"height":853,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1184px-Vue.js_Logo_2.svg_-640x853.png"},"web-stories-publisher-logo":{"file":"1184px-Vue.js_Logo_2.svg_-96x96.png","width":96,"height":96,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1184px-Vue.js_Logo_2.svg_-96x96.png"},"web-stories-thumbnail":{"file":"1184px-Vue.js_Logo_2.svg_-150x130.png","width":150,"height":130,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1184px-Vue.js_Logo_2.svg_-150x130.png"},"full":{"file":"1184px-Vue.js_Logo_2.svg_.png","width":1184,"height":1026,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1184px-Vue.js_Logo_2.svg_.png"}},"local":false,"isPlaceholder":false,"isOptimized":false,"isMuted":false,"isExternal":false,"needsProxy":false},"type":"image","x":131.5,"y":10,"width":163,"height":115,"mask":{"type":"rectangle","showInLibrary":true,"name":"Rectangle","path":"M 0,0 1,0 1,1 0,1 0,0 Z","ratio":1,"supportsBorder":true},"id":"ec693630-afb8-4a6d-bfd4-c054ec3cc52c","basedOn":"e8cc4c6c-08ce-48ad-a538-495720d546ef","alt":"Vue JS,vue js tutorial,configure webpack,setup vue project from scratch,setup vue 3 project, configure babel, setup vue project without cli"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Roboto","weights":[100,300,400,500,700,900],"styles":["italic","regular"],"variants":[[0,100],[0,300],[0,400],[0,500],[0,700],[0,900],[1,100],[1,300],[1,400],[1,500],[1,700],[1,900]],"fallbacks":["Helvetica Neue","Helvetica","sans-serif"],"service":"fonts.google.com","metrics":{"upm":2048,"asc":1900,"des":-500,"tAsc":1536,"tDes":-512,"tLGap":102,"wAsc":1946,"wDes":512,"xH":1082,"capH":1456,"yMin":-555,"yMax":2163,"hAsc":1900,"hDes":-500,"lGap":0}},"fontSize":12,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.5,"textAlign":"center","padding":{"locked":true,"hasHiddenPadding":false,"horizontal":null,"vertical":null},"type":"text","content":"<span style=\"color: #fff\">LEARN WHAT VUE-CLI<\/span>\n<span style=\"color: #fff\">USE UNDER THE HOOD<\/span>","fontWeight":400,"borderRadius":{"locked":true,"topLeft":2,"topRight":2,"bottomRight":2,"bottomLeft":2},"x":55,"y":527,"width":316,"height":32,"scale":100,"focalX":50,"focalY":50,"id":"3b0c6f27-c2b1-425c-8e2c-c25b9f8b5a91","basedOn":"b9dc2b1a-10f4-4825-9c43-ee92a0ee435f"}],"animations":[{"id":"e53eb847-c3ed-42f6-9609-f30eeefffc2c","type":"effect-fly-in","flyInDir":"topToBottom","duration":600,"delay":0,"targets":["44f0e691-e7e6-435f-8082-ca463b044c00"]},{"id":"e4e6d24b-81a7-4ff1-b584-ae9ddbcfe9cf","type":"effect-zoom","targets":["9c86fb0f-4dab-4a81-8da1-f65a75ce4f8e"],"scaleDirection":"scaleOut","duration":500,"delay":0},{"id":"6be4eb5c-b161-4c05-b91f-e3f657bb54fb","type":"effect-fly-in","flyInDir":"bottomToTop","duration":600,"delay":0,"targets":["cfcbd4cc-d323-49f8-932d-88c7f12efa25"]},{"id":"62330291-234d-4558-9230-9cf334a29ba9","type":"effect-zoom","targets":["ec693630-afb8-4a6d-bfd4-c054ec3cc52c"],"scaleDirection":"scaleIn","duration":500,"delay":0},{"id":"c0590b7b-7889-4b4b-9916-64f332917915","type":"effect-fly-in","flyInDir":"bottomToTop","duration":600,"delay":0,"targets":["3b0c6f27-c2b1-425c-8e2c-c25b9f8b5a91"]}],"type":"page","id":"02d473e3-9875-413e-861b-ab8258947f69","backgroundOverlay":"none","backgroundColor":{"color":{"r":33,"g":31,"b":30}},"pageTemplateType":"cover","defaultBackgroundElement":{"x":90,"y":79,"width":128,"height":128,"type":"shape","opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"mask":{"type":"rectangle"},"isBackground":true,"id":"e41ddcf9-574d-4d12-82fb-305ca0f0af89","isDefaultBackground":true,"basedOn":"acc2f8e0-b819-4adf-9b9f-7bf7c878d7b9"},"pageAttachment":{"url":"http:\/\/frontendguruji.com\/how-to-setup-a-vue-js-project-from-scratch-without-vue-cli\/","icon":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/cropped-1184px-Vue.js_Logo_2.svg_.png","needsProxy":false,"theme":"light"}},{"elements":[{"x":0,"y":-58,"width":729,"height":733,"type":"image","opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"mask":{"type":"rectangle"},"isBackground":true,"id":"16dbc2f8-35e8-4a9c-9c52-c837898532bb","basedOn":"6662b726-7a3b-40c4-94e3-4008f2d3406a","scale":100,"focalX":27.957503828483933,"focalY":50,"resource":{"baseColor":"#0c1013","type":"image","mimeType":"image\/png","creationDate":"2022-01-01T18:38:46","src":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/image-1.png","width":653,"height":658,"id":176,"alt":"","sizes":{"medium":{"file":"image-1-298x300.png","width":298,"height":300,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/image-1-298x300.png"},"thumbnail":{"file":"image-1-150x150.png","width":150,"height":150,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/image-1-150x150.png"},"full":{"file":"image-1.png","width":653,"height":658,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/image-1.png"}},"local":false,"isPlaceholder":false,"isOptimized":false,"isMuted":false,"isExternal":false,"needsProxy":false},"overlay":{"color":{"r":0,"g":0,"b":0,"a":0.5}},"alt":"Vue JS,vue js tutorial,configure webpack,setup vue project from scratch,setup vue 3 project, configure babel, setup vue project without cli"},{"x":45,"y":319,"width":330,"height":45,"font":{"service":"fonts.google.com","family":"Anton","fallbacks":["sans-serif"]},"type":"text","opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1,"textAlign":"center","id":"441a9630-e92b-42f3-b528-ffe0d3deaff2","scale":100,"focalX":50,"focalY":50,"content":"<span style=\"color: #3fb984; text-transform: uppercase\">VUE V3<\/span>","fontSize":45,"padding":{"horizontal":0,"vertical":0},"basedOn":"fba6d0f2-61d3-453c-8b97-f7625d81dde9","link":null},{"x":148.5,"y":-33,"width":123,"height":18,"font":{"service":"fonts.google.com","family":"Anton","fallbacks":["sans-serif"]},"type":"text","opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.3,"textAlign":"center","scale":100,"focalX":50,"focalY":50,"basedOn":"ebdc8438-52fe-44f0-b31a-58167f2af89f","id":"8a5cc949-8230-4747-ab91-20e258c12976","content":"<span style=\"color: #fff; text-transform: uppercase\">&lt; FrontENDguruji \/&gt;<\/span>","fontSize":14,"padding":{"horizontal":0,"vertical":0},"link":{"needsProxy":false,"url":"http:\/\/frontendguruji.com","rel":["noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer"],"icon":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2021\/12\/cropped-logo-text-only-1.jpg","desc":"Exploring What, Why & How of Frontend - < FrontendGuruji \/>"}},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Anton","service":"fonts.google.com","fallbacks":["sans-serif"],"weights":[400],"styles":["regular"],"variants":[[0,400]],"metrics":{"upm":2048,"asc":2409,"des":-674,"tAsc":2409,"tDes":-674,"tLGap":0,"wAsc":2876,"wDes":674,"xH":1500,"capH":1760,"yMin":-667,"yMax":2874,"hAsc":2409,"hDes":-674,"lGap":0}},"fontSize":45,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.2,"textAlign":"center","padding":{"locked":true,"hasHiddenPadding":false,"horizontal":0,"vertical":0},"type":"text","content":"<span style=\"color: #fff\">VUE ROUTER V4<\/span>","fontWeight":700,"borderRadius":{"locked":true,"topLeft":2,"topRight":2,"bottomRight":2,"bottomLeft":2},"x":52,"y":378,"width":317,"height":68,"scale":100,"focalX":50,"focalY":50,"id":"3be5acd0-0e3f-4f2b-9255-cb7db212252b","basedOn":"1fc1a8b6-31bc-4c39-b933-a984adb652d1","link":null},{"x":45,"y":447,"width":330,"height":45,"font":{"service":"fonts.google.com","family":"Anton","fallbacks":["sans-serif"]},"type":"text","opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1,"textAlign":"center","scale":100,"focalX":50,"focalY":50,"content":"<span style=\"color: #3fb984; text-transform: uppercase\">webpack v5<\/span>","fontSize":45,"padding":{"horizontal":0,"vertical":0},"basedOn":"619622f6-f9d5-42aa-bc47-123b5c2d93a8","id":"832da199-74bb-450d-b9e2-537ef010cb1e","link":null},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Anton","service":"fonts.google.com","fallbacks":["sans-serif"],"weights":[400],"styles":["regular"],"variants":[[0,400]],"metrics":{"upm":2048,"asc":2409,"des":-674,"tAsc":2409,"tDes":-674,"tLGap":0,"wAsc":2876,"wDes":674,"xH":1500,"capH":1760,"yMin":-667,"yMax":2874,"hAsc":2409,"hDes":-674,"lGap":0}},"fontSize":45,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.2,"textAlign":"center","padding":{"locked":true,"hasHiddenPadding":false,"horizontal":0,"vertical":0},"type":"text","content":"<span style=\"color: #fff\">scss<\/span>","fontWeight":700,"borderRadius":{"locked":true,"topLeft":2,"topRight":2,"bottomRight":2,"bottomLeft":2},"x":52,"y":502,"width":317,"height":68,"scale":100,"focalX":50,"focalY":50,"basedOn":"7a925e55-de85-4a28-82a0-d42807151726","id":"7b1e0f11-5945-4f4b-8a77-136a276cc5ad"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Anton","service":"fonts.google.com","fallbacks":["sans-serif"],"weights":[400],"styles":["regular"],"variants":[[0,400]],"metrics":{"upm":2048,"asc":2409,"des":-674,"tAsc":2409,"tDes":-674,"tLGap":0,"wAsc":2876,"wDes":674,"xH":1500,"capH":1760,"yMin":-667,"yMax":2874,"hAsc":2409,"hDes":-674,"lGap":0}},"fontSize":45,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.2,"textAlign":"center","padding":{"locked":true,"hasHiddenPadding":false,"horizontal":0,"vertical":0},"type":"text","content":"<span style=\"color: #fff\">NODE V17<\/span>","fontWeight":700,"borderRadius":{"locked":true,"topLeft":2,"topRight":2,"bottomRight":2,"bottomLeft":2},"x":52,"y":250,"width":317,"height":68,"scale":100,"focalX":50,"focalY":50,"basedOn":"262f5121-2d77-4561-a417-8a73cb3b6851","id":"7b621dff-c611-4076-a145-041f32af0711"},{"x":45,"y":137,"width":330,"height":35,"font":{"service":"fonts.google.com","family":"Anton","fallbacks":["sans-serif"]},"type":"text","opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1,"textAlign":"center","scale":100,"focalX":50,"focalY":50,"content":"<span style=\"color: #faf4ea; text-transform: uppercase\">what will you use?<\/span>","fontSize":35,"padding":{"horizontal":0,"vertical":0},"basedOn":"867c5b0d-c634-4d0c-85c3-7b073dbbcea9","id":"55fe76f3-4eb9-4b05-a63b-d1d1205f2f54","link":null},{"x":45,"y":192,"width":330,"height":45,"font":{"service":"fonts.google.com","family":"Anton","fallbacks":["sans-serif"]},"type":"text","opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1,"textAlign":"center","scale":100,"focalX":50,"focalY":50,"content":"<span style=\"color: #3fb984; text-transform: uppercase\">NPM<\/span>","fontSize":45,"padding":{"horizontal":0,"vertical":0},"basedOn":"f5d11a01-3bb4-4b37-a3c4-23c0192ef26a","id":"f0d92200-fa77-4924-ae32-06f63390084d","link":null},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"scale":100,"focalX":50,"focalY":50,"resource":{"baseColor":"#34445c","type":"image","mimeType":"image\/png","creationDate":1641475822000,"src":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1184px-Vue.js_Logo_2.svg_.png","width":1184,"height":1026,"id":306,"alt":"1184px-Vue.js_Logo_2.svg","sizes":{"medium":{"file":"1184px-Vue.js_Logo_2.svg_-300x260.png","width":300,"height":260,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1184px-Vue.js_Logo_2.svg_-300x260.png"},"large":{"file":"1184px-Vue.js_Logo_2.svg_-1024x887.png","width":1024,"height":887,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1184px-Vue.js_Logo_2.svg_-1024x887.png"},"thumbnail":{"file":"1184px-Vue.js_Logo_2.svg_-150x150.png","width":150,"height":150,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1184px-Vue.js_Logo_2.svg_-150x150.png"},"medium_large":{"file":"1184px-Vue.js_Logo_2.svg_-768x666.png","width":768,"height":666,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1184px-Vue.js_Logo_2.svg_-768x666.png"},"web-stories-poster-portrait":{"file":"1184px-Vue.js_Logo_2.svg_-640x853.png","width":640,"height":853,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1184px-Vue.js_Logo_2.svg_-640x853.png"},"web-stories-publisher-logo":{"file":"1184px-Vue.js_Logo_2.svg_-96x96.png","width":96,"height":96,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1184px-Vue.js_Logo_2.svg_-96x96.png"},"web-stories-thumbnail":{"file":"1184px-Vue.js_Logo_2.svg_-150x130.png","width":150,"height":130,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1184px-Vue.js_Logo_2.svg_-150x130.png"},"full":{"file":"1184px-Vue.js_Logo_2.svg_.png","width":1184,"height":1026,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1184px-Vue.js_Logo_2.svg_.png"}},"local":false,"isPlaceholder":false,"isOptimized":false,"isMuted":false,"isExternal":false,"needsProxy":false},"type":"image","x":131.5,"y":10,"width":163,"height":115,"mask":{"type":"rectangle","showInLibrary":true,"name":"Rectangle","path":"M 0,0 1,0 1,1 0,1 0,0 Z","ratio":1,"supportsBorder":true},"basedOn":"ec693630-afb8-4a6d-bfd4-c054ec3cc52c","id":"b0d93824-c5c8-4448-852c-35b0e4470cbf","alt":"Vue JS,vue js tutorial,configure webpack,setup vue project from scratch,setup vue 3 project, configure babel, setup vue project without cli"}],"animations":[{"id":"7f441495-9d0a-4b7e-b64f-f9d712fc6482","type":"effect-whoosh-in","whooshInDir":"rightToLeft","duration":600,"delay":0,"targets":["441a9630-e92b-42f3-b528-ffe0d3deaff2"]},{"id":"1e58bb5e-525e-406d-a832-cc1203e96116","type":"effect-zoom","targets":["8a5cc949-8230-4747-ab91-20e258c12976"],"scaleDirection":"scaleOut","duration":500,"delay":0},{"id":"6bb1339a-f941-4db2-b956-20aff73eee7e","type":"effect-whoosh-in","whooshInDir":"leftToRight","duration":600,"delay":0,"targets":["3be5acd0-0e3f-4f2b-9255-cb7db212252b"]},{"id":"883ffb3a-4b46-40a0-a2b7-16600c2dcaa9","type":"effect-whoosh-in","whooshInDir":"rightToLeft","duration":600,"delay":0,"targets":["832da199-74bb-450d-b9e2-537ef010cb1e"]},{"id":"129c7723-44e9-45e7-ba8c-cec7d87f3220","type":"effect-whoosh-in","whooshInDir":"leftToRight","duration":600,"delay":0,"targets":["7b1e0f11-5945-4f4b-8a77-136a276cc5ad"]},{"id":"576d5258-1a39-4805-a7f3-c19d66971941","type":"effect-whoosh-in","whooshInDir":"leftToRight","duration":600,"delay":0,"targets":["7b621dff-c611-4076-a145-041f32af0711"]},{"id":"f2575a1b-2505-4ec3-8175-fca61686f413","type":"effect-fade-in","duration":600,"delay":0,"targets":["55fe76f3-4eb9-4b05-a63b-d1d1205f2f54"]},{"targets":["f0d92200-fa77-4924-ae32-06f63390084d"],"id":"b66a7a8b-b2d3-43b0-9989-0d4c7f42469b","type":"effect-whoosh-in","whooshInDir":"rightToLeft","duration":600,"delay":0},{"targets":["b0d93824-c5c8-4448-852c-35b0e4470cbf"],"id":"30ac582d-4048-472b-b20c-5d21fbcadcf3","type":"effect-zoom","scaleDirection":"scaleIn","duration":500,"delay":0}],"type":"page","id":"8f73a2ad-73bb-44c3-b640-8a1e5b7d392e","backgroundOverlay":"none","backgroundColor":{"color":{"r":33,"g":31,"b":30}},"pageTemplateType":"cover","defaultBackgroundElement":{"x":90,"y":79,"width":128,"height":128,"type":"shape","opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"mask":{"type":"rectangle"},"isBackground":true,"id":"595cb755-261f-485f-a058-66b8593c0512","isDefaultBackground":true,"basedOn":"acc2f8e0-b819-4adf-9b9f-7bf7c878d7b9"},"pageAttachment":{"url":"http:\/\/frontendguruji.com\/how-to-setup-a-vue-js-project-from-scratch-without-vue-cli\/","icon":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/cropped-1184px-Vue.js_Logo_2.svg_.png","needsProxy":false}},{"elements":[{"x":0,"y":-58,"width":729,"height":733,"type":"image","opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"mask":{"type":"rectangle"},"isBackground":true,"id":"3a2b9bf1-e39c-450a-b119-53bc24038c63","basedOn":"d385bdcb-3561-430c-b244-190bae27a398","scale":100,"focalX":27.957503828483933,"focalY":50,"resource":{"baseColor":"#0c1013","type":"image","mimeType":"image\/png","creationDate":"2022-01-01T18:38:46","src":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/image-1.png","width":653,"height":658,"id":176,"alt":"","sizes":{"medium":{"file":"image-1-298x300.png","width":298,"height":300,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/image-1-298x300.png"},"thumbnail":{"file":"image-1-150x150.png","width":150,"height":150,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/image-1-150x150.png"},"full":{"file":"image-1.png","width":653,"height":658,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/image-1.png"}},"local":false,"isPlaceholder":false,"isOptimized":false,"isMuted":false,"isExternal":false,"needsProxy":false},"overlay":{"color":{"r":0,"g":0,"b":0,"a":0.5}},"alt":"Vue JS,vue js tutorial,configure webpack,setup vue project from scratch,setup vue 3 project, configure babel, setup vue project without cli"},{"x":40.5,"y":310,"width":330,"height":35,"font":{"service":"fonts.google.com","family":"Anton","fallbacks":["sans-serif"]},"type":"text","opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1,"textAlign":"center","id":"a15ac36a-c8f2-45a3-8bd6-1dad0dc5056b","scale":100,"focalX":50,"focalY":50,"content":"<span style=\"color: #faf4ea; text-transform: uppercase\">Add Dependencies<\/span>","fontSize":35,"padding":{"horizontal":0,"vertical":0},"basedOn":"a44426ad-9556-4e9e-b0f5-8e0f32f2b1c7"},{"x":144,"y":-33,"width":123,"height":18,"font":{"service":"fonts.google.com","family":"Anton","fallbacks":["sans-serif"]},"type":"text","opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.3,"textAlign":"center","scale":100,"focalX":50,"focalY":50,"basedOn":"ba66ad63-bcb9-4920-b666-979781928b34","id":"7c672c92-29df-41a8-a71b-28864ff42334","content":"<span style=\"color: #fff; text-transform: uppercase\">&lt; FrontENDguruji \/&gt;<\/span>","fontSize":14,"padding":{"horizontal":0,"vertical":0},"link":{"needsProxy":false,"url":"http:\/\/frontendguruji.com","rel":["noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer"],"icon":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2021\/12\/cropped-logo-text-only-1.jpg","desc":"Exploring What, Why & How of Frontend - < FrontendGuruji \/>"}},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Anton","service":"fonts.google.com","fallbacks":["sans-serif"],"weights":[400],"styles":["regular"],"variants":[[0,400]],"metrics":{"upm":2048,"asc":2409,"des":-674,"tAsc":2409,"tDes":-674,"tLGap":0,"wAsc":2876,"wDes":674,"xH":1500,"capH":1760,"yMin":-667,"yMax":2874,"hAsc":2409,"hDes":-674,"lGap":0}},"fontSize":35,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.2,"textAlign":"center","padding":{"locked":true,"hasHiddenPadding":false,"horizontal":0,"vertical":0},"type":"text","content":"<span style=\"color: #3fb984; text-transform: uppercase\">CreatE VUE App<\/span>","fontWeight":700,"borderRadius":{"locked":true,"topLeft":2,"topRight":2,"bottomRight":2,"bottomLeft":2},"x":47,"y":359,"width":317,"height":53,"scale":100,"focalX":50,"focalY":50,"id":"92ab6cc1-786f-4526-b5fa-845d404b07f8","basedOn":"77dec8b0-174f-4eb4-af5f-7fe9c5ded752"},{"x":40.5,"y":411,"width":330,"height":35,"font":{"service":"fonts.google.com","family":"Anton","fallbacks":["sans-serif"]},"type":"text","opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1,"textAlign":"center","scale":100,"focalX":50,"focalY":50,"content":"<span style=\"color: #faf4ea; text-transform: uppercase\">ConfigurE Webpack<\/span>","fontSize":35,"padding":{"horizontal":0,"vertical":0},"basedOn":"d59d9175-1111-482d-a5ba-bd29ce96122f","id":"f48a3544-b877-4c2f-a164-872ff1b34b75"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Anton","service":"fonts.google.com","fallbacks":["sans-serif"],"weights":[400],"styles":["regular"],"variants":[[0,400]],"metrics":{"upm":2048,"asc":2409,"des":-674,"tAsc":2409,"tDes":-674,"tLGap":0,"wAsc":2876,"wDes":674,"xH":1500,"capH":1760,"yMin":-667,"yMax":2874,"hAsc":2409,"hDes":-674,"lGap":0}},"fontSize":35,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.2,"textAlign":"center","padding":{"locked":true,"hasHiddenPadding":false,"horizontal":0,"vertical":0},"type":"text","content":"<span style=\"color: #3fb984; text-transform: uppercase\">Initialize a folder<\/span>","fontWeight":700,"borderRadius":{"locked":true,"topLeft":2,"topRight":2,"bottomRight":2,"bottomLeft":2},"x":47,"y":255,"width":317,"height":53,"scale":100,"focalX":50,"focalY":50,"basedOn":"34b67101-91f1-4d0c-9064-e4b8386b526b","id":"b02bc787-14b2-40bf-b003-1325eaa982f6"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Anton","service":"fonts.google.com","fallbacks":["sans-serif"],"weights":[400],"styles":["regular"],"variants":[[0,400]],"metrics":{"upm":2048,"asc":2409,"des":-674,"tAsc":2409,"tDes":-674,"tLGap":0,"wAsc":2876,"wDes":674,"xH":1500,"capH":1760,"yMin":-667,"yMax":2874,"hAsc":2409,"hDes":-674,"lGap":0}},"fontSize":35,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.2,"textAlign":"center","padding":{"locked":true,"hasHiddenPadding":false,"horizontal":0,"vertical":0},"type":"text","content":"<span style=\"color: #3fb984; text-transform: uppercase\">ADD commands<\/span>","fontWeight":700,"borderRadius":{"locked":true,"topLeft":2,"topRight":2,"bottomRight":2,"bottomLeft":2},"x":47,"y":457,"width":317,"height":53,"scale":100,"focalX":50,"focalY":50,"basedOn":"620effd9-a5b7-4f5e-8370-49feb1efe83d","id":"f480be14-4aae-4d41-9078-e6439cb7084a"},{"x":40.5,"y":151,"width":330,"height":35,"font":{"service":"fonts.google.com","family":"Anton","fallbacks":["sans-serif"]},"type":"text","opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1,"textAlign":"center","scale":100,"focalX":50,"focalY":50,"content":"<span style=\"color: #faf4ea; text-transform: uppercase\">What you will learn?<\/span>","fontSize":35,"padding":{"horizontal":0,"vertical":0},"basedOn":"906482bb-dfd5-4e8a-a0b4-3c54477b1b49","id":"6b6620ae-bbe0-46e9-8191-86b1db3fa587"},{"x":40.5,"y":511,"width":330,"height":35,"font":{"service":"fonts.google.com","family":"Anton","fallbacks":["sans-serif"]},"type":"text","opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1,"textAlign":"center","scale":100,"focalX":50,"focalY":50,"content":"<span style=\"color: #faf4ea; text-transform: uppercase\">build the project<\/span>","fontSize":35,"padding":{"horizontal":0,"vertical":0},"basedOn":"6f69a79f-ab61-4c98-b0ec-d0ada6c04552","id":"3a00beb5-119d-470a-b8a1-522c590a7a20"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"scale":100,"focalX":50,"focalY":50,"resource":{"baseColor":"#34445c","type":"image","mimeType":"image\/png","creationDate":1641475822000,"src":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1184px-Vue.js_Logo_2.svg_.png","width":1184,"height":1026,"id":306,"alt":"1184px-Vue.js_Logo_2.svg","sizes":{"medium":{"file":"1184px-Vue.js_Logo_2.svg_-300x260.png","width":300,"height":260,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1184px-Vue.js_Logo_2.svg_-300x260.png"},"large":{"file":"1184px-Vue.js_Logo_2.svg_-1024x887.png","width":1024,"height":887,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1184px-Vue.js_Logo_2.svg_-1024x887.png"},"thumbnail":{"file":"1184px-Vue.js_Logo_2.svg_-150x150.png","width":150,"height":150,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1184px-Vue.js_Logo_2.svg_-150x150.png"},"medium_large":{"file":"1184px-Vue.js_Logo_2.svg_-768x666.png","width":768,"height":666,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1184px-Vue.js_Logo_2.svg_-768x666.png"},"web-stories-poster-portrait":{"file":"1184px-Vue.js_Logo_2.svg_-640x853.png","width":640,"height":853,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1184px-Vue.js_Logo_2.svg_-640x853.png"},"web-stories-publisher-logo":{"file":"1184px-Vue.js_Logo_2.svg_-96x96.png","width":96,"height":96,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1184px-Vue.js_Logo_2.svg_-96x96.png"},"web-stories-thumbnail":{"file":"1184px-Vue.js_Logo_2.svg_-150x130.png","width":150,"height":130,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1184px-Vue.js_Logo_2.svg_-150x130.png"},"full":{"file":"1184px-Vue.js_Logo_2.svg_.png","width":1184,"height":1026,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1184px-Vue.js_Logo_2.svg_.png"}},"local":false,"isPlaceholder":false,"isOptimized":false,"isMuted":false,"isExternal":false,"needsProxy":false},"type":"image","x":131.5,"y":10,"width":163,"height":115,"mask":{"type":"rectangle","showInLibrary":true,"name":"Rectangle","path":"M 0,0 1,0 1,1 0,1 0,0 Z","ratio":1,"supportsBorder":true},"basedOn":"ec693630-afb8-4a6d-bfd4-c054ec3cc52c","id":"568c2d37-193c-4aa7-ac3b-ef98dd7017b1","alt":"Vue JS,vue js tutorial,configure webpack,setup vue project from scratch,setup vue 3 project, configure babel, setup vue project without cli"}],"animations":[{"id":"a5e9fd2b-24b5-4eed-81f1-9ace6618589a","type":"effect-whoosh-in","whooshInDir":"rightToLeft","duration":600,"delay":0,"targets":["a15ac36a-c8f2-45a3-8bd6-1dad0dc5056b"]},{"id":"7cae5583-1142-4de3-9c27-f3bc4d6251e2","type":"effect-zoom","targets":["7c672c92-29df-41a8-a71b-28864ff42334"],"scaleDirection":"scaleOut","duration":500,"delay":0},{"id":"17b926e7-2e81-4fea-bbe2-078bb3afb53b","type":"effect-whoosh-in","whooshInDir":"leftToRight","duration":600,"delay":0,"targets":["92ab6cc1-786f-4526-b5fa-845d404b07f8"]},{"id":"b240798d-e0b1-4d7b-a318-dd29362a5a88","type":"effect-whoosh-in","whooshInDir":"rightToLeft","duration":600,"delay":0,"targets":["f48a3544-b877-4c2f-a164-872ff1b34b75"]},{"id":"77703691-49c0-40ee-b9f6-1fc3b7724b6c","type":"effect-whoosh-in","whooshInDir":"leftToRight","duration":600,"delay":0,"targets":["b02bc787-14b2-40bf-b003-1325eaa982f6"]},{"targets":["f480be14-4aae-4d41-9078-e6439cb7084a"],"id":"c3d042cd-34bc-4d9e-8ce9-1fb6f2eba57c","type":"effect-whoosh-in","whooshInDir":"leftToRight","duration":600,"delay":0},{"targets":["6b6620ae-bbe0-46e9-8191-86b1db3fa587"],"id":"bdb59c39-b38c-43b2-a8ec-4c27db4a85b6","type":"effect-whoosh-in","whooshInDir":"rightToLeft","duration":600,"delay":0},{"targets":["3a00beb5-119d-470a-b8a1-522c590a7a20"],"id":"8cb48bfe-b3e8-4ece-a5c8-f60d0fe40e7b","type":"effect-whoosh-in","whooshInDir":"rightToLeft","duration":600,"delay":0},{"targets":["568c2d37-193c-4aa7-ac3b-ef98dd7017b1"],"id":"7256a6c9-8ea2-4bf2-ac16-7f907cf2793d","type":"effect-zoom","scaleDirection":"scaleIn","duration":500,"delay":0}],"type":"page","id":"c52eb59b-fae9-448f-af5a-200b62f487cd","backgroundOverlay":"none","backgroundColor":{"color":{"r":33,"g":31,"b":30}},"pageTemplateType":"cover","defaultBackgroundElement":{"x":90,"y":79,"width":128,"height":128,"type":"shape","opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"mask":{"type":"rectangle"},"isBackground":true,"id":"595cb755-261f-485f-a058-66b8593c0512","isDefaultBackground":true,"basedOn":"acc2f8e0-b819-4adf-9b9f-7bf7c878d7b9"},"pageAttachment":{"url":"http:\/\/frontendguruji.com\/how-to-setup-a-vue-js-project-from-scratch-without-vue-cli\/","icon":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/cropped-1184px-Vue.js_Logo_2.svg_.png","needsProxy":false}},{"elements":[{"x":0,"y":-58,"width":729,"height":733,"type":"image","opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"mask":{"type":"rectangle"},"isBackground":true,"id":"4132b607-efd1-42f5-8203-4149d1236c78","basedOn":"1b5eb9f0-39be-4885-9aa4-7dda0f090806","scale":100,"focalX":27.957503828483933,"focalY":50,"resource":{"baseColor":"#0c1013","type":"image","mimeType":"image\/png","creationDate":"2022-01-01T18:38:46","src":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/image-1.png","width":653,"height":658,"id":176,"alt":"","sizes":{"medium":{"file":"image-1-298x300.png","width":298,"height":300,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/image-1-298x300.png"},"thumbnail":{"file":"image-1-150x150.png","width":150,"height":150,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/image-1-150x150.png"},"full":{"file":"image-1.png","width":653,"height":658,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/image-1.png"}},"local":false,"isPlaceholder":false,"isOptimized":false,"isMuted":false,"isExternal":false,"needsProxy":false},"overlay":{"color":{"r":0,"g":0,"b":0,"a":0.5}},"alt":"Vue JS,vue js tutorial,configure webpack,setup vue project from scratch,setup vue 3 project, configure babel, setup vue project without cli"},{"x":144.5,"y":-33,"width":123,"height":18,"font":{"service":"fonts.google.com","family":"Anton","fallbacks":["sans-serif"]},"type":"text","opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.3,"textAlign":"center","scale":100,"focalX":50,"focalY":50,"basedOn":"87c305b7-6544-434e-9fff-b365e716acd3","id":"3b1339a8-f688-4366-a3db-1d6fff9641b4","content":"<span style=\"color: #fff; text-transform: uppercase\">&lt; FrontENDguruji \/&gt;<\/span>","fontSize":14,"padding":{"horizontal":0,"vertical":0},"link":{"needsProxy":false,"url":"http:\/\/frontendguruji.com","rel":["noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer","noreferrer"],"icon":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2021\/12\/cropped-logo-text-only-1.jpg","desc":"Exploring What, Why & How of Frontend - < FrontendGuruji \/>"}},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Roboto","weights":[100,300,400,500,700,900],"styles":["italic","regular"],"variants":[[0,100],[0,300],[0,400],[0,500],[0,700],[0,900],[1,100],[1,300],[1,400],[1,500],[1,700],[1,900]],"fallbacks":["Helvetica Neue","Helvetica","sans-serif"],"service":"fonts.google.com","metrics":{"upm":2048,"asc":1900,"des":-500,"tAsc":1536,"tDes":-512,"tLGap":102,"wAsc":1946,"wDes":512,"xH":1082,"capH":1456,"yMin":-555,"yMax":2163,"hAsc":1900,"hDes":-500,"lGap":0}},"fontSize":16.2,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.5,"textAlign":"center","padding":{"locked":true,"hasHiddenPadding":false},"type":"text","content":"Fill in some text","fontWeight":400,"borderRadius":{"locked":true,"topLeft":2,"topRight":2,"bottomRight":2,"bottomLeft":2},"x":123.5,"y":106,"width":165,"height":19,"scale":100,"focalX":50,"focalY":50,"id":"85bdbb76-0973-45c9-9298-42d85dc428f0","basedOn":"f380b71e-1092-4459-8433-b3f7e16ada6a"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Anton","service":"fonts.google.com","fallbacks":["sans-serif"],"weights":[400],"styles":["regular"],"variants":[[0,400]],"metrics":{"upm":2048,"asc":2409,"des":-674,"tAsc":2409,"tDes":-674,"tLGap":0,"wAsc":2876,"wDes":674,"xH":1500,"capH":1760,"yMin":-667,"yMax":2874,"hAsc":2409,"hDes":-674,"lGap":0}},"fontSize":30,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.5,"textAlign":"center","padding":{"locked":true,"hasHiddenPadding":false,"horizontal":0,"vertical":0},"type":"text","content":"<span style=\"color: #fff; text-transform: uppercase\">VUE JS project can be setup using only one command.<\/span>\n\n<span style=\"color: #fff; text-transform: uppercase\">But this tutorial will do it hard way, to help you see what&nbsp;<\/span>\n<span style=\"color: #fff; text-transform: uppercase\">VUE-CLI&nbsp;<\/span>\n<span style=\"color: #fff; text-transform: uppercase\">use under the hood.<\/span>","fontWeight":400,"borderRadius":{"locked":true,"topLeft":2,"topRight":2,"bottomRight":2,"bottomLeft":2},"x":58,"y":147,"width":297,"height":405,"scale":100,"focalX":50,"focalY":50,"id":"ea58713a-4f1e-4de4-b7fe-539cbddf656c","link":null,"basedOn":"caa0c1d8-48ae-412b-b919-45ea84213bca"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"scale":100,"focalX":50,"focalY":50,"resource":{"baseColor":"#34445c","type":"image","mimeType":"image\/png","creationDate":1641475822000,"src":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1184px-Vue.js_Logo_2.svg_.png","width":1184,"height":1026,"id":306,"alt":"1184px-Vue.js_Logo_2.svg","sizes":{"medium":{"file":"1184px-Vue.js_Logo_2.svg_-300x260.png","width":300,"height":260,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1184px-Vue.js_Logo_2.svg_-300x260.png"},"large":{"file":"1184px-Vue.js_Logo_2.svg_-1024x887.png","width":1024,"height":887,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1184px-Vue.js_Logo_2.svg_-1024x887.png"},"thumbnail":{"file":"1184px-Vue.js_Logo_2.svg_-150x150.png","width":150,"height":150,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1184px-Vue.js_Logo_2.svg_-150x150.png"},"medium_large":{"file":"1184px-Vue.js_Logo_2.svg_-768x666.png","width":768,"height":666,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1184px-Vue.js_Logo_2.svg_-768x666.png"},"web-stories-poster-portrait":{"file":"1184px-Vue.js_Logo_2.svg_-640x853.png","width":640,"height":853,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1184px-Vue.js_Logo_2.svg_-640x853.png"},"web-stories-publisher-logo":{"file":"1184px-Vue.js_Logo_2.svg_-96x96.png","width":96,"height":96,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1184px-Vue.js_Logo_2.svg_-96x96.png"},"web-stories-thumbnail":{"file":"1184px-Vue.js_Logo_2.svg_-150x130.png","width":150,"height":130,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1184px-Vue.js_Logo_2.svg_-150x130.png"},"full":{"file":"1184px-Vue.js_Logo_2.svg_.png","width":1184,"height":1026,"mime_type":"image\/png","source_url":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/1184px-Vue.js_Logo_2.svg_.png"}},"local":false,"isPlaceholder":false,"isOptimized":false,"isMuted":false,"isExternal":false,"needsProxy":false},"type":"image","x":131.5,"y":11,"width":163,"height":115,"mask":{"type":"rectangle","showInLibrary":true,"name":"Rectangle","path":"M 0,0 1,0 1,1 0,1 0,0 Z","ratio":1,"supportsBorder":true},"basedOn":"ec693630-afb8-4a6d-bfd4-c054ec3cc52c","id":"2919e98b-b71e-4513-936f-16b128b19d84","alt":"Vue JS,vue js tutorial,configure webpack,setup vue project from scratch,setup vue 3 project, configure babel, setup vue project without cli"}],"animations":[{"id":"573d37ef-fd0c-4c37-8f9e-1d5451d56a1a","type":"effect-zoom","targets":["3b1339a8-f688-4366-a3db-1d6fff9641b4"],"scaleDirection":"scaleOut","duration":500,"delay":0},{"id":"f0cce44e-cbf8-493f-b5b8-bd70ee283583","type":"effect-zoom","targets":["ea58713a-4f1e-4de4-b7fe-539cbddf656c"],"scaleDirection":"scaleIn","duration":500,"delay":0},{"targets":["2919e98b-b71e-4513-936f-16b128b19d84"],"id":"607e2217-9364-40dc-835e-c3efa997a6b7","type":"effect-zoom","scaleDirection":"scaleIn","duration":500,"delay":0}],"type":"page","id":"9c23ba61-9cc4-4bc1-80ae-2c5c4194609e","backgroundOverlay":"none","backgroundColor":{"color":{"r":33,"g":31,"b":30}},"pageTemplateType":"cover","defaultBackgroundElement":{"x":90,"y":79,"width":128,"height":128,"type":"shape","opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"mask":{"type":"rectangle"},"isBackground":true,"id":"595cb755-261f-485f-a058-66b8593c0512","isDefaultBackground":true,"basedOn":"acc2f8e0-b819-4adf-9b9f-7bf7c878d7b9"},"pageAttachment":{"url":"http:\/\/frontendguruji.com\/how-to-setup-a-vue-js-project-from-scratch-without-vue-cli\/","icon":"http:\/\/frontendguruji.com\/wp-content\/uploads\/2022\/01\/cropped-1184px-Vue.js_Logo_2.svg_.png","needsProxy":false}}],"autoAdvance":true,"defaultPageDuration":7,"currentStoryStyles":{"colors":[]}},"style_presets":{"textStyles":[],"colors":[{"color":{"r":97,"g":219,"b":251}},{"color":{"r":63,"g":185,"b":132}},{"color":{"r":120,"g":182,"b":93}}]},"story_poster":{"id":339,"url":"https:\/\/frontendguruji.com\/blog\/wp-content\/uploads\/2022\/01\/cropped-vue-poster.jpg","width":640,"height":853,"needsProxy":false},"_links":{"self":[{"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/web-stories\/v1\/web-story\/304"}],"collection":[{"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/web-stories\/v1\/web-story"}],"about":[{"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/types\/web-story"}],"author":[{"embeddable":true,"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/web-stories\/v1\/users\/1"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/web-stories\/v1\/media\/339"}],"wp:attachment":[{"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/web-stories\/v1\/media?parent=304"}],"wp:term":[{"taxonomy":"web_story_category","embeddable":true,"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/web-stories\/v1\/web_story_category?post=304&per_page=100"},{"taxonomy":"web_story_tag","embeddable":true,"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/web-stories\/v1\/web_story_tag?post=304&per_page=100"}],"wp:lock":[{"embeddable":true,"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/web-stories\/v1\/web-story\/304\/lock"}],"wp:publisherlogo":[{"embeddable":true,"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/web-stories\/v1\/media\/218"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}