Create and Publish your first Vue Component Library on NPM

[Music] hey youtube hello everybody welcome to this video where i'll be sharing with you guys how to create and publish your first view single file component on npm or basically what we'll be doing here is we'll be creating our first view component library and we are going to publish it on npm and from there you can download your component your singlify component library like what we can see here and use it in another project or maybe someone else can use it so first things first what we are going to start with is basically creating a vue.js application so we will head straight forward to our file explorer and open our cmd we are going to create a project in vue.js so i would take things really easy from the ground to the top what we would basically do here is we are going to create a normal vgs application right and from our normal vue.js application we are going to build our component in our normal vgs application and after we are done building that component in our normal vgs application we will install view sfc roll-up which is um view single file component roll-up which is basically a templating utility that's going to help us to scaffold our components in order for us to basically in order for us to basically be able to publish that on npn so what we're going to be doing is we would create our vgs application and if you're familiar with vgs you would know that we just hit view create so what we are going to be creating today is we are going to basically create a very basic component which is just a button okay we'll just come forward with the button a button component that we are going to build and publish it on npn for this for the sake of this tutorial so we just hit view create um i can just name it um view button right and hit enter oh i have a weird error something weird is happening so i'm going to do it straight for my command line [Music] after hitting that command we just have to wait so like i was saying what we are going to be doing basically is we will first of all create a view com or vue.js application right and after creating a vgs application we are going to um initialize another project another project inside our vgs instead of vgs um you know inside our tutorial library right where we would basically initialize um view single file component roll up and we would set up our view single file component um would basically instantiate that and from there we would just basically transfer our component we've built from our view app and transfer it to the sfc init which has been initialized so i'm not sure okay yeah here we go so basically for this tutorial i'll be using view 2. basically creating a project okay so now that we have our view app created we just cd into the directory and we will run our app so just head to my just close this and open up here so what i'm going to do is i would just run i will just run the app and see what we get so while it's running um we i mean like we should we basically know that um this is like the structure of our vgs application like we have our app the view and all of that i mean like you should basically be familiar with vgs um if you are watching this tutorial so i have it run here i'll just copy this and come and paste this here to actually see what we have okay beautiful so we have our vjs application running here on the browser and we will just get rid of the hello world and and all of that messy stuff just get rid of the logo maybe just this import in here we just get rid of this yeah i would say everything looks good now so what we are going to be doing is we are basically going to create a component here called for example i don't know anything view maybe view button right the view which is sorry oops the view which is the view extension so we will just set up our template so like i said we would basically be creating a button and we are going to publish that button to npm so we are going to create a redistributable component so this component we are building we are trying to build right now is going to be able people are actually going to be able to use this component so we would say button okay we just basically create a simple button like um like click me sorry [Music] click me and we save and we come here and we import our button i'll just copy this and just copy that make sure so just make sure we import it here right and here over here we make sure we export our component here and then we can use our component here i'm just making this bold i don't know button okay beautiful now we have we have a button here so this is just again again this is just um some some just just some basic basic thing we are going to try to do here right so [Music] what we would what we are going to be doing is we are going to be building a view component that takes in as um as props right just to make our view component a little bit interesting right so we would be making this component this this um view button component receiving some props data and that props data we are we are going to basically be using that here so like we would say um we want our button to receive like the text right we would say we want our button to receive the texas props which is going to be like um hello world trade so props and we would um after declaring our props here and the text that comes that we want to pass in as props we would come here basically and would open us our script this one here so we will open our script here right and we're basically going to declare our props like this and we would pass in the text right we're going to pass in this um this variable which is text in here so we just copy paste that and we would have to give a type so what are we actually passing we're actually passing a string right so this is going to be an object um props or props object we have text and we have string here so like basically we're passing in the string so what we are basically trying to do is we want to receive the text the user is going to pass in as props and displayed at the level of the name of the button right so here is how we're going to do it we just come here and we just put our curly braces and we just say texts text sorry text well beautiful so this is it basically this is what we are building so the idea is for us to be able to publish this um view component to npm so we're just going to build something pretty basic like this and you know like not just something basic like this so when the user is going to call for our component what we are going to do is we are going to request the user to pass in a required props which is text and basically the user will have to enter anything so like here if we say anything like if i write 40 right and we come here we it's going to change to 40 so that's that's that's the main idea of what we're trying to build so you can you can decide and add in some css and all of that but so like the whole idea of this tutorial of this video is to actually show you guys how you can publish your single file component to npm and for other people to use and for your own self to be able to use in the long run if you might need it or whatsoever thing so now we are actually done with doing building our components so basically this is our component quite simple right so we are going to basically just getting props from when the user is going to call for our component he would need to pass in a required props which is text which is a string and once we get that text we want to pass in here as well so let's say okay we want to make things a little bit more interesting and um we want the user to pass in a link as well so we would say um link the user will have to enter a link right um 40 let's say 40m um constant the github dot i o right so [Music] that is the link the user has to pass in and again we will need since we declare this we we are actually passing in props here we will need to go and actually receive those props in our component and here we'll have to give in a type as well so after giving it a type here like we did here we will just pass maybe um i don't know maybe um put it in an a ref or something um a very like this like an anchor tag right something like this would just wrap this button in here and we close our ear here no this is like this so this is it we we so we are basically going to pass this link here like this um we'll pass it here like this and for us for vue.js to actually um to actually see that okay this is a variable not what is this like we will have to put some two dots in front in front of it so after doing that we have something like this and you can see if i click here it is basically going to redirect me to um my portfolio right so that's the whole idea of what we're trying to build so our component our vgs component is basically going to receive in two props the first one which is text which is a text which has to be displayed like um go to link for example if i save it here and i go to to to to to my web page and i click here it's basically going to take me to where the user is actually passing as from all right so after doing that the next thing we are going to do is we had basically done with our component so this is basically what our component looks like like it's pretty basic and i actually needed something really basic like this so what we are going to do now is we are going to install um we're going to install um view sfc roll up so which is basically what i was trying to show you at the beginning of this video so we are basically going to install this globally so you just hit straight forward to the link the link of this view single file component roll up um npm package is going to be in the description below so you'll find this link i'll drop the link down in the description below so you just click on it so we basically install this globally right so we just come here and open a new and open the new command line and install view single file component roll up globally so while it installs what i want to do is um after installing we will have to say single file component in need so we would have to basically initialize our um single file component the single file component we actually wanting to build so we go back here okay um things already have it installed um it didn't take quite a long time to install that maybe just basically updated the package and all of that so now what we are going to do like i was saying we will need to initialize our sfc so we just copy the code and come and paste it here and hit enter oh i still have the same error so i'll just hit forward to my terminal so just go to my terminal so i just okay and i hit enter so we would have to enter in some information so we just wait for the information to be asked so we'll have to enter some basic information like what's the name of our component so um we have some few questions like it says is this a single component or library so you choose you just with that without requirements you just choose so we're basically creating a single a single component um what is the name of of your component so i'll just say view things for maybe this is a convention with view like any any uh npn package we publish on npm has this view in front all the same like react has maybe react google maps or react um story so i don't know anything so we have view let's say view button okay and i hit enter um this one by default you just hit enter and it says um what that's will this component be written in javascript or in that script so we're basically using javascript so we choose javascript and we ask we've been asked here that um enter a location to save the component file okay just let's just go with the default so initialize complete so here it is so it basically created the files in here right so it we have all the files in here so we will what we are going to do is we are going to cd to that particular directory which is now the view button is actually our package our single file component um library we want to publish on npm so we just cd there and say okay code and try to open it on vs code again we don't need this anymore like we don't need this anymore we will have this so once we have that open we have um a couple of files here where we have some we have a build a build file where um all like basically all the magic happens and and all of that and in here we have our dev file which is basically um here which is basically we are calling for our component right now our component just it just just has a a pretty um a default a default it some default piece of code which has been written in it so like it's a piece of code that when you maybe run it um oh why not let me show you let me just show you real quick what this default piece of code looks like so i'll just run that and we are going to see what it actually looks like okay so we're having an error oh okay we forgot to run npm npm install for us to actually install because if we can notice if we noticed here we don't have any node modules whereas we actually need node modules which is it's basically the core actually it's it's what what actually does all the magic so we are going to install note modules and where we are installing it we are installing it in our directory in the view button directory again like remember we we are done with these we are done with these like with these ones we are we are done with this right right now we are here and why are we here why are we in here we are in here to actually build our single file component and publish it on npm right so this one out here was just our basic vue.js application we just we didn't like the whole idea was for me not to really confuse you with a lot of things like you having to do it straightforward in here so we just built a different um we just created a different application which is our normal vgs application and we are going to transfer the code which is from our vue.js application to our um view button which is our view button component we are going to be publishing on an npm so we can see it's actually downloading our npn modules okay so like i was saying um once we're done we're going to run this default this default code we have in here right this default junk piece of code which is um by default it comes with um the this it comes by default with the installation with the initialization of this um npm package okay beautiful now that we have that installed what we are going to do now is we are going to hit our end npm learn serve so we want to see what this default code looks like so this is basically what you're going to see the first time you installed sfc the first time you actually um initialize sfc okay beautiful now recopy paste the link here right just open a new tab here and we paste a link okay like like i was saying this is the basic this is the the default code that comes this is what we are actually seeing this component so now we don't want this right we we want our own component with which we built so what you're going to do is you will come here and copy this code you have written in here right and go paste it in here okay once you paste it you save and you're going to come here and once you reload okay okay beautiful you can see it here right but we don't have anything because we didn't pass anything as props so what we are going to do is we will come inside our serve in order to test our component we would say text like remember remember the the props we're passing in right text um please subscribe right and if we come here we should see it here right we should we should see it here and right now and it doesn't work it it doesn't redirect to any to any link but if we pass in a link here like link and we pass in the link like maybe 40m constant github dot io right and save that okay we have a problem we have a little problem something is not right has no matching end tag oh okay we have to implicitly close that here right we we close our component here so if i click here i just get redirected right that's basically what we did here which is what we're building in our view js component but in here it's not our vgs component but it's our actually our um component library we want to publish on npm right so after doing that we don't need this anymore we don't need our this one anymore so basically just stop the server and close this one all right we don't need it anymore so if i save you see if i save that and i'm going to see it here and it basically works right just basically works just magically works so the next thing we are going to do is we are going to publish this component this single file component to npm so um now that we are ready to publish the library to npm we kind of like we need to go through the build process to actually um like for read to like actually packaged up and um make us ready to go so before we actually run like the command to actually build this um what i really suggest you to do is to get to your package.json right and i want you to um change the versioning this version into the smallest version of this app like um 0.0.1 which is the version of this actually right so now that said we are going to hit the command npm run build right so after hitting this npm run build now um we would just have to wait for the word to be done running the build results to like actually three compiled files in the dist directory so if you check in the the our root folder we are going to find out that we have three files which have been created and these are basically um one for each of the main which we have here in our package.json we have on main here and for the module and another one for the unp k g so these are basically what we have now once we are done doing this right once we are done done with all of this what we have to do now is we need to we need an npm account okay we need to get an npn account so if you don't have an npn account you just goes to go straight forward to npm and um go to npm js.com and you sign up for an account right you just sign up for an account enter email password and all of that and if you have an account what i suggest you do is you go to your login once you head forward to your login you enter your credentials and you just hit login so now once you log into your account what i want you to do is you come back to your terminal and hit npm at user right npm at user in one word so you hit the command and you wait so once you hit that command you're going to be prompt to enter your username so my username is 48 codes i think 40 codes and you're going to be asked to enter your passport oh i might have forgotten my password this is public okay your my email [Music] okay so my email you enter your email here so now once you've entered your email you get a message here logged in as footy codes here login to your name and um on this this like you're basically logged in and once you are locked in right what you basically have to do is you just hit npm paul blish right you just hit this npm publish and you hit enter and you just wait for it to publish your npm package okay we have an error we have a pretty forbidden put are you logged in as the correct user in most cases okay so i we actually having this error because i i i can't believe i didn't see this coming we actually need a name actually right we our the name of our package has to be completely different from any other package so i checked and apparently it's there is a package on npm which has the same name so that will not be possible so guys please make sure that when you are creating your npm package make sure no other package has this name so as a quick fix to this i'll just come here and i'll say view button another another one right i'll just save that real quick and i would run my npm publish beautiful it passed so guys this is really crucial i mean like you need to know this it's really important never ever create an npm package which is the same as something that someone else has created else you will never be able to publish that so once you've you've published your package you wait for a few seconds you head forward to your profile [Music] you wait for a few seconds and normally when you when you publish your package you should receive an email to say that okay your publish this package and blah blah blah so yeah so you wait for a few seconds for your package to appear in the list of your packages and all of that like your packages you've created so literally here it has already been published right so and a little tip guys a little tip when when you update anything right when you update something in your package or um sorry when you update anything in your component right here if you update anything if there's something you add right like maybe some css and all of that and you want to publish that to npm you will have to update the version each time you want to push to npm because if you don't update the version it is going to return an error npm is going to return to you an error and you would not be able to publish that to npm so version is versioning is very very important for npm so beautiful so we have our package here right we have a package here which has been published so if i click on it i can see it so here's our package we published and here is basically um the installation code like how to install it on if you're working on a project so now what we are going to be working now on yes because we've already published our package and all of that things we already have a view project here right so what i want is i want us to download our own package and actually test it right and actually see if it works all right so i open our vgs application the one we created our component in right so like basically this one so i want to make sure that okay this our package actually works so what i'm going to do is i am going to come here and i'll click here right to copy the code and i'll come here and i'll paste it right i'm downloading my package the package i just published on npm and i want to test it out i want to see how it works so we would just have to wait for it to download and after that downloads what i want to do is i want to actually use this downloaded um this downloaded package right i don't want to use this one this one i wrote right if you if you know what i mean so i will come here after that downloads right we just wait for it to download my internet is a little bit slow so guys again we are downloading our package we downloading what we what we built we just built right now so it has been installed and blah blah blah so if you want to make sure that okay this is actually um we have actually downloaded our package from npm which we just deployed on npm as you can see here you can check on your package.json syncs in your package.json you have all your dependencies so if you check out the level of the dependencies you will see view button another one which is what we just did guys and you will see the versioning like the current version we just installed the level of the dependencies okay guys we want to test our component we just deployed on npm so after installing it what we do is so what i'm going to do is i'm basically going to maybe just draw a line right i'll just draw a line there and oops i forgot to start the server [Music] cameron serve so while this ever starts what i want us to do is guys i want us to import our component we just build right we literally just build our own component and we just import it and use it without actually knowing what's going on behind the hood right so guys once our server is started we need to import our component since we've already um installed it here right we can have it we can see the level of our dependencies we just come here and we import right we import um view view button from right we're basically trying to import view buttons so guys what i advise you to do is to come here and copy this right and come here and paste it right just like that now once you do that you will need to x to like export it like here you do that and once you do that like it basically is like any other view um vue.js component you've built yours yourself when you're working with when you're building your vue.js application so you just basically import it like this but here you're not going to state any link like like any um path like what we did here you just basically going to give the name of the um of the dependency and you import view button from it and you export it and here now you can call it here like this right beautiful right now we come here so here it is here right now um we don't have anything right because we haven't passed in props remember guys we had props we take right we we did with props so i would say um effects because it takes in as parameter tags right i would enter it takes like maybe 48 codes right 40 codes and i save and i come here right yeah it works so this one here this one under here this one beneath here it is not a component we have written in this project directory this is something we downloaded from npm it's our component we built and we downloaded from npm but this one above here right this one is something which we is this one right this this component we are basically just imposing from our components folder and all of that but this one is this so we can pass in a link as well let's say we pass in a link like this and yeah once we pass in a link we you see like right here down here we see it's already a link so if i come here and refresh and i click on it it's basically going to redirect me to my portfolio so guys um thank you for watching this video and i really do hope it helps you to build and redistribute your own single file components onto npm you know like try this play around with it and have fun again guys if there's any question about this tutorial if you're trying to work on it and you're stuck whatsoever just drop your preoccupations down in the comments below and i will personally answer you if you have any blog just copy paste your code maybe in the comment section and guys please if you love this video give it a thumbs up subscribe to this youtube channel and turn on the notification bell thank you guys so much for watching this video thanks

Channel: CodewithBro

Views: 8,945

Keywords: npm, npm tutorial, npm package, npm package tutorial, npm publish, npm publish tutorial, npm publish package, npm module, npm module tutorial, how to write an npm script, how to write an npm package, writing an npm package, npm github, Vue Component Library

Id: 0WqB6XwBCLc

Length: 40min 26sec (2426 seconds)

Published: Tue Nov 24 2020