So the vue use global API method in vue.js is there to use plugins designed for vue.js. Vue.js can do a lot by itself, but chances are you are going to want to use at at least a few plugins as late versions of the framework even miss things like an http client. However maybe that is not such a bad thing, with some projects that come to mind I might not need an http client in the framework and as such that would result in unnecessary bloat in the framework. Also when it comes to adding an http client I can choose what I want to add, or make my own http client for the project.

With that said it would seem that vue.js is following a more minimal approach with its design, pulling many features out of the framework itself, and leaving it up to the developer how to go about adding that feature if and when it is needed. This allows for greater flexibility when it comes to choosing what to add, if it is even deeded, rather than just having everything packed together right away regardless if you are even using it or not.

I might not always need to add something as a plug in to vuejs itself too though. The vue use global method is not a replacement for other methods such as vue extend that can be used to create a custom Main Vue constructor. I can also just add additional javaScript assets as part of a stack and as long as those other resources are loaded when my vue instances start I can just use those other javaScript assets in the various hooks, methods, and filters of by Vue instances and components.

Another option to keep in mind is a vue mixin which is a way to make a collection of vue instance options that can be used across two or more vuejs instances. It is also possible to make a mixin global so that it will be there to work with in all vuejs instances.

Still there are situations in which I might want to have something be a kind of global feature of vuejs itself rather than just something that is part of a special constructor, component, or global mixin. So in this post I will be going over a few simple examples of the vue use global API method, and some basic example of vuejs plug in design.

Read More

So for the most part vue templates work find for most projects, but it is not always the best solution when it comes to taking full advantage of javaScript to render DOM elements. If a template will not cut it than an alternative would be a vue render method.

When working out a render method a createElement method can be used to create virtual dom elements that can then be used to render a view rather that of a static template. This method is a little clunky to work with compared to static templates, but it will work a whole world better then static templates when it comes to doing something a little advanced like generating node names for components. There is a bit to get solid when it comes to the options of these methods, but once all that is understood they work great for those situations in which a render function is just the only way to get the job done.

Render functions should not be used as a drop in replacement for templates at every twitch and turn, at least I have found that is not a good idea. The draw back with render functions as that they are a little more intense to work with then static templates when it comes to readability of code. So if I am making a simple components that just displays some data that is given to it by way of a props option then chances are I will stick with just a plain template still.

Read More

If for some reason I want to delete an object property in a vuejs data object, the view might not update when doing so. There is the force update method that can be used to update a view if necessary that might help in these kinds of situations. However there is the built in Vue delete method as well that can also be used to delete an object property and update the view in one shot.

There might be a bunch of other things to bring up when it comes to deleting something in a vuejs instance. Come to think of it I often think that it might be a good idea to not delete anything to begin with, and as an alternative use the same resources over and over again. So then with that said this will be a quick post on the use of vuejs delete in a client side javaScript environment using vue.js as a framework, and write about some other related topics in the process of doing so.

Read More

In Vuejs a Filter can be used to help with formating tasks, and can be used when working out a simple static template. Filters differ from methods in that they can only be used in mustache interpolations and when using the v-bind directive. However using the filters option of a vue instance, and setting up global filters is a great way to go about pulling alway this kind of method from other methods that have to do with handing events, or mutating the data object that can remain in the methods option.

A vue filter can be registered at the global level, or it can be an asset of a single Vue constructor instance. So in other words like many other features in vuejs like methods, and components there can be both global and local sets of these filters.

In this post I will be going over some use case examples of filters in vuejs, and also about filtering in general in javaScript.

Read More

The vue extend method can be used to extend the base Vue class constructor function and return a custom constructor of vuejs that is a sub class of Vue. It is similar to but still very much different from the vue component method that is more of an asset management method rather than a method that will create a custom vuejs constructor all together.

So then the Vue extend method can be used to make custom constructors of Vue that have templates, base data, and methods for one or more instances of something in a project. For example if I am making some kind of idle game that involves a page where I have two or more assets that are making money for me then the Vue extend method might be a good option for making an Asset class for that aspect of the game. To help elaborate with this it would be best to check out some examples of the vue extend global API method, so lets hop to it.

Read More