Vue.js: How to Create Vue CLI Plugins | Demo & Overview

in this video I'm gonna be diving into the view CLI and talking about how plugins are created for the vcli it's going to be a little bit of a deeper topic but if you've used a view before and the view CLI you'll be able to follow along and understand what's going on welcome back to Farraday Academy if you're a new here my name is Gwen and I make programming tutorials and do programming live streams mostly on JavaScript and Python related topics if you're interested in this type of content be sure to subscribe to my channel and leave a comment below letting me know what you think about this video and any feedback that you might have I hope you enjoyed the video the view CLI is a very helpful tool to be able to scaffold UJS projects quickly if you have used this view CLI before or even the view UI interface that it comes with you have seen that it prompts you to install different packages when you are setting up your view j/s application these are called view CLI plug-ins these plugins are responsible for the installation configuration and initial setup of pieces of your project such as testing linting transpiling etc and these plugins will usually ask you some questions to help customize your initial setup automatically some of these plugins are core plugins like view test utils view X and view router and there are also many third-party plugins like Apollo beautify and element that you aren't prompted for in the initial setup because they are third-party plugins that you can add to your application at any time you CLI users have two options to be able to install and interact with plugins they can either use the CLI directly from the terminal and use the view add or view invoke commands to install and run these plugins or they can type in view UI and they will be able to open up the CLI in a user friendly user interface in the browser and install and manage plugins from there for the demos today I'm going to be building a view CLI plugin for one of my favorite view library's utensils which is a view UI component library that I've made videos about previously on this channel let's look at an overview of how these plugins are made first they start off just like any other JavaScript project with NPM in it this creates the package.json file the only difference here is that the naming convention is very important when making a view CLI plug-in it has to start with this syntax view - CLI - plugin and then whatever the name of the plugin is that you're making you can also optionally namespace the plug-in for example if I had a namespace under my name I could do at Gwen and then view CLI plug-in followed by the name of my plug-in if you don't follow this naming convention then the view CLI will not be able to pick up and recognize your plug-in once you upload it to NPM and register as a package the next file you will want to create is an index j/s file which is the main file for the service plug-in and minimum this file will need to export an empty function but it can also be used to extend or update your webpack config or sometimes updating view CLI service commands the next file you may want to create is prompt CAS now this file is completely optional and it's used for creating prompts for both the view CLI as well as the view UI interface in the browser all of the configuration options that are available to the user on initial setup are found in this prompt CAS file you basically export an array of prompt objects where you can define all of the methods and attributes associated with each prompt we'll see more about this in the demo later but it's basically using another library called inquire Jas under the hood for creating these prompts you can optionally also make your prompts file into a folder called prompts and put your logic into an index JS file inside that folder you can break things up as you would normally do in JavaScript next we have the generator JS file and this file is also optional now like prompts it can also be made into a folder called generator with an index J s file inside now this file does a lot of the heavy lifting in a lot of view CLI plugins because this is where you will want to put the logic to create new files or folders if you're creating new templates or test files or config files you also have access to a lot more nodejs functionality from within this file for example you can check and see if a package is installed if it's not installed you can just go ahead and install it another optional file is the UI J s file which just like prompts and generator you can make this into a folder as well a UI folder with an index J s file and again the view CLI will know to look for that file now this file controls the UI integration but not the initial prompts for setup so if you initially install a view CLI package in the view UI all of those initial questions still come from the prompts file but when you go to the configuration tab some of these plug-ins like Apollo and PS lint give you additional options that you can come in here and change even after you've started building your project and already installed your plugin so that's a nice optional feature you can also optionally include a logo dot PNG file which is the logo of your project and that will also show up in the view UI it's also recommended that you add a readme MD file this shouldn't be new for you every project that you expect other people to use should have this file to explain how to use it it's no different for view CLI plugins here so now we're going to start actually working on this plugin not just the demo stuff so the first thing that we would want to do is install of utensils since this is of UCL I plug in so the place we do that is in the generator jas file now the reason why we don't do it in the service plugin file the index j s is because we're not just updating view CLI service commands like build and start in all of those commands we're adding a new dependency to the package.json file so we do that from the generator API in the API Docs we can go to the generator API here and it shows a list of everything we have access to and the method that we want is extend package not a whole lot of information here but basically it's used for extending the package.json of a file so you can use this to extend custom plug-in options or just dependencies and depth dependencies so that's what we're going to do now this function that we are exporting from the generator file has access to that global API object that will get passed in so now we have access to the API and we can use that method from the documentation extend package and was going to send it with dependencies and then add the dependency in here which is called the pencils and now I need the version number here although I could do latest or something like that but I'd rather get the latest version number from the package in the package Docs I can see that the latest version as of the time of this recording is zero point seven point one and I'm going to use that version here now don't worry about this dependencies object overriding all of your other dependencies this object actually gets more urged with whatever your other dependencies are it will just add it on top of them so let's try this out I'm going to create a new test UJS project called test utensils let me put a hyphen in here I don't think I'll need anything too crazy I'm just gonna go with the default now I have a default view CLI project setup which I can open to my code editor alright so now look at my package JSON and see that I only have these two dependencies core J s and view now let me try adding my plug-in to this repo and running it and see what happens so since my plug-in isn't available on NPM it won't be picked up by the view CLI so I can't do something like if you add so I'm gonna have to install this locally first first I'm gonna get the path to my project so I can just copy it and now I'll install my plug-in which is in this same directory so I'll do MPM install save dev and then let me just highlight that which automatically copies it in the terminal so I'll paste that and the name of my plug-in is view CLI plug-in utensils and that will install my plug-in from my local file and it will be in my package JSON which I can see here now which actually resolved to a relative path but is pointing to this file so now every time I update my plug-in and rerun it I won't have to reinstall the plug-in and view CLI will just pick up on the new changes so now I do have to run the plug-in and I can do that manually through view invoke and then the plug-in name so if you CLI plug in the utensils it's warning me that there are uncommitted changes but I already know that because I installed that last package and I'm not worried so I'll say yes so this is interesting now it's asking me another question here show helpful error messages this actually comes from our code now that we invoked to this plug-in the v10 CIL's plugin that we're working on the first thing it does is run through these prompts and since during the demo earlier I added this prompt to the prompt JS file with the message show helpful error messages as a boolean or a type confirm that's why it's now asking me in the terminal the default was yes that's why you can see the capital y here and the lowercase n so if I hit enter without saying anything it's going to keep the default but I can hit and if I want and then enter and it will be a no and now you can see it's invoking the generator for the view CLI plug-in view tencel's where I'm telling it to install one additional dependency which is the view tencel's library itself so now when I go back into this test feet ensel's view project I can see that it did indeed install utensils at the version I specified from my generator file so that's definitely a good first step especially with setting up a view UI component library is installing the actual library a few more things that you might notice from beyou CLI plugins that are for component libraries are SAS and theme setups in the prompts and generator but the tencel's really doesn't have any styling associated with the library it's just about functionality and accessibility but there are still plenty of things that you can do with this library for example we could prompt the user to see whether they wanted to globally register components or set them up in local files and we could go ahead and setup that configuration for them to do this we need to create templates so like I said before we can turn this generator j/s file into a folder which I'm going to do new folder generator and now I'll put an index J a spinal inside okay and now all of this generator code from the generator Jas is now going to go into the index.js file and I'm actually going to delete this generator J s file now delete oh it's giving me an error I'm just going to suppress that okay and now I can add a new folder inside of this called template and inside of the templates folder I'm going to add another folder called source and then inside of the source folder I will add a file called make J s now if you know from creating view applications there is a main dot J s file inside of a source folder in view and I'm basically recreating that file structure so that when I tell the view CLI to render whatever file I create inside of templates it knows to render it inside the source folder and you'll see an example of this when I run this plug-in again now I'm not going to read in the particular users main.js file what I'm gonna do right now is just basically copy paste an already generated main dot J's file and then update it so I'm going to take the source / main J's file from the app I just generated or created copy that go back here and paste it in and I'm just going to change one thing on the file so that we can see that it really updated I'll put anything here just like a console dot log updated okay and now I can go back into my generator slash index J s and I'm going to use another method on API to actually render that template so I'm gonna do API dot render and then pass it the path to my template which is just in the templates folder I don't need to pass the sub paths cuz that's how the you CLI knows where to place this file inside because I told it to render what's inside templates it's gonna say okay I'll render source slash main jas and actually here I do need to put a dot forward slash and that should be good you can actually see this render method in the documentation and here's the render method you can see it's used to render template files into the virtual files tree object and basically generate new files for your project now you'll notice here it says options for ejs that's because you can write ejs syntax inside your template to make it dynamic passing variables stuff like that now ejs is a very popular tool in the JavaScript world to be able to put logic inside of your templates and it's usually used inside of templates that are going to be rendered to the Dom but view CLI plugins can use it for any kind of file whether it's JavaScript or view or anything else when your templates are parsed it's going to look for this ejs syntax and we are going to see an example of that in just a second okay so let's run this plugin again let's invoke it one more time and see what happens I'm just gonna hit up if you invoke it again proceed yes this doesn't do anything yet I'm just gonna hit enter okay so successfully invoked generator for plug-in and you can see in our test view tencel's repo the main dot JS file was replaced because it has the new code in here now it ran a little bit faster this time because this dependency was already installed and I'm gonna leave it that way for now I don't need to read stole it every time so now I want to set up vu tencel's in this main J s config if I look in the via tencel's Docs I can see that getting started says that I can globally register components or I can just locally register them in the file where I need them just for the sake of this demo I'm going to globally install them so let me copy the example that he has here go back to my plugin code in main je s and add the component here now I'll take what he has in the template here go ahead and copy it and now I'm going to create another file here called app dot view let me just paste that in here for a second and I'm actually going to copy the app dot view code as well and now I will paste it in here and I'm gonna add this V alert that I took to the top of the page that's good and because utensils doesn't come with styles I'm also going to borrow his Styles which he has some sample Styles here that target the class that he gives you I'll scroll to the bottom and paste it in here okay now let's see if this properly over writes the app dot view file as well now remember that in my generator I'm rendering everything inside of templates so now it's gonna include both of these files so back in my terminal I'm gonna clear this and now I can do view and VOC say yes again and it was successful so let me check out my code for the repo which is here and you can see it changed the file there are my styles and here is the V alert that it added of course the main dot J s is still updated to register that velar I guess here one thing I should do just for linting purposes is change these double quotes to single quotes because I just copied it from the library and it doesn't match up with the rest of the repo so I'm gonna change that so let's make this a little bit more customized now and maybe we don't want to assume that they want a global import in this file we can actually ask them whether they want a global import or a local import in this app.js file so let's first change the prompts file this isn't really important for the library so I'm gonna get rid of it and create a new object now the name will be I suppose we can call it preset and the message will be a question where do you want to use your utensils components it's ok wording now the type of this will be a list because they'll be able to select from a list of choices so I can pass in those choices here as objects with a name which I'll call global and the value will also be global and then my second choice will be local and the value will be local basically the name is what the person going through the CLI options we'll see and the value is what I'm going to receive in my code as a variable that I can manipulate here I can also set a default so I'm going to say that the default will be global so now if I invoke my plug-in I we'll see this list of two choices but I'm not doing anything with it yet so I can get access to whatever value the user enters inside of my generator file so my index J s so I need to add the options here as the second parameter which view CLI gives me so now I have access to the options and basically what I can do is say Const and then the name of the prompt which is preset so Const preset and pull that out of options and I already know that preset will either be equal to global or local so now I can actually pass in this preset auction to my template so I can have access to it so I'll pass it in as an object and I'm going to use a shorthand so preset is preset basically so all the access to the preset by the name preset inside of my templates here so let me go into my template let's go in the mage is and for right now I'm just going to add a line of code here with that variable that I passed in so I'll console dot log as I normally would but I'm going to add some ejs variable syntax here so I'm gonna say preset and this should render the variable when it writes this file to the repo so now that I've changed a couple things the prompt this file with the variable and in passing the preset in let me go ahead and invoke this plug-in and make sure everything's still running clear this invoke the plug-in again yes and now you can see I have this option where I can go up and down if I want global or local I'm gonna say global it was successful again and now if I go into my repo I can see it says preset global and the place where I put that preset variable so I rendered the variable as its actual value so what I can do with that is basically set up an if statement in my templates so in my main Jas file I'm going to put an if statement here I'm just giving some space so it's easier to see and I'll say if so I'm going to putting everything I want to parse as logic when I rendered this template inside of these kind of tags so I'm gonna say if preset equals equals equals global then and I'm gonna close this tag here percent angle bracket my editor isn't fond of this syntax but that's okay now I'm gonna come down here and say angle bracket percent underscore close the if statement and now I will close my ajs okay so now if the user chooses global we'll set up utensils for them here but if they choose local we want to set it up in the app dot view file so I'm gonna copy this over here and now I'll leave this alone that's fine but now instead of registering this as view dot component I'm going to get rid of that and add in another if statement here inside of this export default by the way you can do if else statements here so I could do else and then kind of do the same thing or else if or whatever but I just need an if there so I'm gonna add this same thing just inside of export default right here and here I'm going to register it as a component but only if they chose local and I can add the V alert component of course I need to update this to local and this should be local as well all right let's see if this works let me invoke the plug-in again do I want my utensils component let me say local this time okay interesting I must have made a mistake duplicate key component and that is true I do have components here so I guess this is a good case for if-else here I would have hello world in any case and then let me just quickly add an else here saying if preset is not local then I'll render this regular hello world and let me copy this okay so now if it's local it will hit this if statement if not it should register just a hello world component try and this again let's say local and it was successful so now you can see the main dot Jas file doesn't have any of those imports and if I go to app dot view I can see it has imported the fie alert and also registered it as a component and of course I was already showing the V alert there I just want to show you one other way of invoking a local view seal I plug-in that you're creating you can actually use the view UI so if I type in view UI it runs the server for the GUI and now I can open it up on port 8000 in my browser and I'll see this dashboard screen now I'm in a different application right now so I need to get into the view app where I want to install my plugin so let me go to the project manager and import the app from my local machine it's in my vcli plugins folder and in my test for utensils folder so I can just go down here and click import this folder and now you can see here that I'm inside of my test view tencel's project now if I want to install a local plugin I just go to plugins and you can see I've already installed it because I've been working in it in this video but if I wanted to add a local plugin all I have to do is click add plug-in and instead of searching for one from View CLI I can actually go to the bottom and click on browse local plug-in and find my local plug-in from my machine so view CLI plugins and I can install the you CLI plugin view tencel's add local plugin and I could finish installation if I wanted to refresh the plug-in here I could click on refresh and update the plug-in I found this works well as far as installing it but it can be a little wonky because for some reason it still looks at the NPM j/s registry to try to find the plug-in even though it's pointing to a local file so it really works either way you can use it from the view UI or invoke it locally I think it's a bit easier to use from the terminal but maybe that's just my preference let me know what you think in the comments so that wraps up this basic tutorial I encourage you to check out the view CLI documentation and if you are a view lover like me and you see a project that might benefit from a view CLI plugin you can definitely let me know or try to turn it into a plugin yourself as kind of a fun project note that the view CLI team specifically gave this message to not overuse view CLI plugins basically if you just want to install a dependency you can just empty install it then when do you want to create a vcli plugin it's basically to do more than just install a dependency such as what we did today setting up templates or other configuration for a user if you want to see some more advanced plug-in examples then you should definitely check out this plugin that I've been scaffolding and contributing to called view CLI plugin just serializer view tjw I'll link it in the description below as well as some other plugins that I think are good like this beautify you CLI plugin and the element UI plug-in as well as the view CLI apollo plugin which is fairly advanced but can give you a lot of ideas if you're trying to create a plugin for yourself I hope you enjoyed this video and learned a lot about view CLI and how to create plug-ins for it don't forget to Like comment and subscribe to my channel also join me in discord if you would like to chat about coding and related topics throughout the week the link is in the description below thanks so much for watching and have a great week you

Channel: Faraday Academy

Views: 3,267

Keywords: vue cli plugins, how to create a vue cli plugin, vuetensils, vue.js, javascript library

Id: JMDSGtZwRQE

Length: 33min 2sec (1982 seconds)

Published: Thu Jul 02 2020