Up next in 10
Build a Vue.js 3 Canva Clone Resume & CV Designer,Business Cards & Infographics Builder in Browser
Mar 14, 2026
Buy the full source code of application here:
https://procodestore.com/index.php/product/build-a-vue-js-3-canva-clone-resume-cv-designerbusiness-cards-infographics-builder-in-browser/
Live Demo of App:
https://freemediatools.com/vuecanvaclone/
Watch My Visual Studio Code IDE Setup Video For Fonts,Themes & Extensions
https://youtu.be/Bon8Pm1gbX8
Hi Join the official discord server to resolve doubts here:
https://discord.gg/cRnjhk6nzW
Visit my Online Free Media Tool Website
https://freemediatools.com/
Show More Show Less View Video Transcript
0:01
Uh hello guys. In this video, I'll show
0:03
you I built out a Vue.js 3 Canva clone
0:08
kind of editor where you can actually
0:10
design your rumé.
0:13
You can design your CVs. So, it's a CV
0:16
designer. You can build out professional
0:18
looking business cards, infographics.
0:21
So, it's an all-in-one
0:24
builder editor. So I've already deployed
0:27
this on my website
0:28
freemediatools.com/view.
0:31
So I've given the link in the
0:32
description of this video. You can check
0:35
out the link. Uh it's similar to Canva
0:38
website. It has all the features. You
0:40
have readym made templates. You can edit
0:43
those templates with a single click.
0:45
Change the text image. So it's already
0:48
coded directly in Vue.js. You will see
0:50
the directory structure of this. So if
0:51
you are interested in this purchasing
0:53
the source code the link is given in the
0:55
description. So once you purchase it
0:57
after that you will be getting the
0:58
source code from Google drive. Each and
1:00
every file I coded it from scratch. So
1:03
all the components is divided into its
1:06
view file. So it's easy to you to
1:07
customize it. Everything is coded
1:10
directly inside a typescript. So if I
1:12
show you the package dojson file. We
1:14
using the latest version of view. We're
1:17
using JSPDF HTML to canvas fabric JS. So
1:22
it's easy for you to purchase it, deploy
1:24
this and run this locally. So we are
1:27
running this project locally as you can
1:30
see that npm rundev. So it started this
1:33
application locally as well.
1:36
So we started this localhost 5173.
1:39
So what this application does, it's
1:41
similar to canvas.
1:44
You can design a new template as well.
1:47
And from the resize button, you can
1:49
resize it to all the social media
1:51
networks. If you're designing up a CV,
1:53
réumé or infographic for various social
1:57
media networks such as YouTube,
1:59
Facebook, Instagram or if you want to
2:01
design some business cards, this is a
2:04
readymate editor for you. From here, you
2:06
can change the color. Then we also have
2:08
the support for adding your own images.
2:12
So you basically select your image add
2:14
this to the canvas very easily.
2:18
Then you have the functionality for
2:20
third party images. We are using
2:22
unsplash API. So it actually fetches all
2:25
the stock images. So it's ready made
2:28
support is there. You can select any of
2:31
this image as well. Just place it.
2:34
And then we also have the feature for
2:36
adding your own text as well. So you can
2:39
resize, change the color,
2:42
phone size, everything. It's possible.
2:46
So you basically see all the phones are
2:48
there.
3:06
So then we have the option for exporting
3:09
this and you click on save as if you
3:14
want to export this to PDF image. So
3:17
it's easy for you. It will save you a
3:19
lot of time as well. You can export this
3:22
infographic as your CV infographic
3:25
business cards everything you can do
3:27
that. So it's easy for you. You also
3:30
have readym made templates. You have
3:32
different shapes as well. So it's easy
3:34
for you to deploy this as well. Once you
3:37
get the source code, you can easily
3:39
modify and add additional features as
3:42
well. So it's similar to Canva as you
3:46
can see that. So we have can add your
3:49
own images, text, photographs. It's a
3:52
layer based editor. So as you can see we
3:56
have the support. You can even add
3:58
multiple pages as well. So just click
4:01
the add page button. So now you can add
4:05
at one time you can create multiple
4:07
things. So [snorts]
4:08
you can see that. So with a single click
4:10
you can resize it.
4:16
This is the third page. So this will
4:18
save you a lot of time as well. So for
4:20
each element as you see we can adjust
4:23
the positioning
4:25
rotate everything is there. It's similar
4:28
to Canva clone. It has similar
4:30
interface. It's fully customizable
4:34
as you can see. It's also responsive as
4:36
well. So before purchasing it, you can
4:39
try this. I've given the link in the
4:41
description. You can check out the live
4:43
demo and then if you are interested, you
4:45
can purchase it. So
4:50
you can add your own templates as well.
4:54
This can be used for any sort of
4:55
purpose. It can be used for your CV, uh
4:58
réumé, business cards, infographics, any
5:02
sort of thing that you want to create.
5:04
In a matter of seconds, you will be able
5:06
to create it. Uh it's coded directly
5:09
inside view. So, we have used quite a
5:12
number of third party libraries, fabric,
5:14
JS, HTML to Canvas, JS, PDF. So, this
5:18
will be really easy for you.