Up next in 10
Buy the full source code of application here:
https://procodestore.com/index.php/product/vue-js-canva-clone-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:02
Hello guys, in this live stream I'm
0:04
showing you my build out
0:06
a Vue.js Canva clone uh directly inside
0:09
the browser using the latest version of
0:13
Vue.js. So, we have also deployed this
0:15
as well. So, I have given the link in
0:17
the description of this live stream.
0:19
So, you can check out this live demo
0:22
before you purchase the source code. So,
0:24
it's entirely built inside
0:26
Vue.js.
0:28
So, this is actually the directory
0:29
structure. I built it from scratch. So,
0:32
all the files are customizable. It's
0:34
coded directly inside Vue files.
0:37
It's also there inside TypeScript as
0:39
well. So, everything is customizable.
0:42
And we have used the latest version as
0:44
you can see Vue 3 version we have used.
0:47
We have also used jsPDF, html2canvas,
0:50
fabric.js libraries as well.
0:53
So, I built it from scratch.
0:55
So, if you check out the live demo link
0:58
in the description, the application will
1:00
look something like this.
1:02
So, in the sidebar section you have
1:03
templates right here. So, you can edit
1:06
these templates by clicking any of these
1:08
templates.
1:10
And you can edit these templates like
1:12
this. We have all the options. You can
1:14
change font size,
1:16
color. Everything is customizable.
1:19
And then you can export this to an image
1:22
or PDF.
1:24
So, in the file menu you can export
1:26
this.
1:27
If you select image in here you can
1:29
select the extension.
1:31
So, everything will be exported here.
1:33
You will see that.
1:37
And same goes with PDF as well. You can
1:39
create multiple pages as well. So, you
1:41
also have resize options as well.
1:44
With a single click you will be able to
1:46
export this to a multiple social media
1:48
networks with a single click here.
1:53
Uh and this will save you a lot of time
1:55
as well.
1:56
Um you can export this to PDF as well.
1:59
So, once you click PDF all the pages
2:01
will be exported to PDF as you can see.
2:03
It says fully fleshed full stack Canva
2:06
clone directly in Vue.js.
2:10
And this project right here, once you
2:14
purchase it you will have full right to
2:16
actually customize and add additional
2:18
features as well.
2:19
And directly you can run this locally as
2:22
well. So, once you go to the
2:26
So, we are actually running it locally
2:28
here as well. So, npm run dev. So, this
2:31
will start
2:34
a local development server which
2:38
localhost 5173. So, this application as
2:42
you can see has started right here.
2:44
We also have support for adding your own
2:46
images as well. So, if you like you can
2:48
add your own images.
2:50
Simply add this to the canvas.
2:53
You can add the text here.
2:55
Change the size, font size.
3:02
So, we have different fonts as well.
3:09
So, everything you can control here.
3:11
This is actually the color picker here.
3:13
You can
3:14
have any color of your choice.
3:18
So, it's actually a layer-based editor.
3:20
You can actually see multiple layers out
3:22
here.
3:24
You can adjust everything here which
3:25
Canva has here. So, in fact it has all
3:28
the features here
3:30
that Canva has. So, we also integrated
3:32
support by adding Unsplash API for
3:35
adding the stock images.
3:37
So, with a single click you can add
3:39
images as well right here as you can see
3:41
that.
3:45
So, you can even add different kinds of
3:47
shapes as well as you can see that.
3:55
You can even start from scratch
3:59
by specifying the width and height right
4:01
here.
4:12
So, if you're interested in this you can
4:14
first of all try out the demo. I'm
4:16
giving the demo link and
4:18
then you can purchase the source code.
4:21
So, it's entirely coded inside Vue.js.
4:24
Uh it's
4:26
having this full directory structure.