--- title: "Tutorial: Vue 3 composition API and Vite to recreate TikTok" description: "In this video you will learn how to use the new Vue 3 composition API to create a simple version of TikTok. We are also using Vite, the new dev build tool build by Evan You! I thought it would be hard to learn, but it really wasn't. Please, jump in and try this yourself! The code is open-source." date: "2020-06-10T08:17:18.000Z" url: "https://timbenniks.dev/videos/tim/087-ggaoxqtc7ke" youtube_url: "https://www.youtube.com/watch?v=gGaoxqTc7kE" playlist: "tim" image: "https://i.ytimg.com/vi/gGaoxqTc7kE/maxresdefault.jpg" tags: ["frontend", "developer-experience", "media-production"] --- # Tutorial: Vue 3 composition API and Vite to recreate TikTok In this video you will learn how to use the new Vue 3 composition API to create a simple version of TikTok. We are also using Vite, the new dev build tool build by Evan You! I thought it would be hard to learn, but it really wasn't. Please, jump in and try this yourself! The code is open-source. Watch on YouTube: https://www.youtube.com/watch?v=gGaoxqTc7kE ## Transcript there is a new kid on the block and it's actually in better now I'm talking about a few three and its composition API and there have been a whole bunch of people who wrote articles and videos and they spoke on conferences about the new way few three works but I haven't actually seen a piece of content that puts all of the things together and build you something in a simple way because we all if we want it or not kind of have to start using few threesome so in this video we are building a clone of tick-tock in the browser using few three and its composition API on top of that I also used feet which is the new web development tool by Avenue and it's just excellent so we didn't use snow pack or wack pack or all of that stuff we're just using feet and the new few three composition API are you ready let's kick this off first things first let's have a look at my little recreation of tick tock beware it's super simple it's kind of just a scroller that goes vertically and plays a video which is actually a tick tock video that I downloaded because I liked it I kept it this simple so we can actually focus on how few Gs works with feet and how all the composition API things work together so let's have a look at my favorite videos these dago's are so cute why don't you play oh it had to replay I didn't ad loop in the video so I have a corgi myself he's so cute he's called princess nugget google it you'll be happy and then another Corgi so this is actually Mad Max the Corgi who travels in the Metro with his owner everywhere so that was it for the demo as you can see it's pretty simple so why not dive in first how to install feet here this is the feat j/s repository and as you can see this is really bleeding edge we are talking 21 hours ago we're talking 11 days ago 21 hours ago two days ago a lot of stuff is changing here all the time it's super bleeding edge also really fun so feet is an opinionated back def build tool that surf your code via native ES module imports during development and it bundles it with roll-up for production I don't think it's so much production ready for all users just yet it really focuses on new browsers and new jsapi s-- and stuff like that but if you're surfing that this is great it's not like few CLI that super rich and has everything you've ever dreamed it's a bit more bare-bones but it's also new stuff and we need new stuff sometimes and this is just a lot of fun to install it it's NPM or yarn in it V DEP and then the name of your project it's that simple I've done it I don't have to do this now on the video you'll just copy-paste and run with it so let's go to my terminal and I'll show you how fast it actually is so I'm now starting the server and then just compare this to your web pack server right let's go done it started holy moly that is awesome let's go to the code and see what I get we are now in the code so let's have a look at what Pete actually created for us as a document structure the first thing that you'll notice is that's different from few to is this line so they created a property or a function called create app and this is done for the future where what you could potentially do is create a variable of this like Const app equals this and then you can add your directives plug-in stuff to that variable and that also means that you could potentially make multiple apps so it's just a bit more of a nicer of global way to create your few app so then of course we have jas which is fairly simple in my case it's just the tick-tock stream that's all I care about this is a very simple app right and this also looks like whew - there's not that much going on so let's first have a look at this actual fancy view Stream component that I built and we'll just go over the things you see here as a base and later on we'll go into all the new stuff that we have here right all the few three stuff but first just as a base how it works what this thing does it's actually a list of tic TOCs right and my list of tic TOCs comes from here right now I just kept it super simple I just found the video URL on the tick tock CDN and I gave it an ID and that's what it looks over so we are looping it right and so what this thing does is it's using a V - swipe directive and I've wanted to use a directive first of all because it's easier to deal with touchy fans because they are not native in view and on top of that I wanted to know if directives still worked in few three so basically how this thing works let's have a look at the site right now you can see that I'm basically moving the whole tick-tock stream so the few port is here and the whole stream is behind so when I swipe up I just move the whole stream one screen height so when I go up now you can see it's at 0% when you go down you can see it's at minus 100% so for performance with CSS and transforms or translate 3d in this case this is just the faster this is this can get and see the performance is really keen right it's really it's really cool so now that we know how this works I can also show you that this is actually done with a directive I'll show you this quickly because it's basically native JavaScript so the one big difference in directives now with few three is that the naming of the hooks inside the direct case is different right it's no longer called bind but in this case it's called before month so they basically have the component lifecycle hoop names aligned up now with the directive name sign so I didn't read the docs properly so I got stuck on this quite long I even tweeted about it like please help me and a bunch of people are like dude just read this like oh okay and then I fixed it so now on before month I just bind to the element that I buy that I'm binding to which in this case is this big diff that holds all the tic TOCs on touchstart and on touch end and if you move more than the 40 pixels that I say this is your minimum it either goes to the next slide or the previous slide and then binding is actually the whatever value goes into your directive and in my case this is a function so this is a little bit dirty but this is just a simple damn alright so I left it like this it kind of means on swipe is now a function so this is what's in the binding so the moment I swipe up it does minus one and when I swipe down it is plus one relatively simple so what it basically does is just moves this element okay then of course I loop over the tic TOCs and there's once fancy stuff here which is the ref let's leave that for now let's have a look at what the new few stuff is doing and then we'll go back to the ref and why that's important so first of all few is now kind of exploded into a lot of smaller utility function so you can compose your components better that's literally what a compote composition API is doing right so to create a component you now have to define component function to do graphs you have a ref unction to do reactive stuff you have a reactive function then we have computed watch and then a bunch of lifecycle hooks if you are a few developer you kind of know those things they are just now separate functions rather than stuff that comes in your few component out of the box right so you can now change it up a little bit so of course we need to define a component and then the name directives components this is still the same and here is the magic so you have a setup function which is kind of the constructor of your class if you will so this is really nice that it's done this way because now it works much easier with typescript as well as well so this is what I want to focus on for the moment and then the other stuff comes a little bit later so what you can see here this is reactive this means few basically is built upon being reactive right I do one thing and something else changes in the DOM and it happens automatically because of this fancy templating language the TSX stuff so this is kind of the core of UGS and so now rather than having it out of the box without you knowing how it works you can actually say my component here is gonna hold all my reactive stuff and all the other stuff that I make it's not gonna be reactive so it's going to be much more performant and so my current slides are when I swipe down my slide goes from 1 to 2 to 3 you know then the amount of slides is actually my tech-talk Jason and how many items are inside actually now that I think of it this doesn't have to be in the state that's reactive because this will this doesn't move so I already look at my own code and like oh yep let's move that out if you didn't have few three you wouldn't know about this because it's not so obvious so that's why it's so nice about this I should have moved this out I won't do it now because I don't want to break my code in the demo to you and then style so what I want to do is transform my translate3d based on whatever that current slide is right so if I have slide number two it has to go minus 200 percent if it's three minus three hundred percent stuff like that so for that you need a computed and we know computed properties from few two but now you can actually add that right into this directive or into this reactive thing and this is so clean this is the only thing I've had to do and of course apply those things to my template so slide has always some sort of calculation for that percentage right and then so you see that style just here so state dot style that's the only thing I had to do because now when I swipe and because my swipe actually updates my current slide because this is all reactive my transform with my computed stuff changes because the current slide changes and everything is updated this is the core of UGS but now it's much more declarative and you can really see how it works and that's so cool about this then there is also watch we know Watchers from Fuji s2 right so what I do is I'm watching the current slide so when it changes I want to do an action and this is specifically because I have videos playing right so if I swipe down my previous video needs to boss and my next video needs to play that's something specific so what I wanted to do is see how this watch work so I'm watching the current slide change then I get my new item and my old item so my new item is from 1 to 2 so I kind of know I need to play the next one and pause the previous one and this is where these refs come in and this is something I struggled with a little bit in few GS 3 and I had to figure out what to do here and basically what you can do to fire a function on a child component in this case one of the tech Doc's what you can do in view - we should just do ref equals blah blah and then in your code you can do blah blah dot function and it fires a function in your child that's all nice and well we all know how this works it's awesome if it's a Dom node you get the Dom node from that ref right so but in few 3 on the composition API you actually have to tell it these are my rafts because they are also reactive and you have to return them also so what I had to do is actually I said these are my tik-tok rafts and it's a ref that's an array sorry so that ref is an array so how you fill that array is by actually looping over your tik-tok with a fee for and now Raph is actually also able to get a function so now what I can do is I get the index for my tech-talk data and each element that the ref loops over with the fee for basically I've pushed the ticked-off drafts index with that element so now this here dr. Graf's is now an array of the refs of my thick toxin in this case there are three of them so now what I get to do that that those three tic TOCs also represent like my current slide is one so that's the first tick tock my next slide is two so that's the next tick tock right so what i can do is i will say this I'm just doing this because I'm using am starting with a 1 rather than with a 0 in my indexes so I can just say in my tick tock graphs I have to use value because this is a proxy that's a whole lot of video we won't go into that now I get the value of my RAF and I say give me the new tic tock that just became active and then hit play so hit the play function inside that tick tock same goes for the old one so the old items is the previous one form the watcher so that's the previous active one and then I want to pass that one and then lazy is false connects to the immediate is true from before from few two in Watchers so this basically saved me because I wasn't really oh I didn't know what to do so I just went on the internet looked for a lot of stuff couldn't find anything and actually this saved me like being able to make rafts an array and then actually return an array so that's the last thing I wanted to show you in here is that everything you had as a Const in your setup you also need to return it because otherwise your template doesn't actually know anything about the constants that you set so you and I keep forgetting this and this is where it constantly goes wrong in my code or today that was the case and then of course I had the on swipe so I look at the direction and look at the current slide and if there are certain things matching I will just not do anything because I don't want to go negative in my slides because there are no slice this is just default carousel stuff right and then if all of that is cool I set my current slide the +1 or the minus 1 this is sim carousel style stuff now we haven't looked at one thing which is actually the tick-tock view itself so this is basically the little tick-tock video that you see and the tick-tock video again has a ref because I need to be able to on the raft do dot play which is an html5 video right so I need to have that ref and there's a prop for the video URL and then I made a little SVG icon which is like a little play I can so when I click it I want to do toggle play and I want to click the video I want to do toggle play and toggle play literally just checks is it playing if not play it else pause simple video behavior right and again oh yeah this is actually important to say so the RAF has a naming convention so to be able for your setup function to know what this ref is you need to use the same name in your ref on here on line 3 and you have to set it to being a ref here and then when you want to use it you do fit ref in this case dot value and you can do whatever you want it took me a while to get this but now that I have it this is very elegant and then I just return my functions and of course after a bit of CSS very simple I have some fancy aspect ratio new CSS stuff because we have feed anyways it's all new stuff nobody cares about the old stuff in this demo so there you have it it's literally very small and it's pretty elegant it's all composed together I could go even further and extract and do like a little bit like react like a you stick talk that has some functionality but I didn't want to go too deep into that right now I hope this helps you and makes you look at Corky's because why not car keys car keys and thanks again I'll see you next time