Raul Sanchez – Serial Architect

Load Vue Components at Runtime (on-demand)

Can Vue components be loaded at runtime, after I initialize my application? Well, the answer is yes, but it is not the most common scenario.

Consider a scenario in which you have a large application and user may not need to access all its functionality every single time. For instance, you do not expect your users to unsubscribe from your web application every single time (one unsubscribe and they are gone for ever). So, it makes sense for any feature that is not used on a regular basis, to be load on demand.

Here is the logic:

Load your application the same you typically do
Load the deferred component (e.g. jQuery.load(selector, callback)
Create an instance of your component
Mount it
Attach it to your app

Component code

&lt;template id="aha">
	&lt;div class="aha position-absolute">
		&lt;h1>Hello, %{name}&lt;/h1>
	&lt;/div>
&lt;/template>


&lt;script type="text/javascript">
	var aha = Vue.component('aha', {
		delimiters: ['%{', '}'],
		data: function () {
			return {
				name: 'Raul'
			}
		},

		template: document.querySelector('#aha')
	});
&lt;/script>

&lt;style type="text/css">
	.aha {
		color: red;
		font: 40px;
	}
&lt;/style>

<h1>Hello, %{name}</h1>

</div>

</template>

var aha = Vue.component('aha', {

delimiters: ['%{', '}'],

data: function () {

return {

name: 'Raul'

}

template: document.querySelector('#aha')

});

</script>

.aha {

color: red;

font: 40px;

}

</style>

Loader code

$('#container').load('/path/to/component', function() {
	var instance = new aha();
		instance.$mount();
	app.$el.appendChild(instance.$el);
        // OR
        // app.$refs.container.appendChild(instance.$el);
	
});

$('#container').load('/path/to/component', function() {

var instance = new aha();

instance.$mount();

app.$el.appendChild(instance.$el);

// OR

// app.$refs.container.appendChild(instance.$el);

});

Get Post By post_name

$post_name = 'my-post';

$querystr = 'SELECT * FROM "wp_posts" WHERE "post_name" = "' $post_name . '"';

$results = $wpdb->get_results($querystr, OBJECT);


if(!empty($results)) {
	foreach ($results as $result) {
		// do your magic
		break;
	}
} else {
	echo 'post '. $post_name . ' was not found.';
}

// see: https://codex.wordpress.org/Displaying_Posts_Using_a_Custom_Select_Query

$post_name = 'my-post';

$querystr = 'SELECT * FROM "wp_posts" WHERE "post_name" = "' $post_name . '"';

$results = $wpdb->get_results($querystr, OBJECT);

if(!empty($results)) {

foreach ($results as $result) {

// do your magic

break;

}

} else {

echo 'post '. $post_name . ' was not found.';

}

// see: https://codex.wordpress.org/Displaying_Posts_Using_a_Custom_Select_Query

Save Developer’s Console Output as a File

You can create a save() method in the console object. From the Console window, you should be able to invoke the newly created method and pass the data that you wish to save. A popup window will prompt you to save the file.

(function(console){

console.save = function(data, filename){

    if(!data) {
        console.error('Console.save: No data')
        return;
    }

    if(!filename) filename = 'console.json'

    if(typeof data === "object"){
        data = JSON.stringify(data, undefined, 4)
    }

    var blob = new Blob([data], {type: 'text/json'}),
        e    = document.createEvent('MouseEvents'),
        a    = document.createElement('a')

    a.download = filename
    a.href = window.URL.createObjectURL(blob)
    a.dataset.downloadurl =  ['text/json', a.download, a.href].join(':')
    e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
    a.dispatchEvent(e)
 }
})(console)

(function(console){

console.save = function(data, filename){

if(!data) {

console.error('Console.save: No data')

return;

}

if(!filename) filename = 'console.json'

if(typeof data === "object"){

data = JSON.stringify(data, undefined, 4)

}

var blob = new Blob([data], {type: 'text/json'}),

e = document.createEvent('MouseEvents'),

a = document.createElement('a')

a.download = filename

a.href = window.URL.createObjectURL(blob)

a.dataset.downloadurl = ['text/json', a.download, a.href].join(':')

e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)

a.dispatchEvent(e)

}

})(console)

Making Upload Friendly URL

I decided to setup an instance of WordPress as a dedicated site to host images. Similar to a CDN, this instance will only be responsible for hosting images. The benefit of this approach is that those images can be shared across multiple sites, independently of the application that creates the sites.

Users can have a “CDN” account, to upload images.

To make the referencing of those images simpler. I did the following changes:

In WordPress > Settings > Media, I unchecked the option that list media assets in folder containing the date of upload. In that way, assets will be access directly from the upload folder (e.g. http://cdn.simplifyblocks.com/wp/wp-content/uploads/my-file.png).
I added a new redirect rule to Apache, to redirect any URL that start with “{HTTP_HOST}/uploads/…” to “{HTTP_HOST}/wp/wp-content/uploads/…”. In that way referencing an asset in the CDN instance will be easier (e.g. http://cdn.simplifyblocks.com/uploads/my-file.png).

.htaccess rule

RewriteEngine On
RewriteCond %{REQUEST_URI} ^/uploads/(.+?)$	
RewriteRule ^(.*)$ http://%{HTTP_HOST}/wp/wp-content%{REQUEST_URI} [L]

RewriteEngine On

RewriteCond %{REQUEST_URI} ^/uploads/(.+?)$

RewriteRule ^(.*)$ http://%{HTTP_HOST}/wp/wp-content%{REQUEST_URI} [L]

The biggest benefit of this approach, is that we can user the WordPress admin interface to manage assets in the “CDN” instance.