Building Your Own Vue Plugins - Updated for Vue 3

[Music] hey view devs welcome back to learn view in today's video we're going to be taking a look at how to build your very own vue3 plugin plugins are a great way to add reusable functionality to your view app there are tons of plugins out there for components routing and so much more the view ecosystem really has solutions for many common use cases some of these plugins are view router view custom element and view touch however there will come a time when there isn't a plug-in that perfectly matches your project or a time where you want to build your own and share them with the world and in this video we're going to take a look at how to do that so first what can we even do with view plugins simply put view plugins allow us to extract any kind of functionality into its own self-content code that can be reused across different projects typically they're used to add some global level functionality to your view app and here's some of the most common use cases for plugins from the view docs themselves adding global components global directives transitions or other assets adding component options with global mixins or adding additional properties onto a view instance using app.config.global properties we'll be diving into each one of these situations later in this video but first let's actually go ahead and create our first plugin let's make a file called myplugin.js and inside we'll create an export default with an install method and this install method takes two arguments app which is the app object coming from view's create app method in our main.js file and options which are any options passed in when adding our plugin to our view instance then to actually use this plugin in our view app we can go to our main.js file import it and then say app.use my first plugin alright now let's start adding some functionality to our plugin first we're going to add some global components so back inside our plugin file using the app argument which gives us access to our view instance we can declare our global component using the app.component syntax with app.component we can either use a single file component or declare our component directly inside of our javascript file and we're going to be making our own sfc let's say that we want to create a header component we'll call it myheader.view that contains information for an article post so inside of our template we'll create a wrapper div add an h1 with a class of header title and just throw in a slot with the name of title then afterwards we'll create an h2 with a slot that displays the author so now that we actually have our component file let's head back to our plugin and import it then we'll say app.component and this first argument is what we want it to be known as so we'll say my dash header and the second argument is the component itself so we'll say my header now we can use this my header component anywhere in our view app because it's registered globally let's check it out inside of app.view we don't need any imports we can just add it to our template like this we can say my header fill in the slot content for our title and then fill in our slot content for our author and our end result should look something like this fantastic a really cool feature is that we can add styles to these global components that control styles all over our app for example if you wanted to change the font size and background color of our entire project we can do that inside of the my header component so inside of our style let's just say html and body then change the font size to 1.2 m and then the background to f a f a f a then let's take a look back at our browser our font size is a little bit bigger and our background color is this nice off-way and these can always be overridden in child components like any other css declarations next let's take a look at one of my favorite things in view and that's the ability to create your own directives directives are one way the view gives developers to directly edit the dom some examples of directives are v if v show and v bind and with plugins we can easily create global directives using app.directive let's say that we want to create a directive that changes the size of text if you want to learn more about how exactly this directive works make sure to check out our guide to view directives video linked in the description in short we want to accept a directive argument that determines the font size of our element then we'll change the style of that element using l to use the appropriate size i'll just go over this really quickly and if you want more details make sure to click on that link down below so inside of our plugin we'll say app.directive we'll name our directive font size and then we'll create our method we'll say l binding and vnode we'll set our default size to 16 and depending on any arguments passed to our directive we'll switch the size after our switch we want to say l dot styled on font size equal size plus pixels then inside app.view or any component since it's available globally we can use our font size directive and all directives come with this v dash prefix so let's create one argument that says v font size and then we'll pass an argument so colon small another one for medium and another one for large and the result should look something like this where we have three different paragraphs with different sized text and here's a great opportunity to talk about that second argument of our install method options adding options to your plugin is a great way to make it more flexible for different use cases let's say that we want developers to be able to control the exact size of the small medium and large text if we go back to main.js we can add a second argument or app.use function let's make it an object that specifies each of our font sizes we'll set small to 12 medium to 24 and large to 36 then back in our plugin instead of hard coding our font sizes we can use the options object to pull whatever was passed to our plugin and this is as easy as saying options.fontsize.small large and then medium for the default now if we look back at our app we can see that we're successful using our custom font sizes a common way that plugins add reusable functionality to your view app is by using view mix-ins and mix-ins are a great way to add component options to all view components in our project we can add options like lifecycle hooks data and methods and if a component uses these mix-ins these different options from our mix-in will be merged with that component's options it's important to understand how these options are merged for example mix and life cycle hooks will be called before component hooks and component data will take precedence over mix and data if there's a name in conflict we can create a global mix-in using the app.mixin method let's say that we wanted to add a created hook and we also wanted to create a data property that gives an external url that we can use for changing the href property of links throughout our app so inside of our plugin we'll say app.mixin and inside we'll create an object with our different component options so let's first start off with data and we'll create our featured link and make it link back to learn view and this is a great example of why you might want to use a mix in if several spots in our project is using this featured link and sometime in the future we want to change it we only have to change this one mix in and all of the links will be affected and after data let's make our created lifecycle hook and inside just make a log statement in any component that we use this created hook will run and we'll have access to our featured link property let's quickly throw in a link inside of our app.view and see what we have so our link is here and it's linking to learn view and if we open our console we have two different print statements one for app.view and one for myheader.view so one powerful way to give specific components access to different properties and methods is by using the provide and inject pattern in view this allows our plugin to provide a property and allows any component in our app to inject this value let's take a look at an example where we're creating a logout method we don't need this method to be available in every single component but we want to create just one logout method so it's easier to modify in the future inside our plugin we'll declare our logout method and for now we'll just log to the console then afterwards we'll call app.provide to provide it to the rest of our app and the syntax for provide goes key comma value so for ours the key will be logout and we want the value to be our logout method then inside any component we can inject this method let's go to app.view import inject from view and say const logout equals inject logout and this will give us access to that logout method then when a button is clicked we just want to call logout if we look at this we'll see that whenever we click our button our log statement from our plugin is printing to the console fantastic so the possibilities for designing your own v3 plugins are endless with so many phenomenal plugins for translation routing and more the principles that we covered in this tutorial are really the core building blocks for some complex tools i love to see what you can make with what we've learned here so drop your links down below along with any questions or comments and if this video helped you please like and subscribe for more view content happy coding

Channel: LearnVue

Views: 3,673

Keywords: vuejs, web development, technology

Id: ar1fJECxbyU

Length: 8min 22sec (502 seconds)

Published: Thu Jun 24 2021