SETUP VUE 3 PROJECT

[{"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"}] [{"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"}] [{"selector":"#anim-34fb6974-e087-423d-aa03-43c1f65ac57e","keyframes":{"opacity":[1,1]},"delay":0,"duration":500,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"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"}] [{"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"}] [{"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"}] [{"selector":"#anim-43dc9c71-5fe2-4ca1-89c8-9bb809dbbc72","keyframes":{"opacity":[0,1]},"delay":0,"duration":500,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"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"}] [{"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"}] [{"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"}] < FrontENDguruji /> LEARN WHAT VUE-CLI USE UNDER THE HOOD Learn more

VUE V3

[{"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"}] [{"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"}] [{"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"}] [{"selector":"#anim-628f20df-ba4a-4007-b29e-dbfb78a05b04","keyframes":{"opacity":[1,1]},"delay":0,"duration":500,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"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"}] [{"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"}] [{"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"}] [{"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"}] [{"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"}] [{"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"}] [{"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"}] [{"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"}] [{"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"}] [{"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"}] [{"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"}] [{"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"}] [{"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"}] [{"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"}] [{"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"}] [{"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"}] [{"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"}] [{"selector":"#anim-ccc9e59f-eb38-4955-b842-afb2ecde597f","keyframes":{"opacity":[0,1]},"delay":0,"duration":500,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"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"}] < FrontENDguruji /> NPM Learn more

Add Dependencies

[{"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"}] [{"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"}] [{"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"}] [{"selector":"#anim-feecaedb-a930-41a8-9830-64b5d442dab3","keyframes":{"opacity":[1,1]},"delay":0,"duration":500,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"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"}] [{"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"}] [{"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"}] [{"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"}] [{"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"}] [{"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"}] [{"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"}] [{"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"}] [{"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"}] [{"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"}] [{"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"}] [{"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"}] [{"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"}] [{"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"}] [{"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"}] [{"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"}] [{"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"}] [{"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"}] [{"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"}] [{"selector":"#anim-a5755936-3906-4fe7-b03e-c60ff1c66c1e","keyframes":{"opacity":[0,1]},"delay":0,"duration":500,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"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"}] < FrontENDguruji /> Learn more

VUE JS project can be setup using only one command. But this tutorial will do it hard way, to help you see what VUE-CLI use under the hood.

[{"selector":"#anim-3f2cf8bd-4857-4dd5-8e9b-799c7ac4afcb","keyframes":{"opacity":[1,1]},"delay":0,"duration":500,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"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"}] [{"selector":"#anim-ea0f01b3-9ef4-41a3-98c5-8338c8aa2105","keyframes":{"opacity":[0,1]},"delay":0,"duration":500,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"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"}] [{"selector":"#anim-b5dcc119-a617-4319-a173-8fb4fee29ace","keyframes":{"opacity":[0,1]},"delay":0,"duration":500,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"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"}] < FrontENDguruji /> Fill in some text Learn more

SETUP VUE 3 PROJECT

WITHOUT VUE-CLI

VUE V3

VUE ROUTER V4

webpack v5

scss

NODE V17

what will you use?

Add Dependencies

CreatE VUE App

ConfigurE Webpack

Initialize a folder

ADD commands

What you will learn?

build the project

VUE JS project can be setup using only one command. But this tutorial will do it hard way, to help you see what VUE-CLI use under the hood.