live_tv
Livestream Starting Soon
00
Hours
:
00
Minutes
:
00
Seconds
Up next in 10
Vite Tutorial to Create a Vue.js 2 Project or Downgrade from Vue.js 3 to Vue.js 2 Project Tutorial
Jan 17, 2025
Get the full source code of application here:
https://codingshiksha.com/tutorial/vite-tutorial-to-create-a-vue-js-2-project-or-downgrade-from-vue-js-3-to-vue-js-2-project-full-tutorial/
Hi Join the official discord server to resolve doubts here:
https://discord.gg/cRnjhk6nzW
Visit my Online Free Media Tool Website
https://freemediatools.com/
Buy Premium Scripts and Apps Here:
https://procodestore.com/
Show More Show Less View Video Transcript
0:00
uh hello guys welcome to this video so
0:02
this will be a short little tutorial on
0:04
how to downgrade your vuejs 3 project
0:07
into vuejs 2 so as you all know vuejs is
0:11
actually a framework of
0:13
JavaScript and it's open source
0:15
framework and the latest version is
0:16
three versions so specific libraries
0:19
doesn't work with the latest version of
0:20
UJS 3 so I will show you in this
0:22
tutorial how to
0:24
downgrade your VJs 3 version to VI
0:28
vue2 so we will use this V which is
0:32
actually a development environment where
0:34
Next Generation front end tooling so
0:37
it's a build tool for building the web
0:39
application
0:41
so I have given the stepbystep blog post
0:44
so if you want to follow along with the
0:46
blog post alongside with the video you
0:48
can go to the description link I given
0:50
the link so now you come to the command
0:52
prompt wherever you need to create the
0:54
project so I inside my C command prompt
0:57
so you need to execute this command npm
0:59
create
1:00
V T atate latest you need to first of
1:04
all install view V which is development
1:08
environment the latest version and after
1:11
this you need to give it a name to the
1:13
project so I will say my view to
1:16
project so this will be the name of your
1:19
project it will create a folder with
1:21
this name that you mention right here so
1:24
if I enter it so it will now ask for
1:27
which template you want to use so there
1:29
there will be a specific options right
1:31
here vanila view react react so if you
1:35
select directly The View version it will
1:37
install view3 so the trick is there you
1:41
need to select this version which is
1:43
vanila so you need to select this one
1:45
and then you need to select which
1:47
variant you want to make your UJS
1:50
application this can be anything you can
1:51
make even in typescript as well but I
1:53
will specifically use
1:55
JavaScript and then it will create this
1:58
directory and it then it is saying now
2:00
you need to navigate to your directory I
2:02
will CD into this my view2 project and
2:07
then it is telling you that you need to
2:09
install the dependencies npm install so
2:12
then it will install all these
2:15
dependencies of your vuejs2 project so
2:18
just wait for the installation to finish
2:20
and then I will open it inside my vs
2:25
code so now the directory structure look
2:28
something look like this so we have this
2:31
main.js
2:35
file and this is your counter JS you
2:38
will see that so this is your directory
2:40
structure so now to get started here
2:43
officially vat development environment
2:45
doesn't support V2 I'm just showing you
2:48
this tutorial the trick is you need to
2:51
install support for for vi v which is
2:54
this dependency here view at theate 2
2:58
you need to install it and then the
3:00
plugin supporting it so VJs plugin I
3:04
have given the commands the description
3:06
of the video so you can go to my blog
3:08
post and copy these commands so first of
3:11
all we are installing the view2 version
3:13
and then alongside with the plug-in
3:15
which supports view2 so enter this
3:18
command and it will install this inside
3:20
your package.json
3:22
file so now once it is installed if you
3:26
check your package.json file you will
3:28
see this view version
3:30
2.7.6 is installed alongside with the
3:32
plug-in which V support so now you need
3:36
to create a file which is your v
3:38
config.js file if this file is not
3:41
present then you just need to create
3:43
this
3:44
file so simply create this file in the
3:47
root directory uh v
3:51
v
3:53
config.js so this is actually the icon
3:56
will change here so this is your
3:57
configuration file and inside this file
4:00
you need to write this
4:02
code I will just copy this you can copy
4:05
this from a blog post so it actually is
4:08
this is actually the code that you need
4:10
to
4:10
copy and uh that's all that we need to
4:13
do we importing it we're including that
4:16
plugin which is installed for you to
4:19
that's all and then you need to go to
4:21
your main.js file this is your file here
4:25
main.js and just delete everything from
4:28
here and paste
4:30
we need to import view from
4:33
View and then we need to import the app
4:36
here from the app we will create this
4:40
app component so just we need to import
4:43
that and
4:44
then we need to render this app so this
4:48
is specifically the syntax which is
4:50
followed in vuejs2 not the latest
4:52
version so that's why we need to write
4:54
like
4:56
this and lastly we need to say amount
5:05
so that's all that we need to do in this
5:07
file we importing this app component and
5:09
then we are mounting it to
5:12
this ID that we have given which is an
5:15
app so we are targeting it by the ID
5:18
here that's all so now we need to create
5:20
this
5:22
uh index.html file uh if you
5:26
see we have already created this file so
5:29
we are including this main.js
5:32
file that's all that we need to do I
5:34
think and
5:39
uh just inside your Source directory
5:42
just create a simple view component and
5:46
let me create a simple
5:49
template I will say here hello
5:54
world and just just this is your Dev
5:58
script in order to run this project so
6:00
if you go to your command promt simply
6:02
run npm brand
6:05
Dev so now the project will run on HTTP
6:08
Local Host 5173 so now this is the
6:12
vuejs2 project we have successfully
6:14
downgrading from view2 to view view3 to
6:18
view2 so now this is a view two
6:21
application the
6:23
version because you could see inside
6:26
your package.json file this is your view
6:28
version two not three so in this way you
6:31
can use V development environment to
6:34
create a view js2 project not three by
6:38
default it will create the three version
6:40
so in this video we saw how to downgrade
6:43
from 3 to two so if you want to copy all
6:47
the commands and all the code that I
6:48
used in this video you can go to my
6:50
description Link in this video I have
6:52
written a complete blog post explaining
6:54
on how to do this process step by step
6:58
so thank you very much guys for watching
6:59
in this video please hit that like
7:01
button subscribe to channel as well and
7:03
also visit my website guys which is free
7:06
mediat tools.com uh which contains
7:09
thousands of tools regarding audio video
7:11
and image and I will be seeing you guys
7:14
in the next video